convert sidebar-content component

bigbluebutton-html5/imports/ui/components/sidebar-content/component.jsx

@@ -8,7 +8,7 @@ import PollContainer from '/imports/ui/components/poll/container';
 import CaptionsContainer from '/imports/ui/components/captions/pad/container';
 import BreakoutRoomContainer from '/imports/ui/components/breakout-room/container';
 import WaitingUsersPanel from '/imports/ui/components/waiting-users/container';
-import { styles } from '/imports/ui/components/app/styles';
+import Styled from './styles';
 
 const propTypes = {
   top: PropTypes.number.isRequired,
@@ -126,9 +126,9 @@ const SidebarContent = (props) => {
       {sidebarContentPanel === PANELS.CAPTIONS && <CaptionsContainer />}
       {sidebarContentPanel === PANELS.POLL
         && (
-          <div className={styles.poll} style={{ minWidth, top: '0' }} id="pollPanel">
+          <Styled.Poll style={{ minWidth, top: '0' }} id="pollPanel">
             <PollContainer smallSidebar={smallSidebar} />
-          </div>
+          </Styled.Poll>
         )}
       {sidebarContentPanel === PANELS.BREAKOUT && <BreakoutRoomContainer />}
       {sidebarContentPanel === PANELS.WAITING_USERS && <WaitingUsersPanel />}

bigbluebutton-html5/imports/ui/components/sidebar-content/styles.js

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import { colorWhite } from '/imports/ui/stylesheets/styled-components/palette';
+import { borderSize, navbarHeight } from '/imports/ui/stylesheets/styled-components/general';
+import { smallOnly, mediumUp } from '/imports/ui/stylesheets/styled-components/breakpoints';
+
+const Poll = styled.div`
+  position: absolute;
+  display: flex;
+  flex-flow: column;
+  overflow-y: auto;
+  overflow-x: hidden;
+  outline: transparent;
+  outline-width: ${borderSize};
+  outline-style: solid;
+  order: 2;
+  height: 100%;
+  background-color: ${colorWhite};
+  min-width: 20em;
+  padding: 1rem;
+
+  @media ${smallOnly} {
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 5;
+    height: auto;
+    top: ${navbarHeight};
+    overflow: auto;
+  }
+
+  @media ${mediumUp} {
+    position: relative;
+    order: 1;
+  }
+`;
+
+export default {
+  Poll,
+};

bigbluebutton-html5/imports/ui/stylesheets/styled-components/breakpoints.js

@@ -1,5 +1,7 @@
 const smallOnly = 'only screen and (max-width: 40em)';
+const mediumUp = 'only screen and (min-width: 40.063em)';
 
 export {
   smallOnly,
+  mediumUp,
 };

bigbluebutton-html5/imports/ui/stylesheets/styled-components/general.js

@@ -11,6 +11,7 @@ const jumboPaddingY = '1.5rem';
 
 const whiteboardToolbarPadding = '.5rem';
 const minModalHeight = '20rem';
+const navbarHeight = '3.9375rem';
 
 export {
   borderSize,
@@ -25,4 +26,5 @@ export {
   jumboPaddingY,
   whiteboardToolbarPadding,
   minModalHeight,
+  navbarHeight,
 };