Merge pull request #4938 from KDSBrowne/z.0.1-mobile-btn-alignmet

Fix alignment of ActionsBar buttons for small screens

bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx

@@ -1,36 +1,53 @@
 import React from 'react';
+import cx from 'classnames';
 import { styles } from './styles.scss';
 import EmojiSelect from './emoji-select/component';
 import ActionsDropdown from './actions-dropdown/component';
 import AudioControlsContainer from '../audio/audio-controls/container';
 import JoinVideoOptionsContainer from '../video-dock/video-menu/container';
 
-const ActionsBar = ({
-  isUserPresenter,
-  handleExitVideo,
-  handleJoinVideo,
-  handleShareScreen,
-  handleUnshareScreen,
-  isVideoBroadcasting,
-  emojiList,
-  emojiSelected,
-  handleEmojiChange,
-}) => (
-  <div className={styles.actionsbar}>
-    <div className={styles.left}>
-      <ActionsDropdown {...{ isUserPresenter, handleShareScreen, handleUnshareScreen, isVideoBroadcasting}} />
-    </div>
-    <div className={styles.center}>
-      <AudioControlsContainer />
-      {Meteor.settings.public.kurento.enableVideo ?
-        <JoinVideoOptionsContainer
-          handleJoinVideo={handleJoinVideo}
-          handleCloseVideo={handleExitVideo}
-        />
-      : null}
-      <EmojiSelect options={emojiList} selected={emojiSelected} onChange={handleEmojiChange} />
-    </div>
-  </div>
-);
+class ActionsBar extends React.PureComponent {
+  render() {
+    const {
+      isUserPresenter,
+      handleExitVideo,
+      handleJoinVideo,
+      handleShareScreen,
+      handleUnshareScreen,
+      isVideoBroadcasting,
+      emojiList,
+      emojiSelected,
+      handleEmojiChange,
+    } = this.props;
+
+    const actionBarClasses = {};
+    actionBarClasses[styles.centerWithActions] = isUserPresenter;
+    actionBarClasses[styles.center] = true;
+
+    return (
+      <div className={styles.actionsbar}>
+        <div className={styles.left}>
+          <ActionsDropdown {...{
+            isUserPresenter,
+            handleShareScreen,
+            handleUnshareScreen,
+            isVideoBroadcasting,
+            }}
+          />
+        </div>
+        <div className={isUserPresenter ? cx(styles.centerWithActions, actionBarClasses) : styles.center}>
+          <AudioControlsContainer />
+          {Meteor.settings.public.kurento.enableVideo ?
+            <JoinVideoOptionsContainer
+              handleJoinVideo={handleJoinVideo}
+              handleCloseVideo={handleExitVideo}
+            />
+            : null}
+          <EmojiSelect options={emojiList} selected={emojiSelected} onChange={handleEmojiChange} />
+        </div>
+      </div>
+    );
+  }
+}
 
 export default ActionsBar;

bigbluebutton-html5/imports/ui/components/actions-bar/styles.scss

@@ -13,16 +13,28 @@
   justify-content: center;
 
   > * {
-    margin: 0 $line-height-computed;
+    margin: 0 $sm-padding-x;
+
+    @include mq($small-only) {
+      margin: 0 $sm-padding-y;
+    }
   }
 }
 
 .left{
   position: absolute;
+  @include mq($small-only) {
+    bottom: $sm-padding-x;
+    left: $sm-padding-x;
+  }
 }
 
-.center {
-  align-items: center;
+.centerWithActions {
+  @include mq($xsmall-only) {
+    position: absolute;
+    bottom: $sm-padding-x;
+    right: $sm-padding-x;
+  }
 }
 
 .button {

bigbluebutton-html5/imports/ui/components/audio/audio-controls/styles.scss

@@ -1,9 +1,15 @@
+@import "/imports/ui/stylesheets/variables/_all";
+
 .container {
   display: flex;
   flex-flow: row;
 
   > * {
-    margin: 0 1rem;
+    margin: 0 $sm-padding-x;
+
+    @include mq($small-only) {
+      margin: 0 $sm-padding-y;
+    }
 
     span:first-child {
       box-shadow: 0 2px 5px 0 rgb(0, 0, 0);

bigbluebutton-html5/imports/ui/stylesheets/variables/breakpoints.scss

@@ -13,9 +13,10 @@
   @return nth($range, 2);
 }
 
-
-$small-range: (0em, 40em);
-/* 0, 640px */
+$xsmall-range: (0em, 25.937em);
+/* 0px, 415px */
+$small-range: (26em, 40em);
+/* 416px, 640px */
 $medium-range: (40.063em, 64em);
 /* 641px, 1024px */
 $large-range: (64.063em, 90em);
@@ -30,6 +31,7 @@ $landscape: "#{$screen} and (orientation: landscape)";
 $portrait: "#{$screen} and (orientation: portrait)";
 $small-up: $screen;
 $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
+$xsmall-only: "#{$screen} and (min-width:#{lower-bound($xsmall-range)}) and (max-width:#{upper-bound($xsmall-range)})";
 $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
 $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
 $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
@@ -44,6 +46,7 @@ $breakpoints: (
   'landscape': $landscape,
   'portrait': $portrait,
   'small': $small-only,
+  'xsmall': $xsmall-only,
   'medium': $medium-only,
   'large': $large-only,
   'xlarge': $xlarge-only,