123 lines
2.4 KiB
Plaintext
123 lines
2.4 KiB
Plaintext
// 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, #whiteboard {
|
|
width: 100%;
|
|
}
|
|
#video {
|
|
float: left;
|
|
}
|
|
#sidebar-right {
|
|
top: 67vh; // 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%;
|
|
}
|
|
}
|
|
}
|
|
}
|