diff --git a/bigbluebutton-html5/imports/ui/components/app/component.jsx b/bigbluebutton-html5/imports/ui/components/app/component.jsx index 7773eaca5ad7983760c6c61c4fe1668696681966..36ec74876974dd1b7bc1f3d6984b65cb11256bb0 100755 --- a/bigbluebutton-html5/imports/ui/components/app/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/app/component.jsx @@ -6,6 +6,7 @@ import Modal from 'react-modal'; import cx from 'classnames'; import Resizable from 're-resizable'; import browser from 'browser-detect'; +import PollingContainer from '/imports/ui/components/polling/container'; import ToastContainer from '../toast/container'; import ModalContainer from '../modal/container'; import NotificationsBarContainer from '../notifications-bar/container'; @@ -326,6 +327,7 @@ class App extends Component { {this.renderPoll()} {this.renderSidebar()} </section> + <PollingContainer /> <ModalContainer /> <AudioContainer /> <ToastContainer /> diff --git a/bigbluebutton-html5/imports/ui/components/media/component.jsx b/bigbluebutton-html5/imports/ui/components/media/component.jsx index 8b9aab9e445b646c692393d2c6c4a4172fa4306b..c011bfe293071798ccd5c8046a7f4eb73d4cf723 100644 --- a/bigbluebutton-html5/imports/ui/components/media/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/media/component.jsx @@ -2,7 +2,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; import VideoProviderContainer from '/imports/ui/components/video-provider/container'; -import PollingContainer from '/imports/ui/components/polling/container'; import { styles } from './styles'; @@ -47,7 +46,6 @@ export default class Media extends Component { <div className={!swapLayout ? overlayClassName : contentClassName}> { !disableVideo ? <VideoProviderContainer /> : null } </div> - <PollingContainer /> </div> ); } diff --git a/bigbluebutton-html5/imports/ui/components/polling/component.jsx b/bigbluebutton-html5/imports/ui/components/polling/component.jsx index fc5ba59b6af22554b1b102371753e4c31d24b0a1..24aa8e612d73df275e1bbeecffd06dd37d92a874 100644 --- a/bigbluebutton-html5/imports/ui/components/polling/component.jsx +++ b/bigbluebutton-html5/imports/ui/components/polling/component.jsx @@ -35,7 +35,7 @@ const Polling = ({ intl, poll, handleVote }) => ( > <Button className={styles.pollingButton} - color="default" + color="primary" size="md" label={pollAnswer.key} key={pollAnswer.key} diff --git a/bigbluebutton-html5/imports/ui/components/polling/styles.scss b/bigbluebutton-html5/imports/ui/components/polling/styles.scss index 3a6173c67c397a8a4746a50ca79c77422c39518c..5fa334e96a4f229d390df1dd7c7e98fe624f0fcb 100644 --- a/bigbluebutton-html5/imports/ui/components/polling/styles.scss +++ b/bigbluebutton-html5/imports/ui/components/polling/styles.scss @@ -7,32 +7,40 @@ $s-portrait-offset: 11.75em; $s-landscape-offset: 1.75em; .pollingContainer { - order: 2; - width: 100%; - display: flex; + width: 15rem; + position: absolute; + z-index: 2; + border:1px solid #EAEDEF; + border-radius:4px; + box-shadow: rgba(67, 90, 111, 0.416) 0px 0px 1px, rgba(67, 90, 111, 0.3) 0px 16px 24px -8px; align-items: center; - flex-direction: column; - padding-bottom: 5px; - - @include mq($medium-up) { - padding-bottom: 10px; - } + text-align: center; + font-weight: 600; + padding: $md-padding-y; + background-color: $color-white; + bottom: .725em; + right: .725em; } .pollingTitle { - color: $color-white; + color: $color-text; white-space: nowrap; padding-bottom: 10px; + padding-top: 7px; } .pollingAnswers { - align-items: center; display: grid; - grid-auto-flow: column; - grid-auto-columns: auto; - justify-content: center; - position: relative; - width: 100%; + grid-template-columns: repeat(2, 1fr); + + > pollButtonWrapper:nth-child(odd) { + grid-column: 1; + } + + > pollButtonWrapper:nth-child(even) { + grid-column: 2; + } + z-index: 1; :global(.browser-safari) & { @@ -53,16 +61,8 @@ $s-landscape-offset: 1.75em; .pollButtonWrapper { text-align: center; - margin-left: 5px; - overflow: hidden; + padding: 5px; - @include mq($medium-up) { - margin-left: 10px; - } - - &:first-of-type { - margin-left: 0; - } } .pollingButton {