From 3f55033c6738feddee7d02045e0d38ec7f5b2603 Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Tue, 17 Feb 2015 15:02:49 -0800 Subject: [PATCH 1/5] Improved participants tab in a mobile view --- .../app/client/stylesheets/portrait/users.less | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/labs/meteor-client/app/client/stylesheets/portrait/users.less b/labs/meteor-client/app/client/stylesheets/portrait/users.less index ac852b9593..7024308a52 100755 --- a/labs/meteor-client/app/client/stylesheets/portrait/users.less +++ b/labs/meteor-client/app/client/stylesheets/portrait/users.less @@ -2,8 +2,8 @@ #users { -webkit-order: 3; order: 3; - margin-bottom: 40px; - padding-bottom: 40px; + margin-bottom: 0px; + padding-bottom: 0px; max-height: 20%; min-height: 20%; } @@ -18,7 +18,9 @@ #user-contents { .userlist { - padding:10px; + padding-top: 10px; + padding-left: 10px; + padding-right: 10px; } } From 61ea73c2a720cf651ca1693867885f7d96c17d98 Mon Sep 17 00:00:00 2001 From: Oleksandr Zhurbenko Date: Tue, 17 Feb 2015 15:23:27 -0800 Subject: [PATCH 2/5] Improved Chat tab --- labs/meteor-client/app/client/stylesheets/portrait/chat.less | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/labs/meteor-client/app/client/stylesheets/portrait/chat.less b/labs/meteor-client/app/client/stylesheets/portrait/chat.less index ef41d09489..da93cbdaf8 100755 --- a/labs/meteor-client/app/client/stylesheets/portrait/chat.less +++ b/labs/meteor-client/app/client/stylesheets/portrait/chat.less @@ -18,10 +18,9 @@ @media (max-device-aspect-ratio: 1/1) { .chat { /* height: Xpx; the value here will determine how tall we allow the chat */ + li { - td { - font-size: 30px; - } + font-size: 14px; } } } From 428ab03cc4837e3e9bc3cb9d04c92263ef27c652 Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Thu, 19 Feb 2015 19:28:55 -0800 Subject: [PATCH 3/5] Introduced the media query aliases. --- labs/meteor-client/app/client/stylesheets/colors.less | 7 ------- .../meteor-client/app/client/stylesheets/common/chat.less | 2 +- .../app/client/stylesheets/common/style.less | 2 +- .../app/client/stylesheets/landscape/chat.less | 4 ++-- .../app/client/stylesheets/landscape/style.less | 4 ++-- .../app/client/stylesheets/landscape/users.less | 4 +++- .../app/client/stylesheets/landscape/whiteboard.less | 6 ++++-- .../app/client/stylesheets/portrait/chat.less | 4 ++-- .../app/client/stylesheets/portrait/style.less | 8 ++++---- .../app/client/stylesheets/portrait/users.less | 6 ++++-- .../app/client/stylesheets/portrait/whiteboard.less | 4 +++- 11 files changed, 26 insertions(+), 25 deletions(-) delete mode 100755 labs/meteor-client/app/client/stylesheets/colors.less diff --git a/labs/meteor-client/app/client/stylesheets/colors.less b/labs/meteor-client/app/client/stylesheets/colors.less deleted file mode 100755 index cad4bc012a..0000000000 --- a/labs/meteor-client/app/client/stylesheets/colors.less +++ /dev/null @@ -1,7 +0,0 @@ -/* sorted by brightness */ -@white: #fff, #f5f5f5, #eee; -@lightGrey: #d7d7d7, #cccdd1, #ccc, #999; -@darkGrey: #666, #60636a, #40434c, #32353e; -@azure: #54a7db, #0099FF; -@black: #000; -@yellow: #E3E1B8, #F9DF6B; \ No newline at end of file diff --git a/labs/meteor-client/app/client/stylesheets/common/chat.less b/labs/meteor-client/app/client/stylesheets/common/chat.less index d7e02ddbd8..25af270e78 100755 --- a/labs/meteor-client/app/client/stylesheets/common/chat.less +++ b/labs/meteor-client/app/client/stylesheets/common/chat.less @@ -1,4 +1,4 @@ -@import "../colors"; +@import "../variables"; .active { border-bottom: none; diff --git a/labs/meteor-client/app/client/stylesheets/common/style.less b/labs/meteor-client/app/client/stylesheets/common/style.less index 370b853238..979f15ff99 100755 --- a/labs/meteor-client/app/client/stylesheets/common/style.less +++ b/labs/meteor-client/app/client/stylesheets/common/style.less @@ -1,4 +1,4 @@ -@import "../colors"; +@import "../variables"; .radius(@size: 4px) { -moz-border-radius: @size; diff --git a/labs/meteor-client/app/client/stylesheets/landscape/chat.less b/labs/meteor-client/app/client/stylesheets/landscape/chat.less index 46c819db46..d7ae5f0f14 100755 --- a/labs/meteor-client/app/client/stylesheets/landscape/chat.less +++ b/labs/meteor-client/app/client/stylesheets/landscape/chat.less @@ -1,6 +1,6 @@ -@import "../colors"; +@import "../variables"; -@media all and (orientation: landscape) and (min-device-aspect-ratio: 1/1) { +@media @landscape { #chat { -webkit-order: 3; order: 3; diff --git a/labs/meteor-client/app/client/stylesheets/landscape/style.less b/labs/meteor-client/app/client/stylesheets/landscape/style.less index d051fcec36..e11260ff4c 100755 --- a/labs/meteor-client/app/client/stylesheets/landscape/style.less +++ b/labs/meteor-client/app/client/stylesheets/landscape/style.less @@ -1,7 +1,7 @@ -@import "../colors"; @import "../mixins"; +@import "../variables"; -@media all and (orientation: landscape) and (min-device-aspect-ratio: 1/1) { +@media @landscape { body { height: 100%; min-width: 768px; diff --git a/labs/meteor-client/app/client/stylesheets/landscape/users.less b/labs/meteor-client/app/client/stylesheets/landscape/users.less index bee8ffa415..1c686bb864 100755 --- a/labs/meteor-client/app/client/stylesheets/landscape/users.less +++ b/labs/meteor-client/app/client/stylesheets/landscape/users.less @@ -1,4 +1,6 @@ -@media all and (orientation: landscape) and (min-device-aspect-ratio: 1/1) { +@import "../variables"; + +@media @landscape { #username { display:block; } diff --git a/labs/meteor-client/app/client/stylesheets/landscape/whiteboard.less b/labs/meteor-client/app/client/stylesheets/landscape/whiteboard.less index ae68183431..39fba220cb 100755 --- a/labs/meteor-client/app/client/stylesheets/landscape/whiteboard.less +++ b/labs/meteor-client/app/client/stylesheets/landscape/whiteboard.less @@ -1,4 +1,6 @@ -@media all and (orientation: landscape) and (min-device-aspect-ratio: 1/1) { +@import "../variables"; + +@media @landscape { #whiteboard { -webkit-order: 2; order: 2; @@ -19,4 +21,4 @@ } } - + diff --git a/labs/meteor-client/app/client/stylesheets/portrait/chat.less b/labs/meteor-client/app/client/stylesheets/portrait/chat.less index da93cbdaf8..2e1274791b 100755 --- a/labs/meteor-client/app/client/stylesheets/portrait/chat.less +++ b/labs/meteor-client/app/client/stylesheets/portrait/chat.less @@ -1,6 +1,6 @@ -@import "../colors"; +@import "../variables"; -@media all and (orientation: portrait), all and (orientation: landscape) and (max-device-aspect-ratio: 1/1) { +@media all and (orientation: portrait), @mobile-portrait-with-keyboard { #chat { -webkit-order: 2; order: 2; diff --git a/labs/meteor-client/app/client/stylesheets/portrait/style.less b/labs/meteor-client/app/client/stylesheets/portrait/style.less index ab60e42ebd..b8b88c707b 100755 --- a/labs/meteor-client/app/client/stylesheets/portrait/style.less +++ b/labs/meteor-client/app/client/stylesheets/portrait/style.less @@ -1,7 +1,7 @@ -@import "../colors"; @import "../mixins"; +@import "../variables"; -@media all and (orientation: portrait), all and (orientation: landscape) and (max-device-aspect-ratio: 1/1) { +@media all and (orientation: portrait), @mobile-portrait-with-keyboard { body { position: relative; top: 15px; @@ -20,7 +20,7 @@ } } -@media all and (orientation: portrait) and (max-device-aspect-ratio: 1/1), all and (orientation: landscape) and (max-device-aspect-ratio: 1/1) { +@media @mobile-portrait, @mobile-portrait-with-keyboard { .myNavbar { min-width: 630px; } @@ -149,7 +149,7 @@ } } -@media all and (orientation: portrait) and (min-device-aspect-ratio: 1/1) { +@media @desktop-portrait { .myNavbar { min-width: 400px; } diff --git a/labs/meteor-client/app/client/stylesheets/portrait/users.less b/labs/meteor-client/app/client/stylesheets/portrait/users.less index 7024308a52..439e6f3ab9 100755 --- a/labs/meteor-client/app/client/stylesheets/portrait/users.less +++ b/labs/meteor-client/app/client/stylesheets/portrait/users.less @@ -1,4 +1,6 @@ -@media all and (orientation: portrait), all and (orientation: landscape) and (max-device-aspect-ratio: 1/1) { +@import "../variables"; + +@media all and (orientation: portrait), @mobile-portrait-with-keyboard { #users { -webkit-order: 3; order: 3; @@ -10,7 +12,7 @@ } /*desktop portrait*/ -@media all and (orientation: portrait) and (min-device-aspect-ratio: 1/1) { +@media @desktop-portrait { #username { display:block; width:70%; diff --git a/labs/meteor-client/app/client/stylesheets/portrait/whiteboard.less b/labs/meteor-client/app/client/stylesheets/portrait/whiteboard.less index 4400f2b33e..1fc3b95009 100755 --- a/labs/meteor-client/app/client/stylesheets/portrait/whiteboard.less +++ b/labs/meteor-client/app/client/stylesheets/portrait/whiteboard.less @@ -1,4 +1,6 @@ -@media all and (orientation: portrait), all and (orientation: landscape) and (max-device-aspect-ratio: 1/1) { +@import "../variables"; + +@media all and (orientation: portrait), @mobile-portrait-with-keyboard { #whiteboard { -webkit-order: 1; order: 1; From 3a2f44a9f5185586e0535e5d050f1c73e67d8756 Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Fri, 20 Feb 2015 18:07:50 -0800 Subject: [PATCH 4/5] Moved all the chat-related LESS to one file and structured it using media queries inside classes instead of the other way around. --- .../client/stylesheets/{common => }/chat.less | 78 ++++++++++++++++++- .../client/stylesheets/landscape/chat.less | 19 ----- .../app/client/stylesheets/portrait/chat.less | 72 ----------------- .../app/client/stylesheets/variables.less | 21 +++++ 4 files changed, 95 insertions(+), 95 deletions(-) rename labs/meteor-client/app/client/stylesheets/{common => }/chat.less (60%) delete mode 100755 labs/meteor-client/app/client/stylesheets/landscape/chat.less delete mode 100755 labs/meteor-client/app/client/stylesheets/portrait/chat.less create mode 100755 labs/meteor-client/app/client/stylesheets/variables.less diff --git a/labs/meteor-client/app/client/stylesheets/common/chat.less b/labs/meteor-client/app/client/stylesheets/chat.less similarity index 60% rename from labs/meteor-client/app/client/stylesheets/common/chat.less rename to labs/meteor-client/app/client/stylesheets/chat.less index 25af270e78..6b7e9204aa 100755 --- a/labs/meteor-client/app/client/stylesheets/common/chat.less +++ b/labs/meteor-client/app/client/stylesheets/chat.less @@ -1,10 +1,11 @@ -@import "../variables"; +@import "variables"; .active { - border-bottom: none; + /*border-bottom: none; border-left: 1px solid extract(@azure, 2); border-right: 1px solid extract(@azure, 2); - border-top: 1px solid extract(@azure, 2); + border-top: 1px solid extract(@azure, 2);*/ + border: .2vh solid extract(@azure, 2) !important; } #chat { @@ -20,6 +21,16 @@ padding-left: 0px; padding-right: 0px; width: 100%; + @media @landscape { + -webkit-order: 3; + order: 3; + } + @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait { + -webkit-order: 2; + order: 2; + min-height: 40%; + max-height: 40%; + } } .chat { @@ -37,6 +48,11 @@ width: 100%; } } + @media @mobile-portrait-with-keyboard, @mobile-portrait { + li { + font-size: 14px; + } + } } #chatbody { @@ -44,6 +60,10 @@ overflow-y: scroll; padding-left: 0px; padding-right: 0px; + @media @desktop-portrait, @mobile-portrait { + max-height: 50vh; + overflow-y: scroll; + } } .chatGreeting { @@ -69,9 +89,11 @@ margin-bottom: 1px !important; width:100%; } + .close:hover { background-color: red; } + .closeTab { float:left; width:10%; @@ -124,6 +146,17 @@ padding:5px; border-radius:4px; border:1px solid extract(@lightGrey, 3); + @media @landscape, @desktop-portrait { + height: 40px; + } + @media @mobile-portrait-with-keyboard, @mobile-portrait { + height: 60px; + } + @media @mobile-portrait-with-keyboard, + @desktop-portrait, + @mobile-portrait { + font-size: 25px; + } } .optionsBar { @@ -135,7 +168,7 @@ .panel-footer { bottom: 0px; - padding: 10px; + /* padding: 10px; TODO: investigate (causes the overflow in the chat's title) */ position: relative; background: extract(@white, 1); } @@ -164,6 +197,21 @@ width: 20%; margin-left: 5%; color: extract(@white, 1); + @media @mobile-portrait-with-keyboard, + @desktop-portrait, + @mobile-portrait { + width: 100px; + font-size: 30px; + } + @media @mobile-portrait-with-keyboard, @mobile-portrait { + height: 60px; + } + @media @desktop-portrait, @landscape { + height: 40px; + } + @media @landscape { + padding: 0px; + } } #tabsList { @@ -175,6 +223,14 @@ width: 100%; a { padding:0px; + @media @mobile-portrait-with-keyboard, + @desktop-portrait, + @mobile-portrait { + font-size: 25px; + } + @media @landscape { + font-size: 12px; + } } li:first-child a { border-left: 0; @@ -182,6 +238,14 @@ &:before, &:after { content: none; } + @media @mobile-portrait-with-keyboard, + @desktop-portrait, + @mobile-portrait { + .userlist { + font-size: 30px; + padding-left: 10px; + } + } } .tab { @@ -199,3 +263,9 @@ .timestamp { text-align: right; } + +#chatbar-contents { + @media @landscape { + min-width: 140px; + } +} diff --git a/labs/meteor-client/app/client/stylesheets/landscape/chat.less b/labs/meteor-client/app/client/stylesheets/landscape/chat.less deleted file mode 100755 index d7ae5f0f14..0000000000 --- a/labs/meteor-client/app/client/stylesheets/landscape/chat.less +++ /dev/null @@ -1,19 +0,0 @@ -@import "../variables"; - -@media @landscape { - #chat { - -webkit-order: 3; - order: 3; - } - #chatbar-contents { - min-width: 140px; - } - #newMessageInput { - height: 40px; - } - - #sendMessageButton { - height: 40px; - padding: 0px; - } -} diff --git a/labs/meteor-client/app/client/stylesheets/portrait/chat.less b/labs/meteor-client/app/client/stylesheets/portrait/chat.less deleted file mode 100755 index 2e1274791b..0000000000 --- a/labs/meteor-client/app/client/stylesheets/portrait/chat.less +++ /dev/null @@ -1,72 +0,0 @@ -@import "../variables"; - -@media all and (orientation: portrait), @mobile-portrait-with-keyboard { - #chat { - -webkit-order: 2; - order: 2; - min-height: 40%; - max-height: 40%; - } - - @media (orientation:portrait) { - #chatbody { - max-height: 50vh; - overflow-y: scroll; - } - } - - @media (max-device-aspect-ratio: 1/1) { - .chat { - /* height: Xpx; the value here will determine how tall we allow the chat */ - - li { - font-size: 14px; - } - } - } - - #newMessageInput { - height: 60px; - font-size: 25px; - } - - #sendMessageButton { - height: 60px; - width: 100px; - font-size: 30px; - } - - #tabsList { - a { - font-size: 25px; - } - - .userlist { - font-size: 30px; - padding-left: 10px; - } - } -} - - .closeTab { - font-size: 3vw; - } - .active { - border: .2vh solid extract(@azure, 2) !important; - } - - @media (min-device-aspect-ratio: 1/1) { - #newMessageInput { - height: 40px; - } - - #sendMessageButton { - height: 40px; - } - - #tabsList { - a { - font-size: 12px; - } - } -} diff --git a/labs/meteor-client/app/client/stylesheets/variables.less b/labs/meteor-client/app/client/stylesheets/variables.less new file mode 100755 index 0000000000..c02f2ac0f1 --- /dev/null +++ b/labs/meteor-client/app/client/stylesheets/variables.less @@ -0,0 +1,21 @@ +/* colors sorted by brightness */ +@white: #fff, #f5f5f5, #eee; +@lightGrey: #d7d7d7, #cccdd1, #ccc, #999; +@darkGrey: #666, #60636a, #40434c, #32353e; +@azure: #54a7db, #0099FF; +@black: #000; +@yellow: #E3E1B8, #F9DF6B; + +/* media queries */ + +/* standard landscape view: landscape browser window + landscape device screen */ +@landscape: ~"all and (orientation: landscape) and (min-device-aspect-ratio: 1/1)"; + +/* keyboard is open on a mobile device: landscape browser window + portrait device screen */ +@mobile-portrait-with-keyboard: ~"all and (orientation: landscape) and (max-device-aspect-ratio: 1/1)"; + +/* narrowed desktop window: portrait browser window + landscape device screen */ +@desktop-portrait: ~"all and (orientation: portrait) and (min-device-aspect-ratio: 1/1)"; + +/* mobile device in portrait orientation: portrait browser window + portrait device screen */ +@mobile-portrait: ~"all and (orientation: portrait) and (max-device-aspect-ratio: 1/1)"; From 9ce41b34442c305f32c236754d404f0408f8d0e2 Mon Sep 17 00:00:00 2001 From: Maxim Khlobystov Date: Sat, 21 Feb 2015 15:50:47 -0800 Subject: [PATCH 5/5] Finished up the restructuring of LESS. --- .../app/client/stylesheets/common/style.less | 257 ---------- .../app/client/stylesheets/common/users.less | 45 -- .../client/stylesheets/common/whiteboard.less | 29 -- .../client/stylesheets/landscape/style.less | 82 --- .../client/stylesheets/landscape/users.less | 23 - .../stylesheets/landscape/whiteboard.less | 24 - .../client/stylesheets/portrait/style.less | 210 -------- .../client/stylesheets/portrait/users.less | 40 -- .../stylesheets/portrait/whiteboard.less | 8 - .../app/client/stylesheets/style.less | 479 ++++++++++++++++++ .../app/client/stylesheets/users.less | 89 ++++ .../app/client/stylesheets/whiteboard.less | 51 ++ 12 files changed, 619 insertions(+), 718 deletions(-) delete mode 100755 labs/meteor-client/app/client/stylesheets/common/style.less delete mode 100755 labs/meteor-client/app/client/stylesheets/common/users.less delete mode 100755 labs/meteor-client/app/client/stylesheets/common/whiteboard.less delete mode 100755 labs/meteor-client/app/client/stylesheets/landscape/style.less delete mode 100755 labs/meteor-client/app/client/stylesheets/landscape/users.less delete mode 100755 labs/meteor-client/app/client/stylesheets/landscape/whiteboard.less delete mode 100755 labs/meteor-client/app/client/stylesheets/portrait/style.less delete mode 100755 labs/meteor-client/app/client/stylesheets/portrait/users.less delete mode 100755 labs/meteor-client/app/client/stylesheets/portrait/whiteboard.less create mode 100755 labs/meteor-client/app/client/stylesheets/style.less create mode 100755 labs/meteor-client/app/client/stylesheets/users.less create mode 100755 labs/meteor-client/app/client/stylesheets/whiteboard.less diff --git a/labs/meteor-client/app/client/stylesheets/common/style.less b/labs/meteor-client/app/client/stylesheets/common/style.less deleted file mode 100755 index 979f15ff99..0000000000 --- a/labs/meteor-client/app/client/stylesheets/common/style.less +++ /dev/null @@ -1,257 +0,0 @@ -@import "../variables"; - -.radius(@size: 4px) { - -moz-border-radius: @size; - -webkit-border-radius: @size; - border-radius: @size; -} - -.linear-gradient(@color1, @color2) { - background: -moz-linear-gradient(@color1, @color2); /* For Firefox 3.6 to 15 */ - background: -o-linear-gradient(@color1, @color2); /* For Opera 11.1 to 12.0 */ - background: -webkit-linear-gradient(@color1, @color2); /* For Safari 5.1 to 6.0 */ - background: linear-gradient(@color1, @color2); /* Standard syntax (must be last) */ -} - -body { - background: extract(@white, 3); - bottom: 0; - color: extract(@darkGrey, 1); - left: 0; - right: 0; -} - -.btn { - background-color: extract(@white, 2); -} - -.component { - .radius; - background: extract(@white, 1); - border: 1px solid extract(@lightGrey, 3); - float: left; - height: 100%; - margin-top: 10px; -} - -.extraConversationScrollableMenu { - height: auto; - max-height: 200px; - overflow-x: hidden; -} - -.mainContainer { - height: 95%; -} - -.myFooter { - color: black; - max-height: 20px; - padding-top: 13px; - text-align: center; -} - -.myNavbar { - margin-bottom: 0.5%; - border-bottom: 0px; - &.gradientBar { - .linear-gradient(rgb(72,76,85), rgb(65,68,77)); - } - .btn { - .linear-gradient(rgb(72,76,85), rgb(65,68,77)); - border-left: 1px solid extract(@darkGrey, 2); - border-right: 1px solid extract(@darkGrey, 4); - &.navbarIconToggleActive { - background: extract(@darkGrey, 3); - border-bottom: 4px solid extract(@azure, 1); - } - i { - color: extract(@white, 1); - } - } -} - -.myNavbarMinimized { - background: extract(@white, 3); - height: 20px; - margin-bottom: 0.2%; - margin-top: 0px; - min-width: 900px; - padding-top: 0px; - text-align: right; -} - -.navbar { - min-height: 40px !important; -} - -.navbarFiller { - width: 100%; -} - -.navbarIconToggleActive i { - color: extract(@lightGrey, 2); -} - -#navbarMinimizedButton { - margin-bottom: 0px; - margin-left: 2px; - margin-right: 20px; - margin-top: 0px; - position: absolute; - right: 0; - top: 0; -} - -.navbarMinimizedButtonSmall { - height: 10px; - width: 40px; -} - -.navbarMinimizedButtonLarge { - height: 50px; - width: 40px; -} - -.navbarSettingsButtons { - float: right; - .btn { - display: block; - float: right; - } -} - -.navbarTitle { - color: extract(@white, 1); - display: block; - float: left; - font-weight: bold; - text-align: center; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.navbarUserButtons .btn { - border-radius: 0; - display: block; - float: left; - &:hover { - background: extract(@darkGrey, 3); - } -} - -.navbarSettingsButtons .btn:hover { - background: extract(@darkGrey, 3); -} - -.panel-footer { - padding: 0; -} - -.recordingStatus { - background: none!important; - border: none; - margin-left: 10px; - padding: 0!important; -} - -.recordingStatusFalse { - color: maroon; -} - -.recordingStatusTrue { - color: green; -} - -.ScrollableWindowX { - width: 100%; - overflow-x: scroll; -} - -.ScrollableWindowY { - height: 100%; - overflow-y: scroll; - overflow:auto; -} - -.tab { - height: 40px; -} - -.table > thead > tr > th, -.table > tbody > tr > th, -.table > tfoot > tr > th, -.table > thead > tr > td, -.table > tbody > tr > td, -.table > tfoot > tr > td { - border-top: 0px; -} - -.title { - border-bottom: 1px solid extract(@lightGrey, 1); - color: extract(@darkGrey, 1); - font-weight: bold; - line-height: 2em; - margin: 0; - padding-bottom: 5px; - padding-left: 10px; - padding-top: 5px; -} - -#main { - padding-top: 50px; - padding-left: 0.25%; - padding-right: 0.25%; - display: -moz-flex; - display: -ms-flexbox; - display: -ms-flex; - display: -webkit-flex; - display: flex; -} - -/* Custom alert box */ - -.no-close .ui-dialog-titlebar-close { - display: none; /* no close button */ -} - -.logout-dialog.ui-dialog { - .ui-widget-header { - color: extract(@white, 1); - font-weight: bold; - background: extract(@darkGrey, 3); - } - .ui-dialog-content { - font-weight: bold; - text-align: center; - } -} - -.logout-dialog.ui-widget-content { - background: extract(@white, 3); - border: 5px solid extract(@darkGrey, 3); -} - -.ui-widget-overlay { - z-index: 1031; -} - -.custom-button { - background-color: extract(@yellow, 1); -} - -.fullScreenPresentation { - width: 90% !important; - height: 90% !important; -} - -.halfScreen { - width: 44% !important; - height: 80% !important; -} - -.quarterScreen { - width: 22% !important; - height: 80% !important; -} diff --git a/labs/meteor-client/app/client/stylesheets/common/users.less b/labs/meteor-client/app/client/stylesheets/common/users.less deleted file mode 100755 index 755582d09a..0000000000 --- a/labs/meteor-client/app/client/stylesheets/common/users.less +++ /dev/null @@ -1,45 +0,0 @@ -#content { - margin-top: 10px; - overflow: hidden; - width: 100%; -} - -#usericons { - float: right; - span { - margin-left: 3px; - padding: 2px; - border: 1px solid white; - } - .raisedHandIcon, .muteIcon { - &:hover { - cursor: pointer; - border: 1px solid #f2f2f2; - background-color: #f2f2f2; - border-radius: 4px; - } - } -} - -.usernameEntry { - float:left; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 60%; -} - -#users { - margin-left: 0.25%; - margin-right: 0.25%; - padding-bottom: 10px; /*min-width:230px;*/ - -webkit-flex: 1 1 25%; - flex: 1 1 25%; -} - -#user-contents { -} - -.userCurrent { - font-weight: bold; -} diff --git a/labs/meteor-client/app/client/stylesheets/common/whiteboard.less b/labs/meteor-client/app/client/stylesheets/common/whiteboard.less deleted file mode 100755 index fa90d45a02..0000000000 --- a/labs/meteor-client/app/client/stylesheets/common/whiteboard.less +++ /dev/null @@ -1,29 +0,0 @@ -#whiteboard { - padding: 0 !important; - margin-left: 0.25%; - margin-right: 0.25%; - -webkit-flex: 2 2 50%; - -moz-flex: 2 2 50%; - -ms-flex: 2 2 50%; - flex: 2 2 50%; - min-width: 0; -} - -#whiteboard-paper { - background-color: white !important; - /*height: auto !important;*/ - margin-left: auto; - margin-right: auto; - #svggroup { - display: block; - height: 100% !important; - width: 100% !important; - } -} - -#whiteboard-navbar { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; -} \ No newline at end of file diff --git a/labs/meteor-client/app/client/stylesheets/landscape/style.less b/labs/meteor-client/app/client/stylesheets/landscape/style.less deleted file mode 100755 index e11260ff4c..0000000000 --- a/labs/meteor-client/app/client/stylesheets/landscape/style.less +++ /dev/null @@ -1,82 +0,0 @@ -@import "../mixins"; -@import "../variables"; - -@media @landscape { - body { - height: 100%; - min-width: 768px; - position: absolute; - top: 0; - } - - .myNavbar { - min-width: 768px; - } - - .navbarButton { - height: 50px; - width: 51.2px; - } - - .navbarFiller { - height: 50px; - } - - .navbarSection { - min-width: 256px; - width: 33%; - } - - .navbarTitle { - font-size: 16px; - padding-top: 13px; - width: 30% !important; - } - - .navbarUserButtons { - float: left; - } - - .title { - font-size: 14px; - } - - .ion-volume-mute { - font-size: 20px; - } - - #main { - -webkit-flex-flow: row; - flex-flow: row; - } - - #collapseButtonSection { - display: none; - } - - .hiddenNavbarSection { - display: block !important; - } - - .collapseNavbarSection { - display: block !important; - } - - .logout-dialog.ui-dialog { - .ui-widget-header { - font-size: 12px; - } - .ui-dialog-content { - font-size: 11px; - } - } - - .logout-dialog.ui-widget-content { - font-size: 10px; - } - - .myFooter { - font-size: 10px; - } - -} diff --git a/labs/meteor-client/app/client/stylesheets/landscape/users.less b/labs/meteor-client/app/client/stylesheets/landscape/users.less deleted file mode 100755 index 1c686bb864..0000000000 --- a/labs/meteor-client/app/client/stylesheets/landscape/users.less +++ /dev/null @@ -1,23 +0,0 @@ -@import "../variables"; - -@media @landscape { - #username { - display:block; - } - - #users { - -webkit-order: 1; - order: 1; - min-width: 0; - } - - #user-contents { - .userlist { - padding:10px; - } - } - - .usernameEntry { - height: 20px; - } -} diff --git a/labs/meteor-client/app/client/stylesheets/landscape/whiteboard.less b/labs/meteor-client/app/client/stylesheets/landscape/whiteboard.less deleted file mode 100755 index 39fba220cb..0000000000 --- a/labs/meteor-client/app/client/stylesheets/landscape/whiteboard.less +++ /dev/null @@ -1,24 +0,0 @@ -@import "../variables"; - -@media @landscape { - #whiteboard { - -webkit-order: 2; - order: 2; - - display: -moz-flex; - display: -ms-flexbox; - display: -ms-flex; - display: -webkit-flex; - display: flex; - } - - #whiteboard-paper { - position: relative; - top: 50%; - -webkit-transform: translateY(calc(~'-50% - 19px')); - -ms-transform: translateY(calc(~'-50% - 19px')); - transform: translateY(calc(~'-50% - 19px')); - } -} - - diff --git a/labs/meteor-client/app/client/stylesheets/portrait/style.less b/labs/meteor-client/app/client/stylesheets/portrait/style.less deleted file mode 100755 index b8b88c707b..0000000000 --- a/labs/meteor-client/app/client/stylesheets/portrait/style.less +++ /dev/null @@ -1,210 +0,0 @@ -@import "../mixins"; -@import "../variables"; - -@media all and (orientation: portrait), @mobile-portrait-with-keyboard { - body { - position: relative; - top: 15px; - } - - #main { - -webkit-flex-flow: column; - flex-flow: column; - flex-direction: column; - min-height: 125%; - max-height: 125%; - } - - .myFooter { - font-size: 18px; - } -} - -@media @mobile-portrait, @mobile-portrait-with-keyboard { - .myNavbar { - min-width: 630px; - } - - .navbarButton { - height: 100px; - width: 10%; - min-width: 60px; - } - - .navbarTitle { - font-size: 30px; - padding-top: 30px; - padding-left: 5px; - overflow: hidden; - height: 72px; - width: 70%; - white-space: nowrap; - text-overflow: ellipsis; - margin-left: auto; - margin-right: auto; - } - - .title { - font-size: 30px; - } - - .glyphicon, .ion-android-hand, .ion-volume-mute { - font-size: 35px; - } - - .ion-volume-mute { - font-size: 50px; - } - - .hiddenNavbarSection { - display: none; - } - - /* Logout dialog */ - - .logout-dialog.ui-dialog { - .ui-widget-header { - font-size: 40px; - } - } - - .logout-dialog.ui-widget-content { - font-size: 280%; - } - - .ui-dialog-buttonset { - width: 100%; - } - - .ui-dialog-buttonset button { - width: 40%; - margin-left: 5% !important; - margin-right: 5% !important; - } - - /* Sliding menu */ - - .sliding-menu { - width: 15%; - height: 100%; - position: fixed; - top: 0; - left: -15%; - z-index: 1031; - &.sliding-menu-opened { - left: 0px; - } - a { - border-bottom: 1px solid #258ecd; - padding: 1em; - } - } - - .slideSection { - float: left; - margin-top: 100px; - height: 100%; - width: 100%; - } - - .slideButton { - display: block; - width: 100%; - height: calc(~'20% - 20px'); - } - - .slideSection { - margin-bottom: 0.5%; - &.gradientBar { - .linear-gradient(rgb(72,76,85), rgb(65,68,77)); - } - .btn { - .linear-gradient(rgb(72,76,85), rgb(65,68,77)); - border-left: 1px solid extract(@darkGrey, 2); - border-right: 1px solid extract(@darkGrey, 4); - &.navbarIconToggleActive { - background: extract(@darkGrey, 3); - border-bottom: 4px solid extract(@azure, 1); - } - i { - color: extract(@white, 1); - } - } - } - - #darkened-screen { - display: none; - background: black; - opacity: 0.7; - z-index: 1030; - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - } - - .myFooter { - font-size: 18px; - } -} - -@media @desktop-portrait { - .myNavbar { - min-width: 400px; - } - - .navbarButton { - height: 50px; - width: 51.2px; - } - - .navbarTitle { - font-size: 16px; - padding-top: 13px; - width: calc(~'100% - 102.4px'); - } - - .narrowedNavbarTitle { - width: calc(~'100% - 358.4px') !important; - } - - .title { - font-size: 14px; - } - - .ion-volume-mute { - font-size: 20px; - } - - #main { - padding-top: 0; - } - - .collapseNavbarSection { - display: none; - } - - #collapseButtonSection { - display: block !important; - } - - /* Logout dialog */ - - .logout-dialog.ui-dialog { - .ui-widget-header { - font-size: 12px; - } - .ui-dialog-content { - font-size: 11px; - } - } - - .logout-dialog.ui-widget-content { - font-size: 10px; - } - - .myFooter { - font-size: 16px; - } -} diff --git a/labs/meteor-client/app/client/stylesheets/portrait/users.less b/labs/meteor-client/app/client/stylesheets/portrait/users.less deleted file mode 100755 index 439e6f3ab9..0000000000 --- a/labs/meteor-client/app/client/stylesheets/portrait/users.less +++ /dev/null @@ -1,40 +0,0 @@ -@import "../variables"; - -@media all and (orientation: portrait), @mobile-portrait-with-keyboard { - #users { - -webkit-order: 3; - order: 3; - margin-bottom: 0px; - padding-bottom: 0px; - max-height: 20%; - min-height: 20%; - } -} - -/*desktop portrait*/ -@media @desktop-portrait { - #username { - display:block; - width:70%; - } - - #user-contents { - .userlist { - padding-top: 10px; - padding-left: 10px; - padding-right: 10px; - } - } - - .usernameEntry { - height: 20px; - font-size: 2vh; - } -} - -/*mobile*/ -@media all and (orientation: portrait) { - .usernameEntry { - font-size: 2vh; - } -} diff --git a/labs/meteor-client/app/client/stylesheets/portrait/whiteboard.less b/labs/meteor-client/app/client/stylesheets/portrait/whiteboard.less deleted file mode 100755 index 1fc3b95009..0000000000 --- a/labs/meteor-client/app/client/stylesheets/portrait/whiteboard.less +++ /dev/null @@ -1,8 +0,0 @@ -@import "../variables"; - -@media all and (orientation: portrait), @mobile-portrait-with-keyboard { - #whiteboard { - -webkit-order: 1; - order: 1; - } -} diff --git a/labs/meteor-client/app/client/stylesheets/style.less b/labs/meteor-client/app/client/stylesheets/style.less new file mode 100755 index 0000000000..fbd46f4362 --- /dev/null +++ b/labs/meteor-client/app/client/stylesheets/style.less @@ -0,0 +1,479 @@ +@import "variables"; +@import "mixins"; + +body { + background: extract(@white, 3); + bottom: 0; + color: extract(@darkGrey, 1); + left: 0; + right: 0; + @media @landscape { + height: 100%; + min-width: 768px; + position: absolute; + top: 0; + } + @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait { + position: relative; + top: 15px; + } +} + +.btn { + background-color: extract(@white, 2); +} + +.component { + .radius; + background: extract(@white, 1); + border: 1px solid extract(@lightGrey, 3); + float: left; + height: 100%; + margin-top: 10px; +} + +.extraConversationScrollableMenu { + height: auto; + max-height: 200px; + overflow-x: hidden; +} + +.mainContainer { + height: 95%; +} + +.myFooter { + color: black; + max-height: 20px; + padding-top: 13px; + text-align: center; + @media @landscape { + font-size: 10px; + } + @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait { + font-size: 18px; + } + @media @desktop-portrait { + font-size: 16px; + } +} + +.myNavbar { + margin-bottom: 0.5%; + border-bottom: 0px; + &.gradientBar { + .linear-gradient(rgb(72,76,85), rgb(65,68,77)); + } + .btn { + .linear-gradient(rgb(72,76,85), rgb(65,68,77)); + border-left: 1px solid extract(@darkGrey, 2); + border-right: 1px solid extract(@darkGrey, 4); + &.navbarIconToggleActive { + background: extract(@darkGrey, 3); + border-bottom: 4px solid extract(@azure, 1); + } + i { + color: extract(@white, 1); + } + } + @media @landscape { + min-width: 768px; + } + @media @mobile-portrait-with-keyboard, @mobile-portrait { + min-width: 630px; + } + @media @desktop-portrait { + min-width: 400px; + } +} + +.myNavbarMinimized { + background: extract(@white, 3); + height: 20px; + margin-bottom: 0.2%; + margin-top: 0px; + min-width: 900px; + padding-top: 0px; + text-align: right; +} + +.navbar { + min-height: 40px !important; +} + +.navbarFiller { + width: 100%; + @media @landscape { + height: 50px; + } +} + +.navbarIconToggleActive i { + color: extract(@lightGrey, 2); +} + +#navbarMinimizedButton { + margin-bottom: 0px; + margin-left: 2px; + margin-right: 20px; + margin-top: 0px; + position: absolute; + right: 0; + top: 0; +} + +.navbarMinimizedButtonSmall { + height: 10px; + width: 40px; +} + +.navbarMinimizedButtonLarge { + height: 50px; + width: 40px; +} + +.navbarSettingsButtons { + float: right; + .btn { + display: block; + float: right; + } +} + +.navbarTitle { + color: extract(@white, 1); + display: block; + float: left; + font-weight: bold; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + @media @landscape { + font-size: 16px; + padding-top: 13px; + width: 30% !important; + } + @media @mobile-portrait-with-keyboard, @mobile-portrait { + font-size: 30px; + padding-top: 30px; + padding-left: 5px; + height: 72px; + width: 70%; + margin-left: auto; + margin-right: auto; + } + @media @desktop-portrait { + font-size: 16px; + padding-top: 13px; + width: calc(~'100% - 102.4px'); + } +} + +.navbarUserButtons { + .btn { + border-radius: 0; + display: block; + float: left; + &:hover { + background: extract(@darkGrey, 3); + } + } + @media @landscape { + float: left; + } +} + +.navbarSettingsButtons .btn:hover { + background: extract(@darkGrey, 3); +} + +.panel-footer { + padding: 0; +} + +.recordingStatus { + background: none!important; + border: none; + margin-left: 10px; + padding: 0!important; +} + +.recordingStatusFalse { + color: maroon; +} + +.recordingStatusTrue { + color: green; +} + +.ScrollableWindowX { + width: 100%; + overflow-x: scroll; +} + +.ScrollableWindowY { + height: 100%; + overflow-y: scroll; + overflow:auto; +} + +.tab { + height: 40px; +} + +.table > thead > tr > th, +.table > tbody > tr > th, +.table > tfoot > tr > th, +.table > thead > tr > td, +.table > tbody > tr > td, +.table > tfoot > tr > td { + border-top: 0px; +} + +.title { + border-bottom: 1px solid extract(@lightGrey, 1); + color: extract(@darkGrey, 1); + font-weight: bold; + line-height: 2em; + margin: 0; + padding-bottom: 5px; + padding-left: 10px; + padding-top: 5px; + @media @desktop-portrait, @landscape { + font-size: 14px; + } + @media @mobile-portrait, @mobile-portrait-with-keyboard { + font-size: 30px; + } +} + +#main { + padding-top: 50px; + padding-left: 0.25%; + padding-right: 0.25%; + display: -moz-flex; + display: -ms-flexbox; + display: -ms-flex; + display: -webkit-flex; + display: flex; + @media @desktop-portrait { + padding-top: 0; + } + @media @landscape { + -webkit-flex-flow: row; + flex-flow: row; + } + @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait { + -webkit-flex-flow: column; + flex-flow: column; + flex-direction: column; + min-height: 125%; + max-height: 125%; + } +} + +/* Custom alert box */ + +.no-close .ui-dialog-titlebar-close { + display: none; /* no close button */ +} + +.logout-dialog.ui-dialog { + .ui-widget-header { + color: extract(@white, 1); + font-weight: bold; + background: extract(@darkGrey, 3); + @media @desktop-portrait, @landscape { + font-size: 12px; + } + } + .ui-dialog-content { + font-weight: bold; + text-align: center; + @media @desktop-portrait, @landscape { + font-size: 11px; + } + } +} + +.logout-dialog.ui-widget-content { + background: extract(@white, 3); + border: 5px solid extract(@darkGrey, 3); + @media @desktop-portrait, @landscape { + font-size: 10px; + } + @media @mobile-portrait-with-keyboard, @mobile-portrait { + font-size: 280%; + } +} + +.ui-widget-overlay { + z-index: 1031; +} + +.custom-button { + background-color: extract(@yellow, 1); +} + +.fullScreenPresentation { + width: 90% !important; + height: 90% !important; +} + +.halfScreen { + width: 44% !important; + height: 80% !important; +} + +.quarterScreen { + width: 22% !important; + height: 80% !important; +} + +.navbarButton { + @media @desktop-portrait, @landscape { + height: 50px; + width: 51.2px; + } + @media @mobile-portrait-with-keyboard, @mobile-portrait { + height: 100px; + width: 10%; + min-width: 60px; + } +} + +.navbarSection { + @media @landscape { + min-width: 256px; + width: 33%; + } +} + +.ion-volume-mute { + @media @desktop-portrait, @landscape { + font-size: 20px; + } + @media @mobile-portrait-with-keyboard, @mobile-portrait { + font-size: 35px; + } +} + +.glyphicon, .ion-android-hand { + @media @mobile-portrait-with-keyboard, @mobile-portrait { + font-size: 35px; + } +} + +.hiddenNavbarSection { + @media @landscape { + display: block !important; + } + @media @mobile-portrait-with-keyboard, @mobile-portrait { + display: none; + } +} + +.narrowedNavbarTitle { + @media @desktop-portrait { + width: calc(~'100% - 358.4px') !important; + } +} + +.collapseNavbarSection { + @media @landscape { + display: block !important; + } + @media @desktop-portrait { + display: none; + } +} + +#collapseButtonSection { + @media @landscape { + display: none; + } + @media @desktop-portrait { + display: block !important; + } +} + +.ui-dialog-buttonset { + @media @mobile-portrait-with-keyboard, @mobile-portrait { + width: 100%; + } + button { + @media @mobile-portrait-with-keyboard, @mobile-portrait { + width: 40%; + margin-left: 5% !important; + margin-right: 5% !important; + } + } +} + +/* Sliding menu */ + +.sliding-menu { + @media @mobile-portrait-with-keyboard, @mobile-portrait { + width: 15%; + height: 100%; + position: fixed; + top: 0; + left: -15%; + z-index: 1031; + &.sliding-menu-opened { + left: 0px; + } + a { + border-bottom: 1px solid #258ecd; + padding: 1em; + } + } +} + +.slideSection { + @media @mobile-portrait-with-keyboard, @mobile-portrait { + float: left; + margin-top: 100px; + height: 100%; + width: 100%; + margin-bottom: 0.5%; + &.gradientBar { + .linear-gradient(rgb(72,76,85), rgb(65,68,77)); + } + .btn { + .linear-gradient(rgb(72,76,85), rgb(65,68,77)); + border-left: 1px solid extract(@darkGrey, 2); + border-right: 1px solid extract(@darkGrey, 4); + &.navbarIconToggleActive { + background: extract(@darkGrey, 3); + border-bottom: 4px solid extract(@azure, 1); + } + i { + color: extract(@white, 1); + } + } + } +} + +.slideButton { + @media @mobile-portrait-with-keyboard, @mobile-portrait { + display: block; + width: 100%; + height: calc(~'20% - 20px'); + } +} + +#darkened-screen { + @media @mobile-portrait, @mobile-portrait-with-keyboard { + display: none; + background: black; + opacity: 0.7; + z-index: 1030; + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + } +} diff --git a/labs/meteor-client/app/client/stylesheets/users.less b/labs/meteor-client/app/client/stylesheets/users.less new file mode 100755 index 0000000000..cc66acf02f --- /dev/null +++ b/labs/meteor-client/app/client/stylesheets/users.less @@ -0,0 +1,89 @@ +@import "variables"; + +#content { + margin-top: 10px; + overflow: hidden; + width: 100%; +} + +#usericons { + float: right; + span { + margin-left: 3px; + padding: 2px; + border: 1px solid white; + } + .raisedHandIcon, .muteIcon { + &:hover { + cursor: pointer; + border: 1px solid #f2f2f2; + background-color: #f2f2f2; + border-radius: 4px; + } + } +} + +.usernameEntry { + float:left; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 60%; + @media @landscape { + height: 20px; + } + @media @desktop-portrait { + height: 20px; + } + @media @desktop-portrait, @mobile-portrait { + font-size: 2vh; + } +} + +#users { + margin-left: 0.25%; + margin-right: 0.25%; + padding-bottom: 10px; /*min-width:230px;*/ + -webkit-flex: 1 1 25%; + flex: 1 1 25%; + @media @landscape { + -webkit-order: 1; + order: 1; + min-width: 0; + } + @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait { + -webkit-order: 3; + order: 3; + margin-bottom: 0px; + padding-bottom: 0px; + max-height: 20%; + min-height: 20%; + } +} + +#user-contents { + .userlist { + @media @landscape { + padding:10px; + } + @media @desktop-portrait { + padding-top: 10px; + padding-left: 10px; + padding-right: 10px; + } + } +} + +.userCurrent { + font-weight: bold; +} + +#username { + @media @landscape { + display:block; + } + @media @desktop-portrait { + display:block; + width:70%; + } +} diff --git a/labs/meteor-client/app/client/stylesheets/whiteboard.less b/labs/meteor-client/app/client/stylesheets/whiteboard.less new file mode 100755 index 0000000000..4f8d47e2ab --- /dev/null +++ b/labs/meteor-client/app/client/stylesheets/whiteboard.less @@ -0,0 +1,51 @@ +@import "variables"; + +#whiteboard { + padding: 0 !important; + margin-left: 0.25%; + margin-right: 0.25%; + -webkit-flex: 2 2 50%; + -moz-flex: 2 2 50%; + -ms-flex: 2 2 50%; + flex: 2 2 50%; + min-width: 0; + @media @landscape { + -webkit-order: 2; + order: 2; + display: -moz-flex; + display: -ms-flexbox; + display: -ms-flex; + display: -webkit-flex; + display: flex; + } + @media @mobile-portrait-with-keyboard, @desktop-portrait, @mobile-portrait { + -webkit-order: 1; + order: 1; + } +} + +#whiteboard-paper { + background-color: white !important; + /*height: auto !important;*/ + margin-left: auto; + margin-right: auto; + #svggroup { + display: block; + height: 100% !important; + width: 100% !important; + } + @media @landscape { + position: relative; + top: 50%; + -webkit-transform: translateY(calc(~'-50% - 19px')); + -ms-transform: translateY(calc(~'-50% - 19px')); + transform: translateY(calc(~'-50% - 19px')); + } +} + +#whiteboard-navbar { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 100%; +}