Merge pull request #5350 from oswaldoacauan/polls-styling

Update on the Poll answers styling

bigbluebutton-html5/imports/ui/components/polling/component.jsx

@@ -1,83 +1,69 @@
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '/imports/ui/components/button/component';
-import { defineMessages, injectIntl } from 'react-intl';
 import injectWbResizeEvent from '/imports/ui/components/presentation/resize-wrapper/component';
+import { defineMessages, injectIntl } from 'react-intl';
 import Tooltip from '/imports/ui/components/tooltip/component';
 import { styles } from './styles.scss';
 
 const intlMessages = defineMessages({
   pollingTitleLabel: {
     id: 'app.polling.pollingTitle',
-    description: 'Title label for polling options',
+  },
+  pollAnswerLabel: {
+    id: 'app.polling.pollAnswerLabel',
+  },
+  pollAnswerDesc: {
+    id: 'app.polling.pollAnswerDesc',
   },
 });
 
-class PollingComponent extends Component {
-  getStyles() {
-    const number = this.props.poll.answers.length + 1;
-    const buttonStyle =
-      {
-        width: `calc(75%/ ${number} )`,
-        marginLeft: `calc(25%/${number * 2})`,
-        marginRight: `calc(25%/${number * 2})`,
-      };
-
-    return buttonStyle;
-  }
-
-  render() {
-    const poll = this.props.poll;
-    const calculatedStyles = this.getStyles();
-    const { intl } = this.props;
-
-    return (
-      <div className={styles.pollingContainer} role="alert">
-        <div className={styles.pollingTitle}>
-          <p>
-            {intl.formatMessage(intlMessages.pollingTitleLabel)}
-          </p>
-        </div>
-        {poll.answers.map(pollAnswer =>
-          (<div
+const Polling = ({ intl, poll, handleVote }) => (
+  <div className={styles.pollingContainer} role="alert">
+    <div className={styles.pollingTitle}>
+      {intl.formatMessage(intlMessages.pollingTitleLabel)}
+    </div>
+    <div className={styles.pollingAnswers}>
+      {poll.answers.map(pollAnswer => (
+        <div
+          key={pollAnswer.id}
+          className={styles.pollButtonWrapper}
+        >
+          <Tooltip
             key={pollAnswer.id}
-            style={calculatedStyles}
-            className={styles.pollButtonWrapper}
+            title={pollAnswer.key}
           >
-            <Tooltip
-              title={pollAnswer.key}
-            >
-              <Button
-                className={styles.pollingButton}
-                size="lg"
-                color="primary"
-                label={pollAnswer.key}
-                onClick={() => this.props.handleVote(poll.pollId, pollAnswer)}
-                aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
-                aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
-              />
-            </Tooltip>
-            <div
-              className={styles.hidden}
-              id={`pollAnswerLabel${pollAnswer.key}`}
-            >
-              {`Poll answer ${pollAnswer.key}`}
-            </div>
-            <div
-              className={styles.hidden}
-              id={`pollAnswerDesc${pollAnswer.key}`}
-            >
-              {`Select this option to vote for ${pollAnswer.key}`}
-            </div>
-          </div>))}
-      </div>
-    );
-  }
-}
+            <Button
+              className={styles.pollingButton}
+              color="default"
+              size="lg"
+              label={pollAnswer.key}
+              onClick={() => handleVote(poll.pollId, pollAnswer)}
+              aria-labelledby={`pollAnswerLabel${pollAnswer.key}`}
+              aria-describedby={`pollAnswerDesc${pollAnswer.key}`}
+            />
+          </Tooltip>
+          <div
+            className={styles.hidden}
+            id={`pollAnswerLabel${pollAnswer.key}`}
+          >
+            {intl.formatMessage(intlMessages.pollAnswerLabel, { 0: pollAnswer.key })}
+          </div>
+          <div
+            className={styles.hidden}
+            id={`pollAnswerDesc${pollAnswer.key}`}
+          >
+            {intl.formatMessage(intlMessages.pollAnswerDesc, { 0: pollAnswer.key })}
+          </div>
+        </div>
+      ))}
+    </div>
+  </div>
+);
 
-export default injectWbResizeEvent(injectIntl(PollingComponent));
+export default injectIntl(injectWbResizeEvent(Polling));
 
-PollingComponent.propTypes = {
+Polling.propTypes = {
   intl: PropTypes.shape({
     formatMessage: PropTypes.func.isRequired,
   }).isRequired,

bigbluebutton-html5/imports/ui/components/polling/styles.scss

@@ -3,30 +3,48 @@
 .pollingContainer {
   order: 2;
   width: 100%;
-  margin-top: 1%;
-  margin-bottom: 1%;
   display: flex;
-  flex-direction: row;
-  justify-content: center;
-}
-
-.pollingButton {
-  width: 100%;
-  height: 100%;
-  white-space: nowrap;                      
-  overflow: hidden;
-  text-overflow: ellipsis;
+  padding: .8rem;
+  align-items: center;
+  flex-direction: column;
 }
 
 .pollingTitle {
   color: $color-white;
+  white-space: nowrap;
+  padding-bottom: 10px;
+}
+
+.pollingAnswers {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: auto;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.pollButtonWrapper {
+  text-align: center;
+  margin-left: 5px;
+  overflow: hidden;
+
+  @include mq($medium-up) {
+    margin-left: 10px;
+  }
+
+  &:first-of-type {
+    margin-left: 0;
+  }
+}
+
+.pollingButton {
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .hidden {
   display: none;
 }
-
-.pollButtonWrapper {
-  text-align: center;
-  max-width: 150px;
-}

bigbluebutton-html5/private/locales/en.json

@@ -78,6 +78,8 @@
     "app.presentationUploder.conversion.pageCountExceeded": "Ops, the page count exceeded the limit",
     "app.presentationUploder.conversion.timeout": "Ops, the conversion is taking too long",
     "app.polling.pollingTitle": "Polling Options",
+    "app.polling.pollAnswerLabel": "Poll answer {0}",
+    "app.polling.pollAnswerDesc": "Select this option to vote for {0}",
     "app.failedMessage": "Apologies, trouble connecting to the server.",
     "app.connectingMessage": "Connecting...",
     "app.waitingMessage": "Disconnected. Trying to reconnect in {0} seconds...",