bigbluebutton-Github/labs/bbb-html5-client/assets/css/mobile.less

// note: the widths in the media queries have to be exactly the ones used by
// bootstrap, otherwise it will not behave properly.

.all-mobiles {

  // first the common style used always when in mobile mode
  #presentation-wrapper {
    top: 6vh; // the element is not floating anymore, need a top gap
  }
  #presentation-wrapper, #whiteboard {
    width: 100%;
  }
  #video {
    float: left;
  }
  #sidebar-right {
    top: 66vh; // the element is not floating anymore, need a top gap

    // have to override a few attributes set by bootstrap
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
  }

  // when users is small, bootstrap will show the columns one below the other,
  // so we have to make them float again and set their width to the ones used by bootstrap.
  #users {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11 {
      float: left;
    }
    .col-md-1 {
      width: 8.333333333333332%;
    }
    .col-md-5 {
      width: 41.66666666666667%;
    }
  }

  #session-view {
    // common layout for when chat OR video is on
    &.chat-on, &.video-on {
      #presentation-wrapper, #whiteboard {
        height: 60vh;
        width: 100%;
      }
      #chat, #video {
        height: 33vh;
      }
      #sidebar-right {
        position: absolute;
      }
    }

    // when chat only is on, make it fullsize
    &.chat-on #chat {
      width: 100%;
    }

    // when video only is on, make it fullsize
    &.video-on #video {
      width: 100%;
    }

    // when chat AND video are on, make them smaller
    &.chat-on.video-on {
      #video {
        width: 30%;
      }
      #chat {
        width: 70%;
      }
    }
  }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 992px) {
  .all-mobiles;
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  .all-mobiles;
}

/* Landscape phones and down */
@media (max-width: 480px) {
  .all-mobiles;

  #users, #video, #chat {
    width: 100%;
    height: 94vh;
    border: 0;
    resize: none;
  }

  #session-view {
    &.chat-on #chat {
      position: fixed;
      top: 6vh;
      left: 0;
      width: 100%;
      height: 94vh;
    }

    &.video-on #video {
      position: fixed;
      top: 6vh;
      left: 0;
      width: 100%;
      height: 94vh;
    }

    // to override styles set above
    &.chat-on.video-on {
      #video {
        width: 100%;
      }
      #chat {
        width: 100%;
      }
    }
  }
}