From 3484b315cf09d1eeed586080772efbbb0d5363e2 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 20 Aug 2015 16:09:35 -0700 Subject: [PATCH 01/21] [Mobile] Sanding of mobile styles, cherry-pick to master open #74 CSS and markup changes for mobile that are good for master now; --- .../browse/res/templates/items/grid-item.html | 23 +- platform/commonUI/general/res/css/forms.css | 6 +- platform/commonUI/general/res/css/items.css | 197 +++++---- .../general/res/css/theme-espresso.css | 158 ++++--- platform/commonUI/general/res/css/tree.css | 58 ++- .../general/res/fonts/symbols/wtdsymbols.eot | Bin 11016 -> 11268 bytes .../general/res/fonts/symbols/wtdsymbols.svg | 2 + .../general/res/fonts/symbols/wtdsymbols.ttf | Bin 10840 -> 11092 bytes .../general/res/fonts/symbols/wtdsymbols.woff | Bin 10916 -> 11168 bytes .../commonUI/general/res/sass/_constants.scss | 1 + .../commonUI/general/res/sass/_icons.scss | 8 +- .../commonUI/general/res/sass/_mixins.scss | 401 +++++++++--------- .../general/res/sass/controls/_controls.scss | 1 - .../general/res/sass/items/_item.scss | 24 +- .../commonUI/general/res/sass/tree/_tree.scss | 12 +- 15 files changed, 448 insertions(+), 443 deletions(-) diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html index d27d088ee1..246a7b54b4 100644 --- a/platform/commonUI/browse/res/templates/items/grid-item.html +++ b/platform/commonUI/browse/res/templates/items/grid-item.html @@ -20,26 +20,21 @@ at runtime from the About dialog for additional information. --> -
-
+
+
-
- -
-
- -
P
-
+
O
+
{{type.getGlyph()}}
-
}
+
}
{{model.name}}
@@ -47,10 +42,10 @@ {{model.composition.length}} Items + + {{model.name}} +
-
- -
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index 7b9fa40b87..34a14c0107 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -433,7 +433,7 @@ input[type="text"] { margin: 0 0 2px 2px; overflow: hidden; position: relative; } - /* line 163, ../sass/_mixins.scss */ + /* line 167, ../sass/_mixins.scss */ .form-control.select:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -442,10 +442,10 @@ input[type="text"] { background-image: -webkit-linear-gradient(#636363, #575757); background-image: linear-gradient(#636363, #575757); color: #bdbdbd; } - /* line 166, ../sass/_mixins.scss */ + /* line 170, ../sass/_mixins.scss */ .form-control.select:not(.disabled):hover.btn-menu .invoke-menu { color: #878787; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .form-control.select.btn-menu .invoke-menu { color: #757575; } /* line 29, ../sass/forms/_selects.scss */ diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index 620ed931bc..af2c481a59 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -185,7 +185,7 @@ margin-bottom: 3px; margin-right: 3px; position: relative; } - /* line 163, ../sass/_mixins.scss */ + /* line 167, ../sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzcwNzA3MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -194,15 +194,15 @@ background-image: -webkit-linear-gradient(#707070, #636363); background-image: linear-gradient(#707070, #636363); color: #bdbdbd; } - /* line 166, ../sass/_mixins.scss */ + /* line 170, ../sass/_mixins.scss */ .items-holder .item.grid-item:not(.disabled):hover.btn-menu .invoke-menu { color: #949494; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .items-holder .item.grid-item.btn-menu .invoke-menu { color: #828282; } /* line 46, ../sass/items/_item.scss */ .items-holder .item.grid-item:hover .item-main .item-type { - color: #0099cc !important; } + color: deepskyblue !important; } /* line 48, ../sass/items/_item.scss */ .items-holder .item.grid-item:hover .item-main .item-type .l-icon-link { color: #49dedb; } @@ -211,35 +211,35 @@ opacity: 1; } /* line 57, ../sass/items/_item.scss */ .items-holder .item.grid-item .contents { - top: 5px; - right: 5px; - bottom: 5px; - left: 5px; } - /* line 61, ../sass/items/_item.scss */ + top: 10px; + right: 10px; + bottom: 10px; + left: 10px; } + /* line 63, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.top-bar.abs { bottom: auto; height: 20px; line-height: 20px; + text-align: right; z-index: 5; } - /* line 66, ../sass/items/_item.scss */ + /* line 69, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right { width: auto; } - /* line 68, ../sass/items/_item.scss */ + /* line 71, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon { margin-left: 3px; } - /* line 70, ../sass/items/_item.scss */ + /* line 73, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link { color: #49dedb; } - /* line 76, ../sass/items/_item.scss */ + /* line 79, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.bottom-bar.abs { top: auto; - height: 30px; - padding: 5px; } - /* line 82, ../sass/items/_item.scss */ + height: 30px; } + /* line 84, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main { line-height: 160px; z-index: 1; } - /* line 88, ../sass/items/_item.scss */ + /* line 90, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-type { overflow: false; position: absolute; @@ -249,24 +249,23 @@ left: 40px; width: auto; height: auto; - color: #737373; text-align: center; font-size: 96.9px; line-height: 102px; bottom: auto; height: 102px; top: 30px; } - /* line 100, ../sass/items/_item.scss */ + /* line 102, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-type .l-icon-link { - color: #1a8e8b; - height: 36px; - line-height: 36px; + color: #49dedb; + height: auto; + line-height: 100%; position: absolute; - font-size: 32px; + font-size: 0.3em; left: 0px; bottom: 10px; z-index: 2; } - /* line 112, ../sass/items/_item.scss */ + /* line 115, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-open { -moz-transition-property: "opacity"; -o-transition-property: "opacity"; @@ -286,13 +285,13 @@ width: 50px; pointer-events: none; text-align: right; } - /* line 124, ../sass/items/_item.scss */ + /* line 127, ../sass/items/_item.scss */ .items-holder .item.grid-item .title { text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; - color: #cccccc; overflow: hidden; + text-overflow: ellipsis; white-space: nowrap; - text-overflow: ellipsis; } + color: #cccccc; } /* line 132, ../sass/items/_item.scss */ .items-holder .item.grid-item .details { font-size: 0.8em; } @@ -318,7 +317,7 @@ color: #999; display: inline-block; color: #80dfff; } - /* line 163, ../sass/_mixins.scss */ + /* line 167, ../sass/_mixins.scss */ .items-holder .item.grid-item.selected:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJlY2JmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE0YzRmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -327,10 +326,10 @@ background-image: -webkit-linear-gradient(#2ecbff, #14c4ff); background-image: linear-gradient(#2ecbff, #14c4ff); color: #bdbdbd; } - /* line 166, ../sass/_mixins.scss */ + /* line 170, ../sass/_mixins.scss */ .items-holder .item.grid-item.selected:not(.disabled):hover.btn-menu .invoke-menu { color: #75ddff; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .items-holder .item.grid-item.selected.btn-menu .invoke-menu { color: #52d4ff; } /* line 140, ../sass/items/_item.scss */ @@ -368,82 +367,82 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 34, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .mobile-grid-nav { - top: 0px; - bottom: 0px; - right: 55px; } - /* line 39, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .mobile-info { - text-align: center; - width: 50px; - right: 0px; - left: auto; - font-size: 1.3em; } - /* line 47, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .bar.bottom-bar.abs { - top: 0px; - height: auto; } - /* line 54, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .item-main .item-type { - font-size: 30px; - top: 0px; - left: 0px; - text-align: left; - height: auto; } - /* line 61, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .item-main .item-open { - display: none; } - /* line 65, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .title, .items-holder .item.grid-item .details { - margin-left: 30px; } } + /* line 29, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item { + width: 100%; } + /* line 33, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item > .contents { + top: 0px; + right: 10px; + bottom: 0px; + left: 10px; } + /* line 37, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .bar.top-bar { + bottom: 0 !important; + left: auto !important; + right: 20px !important; + width: 40px !important; + height: auto !important; + text-align: right; } + /* line 44, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .bar.bottom-bar { + left: 40px; + right: 60px; } + /* line 52, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .item-main .item-type { + font-size: 30px; + right: auto; + bottom: auto; + left: 0; + line-height: 100%; + text-align: left; + width: 30px; } + /* line 61, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .item-main .item-type .l-icon-link { + bottom: 0; } + /* line 65, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .item-main .item-open { + display: block; + opacity: 1; + font-size: 1em; + width: auto; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 29, ../sass/mobile/_item.scss */ .items-holder .item.grid-item { - width: 100%; height: 50px; } - /* line 74, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .mobile-right { - top: 100%; } - /* line 77, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .mobile-info { - line-height: 25px; } - /* line 81, ../sass/mobile/_item.scss */ + /* line 78, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .bar.top-bar { + line-height: 50px !important; } + /* line 82, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .bar.bottom-bar { + top: 7px !important; + bottom: auto; + height: 35px; } + /* line 87, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .item-main .item-type { - line-height: 40px; } - /* line 85, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .title { - margin-right: 10px; - line-height: 25px; } - /* line 89, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .details { - margin-right: 10px; - line-height: 0px; } } + top: 10px !important; + bottom: auto; + height: 30px; } + /* line 90, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .item-main .item-open { + line-height: 50px; } } @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 29, ../sass/mobile/_item.scss */ .items-holder .item.grid-item { - width: 100%; - height: 66.66667px; } - /* line 99, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .mobile-right { - top: 100%; } - /* line 103, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .mobile-info { - line-height: 38px; } - /* line 107, ../sass/mobile/_item.scss */ + height: 66px; } + /* line 100, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .bar.top-bar { + line-height: 66px !important; } + /* line 104, ../sass/mobile/_item.scss */ + .items-holder .item.grid-item .bar.bottom-bar { + top: 15px !important; + bottom: auto; + height: 35px; } + /* line 109, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .item-main .item-type { - font-size: 30px; - line-height: 50px; } + top: 18px !important; + bottom: auto; + height: 30px; } /* line 112, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .title { - margin-right: 10px; - line-height: 38px; } - /* line 116, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item .details { - margin-right: 10px; - line-height: 0px; } } -@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 29, ../sass/mobile/_item.scss */ - .items-holder .item.grid-item { - width: 200px; - height: 200px; } } + .items-holder .item.grid-item .item-main .item-open { + line-height: 66px; } } diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index c38a68b58f..c0444d9990 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -1292,7 +1292,7 @@ mct-container { font-size: 1.65em; } /* line 48, ../sass/_icons.scss */ -.bar .icon { +.bar .ui-symbol { display: inline-block; } /* line 52, ../sass/_icons.scss */ @@ -1311,10 +1311,6 @@ mct-container { .super-menu.menu .type-icon { position: absolute; } -/* line 68, ../sass/_icons.scss */ -.tree-item .type-icon { - font-size: 16px; } - /* line 72, ../sass/_icons.scss */ .l-icon-link:before { content: "\f4"; } @@ -1769,7 +1765,7 @@ table { color: #999; display: inline-block; color: #ccf2ff; } - /* line 163, ../sass/_mixins.scss */ + /* line 167, ../sass/_mixins.scss */ .btn.major:not(.disabled):hover, .s-btn.major:not(.disabled):hover, .major.icon-btn:not(.disabled):hover, @@ -1781,13 +1777,13 @@ table { background-image: -webkit-linear-gradient(#2ecbff, #14c4ff); background-image: linear-gradient(#2ecbff, #14c4ff); color: #bdbdbd; } - /* line 166, ../sass/_mixins.scss */ + /* line 170, ../sass/_mixins.scss */ .btn.major:not(.disabled):hover.btn-menu .invoke-menu, .s-btn.major:not(.disabled):hover.btn-menu .invoke-menu, .major.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, .major.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu { color: #75ddff; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .btn.major.btn-menu .invoke-menu, .s-btn.major.btn-menu .invoke-menu, .major.btn-menu.icon-btn .invoke-menu, @@ -1817,7 +1813,7 @@ table { border-top: 1px solid #2ecbff; color: #ccf2ff; display: inline-block; } - /* line 163, ../sass/_mixins.scss */ + /* line 167, ../sass/_mixins.scss */ .btn.major:hover:not(.disabled):hover, .s-btn.major:hover:not(.disabled):hover, .major.icon-btn:hover:not(.disabled):hover, @@ -1829,13 +1825,13 @@ table { background-image: -webkit-linear-gradient(#47d1ff, #2ecbff); background-image: linear-gradient(#47d1ff, #2ecbff); color: white; } - /* line 166, ../sass/_mixins.scss */ + /* line 170, ../sass/_mixins.scss */ .btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu, .s-btn.major:hover:not(.disabled):hover.btn-menu .invoke-menu, .major.icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu, .major.s-icon-btn:hover:not(.disabled):hover.btn-menu .invoke-menu { color: #8fe3ff; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .btn.major:hover.btn-menu .invoke-menu, .s-btn.major:hover.btn-menu .invoke-menu, .major.icon-btn:hover.btn-menu .invoke-menu, @@ -1871,7 +1867,7 @@ table { border-top: 1px solid #8a8a8a; color: #cccccc; display: inline-block; } - /* line 163, ../sass/_mixins.scss */ + /* line 167, ../sass/_mixins.scss */ .btn.subtle:not(.disabled):hover, .s-btn.subtle:not(.disabled):hover, .subtle.icon-btn:not(.disabled):hover, @@ -1883,13 +1879,13 @@ table { background-image: -webkit-linear-gradient(#969696, #8a8a8a); background-image: linear-gradient(#969696, #8a8a8a); color: #f0f0f0; } - /* line 166, ../sass/_mixins.scss */ + /* line 170, ../sass/_mixins.scss */ .btn.subtle:not(.disabled):hover.btn-menu .invoke-menu, .s-btn.subtle:not(.disabled):hover.btn-menu .invoke-menu, .subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, .subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu { color: #bababa; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .btn.subtle.btn-menu .invoke-menu, .s-btn.subtle.btn-menu .invoke-menu, .subtle.btn-menu.icon-btn .invoke-menu, @@ -1922,7 +1918,7 @@ table { border-top: 1px solid #575757; color: #999; display: inline-block; } - /* line 163, ../sass/_mixins.scss */ + /* line 167, ../sass/_mixins.scss */ .btn.very-subtle:not(.disabled):hover, .btn.s-very-subtle:not(.disabled):hover, .s-btn.very-subtle:not(.disabled):hover, .very-subtle.icon-btn:not(.disabled):hover, @@ -1937,7 +1933,7 @@ table { background-image: -webkit-linear-gradient(#636363, #575757); background-image: linear-gradient(#636363, #575757); color: #bdbdbd; } - /* line 166, ../sass/_mixins.scss */ + /* line 170, ../sass/_mixins.scss */ .btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .s-btn.very-subtle:not(.disabled):hover.btn-menu .invoke-menu, .very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, @@ -1946,7 +1942,7 @@ table { .s-very-subtle.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, .s-very-subtle.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu { color: #878787; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .btn.very-subtle.btn-menu .invoke-menu, .btn.s-very-subtle.btn-menu .invoke-menu, .s-btn.very-subtle.btn-menu .invoke-menu, .very-subtle.btn-menu.icon-btn .invoke-menu, @@ -1982,7 +1978,7 @@ table { border-top: 1px solid #fe9510; color: #fff; display: inline-block; } - /* line 163, ../sass/_mixins.scss */ + /* line 167, ../sass/_mixins.scss */ .btn.very-subtle.paused:not(.disabled):hover, .btn.s-very-subtle.paused:not(.disabled):hover, .s-btn.very-subtle.paused:not(.disabled):hover, .very-subtle.paused.icon-btn:not(.disabled):hover, @@ -1997,7 +1993,7 @@ table { background-image: -webkit-linear-gradient(#fea029, #fe9510); background-image: linear-gradient(#fea029, #fe9510); color: white; } - /* line 166, ../sass/_mixins.scss */ + /* line 170, ../sass/_mixins.scss */ .btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .btn.s-very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .s-btn.very-subtle.paused:not(.disabled):hover.btn-menu .invoke-menu, .very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, @@ -2006,7 +2002,7 @@ table { .s-very-subtle.paused.icon-btn:not(.disabled):hover.btn-menu .invoke-menu, .s-very-subtle.paused.s-icon-btn:not(.disabled):hover.btn-menu .invoke-menu { color: #fec070; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .btn.very-subtle.paused.btn-menu .invoke-menu, .btn.s-very-subtle.paused.btn-menu .invoke-menu, .s-btn.very-subtle.paused.btn-menu .invoke-menu, .very-subtle.paused.btn-menu.icon-btn .invoke-menu, @@ -2351,13 +2347,13 @@ label.checkbox.custom { padding-left: 19px; position: relative; vertical-align: top; } - /* line 205, ../sass/controls/_controls.scss */ + /* line 204, ../sass/controls/_controls.scss */ label.checkbox.custom em { color: #999; display: inline-block; height: 14px; min-width: 14px; } - /* line 210, ../sass/controls/_controls.scss */ + /* line 209, ../sass/controls/_controls.scss */ label.checkbox.custom em:before { -moz-border-radius: 1.5px; -webkit-border-radius: 1.5px; @@ -2376,51 +2372,51 @@ label.checkbox.custom { top: 0; position: absolute; text-align: center; } - /* line 228, ../sass/controls/_controls.scss */ + /* line 227, ../sass/controls/_controls.scss */ label.checkbox.custom.no-text { overflow: hidden; margin-right: 0; padding-left: 0; height: 14px; width: 14px; } - /* line 234, ../sass/controls/_controls.scss */ + /* line 233, ../sass/controls/_controls.scss */ label.checkbox.custom.no-text em { overflow: hidden; } - /* line 238, ../sass/controls/_controls.scss */ + /* line 237, ../sass/controls/_controls.scss */ label.checkbox.custom input { display: none; } - /* line 240, ../sass/controls/_controls.scss */ + /* line 239, ../sass/controls/_controls.scss */ label.checkbox.custom input:checked ~ em:before { background: #0099cc; color: #ccf2ff; content: "2"; } -/* line 248, ../sass/controls/_controls.scss */ +/* line 247, ../sass/controls/_controls.scss */ .input-labeled { margin-left: 5px; } - /* line 250, ../sass/controls/_controls.scss */ + /* line 249, ../sass/controls/_controls.scss */ .input-labeled label { display: inline-block; margin-right: 3px; } - /* line 254, ../sass/controls/_controls.scss */ + /* line 253, ../sass/controls/_controls.scss */ .input-labeled.inline { display: inline-block; } - /* line 257, ../sass/controls/_controls.scss */ + /* line 256, ../sass/controls/_controls.scss */ .input-labeled:first-child { margin-left: 0; } -/* line 262, ../sass/controls/_controls.scss */ +/* line 261, ../sass/controls/_controls.scss */ .btn-menu label.checkbox.custom { margin-left: 5px; } -/* line 267, ../sass/controls/_controls.scss */ +/* line 266, ../sass/controls/_controls.scss */ .item .checkbox.checked label { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-bottom: none; } -/* line 273, ../sass/controls/_controls.scss */ +/* line 272, ../sass/controls/_controls.scss */ .btn-menu { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2458,7 +2454,7 @@ label.checkbox.custom { color: lighten($c, 10%); } }*/ } - /* line 163, ../sass/_mixins.scss */ + /* line 167, ../sass/_mixins.scss */ .btn-menu:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2467,37 +2463,37 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#636363, #575757); background-image: linear-gradient(#636363, #575757); color: #bdbdbd; } - /* line 166, ../sass/_mixins.scss */ + /* line 170, ../sass/_mixins.scss */ .btn-menu:not(.disabled):hover.btn-menu .invoke-menu { color: #878787; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .btn-menu.btn-menu .invoke-menu { color: #757575; } - /* line 285, ../sass/controls/_controls.scss */ + /* line 284, ../sass/controls/_controls.scss */ .btn-menu:not(.disabled):hover { color: #cccccc; } - /* line 310, ../sass/controls/_controls.scss */ + /* line 309, ../sass/controls/_controls.scss */ .btn-menu .name { margin-left: 5px; } - /* line 313, ../sass/controls/_controls.scss */ + /* line 312, ../sass/controls/_controls.scss */ .btn-menu .menu { position: absolute; left: 0; text-align: left; } - /* line 318, ../sass/controls/_controls.scss */ + /* line 317, ../sass/controls/_controls.scss */ .btn-menu .menu .ui-symbol.icon { width: 12px; } -/* line 324, ../sass/controls/_controls.scss */ +/* line 323, ../sass/controls/_controls.scss */ .top-bar .btn-menu { height: 25px; line-height: 25px; padding-right: 10px; } - /* line 332, ../sass/controls/_controls.scss */ + /* line 331, ../sass/controls/_controls.scss */ .top-bar .btn-menu.browse-btn { margin-right: 5px; padding-left: 25px; } - /* line 335, ../sass/controls/_controls.scss */ + /* line 334, ../sass/controls/_controls.scss */ .top-bar .btn-menu.browse-btn .badge { -moz-border-radius: 4.5px; -webkit-border-radius: 4.5px; @@ -2513,14 +2509,14 @@ label.checkbox.custom { width: 15px; height: auto; } -/* line 351, ../sass/controls/_controls.scss */ +/* line 350, ../sass/controls/_controls.scss */ .context-available { color: #0099cc; } - /* line 355, ../sass/controls/_controls.scss */ + /* line 354, ../sass/controls/_controls.scss */ .context-available:hover { color: deepskyblue; } -/* line 360, ../sass/controls/_controls.scss */ +/* line 359, ../sass/controls/_controls.scss */ .view-switcher { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -2536,37 +2532,37 @@ label.checkbox.custom { transition-timing-function: ease-in-out; } /******************************************************** OBJECT-HEADER */ -/* line 365, ../sass/controls/_controls.scss */ +/* line 364, ../sass/controls/_controls.scss */ .object-header { display: inline-block; font-size: 1em; } - /* line 369, ../sass/controls/_controls.scss */ + /* line 368, ../sass/controls/_controls.scss */ .object-header .label .title-label { color: white; } - /* line 372, ../sass/controls/_controls.scss */ + /* line 371, ../sass/controls/_controls.scss */ .object-header .label .type-icon { font-size: 120%; margin-right: 5px; vertical-align: middle; } - /* line 377, ../sass/controls/_controls.scss */ + /* line 376, ../sass/controls/_controls.scss */ .object-header .label .context-available { opacity: 0; font-size: 0.8em; } - /* line 382, ../sass/controls/_controls.scss */ + /* line 381, ../sass/controls/_controls.scss */ .object-header .label:hover .context-available { opacity: 1; } -/* line 391, ../sass/controls/_controls.scss */ +/* line 390, ../sass/controls/_controls.scss */ .top-bar .object-header, .object-browse-bar .object-header { font-size: 1.1em; } - /* line 393, ../sass/controls/_controls.scss */ + /* line 392, ../sass/controls/_controls.scss */ .top-bar .object-header span, .object-browse-bar .object-header span { display: inline-block; } /******************************************************** SLIDERS */ -/* line 405, ../sass/controls/_controls.scss */ +/* line 404, ../sass/controls/_controls.scss */ .slider .slot { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2587,7 +2583,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 416, ../sass/controls/_controls.scss */ +/* line 415, ../sass/controls/_controls.scss */ .slider .knob { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2616,7 +2612,7 @@ label.checkbox.custom { auto: 0; bottom: auto; left: auto; } - /* line 163, ../sass/_mixins.scss */ + /* line 167, ../sass/_mixins.scss */ .slider .knob:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2625,13 +2621,13 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#636363, #575757); background-image: linear-gradient(#636363, #575757); color: #bdbdbd; } - /* line 166, ../sass/_mixins.scss */ + /* line 170, ../sass/_mixins.scss */ .slider .knob:not(.disabled):hover.btn-menu .invoke-menu { color: #878787; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .slider .knob.btn-menu .invoke-menu { color: #757575; } - /* line 187, ../sass/_mixins.scss */ + /* line 191, ../sass/_mixins.scss */ .slider .knob:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -2655,7 +2651,7 @@ label.checkbox.custom { left: 2px; bottom: 5px; top: 5px; } - /* line 209, ../sass/_mixins.scss */ + /* line 213, ../sass/_mixins.scss */ .slider .knob:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -2670,12 +2666,12 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #0099cc; } - /* line 427, ../sass/controls/_controls.scss */ + /* line 426, ../sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 434, ../sass/controls/_controls.scss */ +/* line 433, ../sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -2686,12 +2682,12 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 444, ../sass/controls/_controls.scss */ + /* line 443, ../sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ -/* line 452, ../sass/controls/_controls.scss */ +/* line 451, ../sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2708,7 +2704,7 @@ label.checkbox.custom { height: 10px; width: 10px; } -/* line 458, ../sass/controls/_controls.scss */ +/* line 457, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2726,7 +2722,7 @@ label.checkbox.custom { -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; border-top: 1px solid gray; } - /* line 465, ../sass/controls/_controls.scss */ + /* line 464, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2735,7 +2731,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#808080, #737373 20px); background-image: linear-gradient(#808080, #737373 20px); } -/* line 470, ../sass/controls/_controls.scss */ +/* line 469, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.4); } @@ -2827,14 +2823,14 @@ label.checkbox.custom { padding: 3px 0; position: absolute; z-index: 10; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .menu-element .menu.btn-menu .invoke-menu { color: #828282; } /* line 37, ../sass/controls/_menus.scss */ .menu-element .menu ul { margin: 0; padding: 0; } - /* line 309, ../sass/_mixins.scss */ + /* line 314, ../sass/_mixins.scss */ .menu-element .menu ul li { list-style-type: none; margin: 0; @@ -2885,7 +2881,7 @@ label.checkbox.custom { border-top: 1px solid #919191; color: #999; display: inline-block; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .menu-element .context-menu.btn-menu .invoke-menu, .menu-element .super-menu.btn-menu .invoke-menu { color: #b0b0b0; } @@ -3711,7 +3707,7 @@ input[type="text"] { color: #cccccc; outline: none; padding: 0 3px; } - /* line 275, ../sass/_mixins.scss */ + /* line 280, ../sass/_mixins.scss */ input[type="text"].error { background: rgba(255, 0, 0, 0.5); } /* line 29, ../sass/forms/_text-input.scss */ @@ -3765,7 +3761,7 @@ input[type="text"] { margin: 0 0 2px 2px; overflow: hidden; position: relative; } - /* line 163, ../sass/_mixins.scss */ + /* line 167, ../sass/_mixins.scss */ .form-control.select:not(.disabled):hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzYzNjM2MyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU3NTc1NyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -3774,10 +3770,10 @@ input[type="text"] { background-image: -webkit-linear-gradient(#636363, #575757); background-image: linear-gradient(#636363, #575757); color: #bdbdbd; } - /* line 166, ../sass/_mixins.scss */ + /* line 170, ../sass/_mixins.scss */ .form-control.select:not(.disabled):hover.btn-menu .invoke-menu { color: #878787; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .form-control.select.btn-menu .invoke-menu { color: #757575; } /* line 29, ../sass/forms/_selects.scss */ @@ -3856,7 +3852,7 @@ input[type="text"] { max-height: 400px; overflow: auto; padding: 5px; } - /* line 275, ../sass/_mixins.scss */ + /* line 280, ../sass/_mixins.scss */ .channel-selector .treeview.error { background: rgba(255, 0, 0, 0.5); } /* line 36, ../sass/forms/_channel-selector.scss */ @@ -3956,7 +3952,7 @@ input[type="text"] { padding: 0 3px; background: #3b3b3b; border-bottom: 1px solid #4d4d4d; } - /* line 275, ../sass/_mixins.scss */ + /* line 280, ../sass/_mixins.scss */ .filter input.filter.error, .filter input.t-filter-input.error, .t-filter input.filter.error, @@ -4394,7 +4390,7 @@ input[type="text"] { bottom: 15%; left: 15%; z-index: 101; } - /* line 171, ../sass/_mixins.scss */ + /* line 175, ../sass/_mixins.scss */ .overlay > .holder.btn-menu .invoke-menu { color: #757575; } /* line 45, ../sass/overlay/_overlay.scss */ @@ -4919,7 +4915,7 @@ input[type="text"] { right: 0; width: auto; height: 5px; } - /* line 187, ../sass/_mixins.scss */ + /* line 191, ../sass/_mixins.scss */ .split-layout.horizontal > .splitter:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -4943,7 +4939,7 @@ input[type="text"] { top: 2px; left: 5px; right: 5px; } - /* line 209, ../sass/_mixins.scss */ + /* line 213, ../sass/_mixins.scss */ .split-layout.horizontal > .splitter:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -4973,7 +4969,7 @@ input[type="text"] { bottom: 0; cursor: col-resize; width: 5px; } - /* line 187, ../sass/_mixins.scss */ + /* line 191, ../sass/_mixins.scss */ .split-layout.vertical > .splitter:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; @@ -4997,7 +4993,7 @@ input[type="text"] { left: 2px; bottom: 5px; top: 5px; } - /* line 209, ../sass/_mixins.scss */ + /* line 213, ../sass/_mixins.scss */ .split-layout.vertical > .splitter:not(.disabled):hover:before { -moz-transition-property: "border-color"; -o-transition-property: "border-color"; diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index b80e1ff5f9..e6387a1cbe 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -152,7 +152,7 @@ ul.tree { margin: 0; padding: 0; } - /* line 309, ../sass/_mixins.scss */ + /* line 314, ../sass/_mixins.scss */ ul.tree li { list-style-type: none; margin: 0; @@ -200,25 +200,23 @@ ul.tree { left: 15px; } /* line 60, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon { - overflow: false; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - width: auto; - height: auto; text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; + font-size: 16px; color: #0099cc; left: 5px; + position: absolute; + top: 4px !important; + bottom: auto; + height: 16px; + line-height: 100%; right: auto; - width: 1em; } - /* line 68, ../sass/tree/_tree.scss */ + width: 16px; } + /* line 73, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { text-shadow: black 0 1px 2px; position: absolute; z-index: 2; } - /* line 74, ../sass/tree/_tree.scss */ + /* line 79, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { color: #ff3c00; font-size: 8px; @@ -227,7 +225,7 @@ ul.tree { width: 8px; top: 1px; right: -2px; } - /* line 80, ../sass/tree/_tree.scss */ + /* line 85, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon .icon.l-icon-link { color: #49dedb; font-size: 8px; @@ -235,8 +233,8 @@ ul.tree { height: 8px; width: 8px; left: -3px; - bottom: 5px; } - /* line 89, ../sass/tree/_tree.scss */ + bottom: 0px; } + /* line 93, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .title-label { overflow: hidden; position: absolute; @@ -251,53 +249,53 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 100, ../sass/tree/_tree.scss */ + /* line 104, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading { pointer-events: none; } - /* line 102, ../sass/tree/_tree.scss */ + /* line 106, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .label { opacity: 0.5; } - /* line 104, ../sass/tree/_tree.scss */ + /* line 108, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .label .title-label { font-style: italic; } - /* line 108, ../sass/tree/_tree.scss */ + /* line 112, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .wait-spinner { margin-left: 14px; } - /* line 113, ../sass/tree/_tree.scss */ + /* line 117, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected { background: #005177; color: #fff; } - /* line 117, ../sass/tree/_tree.scss */ + /* line 121, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected .view-control { color: #0099cc; } - /* line 120, ../sass/tree/_tree.scss */ + /* line 124, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected .label .type-icon { color: #fff; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 128, ../sass/tree/_tree.scss */ + /* line 132, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 131, ../sass/tree/_tree.scss */ + /* line 135, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover .context-trigger { display: block; } - /* line 134, ../sass/tree/_tree.scss */ + /* line 138, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover .icon { color: #33ccff; } } - /* line 141, ../sass/tree/_tree.scss */ + /* line 145, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.loading) { cursor: pointer; } - /* line 145, ../sass/tree/_tree.scss */ + /* line 149, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 151, ../sass/tree/_tree.scss */ + /* line 155, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } - /* line 160, ../sass/tree/_tree.scss */ + /* line 164, ../sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } @@ -327,7 +325,7 @@ ul.tree { ul.tree { margin: 0; padding: 0; } - /* line 309, ../sass/_mixins.scss */ + /* line 314, ../sass/_mixins.scss */ ul.tree li { list-style-type: none; margin: 0; diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.eot index 2f4f938076289ee0821dad90fe6140302391fa27..aaab92d345f6ad0d43369f6c3405c70236496808 100755 GIT binary patch delta 510 zcmeAOYl&cE(P3Z+(Voa=#=^d-@AX87iS?)6A7@}-lmTL!^u*!<1_lNJ1_q`GAkC4U zQ<-*o8#1wYX^G_KV)PZUk%rbxi><3sxfqV}jUnL{Aq{4}vMHtA> z0h$+(lb@Ve`?@5Efk9&rP<~ZzVnqQ%5<@uygJuShuaK9Rn<^oH|t=F@>GawUB{9O#vuxmH`xCKfodk + + \ No newline at end of file diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.ttf index 37af03fa794efb79373c205f3fe8cea1d2a76f7c..f6cf40ef12a279d8cdaa2add220a6bd2e683761c 100755 GIT binary patch delta 493 zcmcZ+awTknV*RQ2#~BzHWq{ZwJ+Ziefq_AQfq^LkNOPp;RHj|t`1&4@pTNMNvLPci zF@;_9{8I)7b)XssvkagB`vDeFAm0PXSINjNsc>Rv5eD*efaV3{TAzAg!3V9?kD zlwXybSW&=`#8A$_pqT;WE952Srb@_Pc^d~5=m2V1Rghm?!oUoaV$e33xZ@-v$K)o) zZe~|0!Oa3p!OHa_42nQiN_gMX^;^yM);!F%#ySoDd zx_4*6Xhw&I0|(%U`2eyUNX=gqd7#xm`~M$cVPHPM0J2X9VPhKHN>L**Q4uy}B{fqM zGh<;zQ)5$QQ$;~zQB2!Sy}eCA_`tu0h6Y9l2Tc1LAPP*qfevYC_|MQVIYRY<%A;ZV~(<#3clZGe#f|VJKzb S1u14=nyknqyt!ZFBqIQg)shMT delta 242 zcmcZ-b|YkhV*RoAM;RCxWq{ZwJ+Ziefq_AQfq^LkNOPp;RHg-W-204 zi4_G52@K^73>rB=zCvDNZmNX*mA7#~fgYfSRR#IQB@E0!DF!Wzi91d*vQ2Jc>}GbB z;@>R56s$ZsSna5c(mBDI@%%Pl8Ms+M>KHEmV5or6lTFmk8G|^n5;H diff --git a/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff b/platform/commonUI/general/res/fonts/symbols/wtdsymbols.woff index c93e44215ce309336ac305b4a5b954dad544db38..aaf58a7f76fe5205d1dd0645d2cea7f03cb85da2 100755 GIT binary patch delta 560 zcmZ1yx*%Mv+~3WOfsp|Sv==aNgXs_krpbv+ViR>#>rcHuo}O4-z`($?1SrJ;#RBO$ zm1#h+H4F?Y8$kH-#@F{UQWH}c7}R5cYRo{GUG)6Z44@!TYzmOC0>bPESVS{&ODce3 zI~W)k13=h`okch&KN+Y_6J-7>5Uzb)5|o=*QJ@19+yWF(0OKTv^1Q^{RG`=uphloV z##QoH-o_Q=7ncBC-!SpdMMjRv=NP-$U8MvWm>C#>o^aW`go#_ZUW7prs9K4SNmN9R z$=Jw_$<#!TNtuydon75r-CW#UoL!uWA!~PcKtT8IEEvt`&~V@Y95Ek2mIJBziy{wn zAu|KR{{t)x%m)}i_5s}vv#}m-rKpjZs0f>~lA5WBnX#~#>yN!Znx0r(z`($?1SrJ;#RBO$ zm1#h+H4F^O2S7Ne`_9yi)Wj492DKcZ8Z!`P=W{L0015)dKzda`nEe2Ya7J!P1yJk+ z0|TQ62wSnU24xoSn7$-24=OyN*0>y3sHLe0- z`73YZ3i69ffUa+u_~#-c+vIbM-R#a%{0z(tj6hGgY+k~|tvq?Y+EE#$bAmJD`E9;3 waI*kSV_>-Wg8}Fc2tBz$-JCIK^A2@)#>woOOSmTqJ^;#qLM3SPF3o3*0JF Date: Thu, 20 Aug 2015 16:11:45 -0700 Subject: [PATCH 02/21] [Mobile] Sanding of mobile styles, in progress open #74 CSS and markup changes for mobile, particularly on grid-item; Mod to behavior in tree for mobile nav: leaf node grid-item click now navs to item; Fixed info-button to work properly with mod to infoButtonGesture.js; --- .../browse/res/templates/items/grid-item.html | 2 +- .../general/res/sass/mobile/_constants.scss | 7 +- .../general/res/sass/mobile/_item.scss | 121 ++++++++---------- .../general/res/templates/tree-node.html | 6 +- .../inspect/res/templates/info-button.html | 5 +- .../inspect/src/gestures/InfoButtonGesture.js | 2 +- 6 files changed, 66 insertions(+), 77 deletions(-) diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html index 246a7b54b4..f1fd6dd5ee 100644 --- a/platform/commonUI/browse/res/templates/items/grid-item.html +++ b/platform/commonUI/browse/res/templates/items/grid-item.html @@ -24,7 +24,7 @@
O
- +
diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 6a3a32c0db..d69084086e 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -21,11 +21,12 @@ *****************************************************************************/ /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ -$mobile-listIcon: 30px; +$mobileListIconSize: 30px; +$mobileTitleDescH: 35px; $mobile-listRight: 10px; -$phone-itemHeight: $ueBrowseGridItemLg/4; -$tablet-itemHeight: $ueBrowseGridItemLg/3; +$phoneItemH: floor($ueBrowseGridItemLg/4); +$tabletItemH: floor($ueBrowseGridItemLg/3); /************************** MOBILE TREE MENU DIMENSIONS */ $mobile-treeHeight: 38px; diff --git a/platform/commonUI/general/res/sass/mobile/_item.scss b/platform/commonUI/general/res/sass/mobile/_item.scss index 88f08cb343..717e589cb5 100644 --- a/platform/commonUI/general/res/sass/mobile/_item.scss +++ b/platform/commonUI/general/res/sass/mobile/_item.scss @@ -27,103 +27,92 @@ .items-holder { .item { &.grid-item { - $dWid: $ueBrowseGridItemLg; - $dHei: $ueBrowseGridItemLg; + $titleH: 30px; @include phoneandtablet { - $dWid: 100%; - .mobile-grid-nav { - top: 0px; - bottom: 0px; - right: 55px; - } - .mobile-info { - text-align: center; - width: 50px; - right: 0px; - left: auto; - font-size: 1.3em; + width: 100%; + >.contents { + top: 0px; right: $interiorMarginLg; bottom: 0px; left: $interiorMarginLg; } .bar { - &.bottom-bar.abs { - top: 0px; - height: auto; + &.top-bar { + // Becomes the right side of the item + //@include test(blue); + bottom: 0 !important; left: auto !important; right: 20px !important; + width: 40px !important; height: auto !important; + text-align: right; + } + &.bottom-bar { + // Becomes the left side of the item + left: $mobileListIconSize + $interiorMarginLg; + right: 60px; } } .item-main { .item-type { - font-size: $mobile-listIcon; - top: 0px; - left: 0px; + //@include test(blue); + font-size: $mobileListIconSize; + right: auto; + bottom: auto; + left: 0; + line-height: 100%; text-align: left; - height: auto + width: $mobileListIconSize; + .l-icon-link { + bottom: 0; + } } .item-open { - display: none; + display: block; + opacity: 1; + font-size: 1em; + width: auto; } } - .title, .details { - margin-left: $mobile-listIcon; - } } @include phone { - $dHei: $phone-itemHeight; - width: $dWid; + $dHei: $phoneItemH; height: $dHei; - .mobile-right { - top: 100%; - } - .mobile-info { - line-height: $phone-itemHeight * .5; + .bar { + &.top-bar { + // Becomes the right side of the item + line-height: $dHei !important; + } + &.bottom-bar { + @include verticalCenterBlock($dHei, $mobileTitleDescH); + } } .item-main { .item-type { - line-height: $phone-itemHeight * .8; + @include verticalCenterBlock($dHei, $mobileListIconSize); + } + .item-open { + line-height: $dHei; } } - .title { - margin-right: $mobile-listRight; - line-height: $phone-itemHeight * .5; - } - .details { - margin-right: $mobile-listRight; - line-height: 0px; - } } @include tablet { - $dHei: $tablet-itemHeight; - width: $dWid; + $dHei: $tabletItemH; height: $dHei; - .mobile-right { - top: 100%; - } - - .mobile-info { - line-height: $tablet-itemHeight * .57; + .bar { + &.top-bar { + // Becomes the right side of the item + line-height: $dHei !important; + } + &.bottom-bar { + @include verticalCenterBlock($dHei, $mobileTitleDescH); + } } .item-main { .item-type { - font-size: $mobile-listIcon; - line-height: $tablet-itemHeight * .75; + @include verticalCenterBlock($dHei, $mobileListIconSize); + } + .item-open { + line-height: $dHei; } } - .title { - margin-right: $mobile-listRight; - line-height: $tablet-itemHeight * .57; - } - .details { - margin-right: $mobile-listRight; - line-height: 0px; - } - } - - @include desktop { - $dWid: $ueBrowseGridItemLg; - $dHei: $ueBrowseGridItemLg; - width: $dWid; - height: $dHei; } } } diff --git a/platform/commonUI/general/res/templates/tree-node.html b/platform/commonUI/general/res/templates/tree-node.html index 39d6c064e6..0075b65045 100644 --- a/platform/commonUI/general/res/templates/tree-node.html +++ b/platform/commonUI/general/res/templates/tree-node.html @@ -25,12 +25,12 @@ class="tree-item menus-to-left" ng-class="{selected: treeNode.isSelected()}" > - -
- i -
+ + diff --git a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js index d128392534..9dd3cf251c 100644 --- a/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js +++ b/platform/commonUI/inspect/src/gestures/InfoButtonGesture.js @@ -68,7 +68,7 @@ define( // and then on any body touch the bubble is dismissed function showBubble(event) { trackPosition(event); - + event.stopPropagation(); // Show the bubble, but on any touchstart on the // body (anywhere) call hidebubble dismissBubble = infoService.display( From da8eb334e3766d2f0fb1be2d2339ec910bb7edae Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Thu, 20 Aug 2015 18:36:44 -0700 Subject: [PATCH 03/21] [Mobile] Sanding of mobile styles continues, in progress open #74 CSS and markup changes for split pane holders; drop shadow added to tree area; Tree item cleanups; This or earlier commit broke treeview nav action; TO-DO: fix treeview nav action to hide menu; --- .../commonUI/browse/res/templates/browse.html | 23 ++-- .../res/templates/browse/object-header.html | 4 +- platform/commonUI/general/res/css/items.css | 18 +-- .../general/res/css/theme-espresso.css | 105 ++++++++++------- platform/commonUI/general/res/css/tree.css | 109 ++++++++---------- .../commonUI/general/res/sass/_constants.scss | 1 + .../commonUI/general/res/sass/_mixins.scss | 2 +- .../general/res/sass/items/_item.scss | 4 +- .../general/res/sass/mobile/_constants.scss | 10 +- .../general/res/sass/mobile/_layout.scss | 58 ++++++---- .../general/res/sass/mobile/_tree.scss | 27 +++-- .../res/sass/mobile/controls/_menus.scss | 2 +- .../commonUI/general/res/sass/tree/_tree.scss | 3 +- 13 files changed, 202 insertions(+), 164 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 2aadc0234e..ce7cb41cb1 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -20,30 +20,31 @@ at runtime from the About dialog for additional information. --> -
+
-
- - -
+
+
+ + +
+
-
+
-
m
-
+
m
+
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index 84cc087bbc..72f7b3e57f 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -22,9 +22,9 @@
- {{type.getGlyph()}} + {{type.getGlyph()}} {{parameters.mode}} - {{type.getName()}} + {{model.name}} diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index af2c481a59..9ea92fa707 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -216,23 +216,23 @@ bottom: 10px; left: 10px; } /* line 63, ../sass/items/_item.scss */ - .items-holder .item.grid-item .bar.top-bar.abs { + .items-holder .item.grid-item .bar.top-bar { bottom: auto; height: 20px; line-height: 20px; text-align: right; z-index: 5; } /* line 69, ../sass/items/_item.scss */ - .items-holder .item.grid-item .bar.top-bar.abs .left, .items-holder .item.grid-item .bar.top-bar.abs .right { + .items-holder .item.grid-item .bar.top-bar .left, .items-holder .item.grid-item .bar.top-bar .right { width: auto; } /* line 71, ../sass/items/_item.scss */ - .items-holder .item.grid-item .bar.top-bar.abs .left .icon, .items-holder .item.grid-item .bar.top-bar.abs .right .icon { + .items-holder .item.grid-item .bar.top-bar .left .icon, .items-holder .item.grid-item .bar.top-bar .right .icon { margin-left: 3px; } /* line 73, ../sass/items/_item.scss */ - .items-holder .item.grid-item .bar.top-bar.abs .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar.abs .right .icon.l-icon-link { + .items-holder .item.grid-item .bar.top-bar .left .icon.l-icon-link, .items-holder .item.grid-item .bar.top-bar .right .icon.l-icon-link { color: #49dedb; } /* line 79, ../sass/items/_item.scss */ - .items-holder .item.grid-item .bar.bottom-bar.abs { + .items-holder .item.grid-item .bar.bottom-bar { top: auto; height: 30px; } /* line 84, ../sass/items/_item.scss */ @@ -415,12 +415,12 @@ line-height: 50px !important; } /* line 82, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .bar.bottom-bar { - top: 7px !important; + top: 7px; bottom: auto; height: 35px; } /* line 87, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .item-main .item-type { - top: 10px !important; + top: 10px; bottom: auto; height: 30px; } /* line 90, ../sass/mobile/_item.scss */ @@ -435,12 +435,12 @@ line-height: 66px !important; } /* line 104, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .bar.bottom-bar { - top: 15px !important; + top: 15px; bottom: auto; height: 35px; } /* line 109, ../sass/mobile/_item.scss */ .items-holder .item.grid-item .item-main .item-type { - top: 18px !important; + top: 18px; bottom: auto; height: 30px; } /* line 112, ../sass/mobile/_item.scss */ diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index c0444d9990..27b5a11ad6 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -759,27 +759,45 @@ mct-container { .browse-wrapper, .mobile-pane { position: absolute; - left: 0; - top: 0; + top: 0 !important; right: 0; - white-space: nowrap; } } + bottom: 0; + left: 0; } } + +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { + /* line 35, ../sass/mobile/_layout.scss */ + .user-environ .browse-area, + .user-environ .edit-area, + .user-environ .editor { + top: 0; + left: 0; + right: 0; + bottom: 25px; } } + +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { + /* line 44, ../sass/mobile/_layout.scss */ + .holder.l-mobile { + top: 10px !important; + right: 10px !important; + bottom: 10px !important; + left: 10px !important; } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 38, ../sass/mobile/_layout.scss */ + /* line 56, ../sass/mobile/_layout.scss */ .desktop-browse { min-width: 150px; max-width: 800px; width: 25%; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 49, ../sass/mobile/_layout.scss */ + /* line 67, ../sass/mobile/_layout.scss */ .browse-hidetree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 60, ../sass/mobile/_layout.scss */ + /* line 78, ../sass/mobile/_layout.scss */ .browse-hidetree .mobile-pane.left-menu { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -799,7 +817,7 @@ mct-container { overflow-y: hidden; overflow-x: hidden; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 73, ../sass/mobile/_layout.scss */ + /* line 91, ../sass/mobile/_layout.scss */ .browse-hidetree .mobile-pane.right-repr { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; @@ -810,19 +828,19 @@ mct-container { left: auto !important; width: 100% !important; } } -/* line 82, ../sass/mobile/_layout.scss */ +/* line 100, ../sass/mobile/_layout.scss */ .mobile-tree-holder { top: 30px; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 91, ../sass/mobile/_layout.scss */ + /* line 109, ../sass/mobile/_layout.scss */ .browse-showtree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 102, ../sass/mobile/_layout.scss */ + /* line 120, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -836,27 +854,32 @@ mct-container { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); + background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); + background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); opacity: 1; display: block !important; width: auto !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 102, ../sass/mobile/_layout.scss */ + /* line 120, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { right: 19px !important; } } @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 102, ../sass/mobile/_layout.scss */ + /* line 120, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { - right: 66% !important; } } + right: 60% !important; } } @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 102, ../sass/mobile/_layout.scss */ + /* line 120, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { right: 500px !important; } } @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 102, ../sass/mobile/_layout.scss */ + /* line 120, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { - right: 78% !important; } } + right: 70% !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 126, ../sass/mobile/_layout.scss */ + /* line 144, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; @@ -866,53 +889,56 @@ mct-container { backface-visibility: hidden; left: auto !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 126, ../sass/mobile/_layout.scss */ + /* line 144, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { width: 19px !important; } } @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 126, ../sass/mobile/_layout.scss */ + /* line 144, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { - width: 66% !important; } } + width: 60% !important; } } @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 126, ../sass/mobile/_layout.scss */ + /* line 144, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { + background-color: rgba(0, 128, 0, 0.2); width: 500px !important; } } @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 126, ../sass/mobile/_layout.scss */ + /* line 144, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { - width: 78% !important; } } + background-color: rgba(255, 165, 0, 0.2); + width: 70% !important; } } + +/* line 168, ../sass/mobile/_layout.scss */ +.mobile-menu-icon { + position: absolute; + top: 10px; + left: 10px; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 149, ../sass/mobile/_layout.scss */ - .button-pos { - position: absolute; } } - -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 158, ../sass/mobile/_layout.scss */ + /* line 176, ../sass/mobile/_layout.scss */ .object-header { position: relative; left: 44px; } - /* line 163, ../sass/mobile/_layout.scss */ + /* line 181, ../sass/mobile/_layout.scss */ .object-header .label .context-available { opacity: 1 !important; } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 170, ../sass/mobile/_layout.scss */ + /* line 188, ../sass/mobile/_layout.scss */ .desktop-hide { display: none; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 177, ../sass/mobile/_layout.scss */ + /* line 195, ../sass/mobile/_layout.scss */ .mobile-hide { display: none; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 183, ../sass/mobile/_layout.scss */ + /* line 201, ../sass/mobile/_layout.scss */ .mobile-important-hide { display: none !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 189, ../sass/mobile/_layout.scss */ + /* line 207, ../sass/mobile/_layout.scss */ .mobile-back-hide { pointer-events: none; -moz-transition-property: opacity; @@ -930,7 +956,7 @@ mct-container { opacity: 0; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 198, ../sass/mobile/_layout.scss */ + /* line 216, ../sass/mobile/_layout.scss */ .mobile-back-unhide { pointer-events: all; -moz-transition-property: opacity; @@ -948,17 +974,17 @@ mct-container { opacity: 1; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 207, ../sass/mobile/_layout.scss */ + /* line 225, ../sass/mobile/_layout.scss */ .phone-hide { display: none; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 213, ../sass/mobile/_layout.scss */ + /* line 231, ../sass/mobile/_layout.scss */ .tree-holder { overflow-x: hidden !important; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 218, ../sass/mobile/_layout.scss */ + /* line 236, ../sass/mobile/_layout.scss */ .mobile-disable-select { -moz-user-select: -moz-none; -ms-user-select: none; @@ -3026,8 +3052,7 @@ label.checkbox.custom { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 25, ../sass/mobile/controls/_menus.scss */ .mobile-menu-icon { - font-size: 21px; - padding-top: 1px; } } + font-size: 21px; } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { /* line 25, ../sass/mobile/controls/_menus.scss */ .mobile-menu-icon { diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index e6387a1cbe..6ddab967f0 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -163,6 +163,9 @@ ul.tree { position: relative; } /* line 28, ../sass/tree/_tree.scss */ ul.tree li span.tree-item { + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; @@ -176,17 +179,17 @@ ul.tree { line-height: 1.5rem; margin-bottom: 3px; position: relative; } - /* line 39, ../sass/tree/_tree.scss */ + /* line 40, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .view-control { display: inline-block; margin-left: 5px; font-size: 0.75em; width: 10px; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 47, ../sass/tree/_tree.scss */ + /* line 48, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .view-control:hover { color: #ffc700; } } - /* line 53, ../sass/tree/_tree.scss */ + /* line 54, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label { display: block; overflow: hidden; @@ -198,25 +201,25 @@ ul.tree { width: auto; height: auto; left: 15px; } - /* line 60, ../sass/tree/_tree.scss */ + /* line 61, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon { text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; font-size: 16px; color: #0099cc; left: 5px; position: absolute; - top: 4px !important; + top: 4px; bottom: auto; height: 16px; line-height: 100%; right: auto; width: 16px; } - /* line 73, ../sass/tree/_tree.scss */ + /* line 74, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { text-shadow: black 0 1px 2px; position: absolute; z-index: 2; } - /* line 79, ../sass/tree/_tree.scss */ + /* line 80, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { color: #ff3c00; font-size: 8px; @@ -225,7 +228,7 @@ ul.tree { width: 8px; top: 1px; right: -2px; } - /* line 85, ../sass/tree/_tree.scss */ + /* line 86, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon .icon.l-icon-link { color: #49dedb; font-size: 8px; @@ -234,7 +237,7 @@ ul.tree { width: 8px; left: -3px; bottom: 0px; } - /* line 93, ../sass/tree/_tree.scss */ + /* line 94, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .title-label { overflow: hidden; position: absolute; @@ -249,53 +252,53 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 104, ../sass/tree/_tree.scss */ + /* line 105, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading { pointer-events: none; } - /* line 106, ../sass/tree/_tree.scss */ + /* line 107, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .label { opacity: 0.5; } - /* line 108, ../sass/tree/_tree.scss */ + /* line 109, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .label .title-label { font-style: italic; } - /* line 112, ../sass/tree/_tree.scss */ + /* line 113, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .wait-spinner { margin-left: 14px; } - /* line 117, ../sass/tree/_tree.scss */ + /* line 118, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected { background: #005177; color: #fff; } - /* line 121, ../sass/tree/_tree.scss */ + /* line 122, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected .view-control { color: #0099cc; } - /* line 124, ../sass/tree/_tree.scss */ + /* line 125, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected .label .type-icon { color: #fff; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 132, ../sass/tree/_tree.scss */ + /* line 133, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 135, ../sass/tree/_tree.scss */ + /* line 136, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover .context-trigger { display: block; } - /* line 138, ../sass/tree/_tree.scss */ + /* line 139, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover .icon { color: #33ccff; } } - /* line 145, ../sass/tree/_tree.scss */ + /* line 146, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.loading) { cursor: pointer; } - /* line 149, ../sass/tree/_tree.scss */ + /* line 150, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 155, ../sass/tree/_tree.scss */ + /* line 156, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } - /* line 164, ../sass/tree/_tree.scss */ + /* line 165, ../sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } @@ -321,38 +324,28 @@ ul.tree { * at runtime from the About dialog for additional information. *****************************************************************************/ @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 24, ../sass/mobile/_tree.scss */ - ul.tree { - margin: 0; - padding: 0; } - /* line 314, ../sass/_mixins.scss */ - ul.tree li { - list-style-type: none; - margin: 0; - padding: 0; } - /* line 29, ../sass/mobile/_tree.scss */ - ul.tree li span.tree-item { - height: 38px; - line-height: 38px; - padding-top: 3px; - padding-bottom: 3px; - margin-bottom: 0px; } - /* line 36, ../sass/mobile/_tree.scss */ - ul.tree li span.tree-item .view-control { - position: absolute; - right: 13px; - font-size: 1.8em; - right: 0px; - width: 35px; - text-align: center; } - /* line 45, ../sass/mobile/_tree.scss */ - ul.tree li span.tree-item .label { - left: 3px; - right: 45px; - font-size: 1.2em; } - /* line 54, ../sass/mobile/_tree.scss */ - ul.tree li span.tree-item .label .title-label { - right: 16.9px; } - /* line 63, ../sass/mobile/_tree.scss */ - ul.tree ul.tree { - margin-left: 7px; } } + /* line 30, ../sass/mobile/_tree.scss */ + ul.tree li span.tree-item { + height: 35px; + line-height: 35px; + margin-bottom: 0px; } + /* line 35, ../sass/mobile/_tree.scss */ + ul.tree li span.tree-item .view-control { + position: absolute; + font-size: 1.1em; + right: 0px; + width: 30px; + text-align: center; } + /* line 44, ../sass/mobile/_tree.scss */ + ul.tree li span.tree-item .label { + left: 0; + right: 35px; + font-size: 1.2em; } + /* line 51, ../sass/mobile/_tree.scss */ + ul.tree li span.tree-item .label .type-icon { + top: 9px; + bottom: auto; + height: 16px; } + /* line 62, ../sass/mobile/_tree.scss */ + ul.tree ul.tree { + margin-left: 20px; } } diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index aba4c8950d..d1f826443c 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -110,6 +110,7 @@ $ueBrowseGridItemBottomBarH: 30px; $itemPadLR: 5px; // Tree $treeVCW: 10px; +$treeTypeIconH: 16px; $treeTypeIconW: 20px; $treeContextTriggerW: 20px; $colorItemTreeIcon: $colorKey; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index c047c9582e..f605476c66 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -328,7 +328,7 @@ } @mixin verticalCenterBlock($holderH, $itemH) { - top: floor(($holderH - $itemH) / 2) !important; + top: floor(($holderH - $itemH) / 2); bottom: auto; height: $itemH; } diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss index 836f5d754c..d9c9d8613b 100644 --- a/platform/commonUI/general/res/sass/items/_item.scss +++ b/platform/commonUI/general/res/sass/items/_item.scss @@ -60,7 +60,7 @@ top: $m; right: $m; bottom: $m; left: $m; } .bar { - &.top-bar.abs { + &.top-bar { bottom: auto; height: $ueBrowseGridItemTopBarH; line-height: $ueBrowseGridItemTopBarH; @@ -76,7 +76,7 @@ } } } - &.bottom-bar.abs { + &.bottom-bar { top: auto; height: $ueBrowseGridItemBottomBarH; } diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index d69084086e..9d7357126e 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -29,10 +29,10 @@ $phoneItemH: floor($ueBrowseGridItemLg/4); $tabletItemH: floor($ueBrowseGridItemLg/3); /************************** MOBILE TREE MENU DIMENSIONS */ -$mobile-treeHeight: 38px; +$mobileTreeItemH: 35px; $mobile-startingTreeLeft: 3px; -$mobile-runningTreeLeft: 7px; -$mobile-treeRight: 13px; +$mobileTreeItemIndent: 20px; +$mobileTreeRightArrowW: 30px; /************************** WINDOW DIMENSIONS FOR RWD */ $phoMaxW: 514px; @@ -82,7 +82,7 @@ $desktopLandscape: "screen and #{$desktopLandscapeCheck}"; /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ $phoneRepSizePortrait: 19px; -$phoneRepSizeLandscape: 66%; +$phoneRepSizeLandscape: 60%; $tabletRepSizePortrait: 500px; -$tabletRepSizeLandscape: 78%; +$tabletRepSizeLandscape: 70%; $desktopMenuSize: 25%; diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 3f4fc062d3..9609ed1fdd 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -27,9 +27,27 @@ .mobile-pane { @include phoneandtablet { position: absolute; - left: 0; top: 0; - right: 0; - white-space: nowrap; + top: 0 !important; right: 0; bottom: 0; left: 0; + //white-space: nowrap; // CH CO + } +} + +.user-environ .browse-area, +.user-environ .edit-area, +.user-environ .editor { + @include phoneandtablet { + //@include test(red); + top: 0; left: 0; right: 0; bottom: $ueFooterH; + } +} + +.holder.l-mobile { + @include phoneandtablet { + //@include test(); + top: $bodyMargin !important; + right: $bodyMargin !important; + bottom: $bodyMargin !important; + left: $bodyMargin !important; } } @@ -39,8 +57,8 @@ @include desktop { min-width: 150px; max-width: 800px; - width: $desktopMenuSize; - } + width: $desktopMenuSize; + } } // When the tree is hidden, these are the @@ -56,7 +74,7 @@ @include user-select(none); } // Sets the left tree menu when the tree - // is hidden. + // is hidden. .mobile-pane.left-menu { @include phoneandtablet { @include trans-prop-nice(opacity, .4s); @@ -64,19 +82,19 @@ right: 100% !important; width: auto !important; overflow-y: hidden; - overflow-x: hidden; + overflow-x: hidden; } } // Sets the right represenation when - // the tree is hidden. - .mobile-pane.right-repr { - @include phoneandtablet { + // the tree is hidden. + .mobile-pane.right-repr { + @include phoneandtablet { @include slMenuTransitions; left: auto !important; width: 100% !important; } - } + } } .mobile-tree-holder { @@ -86,7 +104,7 @@ // When the tree is shown, these are // the classes used for the left menu // and the right menu (for each device & -// orientation combination, separate +// orientation combination, separate // parameters are used) .browse-showtree { // NOTE: DISABLED SELECTION @@ -98,10 +116,11 @@ @include user-select(none); } // Sets the left tree menu when the tree - // is shown. + // is shown. .mobile-pane.left-menu { @include phoneandtablet { @include trans-prop-nice(opacity, .4s); + @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%)); opacity: 1; display: block !important; width: auto !important; @@ -121,8 +140,7 @@ right: $tabletRepSizeLandscape !important; } } - // Sets the right represenation when - // the tree is shown. + // Sets the right representation when the tree is shown. .mobile-pane.right-repr { @include phoneandtablet { @include slMenuTransitions; @@ -137,19 +155,19 @@ width: $phoneRepSizeLandscape !important; } @include tabletPortrait { + //@include test(green); width: $tabletRepSizePortrait !important; } @include tabletLandscape { + //@include test(orange); width: $tabletRepSizeLandscape !important; } } } -// Button position is set as absolute with transitions -.button-pos { - @include phoneandtablet { - position: absolute; - } +.mobile-menu-icon { + position: absolute; + top: $bodyMargin; left: $bodyMargin; } // Object header must be moved diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index d7f62f16b0..6918b8f217 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -24,21 +24,20 @@ ul.tree { // Only applies to phones and tablets @include phoneandtablet { - @include menuUlReset(); + //@include menuUlReset(); li { + //border-top: 1px solid $colorInteriorBorder; // TEMP span.tree-item { // Adds some space to the top of each tree item - height: $mobile-treeHeight; - line-height: $mobile-treeHeight; - padding-top: $interiorMarginSm; - padding-bottom: $interiorMarginSm; + height: $mobileTreeItemH; + line-height: $mobileTreeItemH; margin-bottom: 0px; .view-control { + //@include test(red); position: absolute; - right: $mobile-treeRight; - font-size: 1.8em; + font-size: 1.1em; right: 0px; - width: 35px; + width: $mobileTreeRightArrowW; text-align: center; } @@ -46,13 +45,13 @@ ul.tree { // Designates the starting left margin // (indentation) of 'My Items' // Also adds right space for selection button - left: $mobile-startingTreeLeft; - right: 45px; + left: 0; + right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow font-size: 1.2em; - // Allows tree item name to stop prior - // to the arrow + .type-icon { + @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH); + } .title-label { - right: $mobile-treeRight * 1.3; } } } @@ -61,7 +60,7 @@ ul.tree { // Sets the margin on the left, which causes the // running indentation after each folder is made ul.tree { - margin-left: $mobile-runningTreeLeft; + margin-left: $mobileTreeItemIndent; } } } diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss index 40aef796ee..d738f63d4a 100644 --- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss @@ -26,7 +26,7 @@ display: inline-block; @include phoneandtablet { font-size: 21px; - padding-top: $imageThumbPad; + //padding-top: $imageThumbPad; } @include desktop { display: none; diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 168daad4bf..cb0b0f1a72 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -27,6 +27,7 @@ ul.tree { position: relative; span.tree-item { $runningItemW: 0; + @include box-sizing(border-box); @include border-radius($basicCr); @include single-transition(background-color, 0.25s); display: block; @@ -59,7 +60,7 @@ ul.tree { .type-icon { //@include absPosDefault(0, false); - $d: 16px; // 16px is crisp size + $d: $treeTypeIconH; // 16px is crisp size @include txtShdwSubtle(0.6); font-size: $d; color: $colorItemTreeIcon; From ee608cc4a4c842595eabb6aaacb91576a063c3ca Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 21 Aug 2015 15:09:23 -0700 Subject: [PATCH 04/21] [Mobile] IN PROGRESS: General fixes, spurred by mobile, for object-header open #74 Attempting to layout using flex - not working; See http://jsfiddle.net/charlesh88/cpf9zjts/9/ for working example; New _flex.scss added; This commit is changed elements that are mostly solid; --- .../browse/res/templates/back-arrow.html | 2 +- .../browse/res/templates/browse-object.html | 1 + .../res/templates/browse/object-header.html | 11 +- .../general/res/css/theme-espresso.css | 163 +++++++++++------- .../commonUI/general/res/sass/_global.scss | 6 - platform/commonUI/general/res/sass/_main.scss | 1 + .../commonUI/general/res/sass/_mixins.scss | 4 + .../general/res/sass/controls/_controls.scss | 52 ++++-- .../res/sass/user-environ/_layout.scss | 6 + .../res/sass/user-environ/_top-bar.scss | 5 - .../features/layout/res/templates/frame.html | 5 +- 11 files changed, 151 insertions(+), 105 deletions(-) diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html index 15775fb632..086075c692 100644 --- a/platform/commonUI/browse/res/templates/back-arrow.html +++ b/platform/commonUI/browse/res/templates/back-arrow.html @@ -23,6 +23,6 @@ + ng-class="checkRoot(); atRoot ? 'hidden' : ''"> { diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index 1f69f45b0a..fd26dfd2a9 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -22,6 +22,7 @@
+
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index 72f7b3e57f..5511725c80 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -20,12 +20,11 @@ at runtime from the About dialog for additional information. -->
- - - {{type.getGlyph()}} - {{parameters.mode}} - - {{model.name}} + {{type.getGlyph()}} + {{parameters.mode}} + + + {{model.name}}
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 27b5a11ad6..c842eaf8ec 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -386,16 +386,10 @@ p { margin-bottom: 10px; } /* line 74, ../sass/_global.scss */ -span { - /* 618 DEBUG - box-sizing: border-box; - */ } - -/* line 80, ../sass/_global.scss */ mct-container { display: block; } -/* line 84, ../sass/_global.scss */ +/* line 78, ../sass/_global.scss */ .abs, .btn-menu span.l-click-area { position: absolute; top: 0; @@ -405,51 +399,51 @@ mct-container { height: auto; width: auto; } -/* line 94, ../sass/_global.scss */ +/* line 88, ../sass/_global.scss */ .code, .codehilite { font-family: "Lucida Console", monospace; font-size: 0.7em; line-height: 150%; white-space: pre; } -/* line 101, ../sass/_global.scss */ +/* line 95, ../sass/_global.scss */ .codehilite { background-color: rgba(255, 255, 255, 0.1); padding: 1em; } -/* line 107, ../sass/_global.scss */ +/* line 101, ../sass/_global.scss */ .align-right { text-align: right; } -/* line 111, ../sass/_global.scss */ +/* line 105, ../sass/_global.scss */ .centered { text-align: center; } -/* line 115, ../sass/_global.scss */ +/* line 109, ../sass/_global.scss */ .no-margin { margin: 0; } -/* line 119, ../sass/_global.scss */ +/* line 113, ../sass/_global.scss */ .colorKey { color: #0099cc; } -/* line 123, ../sass/_global.scss */ +/* line 117, ../sass/_global.scss */ .ds { -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; } -/* line 127, ../sass/_global.scss */ +/* line 121, ../sass/_global.scss */ .hide, .hidden { display: none !important; } -/* line 133, ../sass/_global.scss */ +/* line 127, ../sass/_global.scss */ .paused:not(.s-btn):not(.icon-btn) { border-color: #c56f01 !important; color: #c56f01 !important; } -/* line 139, ../sass/_global.scss */ +/* line 133, ../sass/_global.scss */ .sep { color: rgba(255, 255, 255, 0.2); } @@ -702,34 +696,34 @@ mct-container { .pane.items .object-browse-bar .btn-menu span.right.l-click-area, .btn-menu .pane.items .object-browse-bar span.right.l-click-area { top: auto; } - /* line 245, ../sass/user-environ/_layout.scss */ + /* line 251, ../sass/user-environ/_layout.scss */ .pane.items .object-holder { top: 34px; } - /* line 249, ../sass/user-environ/_layout.scss */ + /* line 255, ../sass/user-environ/_layout.scss */ .pane .object-holder { overflow: auto; } -/* line 257, ../sass/user-environ/_layout.scss */ +/* line 263, ../sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane { margin-top: 5px; } - /* line 260, ../sass/user-environ/_layout.scss */ + /* line 266, ../sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane:first-child { margin-top: 0; } -/* line 267, ../sass/user-environ/_layout.scss */ +/* line 273, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane { margin-left: 5px; } - /* line 270, ../sass/user-environ/_layout.scss */ + /* line 276, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane > .holder { left: 0; right: 0; } - /* line 274, ../sass/user-environ/_layout.scss */ + /* line 280, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child { margin-left: 0; } - /* line 276, ../sass/user-environ/_layout.scss */ + /* line 282, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child .holder { right: 3px; } -/* line 285, ../sass/user-environ/_layout.scss */ +/* line 291, ../sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } @@ -899,12 +893,10 @@ mct-container { @media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) { /* line 144, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { - background-color: rgba(0, 128, 0, 0.2); width: 500px !important; } } @media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 144, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { - background-color: rgba(255, 165, 0, 0.2); width: 70% !important; } } /* line 168, ../sass/mobile/_layout.scss */ @@ -2560,35 +2552,49 @@ label.checkbox.custom { /******************************************************** OBJECT-HEADER */ /* line 364, ../sass/controls/_controls.scss */ .object-header { - display: inline-block; - font-size: 1em; } - /* line 368, ../sass/controls/_controls.scss */ - .object-header .label .title-label { - color: white; } - /* line 371, ../sass/controls/_controls.scss */ - .object-header .label .type-icon { - font-size: 120%; - margin-right: 5px; + font-size: 1em; + line-height: 120%; } + /* line 373, ../sass/controls/_controls.scss */ + .object-header .title-label, + .object-header .type-icon, + .object-header .context-available { + border: 1px dotted rgba(102, 102, 255, 0.75); vertical-align: middle; } - /* line 376, ../sass/controls/_controls.scss */ - .object-header .label .context-available { + /* line 379, ../sass/controls/_controls.scss */ + .object-header > .type-icon { + font-size: 120%; } + /* line 383, ../sass/controls/_controls.scss */ + .object-header .title-label { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + color: white; + padding-right: 0.75em; + position: relative; } + /* line 390, ../sass/controls/_controls.scss */ + .object-header .context-available { + -moz-transition-property: opacity; + -o-transition-property: opacity; + -webkit-transition-property: opacity; + transition-property: opacity; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; opacity: 0; - font-size: 0.8em; } - /* line 381, ../sass/controls/_controls.scss */ - .object-header .label:hover .context-available { + font-size: 0.7em; + position: absolute; + right: 0; } + /* line 398, ../sass/controls/_controls.scss */ + .object-header:hover .context-available { opacity: 1; } -/* line 390, ../sass/controls/_controls.scss */ -.top-bar .object-header, -.object-browse-bar .object-header { - font-size: 1.1em; } - /* line 392, ../sass/controls/_controls.scss */ - .top-bar .object-header span, - .object-browse-bar .object-header span { - display: inline-block; } - /******************************************************** SLIDERS */ -/* line 404, ../sass/controls/_controls.scss */ +/* line 420, ../sass/controls/_controls.scss */ .slider .slot { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2609,7 +2615,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 415, ../sass/controls/_controls.scss */ +/* line 431, ../sass/controls/_controls.scss */ .slider .knob { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2692,12 +2698,12 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #0099cc; } - /* line 426, ../sass/controls/_controls.scss */ + /* line 442, ../sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 433, ../sass/controls/_controls.scss */ +/* line 449, ../sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -2708,12 +2714,12 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 443, ../sass/controls/_controls.scss */ + /* line 459, ../sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ -/* line 451, ../sass/controls/_controls.scss */ +/* line 467, ../sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2730,7 +2736,7 @@ label.checkbox.custom { height: 10px; width: 10px; } -/* line 457, ../sass/controls/_controls.scss */ +/* line 473, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2748,7 +2754,7 @@ label.checkbox.custom { -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; border-top: 1px solid gray; } - /* line 464, ../sass/controls/_controls.scss */ + /* line 480, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2757,7 +2763,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#808080, #737373 20px); background-image: linear-gradient(#808080, #737373 20px); } -/* line 469, ../sass/controls/_controls.scss */ +/* line 485, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.4); } @@ -3488,6 +3494,31 @@ label.checkbox.custom { font-size: 0.65em; vertical-align: top; } +/* line 2, ../sass/_flex.scss */ +.l-flex.l-flex-justify { + justify-content: space-between; } +/* line 5, ../sass/_flex.scss */ +.l-flex .l-flex-row, .l-flex.l-flex-row { + display: flex; + flex-flow: row nowrap; } +/* line 16, ../sass/_flex.scss */ +.l-flex .l-flex-max { + flex: 1 0 !important; } +/* line 20, ../sass/_flex.scss */ +.l-flex .flex-ignore { + display: flex; + flex-flow: row nowrap; + flex: 0 1 auto; } + +/* line 28, ../sass/_flex.scss */ +.object-browse-bar.bar > div.abs { + background-color: rgba(0, 128, 0, 0.2); } + +/* line 33, ../sass/_flex.scss */ +.l-flex-row .title-label { + background-color: rgba(0, 0, 255, 0.2); + flex: 1 0 !important; } + /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -4544,7 +4575,7 @@ input[type="text"] { * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ -/* line 27, ../sass/user-environ/_top-bar.scss */ +/* line 23, ../sass/user-environ/_top-bar.scss */ .top-bar.browse, .top-bar.edit { border-bottom: 1px solid #4d4d4d; top: 10px; @@ -4552,22 +4583,22 @@ input[type="text"] { bottom: auto; left: 10px; height: 30px; } -/* line 37, ../sass/user-environ/_top-bar.scss */ +/* line 33, ../sass/user-environ/_top-bar.scss */ .top-bar .title { color: #fff; } -/* line 42, ../sass/user-environ/_top-bar.scss */ +/* line 37, ../sass/user-environ/_top-bar.scss */ .top-bar .buttons-main { font-size: 0.8em; left: auto; text-align: right; } - /* line 47, ../sass/user-environ/_top-bar.scss */ + /* line 42, ../sass/user-environ/_top-bar.scss */ .top-bar .buttons-main .btn { margin-left: 5px; } -/* line 55, ../sass/user-environ/_top-bar.scss */ +/* line 50, ../sass/user-environ/_top-bar.scss */ .edit-mode .top-bar .buttons-main { white-space: nowrap; } - /* line 59, ../sass/user-environ/_top-bar.scss */ + /* line 54, ../sass/user-environ/_top-bar.scss */ .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .btn-menu span.buttons-main.l-click-area, .btn-menu .edit-mode .top-bar span.buttons-main.l-click-area { bottom: auto; left: auto; } diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index 94fe8e151c..a6b8ff63c8 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -71,12 +71,6 @@ p { margin-bottom: $interiorMarginLg; } -span { - /* 618 DEBUG - box-sizing: border-box; - */ -} - mct-container { display: block; } diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 8803074f63..d75de0c0c9 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -53,6 +53,7 @@ @import "edit/editor"; @import "features/imagery"; @import "features/time-display"; +@import "flex"; @import "forms/elems"; @import "forms/validation"; @import "forms/text-input"; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index f605476c66..a42a2f480d 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -367,6 +367,10 @@ background-color: rgba($c, $a); } +@mixin tmpBorder($c: #ffcc00, $a: 0.75) { + border: 1px dotted rgba($c, $a); +} + @mixin testObj($w: 2000px, $h: 1000px, $c: black, $a: 0.1) { &:after { @include box-sizing(border-box); diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index ce91bbe16d..fe6aa3b86b 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -362,25 +362,41 @@ label.checkbox.custom { /******************************************************** OBJECT-HEADER */ .object-header { - display: inline-block; + //@include test(); font-size: 1em; + line-height: 120%; .label { - .title-label { - color: lighten($colorBodyFg, 40%); - } - .type-icon { - font-size: 120%; - margin-right: $interiorMargin; - vertical-align: middle; - } + //display: flex; + //flex-direction: row; + } + + .title-label, + .type-icon, + .context-available { + @include tmpBorder(#6666ff); + vertical-align: middle; + } + > .type-icon { + font-size: 120%; + } + + .title-label { + @include ellipsize(); + color: lighten($colorBodyFg, 40%); + padding-right: 0.75em; // For context arrow. Done with em's so pad is relative to the scale of the text. + position: relative; + } + + .context-available { + @include trans-prop-nice(opacity, 0.25s); + opacity: 0; + font-size: 0.7em; + position: absolute; + right: 0; + } + &:hover { .context-available { - opacity: 0; - font-size: 0.8em; - } - &:hover { - .context-available { - opacity: 1; - } + opacity: 1; } } } @@ -388,9 +404,9 @@ label.checkbox.custom { .top-bar, .object-browse-bar { .object-header { - font-size: 1.1em; + //font-size: 1.1em; span { - display: inline-block; + //display: inline-block; } } } diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index c4f0c99b16..81faab4452 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -241,6 +241,12 @@ .right.abs { top: auto; } + //.left.abs { + // @include tmpBorder(green); + //} + //.right.abs { + // @include tmpBorder(red); + //} } .object-holder { top: $ueTopBarH + $interiorMarginLg; diff --git a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss index e2ee1f105c..19488e9c10 100644 --- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss +++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss @@ -20,10 +20,6 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .top-bar { -// $h: $ueTopBarH - 5px; -// background: rgba(#ff0000, 0.2); -// line-height: $ueTopBarBtnH; - &.browse, &.edit { border-bottom: 1px solid $colorInteriorBorder; @@ -36,7 +32,6 @@ .title { color: #fff; -// font-weight: bold; } .buttons-main { diff --git a/platform/features/layout/res/templates/frame.html b/platform/features/layout/res/templates/frame.html index df4e3390ad..fccdf813bd 100644 --- a/platform/features/layout/res/templates/frame.html +++ b/platform/features/layout/res/templates/frame.html @@ -21,9 +21,8 @@ -->
-
- +
+
From 039d692e4cef52acee4432ca76d9af8f57e34516 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Fri, 21 Aug 2015 15:10:19 -0700 Subject: [PATCH 05/21] Forgot to add new .scss file open #74 --- platform/commonUI/general/res/sass/_flex.scss | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 platform/commonUI/general/res/sass/_flex.scss diff --git a/platform/commonUI/general/res/sass/_flex.scss b/platform/commonUI/general/res/sass/_flex.scss new file mode 100644 index 0000000000..61e8007676 --- /dev/null +++ b/platform/commonUI/general/res/sass/_flex.scss @@ -0,0 +1,37 @@ +.l-flex { + &.l-flex-justify { + justify-content: space-between; + } + .l-flex-row, + &.l-flex-row { + display: flex; + flex-flow: row nowrap; + div, span { + //@include tmpBorder(); + } + > div, > span { + //flex: 1 1 0; + } + } + .l-flex-max { + flex: 1 0 !important; + } + + .flex-ignore { + display: flex; + flex-flow: row nowrap; + flex: 0 1 auto; + } +} + +// TEMP, move out of here once working +.object-browse-bar.bar > div.abs { + @include test(green); +} + + +.l-flex-row .title-label { + @include test(blue); + flex: 1 0 !important; +} + From e96d3e3738fa3fe3ff05ac062aba762b0a4ead4b Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 24 Aug 2015 12:22:08 -0700 Subject: [PATCH 06/21] [Mobile] IN PROGRESS: Significant redo of object-header open #74 Added .bar .l-flex using display: flex in object header; --- .../browse/res/templates/back-arrow.html | 8 +- .../browse/res/templates/browse-object.html | 8 +- .../res/templates/browse/object-header.html | 7 +- .../general/res/css/theme-espresso.css | 209 +++++++++--------- platform/commonUI/general/res/sass/_main.scss | 2 +- .../general/res/sass/controls/_controls.scss | 35 +-- .../res/sass/user-environ/_layout.scss | 32 ++- .../res/sass/user-environ/_object-browse.scss | 12 +- .../features/layout/res/templates/frame.html | 6 +- 9 files changed, 171 insertions(+), 148 deletions(-) diff --git a/platform/commonUI/browse/res/templates/back-arrow.html b/platform/commonUI/browse/res/templates/back-arrow.html index 086075c692..c73b4cbdb2 100644 --- a/platform/commonUI/browse/res/templates/back-arrow.html +++ b/platform/commonUI/browse/res/templates/back-arrow.html @@ -21,8 +21,8 @@ --> - - { - + ng-class="checkRoot(); atRoot ? 'hidden' : ''">{ + diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index fd26dfd2a9..90b3c11504 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -20,14 +20,14 @@ at runtime from the About dialog for additional information. --> -
-
- +
+
+
-
+
diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index 5511725c80..f1667f5816 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -21,10 +21,11 @@ -->
{{type.getGlyph()}} - {{parameters.mode}} + - - {{model.name}} + + {{parameters.mode}} + {{model.name}}
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index c842eaf8ec..6d3f9a5442 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -542,23 +542,34 @@ mct-container { .bar.abs, .btn-menu span.bar.l-click-area { text-wrap: none; white-space: nowrap; } -/* line 74, ../sass/user-environ/_layout.scss */ -.bar.left, -.bar .left { - width: 45% !important; - right: auto !important; } -/* line 79, ../sass/user-environ/_layout.scss */ -.bar.right, -.bar .right { - width: 45% !important; - left: auto !important; - text-align: right; } - /* line 84, ../sass/user-environ/_layout.scss */ - .bar.right .icon.major, - .bar .right .icon.major { - margin-left: 15px; } + /* line 73, ../sass/user-environ/_layout.scss */ + .bar.abs.left, .btn-menu span.bar.left.l-click-area, + .bar.abs .left, + .btn-menu span.bar.l-click-area .left { + width: 45%; + right: auto; } + /* line 78, ../sass/user-environ/_layout.scss */ + .bar.abs.right, .btn-menu span.bar.right.l-click-area, + .bar.abs .right, + .btn-menu span.bar.l-click-area .right { + width: 45%; + left: auto; + text-align: right; } + /* line 83, ../sass/user-environ/_layout.scss */ + .bar.abs.right .icon.major, .btn-menu span.bar.right.l-click-area .icon.major, + .bar.abs .right .icon.major, + .btn-menu span.bar.l-click-area .right .icon.major { + margin-left: 15px; } +/* line 88, ../sass/user-environ/_layout.scss */ +.bar.l-flex { + display: flex; + flex-flow: row nowrap; + align-items: stretch; } + /* line 92, ../sass/user-environ/_layout.scss */ + .bar.l-flex .left { + flex: 1 1 auto; } -/* line 91, ../sass/user-environ/_layout.scss */ +/* line 99, ../sass/user-environ/_layout.scss */ .user-environ .browse-area, .user-environ .edit-area, .user-environ .editor { @@ -566,23 +577,23 @@ mct-container { right: 10px; bottom: 35px; left: 10px; } -/* line 102, ../sass/user-environ/_layout.scss */ +/* line 110, ../sass/user-environ/_layout.scss */ .user-environ .browse-area > .contents, .user-environ .edit-area > .contents { left: 0; right: 0; } -/* line 108, ../sass/user-environ/_layout.scss */ +/* line 116, ../sass/user-environ/_layout.scss */ .user-environ .edit-area { top: 45px; } - /* line 111, ../sass/user-environ/_layout.scss */ + /* line 119, ../sass/user-environ/_layout.scss */ .user-environ .edit-area .tool-bar { bottom: auto; height: 30px; line-height: 25px; } - /* line 116, ../sass/user-environ/_layout.scss */ + /* line 124, ../sass/user-environ/_layout.scss */ .user-environ .edit-area .work-area { top: 40px; } -/* line 121, ../sass/user-environ/_layout.scss */ +/* line 129, ../sass/user-environ/_layout.scss */ .user-environ .bottom-bar { overflow: hidden; position: absolute; @@ -594,20 +605,20 @@ mct-container { height: auto; top: auto; height: 25px; } - /* line 126, ../sass/user-environ/_layout.scss */ + /* line 134, ../sass/user-environ/_layout.scss */ .user-environ .bottom-bar .status-holder { z-index: 1; } - /* line 130, ../sass/user-environ/_layout.scss */ + /* line 138, ../sass/user-environ/_layout.scss */ .user-environ .bottom-bar .app-logo { left: auto; width: 105px; z-index: 2; } -/* line 138, ../sass/user-environ/_layout.scss */ +/* line 146, ../sass/user-environ/_layout.scss */ .cols { overflow: hidden; *zoom: 1; } - /* line 140, ../sass/user-environ/_layout.scss */ + /* line 148, ../sass/user-environ/_layout.scss */ .cols .col { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -618,112 +629,112 @@ mct-container { margin-left: 1.5%; padding-left: 5px; position: relative; } - /* line 148, ../sass/user-environ/_layout.scss */ + /* line 156, ../sass/user-environ/_layout.scss */ .cols .col:first-child { margin-left: 0; padding-left: 0; } - /* line 155, ../sass/user-environ/_layout.scss */ + /* line 163, ../sass/user-environ/_layout.scss */ .cols.cols-2 .col-1 { min-width: 250px; width: 48.5%; } - /* line 161, ../sass/user-environ/_layout.scss */ + /* line 169, ../sass/user-environ/_layout.scss */ .cols.cols-2-ff .col-100px { width: 100px; } - /* line 168, ../sass/user-environ/_layout.scss */ + /* line 176, ../sass/user-environ/_layout.scss */ .cols.cols-6 .col-1 { min-width: 83.33333px; width: 15.16667%; } - /* line 174, ../sass/user-environ/_layout.scss */ + /* line 182, ../sass/user-environ/_layout.scss */ .cols.cols-16 .col-1 { min-width: 31.25px; width: 4.75%; } - /* line 177, ../sass/user-environ/_layout.scss */ + /* line 185, ../sass/user-environ/_layout.scss */ .cols.cols-16 .col-2 { min-width: 62.5px; width: 11%; } - /* line 180, ../sass/user-environ/_layout.scss */ + /* line 188, ../sass/user-environ/_layout.scss */ .cols.cols-16 .col-7 { min-width: 218.75px; width: 42.25%; } - /* line 186, ../sass/user-environ/_layout.scss */ + /* line 194, ../sass/user-environ/_layout.scss */ .cols.cols-32 .col-2 { min-width: 31.25px; width: 4.75%; } - /* line 189, ../sass/user-environ/_layout.scss */ + /* line 197, ../sass/user-environ/_layout.scss */ .cols.cols-32 .col-15 { min-width: 234.375px; width: 45.375%; } - /* line 193, ../sass/user-environ/_layout.scss */ + /* line 201, ../sass/user-environ/_layout.scss */ .cols .l-row { overflow: hidden; *zoom: 1; padding: 5px 0; } -/* line 201, ../sass/user-environ/_layout.scss */ +/* line 209, ../sass/user-environ/_layout.scss */ .browse-mode .split-layout .split-pane-component.pane.left { min-width: 150px; max-width: 50%; } -/* line 210, ../sass/user-environ/_layout.scss */ +/* line 218, ../sass/user-environ/_layout.scss */ .edit-mode .split-layout .split-pane-component.pane.right { min-width: 150px; max-width: 50%; } - /* line 213, ../sass/user-environ/_layout.scss */ + /* line 221, ../sass/user-environ/_layout.scss */ .edit-mode .split-layout .split-pane-component.pane.right .split-pane-component.pane.bottom { min-height: 50px; max-height: 80%; } -/* line 221, ../sass/user-environ/_layout.scss */ +/* line 229, ../sass/user-environ/_layout.scss */ .pane { position: absolute; } - /* line 224, ../sass/user-environ/_layout.scss */ + /* line 232, ../sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder { bottom: auto; top: 0; height: 24px; } - /* line 227, ../sass/user-environ/_layout.scss */ + /* line 235, ../sass/user-environ/_layout.scss */ .pane.treeview.left .create-btn-holder .wrapper.menu-element { position: absolute; bottom: 5px; } - /* line 232, ../sass/user-environ/_layout.scss */ + /* line 240, ../sass/user-environ/_layout.scss */ .pane.treeview.left .tree-holder { overflow: auto; top: 34px; padding-right: 5px; } - /* line 240, ../sass/user-environ/_layout.scss */ + /* line 248, ../sass/user-environ/_layout.scss */ .pane.items .object-browse-bar .left.abs, .pane.items .object-browse-bar .btn-menu span.left.l-click-area, .btn-menu .pane.items .object-browse-bar span.left.l-click-area, .pane.items .object-browse-bar .right.abs, .pane.items .object-browse-bar .btn-menu span.right.l-click-area, .btn-menu .pane.items .object-browse-bar span.right.l-click-area { top: auto; } - /* line 251, ../sass/user-environ/_layout.scss */ + /* line 259, ../sass/user-environ/_layout.scss */ .pane.items .object-holder { top: 34px; } - /* line 255, ../sass/user-environ/_layout.scss */ + /* line 263, ../sass/user-environ/_layout.scss */ .pane .object-holder { overflow: auto; } -/* line 263, ../sass/user-environ/_layout.scss */ +/* line 271, ../sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane { margin-top: 5px; } - /* line 266, ../sass/user-environ/_layout.scss */ + /* line 274, ../sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane:first-child { margin-top: 0; } -/* line 273, ../sass/user-environ/_layout.scss */ +/* line 281, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane { margin-left: 5px; } - /* line 276, ../sass/user-environ/_layout.scss */ + /* line 284, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane > .holder { left: 0; right: 0; } - /* line 280, ../sass/user-environ/_layout.scss */ + /* line 288, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child { margin-left: 0; } - /* line 282, ../sass/user-environ/_layout.scss */ + /* line 290, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child .holder { right: 3px; } -/* line 291, ../sass/user-environ/_layout.scss */ +/* line 299, ../sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } @@ -2552,26 +2563,33 @@ label.checkbox.custom { /******************************************************** OBJECT-HEADER */ /* line 364, ../sass/controls/_controls.scss */ .object-header { - font-size: 1em; - line-height: 120%; } + font-size: 1em; } /* line 373, ../sass/controls/_controls.scss */ .object-header .title-label, .object-header .type-icon, .object-header .context-available { - border: 1px dotted rgba(102, 102, 255, 0.75); vertical-align: middle; } /* line 379, ../sass/controls/_controls.scss */ .object-header > .type-icon { - font-size: 120%; } - /* line 383, ../sass/controls/_controls.scss */ + font-size: 120%; + float: left; + margin-right: 5px; } + /* line 386, ../sass/controls/_controls.scss */ + .object-header .l-elem-wrapper { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; } + /* line 392, ../sass/controls/_controls.scss */ + .object-header .action { + margin-right: 5px; } + /* line 396, ../sass/controls/_controls.scss */ .object-header .title-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: white; - padding-right: 0.75em; - position: relative; } - /* line 390, ../sass/controls/_controls.scss */ + padding-right: 0.35em; } + /* line 403, ../sass/controls/_controls.scss */ .object-header .context-available { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -2586,15 +2604,13 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; opacity: 0; - font-size: 0.7em; - position: absolute; - right: 0; } - /* line 398, ../sass/controls/_controls.scss */ + font-size: 0.7em; } + /* line 411, ../sass/controls/_controls.scss */ .object-header:hover .context-available { opacity: 1; } /******************************************************** SLIDERS */ -/* line 420, ../sass/controls/_controls.scss */ +/* line 423, ../sass/controls/_controls.scss */ .slider .slot { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2615,7 +2631,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 431, ../sass/controls/_controls.scss */ +/* line 434, ../sass/controls/_controls.scss */ .slider .knob { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2698,12 +2714,12 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #0099cc; } - /* line 442, ../sass/controls/_controls.scss */ + /* line 445, ../sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 449, ../sass/controls/_controls.scss */ +/* line 452, ../sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -2714,12 +2730,12 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 459, ../sass/controls/_controls.scss */ + /* line 462, ../sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ -/* line 467, ../sass/controls/_controls.scss */ +/* line 470, ../sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2736,7 +2752,7 @@ label.checkbox.custom { height: 10px; width: 10px; } -/* line 473, ../sass/controls/_controls.scss */ +/* line 476, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2754,7 +2770,7 @@ label.checkbox.custom { -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; border-top: 1px solid gray; } - /* line 480, ../sass/controls/_controls.scss */ + /* line 483, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2763,7 +2779,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#808080, #737373 20px); background-image: linear-gradient(#808080, #737373 20px); } -/* line 485, ../sass/controls/_controls.scss */ +/* line 488, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.4); } @@ -3494,31 +3510,6 @@ label.checkbox.custom { font-size: 0.65em; vertical-align: top; } -/* line 2, ../sass/_flex.scss */ -.l-flex.l-flex-justify { - justify-content: space-between; } -/* line 5, ../sass/_flex.scss */ -.l-flex .l-flex-row, .l-flex.l-flex-row { - display: flex; - flex-flow: row nowrap; } -/* line 16, ../sass/_flex.scss */ -.l-flex .l-flex-max { - flex: 1 0 !important; } -/* line 20, ../sass/_flex.scss */ -.l-flex .flex-ignore { - display: flex; - flex-flow: row nowrap; - flex: 0 1 auto; } - -/* line 28, ../sass/_flex.scss */ -.object-browse-bar.bar > div.abs { - background-color: rgba(0, 128, 0, 0.2); } - -/* line 33, ../sass/_flex.scss */ -.l-flex-row .title-label { - background-color: rgba(0, 0, 255, 0.2); - flex: 1 0 !important; } - /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -4706,11 +4697,25 @@ input[type="text"] { *****************************************************************************/ /* line 22, ../sass/user-environ/_object-browse.scss */ .object-browse-bar { + overflow: hidden; + position: absolute; + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; + width: auto; + height: auto; height: 24px; - line-height: 24px; } - /* line 26, ../sass/user-environ/_object-browse.scss */ - .object-browse-bar .items-select .btn-menu { - margin-right: 15px; } + line-height: 24px; + white-space: nowrap; } + /* line 28, ../sass/user-environ/_object-browse.scss */ + .object-browse-bar .left { + padding-right: 5px; } + /* line 30, ../sass/user-environ/_object-browse.scss */ + .object-browse-bar .left .l-back { + display: inline-block; + float: left; + margin-right: 10px; } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index d75de0c0c9..1073f325cc 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -53,7 +53,7 @@ @import "edit/editor"; @import "features/imagery"; @import "features/time-display"; -@import "flex"; +//@import "flex"; @import "forms/elems"; @import "forms/validation"; @import "forms/text-input"; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index fe6aa3b86b..61aabb1fa3 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -364,7 +364,7 @@ label.checkbox.custom { .object-header { //@include test(); font-size: 1em; - line-height: 120%; + //line-height: 120%; .label { //display: flex; //flex-direction: row; @@ -373,26 +373,39 @@ label.checkbox.custom { .title-label, .type-icon, .context-available { - @include tmpBorder(#6666ff); + //@include tmpBorder(#6666ff); vertical-align: middle; } > .type-icon { font-size: 120%; + float: left; + margin-right: $interiorMargin; + } + + + .l-elem-wrapper { + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + } + + .action { + margin-right: $interiorMargin; } .title-label { @include ellipsize(); color: lighten($colorBodyFg, 40%); - padding-right: 0.75em; // For context arrow. Done with em's so pad is relative to the scale of the text. - position: relative; + padding-right: 0.35em; // For context arrow. Done with em's so pad is relative to the scale of the text. + //position: relative; } .context-available { @include trans-prop-nice(opacity, 0.25s); opacity: 0; font-size: 0.7em; - position: absolute; - right: 0; + //position: absolute; + //right: 0; } &:hover { .context-available { @@ -401,16 +414,6 @@ label.checkbox.custom { } } -.top-bar, -.object-browse-bar { - .object-header { - //font-size: 1.1em; - span { - //display: inline-block; - } - } -} - /******************************************************** SLIDERS */ .slider { diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 81faab4452..7bca0d480b 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -70,19 +70,27 @@ &.abs { text-wrap: none; white-space: nowrap; + &.left, + .left { + width: 45%; + right: auto; + } + &.right, + .right { + width: 45%; + left: auto; + text-align: right; + .icon.major { + margin-left: $interiorMargin * 3; + } + } } - &.left, - .left { - width: 45% !important; - right: auto !important; - } - &.right, - .right { - width: 45% !important; - left: auto !important; - text-align: right; - .icon.major { - margin-left: $interiorMargin * 3; + &.l-flex { + display: flex; + flex-flow: row nowrap; + align-items: stretch; + .left { + flex: 1 1 auto; } } } diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss index 3ab3f8c5f7..fc1065acec 100644 --- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss +++ b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss @@ -20,11 +20,17 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .object-browse-bar { + @include absPosDefault(); height: $ueTopBarH; line-height: $ueTopBarH; - .items-select { - .btn-menu { - margin-right: $interiorMargin * 3; + white-space: nowrap; + + .left { + padding-right: $interiorMargin; + .l-back { + display: inline-block; + float: left; + margin-right: $interiorMarginLg; } } } \ No newline at end of file diff --git a/platform/features/layout/res/templates/frame.html b/platform/features/layout/res/templates/frame.html index fccdf813bd..0643f1645b 100644 --- a/platform/features/layout/res/templates/frame.html +++ b/platform/features/layout/res/templates/frame.html @@ -20,12 +20,12 @@ at runtime from the About dialog for additional information. -->
-
-
+
+
-
+
From 44ed4e0e0d8032900c6601e1565253b61f031a0b Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 24 Aug 2015 12:39:50 -0700 Subject: [PATCH 07/21] [Mobile] IN PROGRESS: Minor tweak for line-height in top-bar open #74 --- .../browse/res/templates/browse/object-header.html | 1 - .../commonUI/general/res/css/theme-espresso.css | 13 +++++++------ .../general/res/sass/user-environ/_top-bar.scss | 4 +--- 3 files changed, 8 insertions(+), 10 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse/object-header.html b/platform/commonUI/browse/res/templates/browse/object-header.html index f1667f5816..a9652631d9 100644 --- a/platform/commonUI/browse/res/templates/browse/object-header.html +++ b/platform/commonUI/browse/res/templates/browse/object-header.html @@ -21,7 +21,6 @@ -->
{{type.getGlyph()}} - {{parameters.mode}} diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 6d3f9a5442..9605e2ee4e 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -4573,23 +4573,24 @@ input[type="text"] { right: 10px; bottom: auto; left: 10px; - height: 30px; } -/* line 33, ../sass/user-environ/_top-bar.scss */ + height: 30px; + line-height: 24px; } +/* line 31, ../sass/user-environ/_top-bar.scss */ .top-bar .title { color: #fff; } -/* line 37, ../sass/user-environ/_top-bar.scss */ +/* line 35, ../sass/user-environ/_top-bar.scss */ .top-bar .buttons-main { font-size: 0.8em; left: auto; text-align: right; } - /* line 42, ../sass/user-environ/_top-bar.scss */ + /* line 40, ../sass/user-environ/_top-bar.scss */ .top-bar .buttons-main .btn { margin-left: 5px; } -/* line 50, ../sass/user-environ/_top-bar.scss */ +/* line 48, ../sass/user-environ/_top-bar.scss */ .edit-mode .top-bar .buttons-main { white-space: nowrap; } - /* line 54, ../sass/user-environ/_top-bar.scss */ + /* line 52, ../sass/user-environ/_top-bar.scss */ .edit-mode .top-bar .buttons-main.abs, .edit-mode .top-bar .btn-menu span.buttons-main.l-click-area, .btn-menu .edit-mode .top-bar span.buttons-main.l-click-area { bottom: auto; left: auto; } diff --git a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss index 19488e9c10..638edab9ec 100644 --- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss +++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss @@ -25,11 +25,9 @@ border-bottom: 1px solid $colorInteriorBorder; top: $bodyMargin; right: $bodyMargin; bottom: auto; left: $bodyMargin; height: $ueTopBarEditH; + line-height: $ueTopBarH; } - .action { - } - .title { color: #fff; } From 76c4b96683ea5dd2e55da3c65813fff8ac3a284c Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 24 Aug 2015 15:24:35 -0700 Subject: [PATCH 08/21] [Mobile] IN PROGRESS: Menu hide/show fixes; font-size tweaking open #74 Changed .right-repr to use translateX in phone portrait mode; font-size tweaking; Refactored css organization in mobile/_layout.scss; --- .../commonUI/browse/res/templates/browse.html | 15 +- .../general/res/css/theme-espresso.css | 162 +++++++++--------- platform/commonUI/general/res/css/tree.css | 12 +- platform/commonUI/general/res/sass/_main.scss | 2 +- .../commonUI/general/res/sass/_mixins.scss | 1 + .../general/res/sass/mobile/_constants.scss | 2 +- .../general/res/sass/mobile/_layout.scss | 82 +++++---- .../general/res/sass/mobile/_tree.scss | 13 +- .../res/sass/mobile/controls/_menus.scss | 2 +- .../res/sass/user-environ/_object-browse.scss | 1 + 10 files changed, 158 insertions(+), 134 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index ce7cb41cb1..8bb6b7fa8e 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -38,13 +38,14 @@
-
-
- - -
-
m
-
+ +
+
+ + +
+
m
+
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 9605e2ee4e..1ead13f014 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -870,7 +870,7 @@ mct-container { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { /* line 120, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { - right: 19px !important; } } + right: 10% !important; } } @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 120, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left-menu { @@ -896,7 +896,8 @@ mct-container { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { /* line 144, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { - width: 19px !important; } } + left: 0 !important; + transform: translateX(90%); } } @media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 144, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { @@ -910,38 +911,39 @@ mct-container { .browse-showtree .mobile-pane.right-repr { width: 70% !important; } } -/* line 168, ../sass/mobile/_layout.scss */ -.mobile-menu-icon { - position: absolute; - top: 10px; - left: 10px; } - @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 176, ../sass/mobile/_layout.scss */ - .object-header { - position: relative; - left: 44px; } - /* line 181, ../sass/mobile/_layout.scss */ - .object-header .label .context-available { - opacity: 1 !important; } } + /* line 171, ../sass/mobile/_layout.scss */ + .mobile-menu-icon { + font-size: 110%; + position: absolute; + top: 12px; + left: 10px; } + + /* line 178, ../sass/mobile/_layout.scss */ + .object-browse-bar { + display: block !important; + left: 35px !important; } + /* line 183, ../sass/mobile/_layout.scss */ + .object-browse-bar .context-available { + opacity: 1 !important; } -@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { /* line 188, ../sass/mobile/_layout.scss */ - .desktop-hide { - display: none; } } + .tree-holder { + overflow-x: hidden !important; } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 195, ../sass/mobile/_layout.scss */ - .mobile-hide { - display: none; } } + /* line 192, ../sass/mobile/_layout.scss */ + .mobile-disable-select { + -moz-user-select: -moz-none; + -ms-user-select: none; + -webkit-user-select: none; + user-select: none; } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 201, ../sass/mobile/_layout.scss */ - .mobile-important-hide { - display: none !important; } } + /* line 197, ../sass/mobile/_layout.scss */ + .mobile-hide, + .mobile-hide-important { + display: none !important; } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 207, ../sass/mobile/_layout.scss */ + /* line 202, ../sass/mobile/_layout.scss */ .mobile-back-hide { pointer-events: none; -moz-transition-property: opacity; @@ -956,10 +958,9 @@ mct-container { -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; - opacity: 0; } } + opacity: 0; } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 216, ../sass/mobile/_layout.scss */ + /* line 207, ../sass/mobile/_layout.scss */ .mobile-back-unhide { pointer-events: all; -moz-transition-property: opacity; @@ -975,25 +976,54 @@ mct-container { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; opacity: 1; } } - -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 225, ../sass/mobile/_layout.scss */ - .phone-hide { +@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 214, ../sass/mobile/_layout.scss */ + .desktop-hide { display: none; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 231, ../sass/mobile/_layout.scss */ - .tree-holder { - overflow-x: hidden !important; } } +/* -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 236, ../sass/mobile/_layout.scss */ - .mobile-disable-select { - -moz-user-select: -moz-none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; } } +.mobile-back-hide { + @include phoneandtablet { + pointer-events: none; + @include trans-prop-nice(opacity, .4s); + opacity: 0; + } +} + +// Hides objects on phone and tablet +.mobile-back-unhide { + @include phoneandtablet { + pointer-events: all; + @include trans-prop-nice(opacity, .4s); + opacity: 1; + } +} + + +// Hides objects only on the phone +.phone-hide { + @include phone { + display: none; + } +} + +.tree-holder { + @include phoneandtablet { + .tree-holder { + overflow-x: hidden !important; + } + } +} +.mobile-disable-select { + @include phoneandtablet { + .mobile-disable-select { + @include user-select(none); + } + } +} +*/ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -3047,39 +3077,6 @@ label.checkbox.custom { right: 0; width: auto; } -/***************************************************************************** - * Open MCT Web, Copyright (c) 2014-2015, United States Government - * as represented by the Administrator of the National Aeronautics and Space - * Administration. All rights reserved. - * - * Open MCT Web is licensed under the Apache License, Version 2.0 (the - * "License"); you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * http://www.apache.org/licenses/LICENSE-2.0. - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT - * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the - * License for the specific language governing permissions and limitations - * under the License. - * - * Open MCT Web includes source code licensed under additional open source - * licenses. See the Open Source Licenses file (LICENSES.md) included with - * this source code distribution or the Licensing information page available - * at runtime from the About dialog for additional information. - *****************************************************************************/ -/* line 25, ../sass/mobile/controls/_menus.scss */ -.mobile-menu-icon { - display: inline-block; } - @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 25, ../sass/mobile/controls/_menus.scss */ - .mobile-menu-icon { - font-size: 21px; } } - @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 25, ../sass/mobile/controls/_menus.scss */ - .mobile-menu-icon { - display: none; } } - /* line 1, ../sass/controls/_time-controller.scss */ .l-time-controller { position: relative; @@ -4706,13 +4703,16 @@ input[type="text"] { left: 0px; width: auto; height: auto; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; height: 24px; line-height: 24px; white-space: nowrap; } - /* line 28, ../sass/user-environ/_object-browse.scss */ + /* line 29, ../sass/user-environ/_object-browse.scss */ .object-browse-bar .left { padding-right: 5px; } - /* line 30, ../sass/user-environ/_object-browse.scss */ + /* line 31, ../sass/user-environ/_object-browse.scss */ .object-browse-bar .left .l-back { display: inline-block; float: left; diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 6ddab967f0..0566559e1b 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -324,28 +324,28 @@ ul.tree { * at runtime from the About dialog for additional information. *****************************************************************************/ @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 30, ../sass/mobile/_tree.scss */ + /* line 28, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item { height: 35px; line-height: 35px; margin-bottom: 0px; } - /* line 35, ../sass/mobile/_tree.scss */ + /* line 33, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .view-control { position: absolute; font-size: 1.1em; right: 0px; width: 30px; text-align: center; } - /* line 44, ../sass/mobile/_tree.scss */ + /* line 42, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .label { left: 0; right: 35px; - font-size: 1.2em; } - /* line 51, ../sass/mobile/_tree.scss */ + font-size: 1.1em; } + /* line 50, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .label .type-icon { top: 9px; bottom: auto; height: 16px; } - /* line 62, ../sass/mobile/_tree.scss */ + /* line 61, ../sass/mobile/_tree.scss */ ul.tree ul.tree { margin-left: 20px; } } diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 1073f325cc..18dc5aa1e1 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -48,7 +48,7 @@ @import "controls/controls"; @import "controls/lists"; @import "controls/menus"; -@import "mobile/controls/menus"; +//@import "mobile/controls/menus"; @import "controls/time-controller"; @import "edit/editor"; @import "features/imagery"; diff --git a/platform/commonUI/general/res/sass/_mixins.scss b/platform/commonUI/general/res/sass/_mixins.scss index a42a2f480d..bc97b6a521 100644 --- a/platform/commonUI/general/res/sass/_mixins.scss +++ b/platform/commonUI/general/res/sass/_mixins.scss @@ -368,6 +368,7 @@ } @mixin tmpBorder($c: #ffcc00, $a: 0.75) { + @inlude box-sizing(border-box); border: 1px dotted rgba($c, $a); } diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 9d7357126e..aedd4c3abd 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -81,7 +81,7 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}"; $desktopLandscape: "screen and #{$desktopLandscapeCheck}"; /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ -$phoneRepSizePortrait: 19px; +$phoneRepSizePortrait: 10%; $phoneRepSizeLandscape: 60%; $tabletRepSizePortrait: 500px; $tabletRepSizeLandscape: 70%; diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 9609ed1fdd..e13334ec61 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -149,7 +149,9 @@ // On both phones and tablets, the width of // the right pane is specified @include phonePortrait { - width: $phoneRepSizePortrait !important; + //width: $phoneRepSizePortrait !important; + left: 0 !important; + transform: translateX(100% - $phoneRepSizePortrait); } @include phoneLandscape { width: $phoneRepSizeLandscape !important; @@ -165,24 +167,48 @@ } } -.mobile-menu-icon { - position: absolute; - top: $bodyMargin; left: $bodyMargin; -} +@include phoneandtablet { + .mobile-menu-icon { + font-size: 110%; + position: absolute; + top: $bodyMargin + 2; + left: $bodyMargin; + } -// Object header must be moved -// over to make space for the -// hamburger icon -.object-header { - @include phoneandtablet { - position: relative; - left: 44px; - .label { - .context-available { - opacity: 1 !important; - } + .object-browse-bar { + //@include test(); + display: block !important; + //font-size: 0.95em; + left: 35px !important; + .context-available { + opacity: 1 !important; } } + + .tree-holder { + overflow-x: hidden !important; + } + + .mobile-disable-select { + @include user-select(none); + } + + // Hides objects on phone and tablet + .mobile-hide, + .mobile-hide-important { + display: none !important; + } + + .mobile-back-hide { + pointer-events: none; + @include trans-prop-nice(opacity, .4s); + opacity: 0; + } + .mobile-back-unhide { + pointer-events: all; + @include trans-prop-nice(opacity, .4s); + opacity: 1; + } } .desktop-hide { @@ -191,18 +217,7 @@ } } -// Hides objects on phone and tablet -.mobile-hide { - @include phoneandtablet { - display: none; - } -} - -.mobile-important-hide { - @include phoneandtablet { - display: none !important; - } -} +/* .mobile-back-hide { @include phoneandtablet { @@ -212,6 +227,7 @@ } } + // Hides objects on phone and tablet .mobile-back-unhide { @include phoneandtablet { @@ -221,6 +237,7 @@ } } + // Hides objects only on the phone .phone-hide { @include phone { @@ -230,11 +247,16 @@ .tree-holder { @include phoneandtablet { - overflow-x: hidden !important; + .tree-holder { + overflow-x: hidden !important; + } } } .mobile-disable-select { @include phoneandtablet { - @include user-select(none); + .mobile-disable-select { + @include user-select(none); + } } } +*/ \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 6918b8f217..5cc0ac1b25 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -20,10 +20,8 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ - -ul.tree { - // Only applies to phones and tablets - @include phoneandtablet { +@include phoneandtablet { + ul.tree { //@include menuUlReset(); li { //border-top: 1px solid $colorInteriorBorder; // TEMP @@ -39,7 +37,7 @@ ul.tree { right: 0px; width: $mobileTreeRightArrowW; text-align: center; - } + } .label { // Designates the starting left margin @@ -47,13 +45,14 @@ ul.tree { // Also adds right space for selection button left: 0; right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow - font-size: 1.2em; + font-size: 1.1em; + //font-size: 1.2em; // CH CO .type-icon { @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH); } .title-label { } - } + } } } diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss index d738f63d4a..e06fdb7979 100644 --- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss @@ -30,5 +30,5 @@ } @include desktop { display: none; - } + } } diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss index fc1065acec..3ec809343a 100644 --- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss +++ b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss @@ -21,6 +21,7 @@ *****************************************************************************/ .object-browse-bar { @include absPosDefault(); + @include box-sizing(border-box); height: $ueTopBarH; line-height: $ueTopBarH; white-space: nowrap; From 69c6d4bd262bc0371df683b70bc6acb4203c375f Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 24 Aug 2015 16:31:38 -0700 Subject: [PATCH 09/21] [Mobile] IN PROGRESS: Tweaks to labels; open #74 Cleaned up layout of bottom-bar; Fixed class selector for ue-bottom-bar; --- platform/commonUI/general/res/css/items.css | 24 +++++++++---------- .../general/res/css/theme-espresso.css | 6 ++--- .../general/res/sass/items/_item.scss | 3 ++- .../res/sass/user-environ/_layout.scss | 2 +- 4 files changed, 18 insertions(+), 17 deletions(-) diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index 9ea92fa707..cf77cbed9a 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -234,12 +234,12 @@ /* line 79, ../sass/items/_item.scss */ .items-holder .item.grid-item .bar.bottom-bar { top: auto; - height: 30px; } - /* line 84, ../sass/items/_item.scss */ + line-height: 110%; } + /* line 85, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main { line-height: 160px; z-index: 1; } - /* line 90, ../sass/items/_item.scss */ + /* line 91, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-type { overflow: false; position: absolute; @@ -255,7 +255,7 @@ bottom: auto; height: 102px; top: 30px; } - /* line 102, ../sass/items/_item.scss */ + /* line 103, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-type .l-icon-link { color: #49dedb; height: auto; @@ -265,7 +265,7 @@ left: 0px; bottom: 10px; z-index: 2; } - /* line 115, ../sass/items/_item.scss */ + /* line 116, ../sass/items/_item.scss */ .items-holder .item.grid-item .item-main .item-open { -moz-transition-property: "opacity"; -o-transition-property: "opacity"; @@ -285,17 +285,17 @@ width: 50px; pointer-events: none; text-align: right; } - /* line 127, ../sass/items/_item.scss */ + /* line 128, ../sass/items/_item.scss */ .items-holder .item.grid-item .title { text-shadow: rgba(0, 0, 0, 0.1) 0 1px 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cccccc; } - /* line 132, ../sass/items/_item.scss */ + /* line 133, ../sass/items/_item.scss */ .items-holder .item.grid-item .details { font-size: 0.8em; } - /* line 135, ../sass/items/_item.scss */ + /* line 136, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -332,16 +332,16 @@ /* line 175, ../sass/_mixins.scss */ .items-holder .item.grid-item.selected.btn-menu .invoke-menu { color: #52d4ff; } - /* line 140, ../sass/items/_item.scss */ + /* line 141, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) { color: #80dfff; } - /* line 141, ../sass/items/_item.scss */ + /* line 142, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .item-main .item-open { color: #80dfff; } - /* line 142, ../sass/items/_item.scss */ + /* line 143, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .title { color: white; } - /* line 144, ../sass/items/_item.scss */ + /* line 145, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected:hover .item-main .item-type { color: white !important; } diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 1ead13f014..61044025cd 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -594,7 +594,7 @@ mct-container { .user-environ .edit-area .work-area { top: 40px; } /* line 129, ../sass/user-environ/_layout.scss */ -.user-environ .bottom-bar { +.user-environ .ue-bottom-bar { overflow: hidden; position: absolute; top: 0; @@ -606,10 +606,10 @@ mct-container { top: auto; height: 25px; } /* line 134, ../sass/user-environ/_layout.scss */ - .user-environ .bottom-bar .status-holder { + .user-environ .ue-bottom-bar .status-holder { z-index: 1; } /* line 138, ../sass/user-environ/_layout.scss */ - .user-environ .bottom-bar .app-logo { + .user-environ .ue-bottom-bar .app-logo { left: auto; width: 105px; z-index: 2; } diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss index d9c9d8613b..c04568d8fa 100644 --- a/platform/commonUI/general/res/sass/items/_item.scss +++ b/platform/commonUI/general/res/sass/items/_item.scss @@ -78,7 +78,8 @@ } &.bottom-bar { top: auto; - height: $ueBrowseGridItemBottomBarH; + //height: $ueBrowseGridItemBottomBarH; + line-height: 110%; } } .item-main { diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 7bca0d480b..9538a2bb74 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -126,7 +126,7 @@ } } - .bottom-bar { + .ue-bottom-bar { //@include absPosDefault($bodyMargin); @include absPosDefault(0);// New status bar design top: auto; From 5184e08a5b262aafd9e780b8b453c5c12d73e43d Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 24 Aug 2015 16:45:55 -0700 Subject: [PATCH 10/21] [Mobile] IN PROGRESS: Tweak to TypeImpl to return glyph for unknown types open #74 Thanks Victor!; --- platform/core/bundle.json | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/platform/core/bundle.json b/platform/core/bundle.json index 4b33f48f35..c8c56299f6 100644 --- a/platform/core/bundle.json +++ b/platform/core/bundle.json @@ -142,7 +142,10 @@ { "key": "unknown", "name": "Unknown Type", - "glyph": "?" + "glyph": "\u003f" + }, + { + "glyph": "\u003f" } ], "capabilities": [ From 13b66cd215d5aa371a092e04ffcb2a750ef49c03 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Mon, 24 Aug 2015 17:04:38 -0700 Subject: [PATCH 11/21] [Mobile] IN PROGRESS: Only display custom scrollbars in desktop mode open #74 --- .../general/res/css/theme-espresso.css | 90 +++++++++---------- .../general/res/sass/controls/_controls.scss | 38 ++++---- 2 files changed, 65 insertions(+), 63 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 61044025cd..67e258e908 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -2765,54 +2765,54 @@ label.checkbox.custom { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ -/* line 470, ../sass/controls/_controls.scss */ -::-webkit-scrollbar { - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px; - -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px; - box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px; - background-color: rgba(0, 0, 0, 0.4); - border-bottom: 1px solid rgba(77, 77, 77, 0.4); - border-right: 1px solid rgba(77, 77, 77, 0.4); - height: 10px; - width: 10px; } +@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 471, ../sass/controls/_controls.scss */ + ::-webkit-scrollbar { + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -moz-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px; + -webkit-box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px; + box-shadow: inset rgba(0, 0, 0, 0.7) 0 1px 5px; + background-color: rgba(0, 0, 0, 0.4); + border-bottom: 1px solid rgba(77, 77, 77, 0.4); + border-right: 1px solid rgba(77, 77, 77, 0.4); + height: 10px; + width: 10px; } -/* line 476, ../sass/controls/_controls.scss */ -::-webkit-scrollbar-thumb { - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959)); - background-image: -moz-linear-gradient(#666666, #595959 20px); - background-image: -webkit-linear-gradient(#666666, #595959 20px); - background-image: linear-gradient(#666666, #595959 20px); - -moz-border-radius: 1px; - -webkit-border-radius: 1px; - border-radius: 1px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; - border-top: 1px solid gray; } - /* line 483, ../sass/controls/_controls.scss */ - ::-webkit-scrollbar-thumb:hover { - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + /* line 477, ../sass/controls/_controls.scss */ + ::-webkit-scrollbar-thumb { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; - background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373)); - background-image: -moz-linear-gradient(#808080, #737373 20px); - background-image: -webkit-linear-gradient(#808080, #737373 20px); - background-image: linear-gradient(#808080, #737373 20px); } - -/* line 488, ../sass/controls/_controls.scss */ -::-webkit-scrollbar-corner { - background: rgba(0, 0, 0, 0.4); } + background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #666666), color-stop(100%, #595959)); + background-image: -moz-linear-gradient(#666666, #595959 20px); + background-image: -webkit-linear-gradient(#666666, #595959 20px); + background-image: linear-gradient(#666666, #595959 20px); + -moz-border-radius: 1px; + -webkit-border-radius: 1px; + border-radius: 1px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; + -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; + box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; + border-top: 1px solid gray; } + /* line 484, ../sass/controls/_controls.scss */ + ::-webkit-scrollbar-thumb:hover { + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -webkit-gradient(linear, 50% 0%, 50% 20, color-stop(0%, #808080), color-stop(100%, #737373)); + background-image: -moz-linear-gradient(#808080, #737373 20px); + background-image: -webkit-linear-gradient(#808080, #737373 20px); + background-image: linear-gradient(#808080, #737373 20px); } + /* line 489, ../sass/controls/_controls.scss */ + ::-webkit-scrollbar-corner { + background: rgba(0, 0, 0, 0.4); } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 61aabb1fa3..b2a0352594 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -467,24 +467,26 @@ label.checkbox.custom { /******************************************************** BROWSER ELEMENTS */ -::-webkit-scrollbar { - @include sliderTrack(); - height: $scrollbarTrackSize; - width: $scrollbarTrackSize; -} - -::-webkit-scrollbar-thumb { - $bg: lighten($colorBodyBg, 10%); - @include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px)); - @include border-radius(1px); - @include box-sizing(border-box); - @include boxShdwSubtle(); - border-top: 1px solid lighten($bg, 20%); - &:hover { - @include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px)); +@include desktop { + ::-webkit-scrollbar { + @include sliderTrack(); + height: $scrollbarTrackSize; + width: $scrollbarTrackSize; } -} -::-webkit-scrollbar-corner { - background: rgba(#000, 0.4); + ::-webkit-scrollbar-thumb { + $bg: lighten($colorBodyBg, 10%); + @include background-image(linear-gradient(lighten($bg, 10%), lighten($bg, 5%) 20px)); + @include border-radius(1px); + @include box-sizing(border-box); + @include boxShdwSubtle(); + border-top: 1px solid lighten($bg, 20%); + &:hover { + @include background-image(linear-gradient(lighten($bg, 20%), lighten($bg, 15%) 20px)); + } + } + + ::-webkit-scrollbar-corner { + background: rgba(#000, 0.4); + } } \ No newline at end of file From 7542c6d49ab05d2860a7f43c180919eb05666b5e Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 25 Aug 2015 09:41:38 -0700 Subject: [PATCH 12/21] [Mobile] IN PROGRESS: Cleanups on .btn for line-height, sizing, etc. open #74 --- .../general/res/css/theme-espresso.css | 308 +++++++++--------- .../general/res/sass/controls/_buttons.scss | 3 +- .../general/res/sass/controls/_controls.scss | 57 ++-- .../general/res/sass/user-environ/_frame.scss | 18 +- .../res/sass/user-environ/_object-browse.scss | 3 +- .../res/templates/controls/switcher.html | 2 +- 6 files changed, 195 insertions(+), 196 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 67e258e908..28337e74f6 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -1755,37 +1755,37 @@ table { -ms-user-select: none; -webkit-user-select: none; user-select: none; - line-height: 1.5em; + line-height: 150%; padding: 0 7.5px; text-decoration: none; } - /* line 32, ../sass/controls/_buttons.scss */ + /* line 33, ../sass/controls/_buttons.scss */ .btn.lg, .btn.create-btn, .l-btn.lg, .l-btn.create-btn { height: 24px; line-height: 22px; padding: 0 22.5px; } - /* line 41, ../sass/controls/_buttons.scss */ + /* line 42, ../sass/controls/_buttons.scss */ .btn.create-btn:before, .l-btn.create-btn:before { content: "+"; font-family: symbolsfont; font-size: 0.8em; } - /* line 46, ../sass/controls/_buttons.scss */ + /* line 47, ../sass/controls/_buttons.scss */ .btn.create-btn .menu, .l-btn.create-btn .menu { margin-left: -7.5px; } - /* line 53, ../sass/controls/_buttons.scss */ + /* line 54, ../sass/controls/_buttons.scss */ .btn.sm, .l-btn.sm { padding: 0 5px; } - /* line 56, ../sass/controls/_buttons.scss */ + /* line 57, ../sass/controls/_buttons.scss */ .btn.vsm, .l-btn.vsm { padding: 0 2.5px; } /*********************************** STYLE STYLES */ -/* line 62, ../sass/controls/_buttons.scss */ +/* line 63, ../sass/controls/_buttons.scss */ .btn, .s-btn, .icon-btn, @@ -1799,7 +1799,7 @@ table { text-shadow: rgba(0, 0, 0, 0.3) 0 1px 1px; cursor: pointer; text-decoration: none; } - /* line 71, ../sass/controls/_buttons.scss */ + /* line 72, ../sass/controls/_buttons.scss */ .btn.major, .s-btn.major, .major.icon-btn, @@ -1848,7 +1848,7 @@ table { .major.btn-menu.icon-btn .invoke-menu, .major.btn-menu.s-icon-btn .invoke-menu { color: #52d4ff; } - /* line 76, ../sass/controls/_buttons.scss */ + /* line 77, ../sass/controls/_buttons.scss */ .btn.major:hover, .s-btn.major:hover, .major.icon-btn:hover, @@ -1896,13 +1896,13 @@ table { .major.icon-btn:hover.btn-menu .invoke-menu, .major.s-icon-btn:hover.btn-menu .invoke-menu { color: #6bdaff; } - /* line 80, ../sass/controls/_buttons.scss */ + /* line 81, ../sass/controls/_buttons.scss */ .btn.major .invoke-menu, .s-btn.major .invoke-menu, .major.icon-btn .invoke-menu, .major.s-icon-btn .invoke-menu { color: #ccf2ff; } - /* line 84, ../sass/controls/_buttons.scss */ + /* line 85, ../sass/controls/_buttons.scss */ .btn.subtle, .s-btn.subtle, .subtle.icon-btn, @@ -1950,7 +1950,7 @@ table { .subtle.btn-menu.icon-btn .invoke-menu, .subtle.btn-menu.s-icon-btn .invoke-menu { color: #a8a8a8; } - /* line 87, ../sass/controls/_buttons.scss */ + /* line 88, ../sass/controls/_buttons.scss */ .btn.very-subtle, .btn.s-very-subtle, .s-btn.very-subtle, .very-subtle.icon-btn, @@ -2010,7 +2010,7 @@ table { .s-very-subtle.btn-menu.icon-btn .invoke-menu, .s-very-subtle.btn-menu.s-icon-btn .invoke-menu { color: #757575; } - /* line 90, ../sass/controls/_buttons.scss */ + /* line 91, ../sass/controls/_buttons.scss */ .btn.very-subtle.paused, .btn.s-very-subtle.paused, .s-btn.very-subtle.paused, .very-subtle.paused.icon-btn, @@ -2070,7 +2070,7 @@ table { .s-very-subtle.paused.btn-menu.icon-btn .invoke-menu, .s-very-subtle.paused.btn-menu.s-icon-btn .invoke-menu { color: #feb04d; } - /* line 92, ../sass/controls/_buttons.scss */ + /* line 93, ../sass/controls/_buttons.scss */ .btn.very-subtle.paused .icon:before, .btn.s-very-subtle.paused .icon:before, .s-btn.very-subtle.paused .icon:before, .very-subtle.paused.icon-btn .icon:before, @@ -2080,31 +2080,31 @@ table { .s-very-subtle.paused.s-icon-btn .icon:before { content: "\0000EF"; } -/* line 99, ../sass/controls/_buttons.scss */ +/* line 100, ../sass/controls/_buttons.scss */ .icon-btn, .s-icon-btn { font-size: 1em; } - /* line 103, ../sass/controls/_buttons.scss */ + /* line 104, ../sass/controls/_buttons.scss */ .icon-btn .icon, .s-icon-btn .icon { color: #0099cc; } - /* line 107, ../sass/controls/_buttons.scss */ + /* line 108, ../sass/controls/_buttons.scss */ .icon-btn.paused .icon, .s-icon-btn.paused .icon { color: #fff; } - /* line 115, ../sass/controls/_buttons.scss */ + /* line 116, ../sass/controls/_buttons.scss */ .icon-btn:not(.disabled):not(.paused):hover .icon, .s-icon-btn:not(.disabled):not(.paused):hover .icon { color: #33ccff; } - /* line 122, ../sass/controls/_buttons.scss */ + /* line 123, ../sass/controls/_buttons.scss */ .icon-btn.labeled, .s-icon-btn.labeled { padding: 0 3.75px; } - /* line 127, ../sass/controls/_buttons.scss */ + /* line 128, ../sass/controls/_buttons.scss */ .icon-btn.labeled .title-label, .s-icon-btn.labeled .title-label { margin-left: 5px; } - /* line 132, ../sass/controls/_buttons.scss */ + /* line 133, ../sass/controls/_buttons.scss */ .icon-btn.pause-play, .s-icon-btn.pause-play { /* &.paused { @@ -2112,17 +2112,17 @@ table { @include pulse(500ms); } }*/ } - /* line 138, ../sass/controls/_buttons.scss */ + /* line 139, ../sass/controls/_buttons.scss */ .icon-btn.pause-play .icon:before, .s-icon-btn.pause-play .icon:before { content: "\0000F1"; } - /* line 144, ../sass/controls/_buttons.scss */ + /* line 145, ../sass/controls/_buttons.scss */ .icon-btn.show-thumbs .icon:before, .s-icon-btn.show-thumbs .icon:before { content: "\000039"; } /*********************************** LAYOUT STYLES */ -/* line 151, ../sass/controls/_buttons.scss */ +/* line 152, ../sass/controls/_buttons.scss */ span.btn, span.btn span, span.l-btn, @@ -2315,11 +2315,20 @@ a.l-btn span { overflow-y: auto; overflow-x: hidden; } -/* line 105, ../sass/controls/_controls.scss */ -.btn-bar .btn, -.btn-bar .btn-set, -.btn-bar .t-btn { - display: inline-block; } +/* line 103, ../sass/controls/_controls.scss */ +.btn-bar { + /* .btn, + .btn-set, + .t-btn { + display: inline-block; + // margin-left: $interiorMargin; + } + .btn, + .t-btn { + &:first-child { + // margin-left: 0; + } + }*/ } /* line 119, ../sass/controls/_controls.scss */ .l-composite-control { @@ -2353,51 +2362,41 @@ a.l-btn span { .s-local-controls { font-size: 0.7rem; } -/* line 156, ../sass/controls/_controls.scss */ +/* .btn-set { - display: inline-block; - position: relative; } - /* line 160, ../sass/controls/_controls.scss */ - .btn-set .btn, - .btn-set .t-btn { - -moz-border-radius: 0; - -webkit-border-radius: 0; - border-radius: 0; - border-left: 1px solid #666666; - margin-left: 0; } - /* line 165, ../sass/controls/_controls.scss */ - .btn-set .btn:first-child, - .btn-set .t-btn:first-child { - border-left: none; - -moz-border-radius-topleft: 3px; - -webkit-border-top-left-radius: 3px; - border-top-left-radius: 3px; - -moz-border-radius-bottomleft: 3px; - -webkit-border-bottom-left-radius: 3px; - border-bottom-left-radius: 3px; } - /* line 169, ../sass/controls/_controls.scss */ - .btn-set .btn:last-child, - .btn-set .t-btn:last-child { - -moz-border-radius-topright: 3px; - -webkit-border-top-right-radius: 3px; - border-top-right-radius: 3px; - -moz-border-radius-bottomright: 3px; - -webkit-border-bottom-right-radius: 3px; - border-bottom-right-radius: 3px; } - -/* line 175, ../sass/controls/_controls.scss */ + // Buttons that have a very tight conceptual grouping - no internal space between them. + display: inline-block; + position: relative; + .btn, + .t-btn { + @include border-radius(0); + border-left: 1px solid lighten($colorBodyBg, 20%); + margin-left: 0; + &:first-child { + border-left: none; + @include border-left-radius($controlCr); + } + &:last-child { + @include border-right-radius($controlCr); + } + } +} +*/ +/* line 177, ../sass/controls/_controls.scss */ .object-browse-bar .btn, .object-browse-bar .t-btn, +.object-browse-bar .view-switcher, .top-bar .buttons-main .btn, .top-bar .buttons-main .t-btn, +.top-bar .view-switcher, .tool-bar .btn, .tool-bar .t-btn { display: inline-block; font-size: 11.25px; - height: 25px; - line-height: 22px; } + line-height: 200%; + vertical-align: top; } -/* line 194, ../sass/controls/_controls.scss */ +/* line 192, ../sass/controls/_controls.scss */ label.checkbox.custom { cursor: pointer; display: inline-block; @@ -2406,13 +2405,13 @@ label.checkbox.custom { padding-left: 19px; position: relative; vertical-align: top; } - /* line 204, ../sass/controls/_controls.scss */ + /* line 202, ../sass/controls/_controls.scss */ label.checkbox.custom em { color: #999; display: inline-block; height: 14px; min-width: 14px; } - /* line 209, ../sass/controls/_controls.scss */ + /* line 207, ../sass/controls/_controls.scss */ label.checkbox.custom em:before { -moz-border-radius: 1.5px; -webkit-border-radius: 1.5px; @@ -2431,51 +2430,51 @@ label.checkbox.custom { top: 0; position: absolute; text-align: center; } - /* line 227, ../sass/controls/_controls.scss */ + /* line 225, ../sass/controls/_controls.scss */ label.checkbox.custom.no-text { overflow: hidden; margin-right: 0; padding-left: 0; height: 14px; width: 14px; } - /* line 233, ../sass/controls/_controls.scss */ + /* line 231, ../sass/controls/_controls.scss */ label.checkbox.custom.no-text em { overflow: hidden; } - /* line 237, ../sass/controls/_controls.scss */ + /* line 235, ../sass/controls/_controls.scss */ label.checkbox.custom input { display: none; } - /* line 239, ../sass/controls/_controls.scss */ + /* line 237, ../sass/controls/_controls.scss */ label.checkbox.custom input:checked ~ em:before { background: #0099cc; color: #ccf2ff; content: "2"; } -/* line 247, ../sass/controls/_controls.scss */ +/* line 245, ../sass/controls/_controls.scss */ .input-labeled { margin-left: 5px; } - /* line 249, ../sass/controls/_controls.scss */ + /* line 247, ../sass/controls/_controls.scss */ .input-labeled label { display: inline-block; margin-right: 3px; } - /* line 253, ../sass/controls/_controls.scss */ + /* line 251, ../sass/controls/_controls.scss */ .input-labeled.inline { display: inline-block; } - /* line 256, ../sass/controls/_controls.scss */ + /* line 254, ../sass/controls/_controls.scss */ .input-labeled:first-child { margin-left: 0; } -/* line 261, ../sass/controls/_controls.scss */ +/* line 259, ../sass/controls/_controls.scss */ .btn-menu label.checkbox.custom { margin-left: 5px; } -/* line 266, ../sass/controls/_controls.scss */ +/* line 264, ../sass/controls/_controls.scss */ .item .checkbox.checked label { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; border-bottom: none; } -/* line 272, ../sass/controls/_controls.scss */ +/* line 270, ../sass/controls/_controls.scss */ .btn-menu { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2528,54 +2527,49 @@ label.checkbox.custom { /* line 175, ../sass/_mixins.scss */ .btn-menu.btn-menu .invoke-menu { color: #757575; } - /* line 284, ../sass/controls/_controls.scss */ + /* line 282, ../sass/controls/_controls.scss */ .btn-menu:not(.disabled):hover { color: #cccccc; } - /* line 309, ../sass/controls/_controls.scss */ + /* line 307, ../sass/controls/_controls.scss */ .btn-menu .name { margin-left: 5px; } - /* line 312, ../sass/controls/_controls.scss */ + /* line 310, ../sass/controls/_controls.scss */ .btn-menu .menu { position: absolute; left: 0; text-align: left; } - /* line 317, ../sass/controls/_controls.scss */ + /* line 315, ../sass/controls/_controls.scss */ .btn-menu .menu .ui-symbol.icon { width: 12px; } -/* line 323, ../sass/controls/_controls.scss */ -.top-bar .btn-menu { - height: 25px; - line-height: 25px; - padding-right: 10px; } - /* line 331, ../sass/controls/_controls.scss */ - .top-bar .btn-menu.browse-btn { - margin-right: 5px; - padding-left: 25px; } - /* line 334, ../sass/controls/_controls.scss */ - .top-bar .btn-menu.browse-btn .badge { - -moz-border-radius: 4.5px; - -webkit-border-radius: 4.5px; - border-radius: 4.5px; - display: block; - font-size: 1em; - line-height: 15px; - position: absolute; - top: 5px; - left: 5px; - bottom: 5px; - right: auto; - width: 15px; - height: auto; } +/* line 329, ../sass/controls/_controls.scss */ +.top-bar .btn-menu.browse-btn { + margin-right: 5px; + padding-left: 25px; } + /* line 332, ../sass/controls/_controls.scss */ + .top-bar .btn-menu.browse-btn .badge { + -moz-border-radius: 4.5px; + -webkit-border-radius: 4.5px; + border-radius: 4.5px; + display: block; + font-size: 1em; + line-height: 15px; + position: absolute; + top: 5px; + left: 5px; + bottom: 5px; + right: auto; + width: 15px; + height: auto; } -/* line 350, ../sass/controls/_controls.scss */ +/* line 348, ../sass/controls/_controls.scss */ .context-available { color: #0099cc; } - /* line 354, ../sass/controls/_controls.scss */ + /* line 351, ../sass/controls/_controls.scss */ .context-available:hover { color: deepskyblue; } -/* line 359, ../sass/controls/_controls.scss */ +/* line 356, ../sass/controls/_controls.scss */ .view-switcher { -moz-transition-property: visibility, opacity, background-color, border-color; -o-transition-property: visibility, opacity, background-color, border-color; @@ -2594,53 +2588,51 @@ label.checkbox.custom { /* line 364, ../sass/controls/_controls.scss */ .object-header { font-size: 1em; } - /* line 373, ../sass/controls/_controls.scss */ - .object-header .title-label, - .object-header .type-icon, - .object-header .context-available { - vertical-align: middle; } - /* line 379, ../sass/controls/_controls.scss */ + /* line 374, ../sass/controls/_controls.scss */ .object-header > .type-icon { font-size: 120%; float: left; margin-right: 5px; } - /* line 386, ../sass/controls/_controls.scss */ + /* line 380, ../sass/controls/_controls.scss */ .object-header .l-elem-wrapper { display: flex; flex-flow: row nowrap; justify-content: flex-start; } - /* line 392, ../sass/controls/_controls.scss */ + /* line 386, ../sass/controls/_controls.scss */ .object-header .action { margin-right: 5px; } - /* line 396, ../sass/controls/_controls.scss */ + /* line 390, ../sass/controls/_controls.scss */ .object-header .title-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: white; padding-right: 0.35em; } - /* line 403, ../sass/controls/_controls.scss */ + /* line 397, ../sass/controls/_controls.scss */ .object-header .context-available { - -moz-transition-property: opacity; - -o-transition-property: opacity; - -webkit-transition-property: opacity; - transition-property: opacity; - -moz-transition-duration: 0.25s; - -o-transition-duration: 0.25s; - -webkit-transition-duration: 0.25s; - transition-duration: 0.25s; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - opacity: 0; font-size: 0.7em; } - /* line 411, ../sass/controls/_controls.scss */ - .object-header:hover .context-available { - opacity: 1; } + @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 402, ../sass/controls/_controls.scss */ + .object-header .context-available { + -moz-transition-property: opacity; + -o-transition-property: opacity; + -webkit-transition-property: opacity; + transition-property: opacity; + -moz-transition-duration: 0.25s; + -o-transition-duration: 0.25s; + -webkit-transition-duration: 0.25s; + transition-duration: 0.25s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + opacity: 0; } + /* line 407, ../sass/controls/_controls.scss */ + .object-header:hover .context-available { + opacity: 1; } } /******************************************************** SLIDERS */ -/* line 423, ../sass/controls/_controls.scss */ +/* line 420, ../sass/controls/_controls.scss */ .slider .slot { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2661,7 +2653,7 @@ label.checkbox.custom { right: 0; bottom: auto; left: 0; } -/* line 434, ../sass/controls/_controls.scss */ +/* line 431, ../sass/controls/_controls.scss */ .slider .knob { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2744,12 +2736,12 @@ label.checkbox.custom { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; border-color: #0099cc; } - /* line 445, ../sass/controls/_controls.scss */ + /* line 442, ../sass/controls/_controls.scss */ .slider .knob:before { top: 1px; bottom: 3px; left: 5px; } -/* line 452, ../sass/controls/_controls.scss */ +/* line 449, ../sass/controls/_controls.scss */ .slider .range { background: rgba(0, 153, 204, 0.6); cursor: ew-resize; @@ -2760,13 +2752,13 @@ label.checkbox.custom { left: auto; height: auto; width: auto; } - /* line 462, ../sass/controls/_controls.scss */ + /* line 459, ../sass/controls/_controls.scss */ .slider .range:hover { background: rgba(0, 153, 204, 0.7); } /******************************************************** BROWSER ELEMENTS */ @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 471, ../sass/controls/_controls.scss */ + /* line 468, ../sass/controls/_controls.scss */ ::-webkit-scrollbar { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -2783,7 +2775,7 @@ label.checkbox.custom { height: 10px; width: 10px; } - /* line 477, ../sass/controls/_controls.scss */ + /* line 474, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzY2NjY2NiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzU5NTk1OSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2801,7 +2793,7 @@ label.checkbox.custom { -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px; border-top: 1px solid gray; } - /* line 484, ../sass/controls/_controls.scss */ + /* line 481, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-thumb:hover { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzgwODA4MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzczNzM3MyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -2810,7 +2802,7 @@ label.checkbox.custom { background-image: -webkit-linear-gradient(#808080, #737373 20px); background-image: linear-gradient(#808080, #737373 20px); } - /* line 489, ../sass/controls/_controls.scss */ + /* line 486, ../sass/controls/_controls.scss */ ::-webkit-scrollbar-corner { background: rgba(0, 0, 0, 0.4); } } /***************************************************************************** @@ -4531,14 +4523,18 @@ input[type="text"] { right: 5px; bottom: 5px; left: 5px; } -/* line 53, ../sass/user-environ/_frame.scss */ +/* line 51, ../sass/user-environ/_frame.scss */ .frame.frame-template .view-switcher { - opacity: 0; + line-height: 16px; z-index: 10; } -/* line 57, ../sass/user-environ/_frame.scss */ -.frame.frame-template:hover .view-switcher { - opacity: 1; } -/* line 65, ../sass/user-environ/_frame.scss */ +@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { + /* line 58, ../sass/user-environ/_frame.scss */ + .frame.frame-template .view-switcher { + opacity: 0; } + /* line 61, ../sass/user-environ/_frame.scss */ + .frame.frame-template:hover .view-switcher { + opacity: 1; } } +/* line 69, ../sass/user-environ/_frame.scss */ .frame .view-switcher .name { display: none; } @@ -4695,12 +4691,12 @@ input[type="text"] { *****************************************************************************/ /* line 22, ../sass/user-environ/_object-browse.scss */ .object-browse-bar { - overflow: hidden; + overflow: visible; position: absolute; - top: 0px; - right: 0px; - bottom: 0px; - left: 0px; + top: 0; + right: 0; + bottom: 0; + left: 0; width: auto; height: auto; -moz-box-sizing: border-box; @@ -4709,10 +4705,10 @@ input[type="text"] { height: 24px; line-height: 24px; white-space: nowrap; } - /* line 29, ../sass/user-environ/_object-browse.scss */ + /* line 30, ../sass/user-environ/_object-browse.scss */ .object-browse-bar .left { padding-right: 5px; } - /* line 31, ../sass/user-environ/_object-browse.scss */ + /* line 32, ../sass/user-environ/_object-browse.scss */ .object-browse-bar .left .l-back { display: inline-block; float: left; diff --git a/platform/commonUI/general/res/sass/controls/_buttons.scss b/platform/commonUI/general/res/sass/controls/_buttons.scss index ab2285ab5c..fcb168466a 100644 --- a/platform/commonUI/general/res/sass/controls/_buttons.scss +++ b/platform/commonUI/general/res/sass/controls/_buttons.scss @@ -26,7 +26,8 @@ $pad: $interiorMargin * $baseRatio; .btn, .l-btn { @include user-select(none); - line-height: 1.5em; // Was 1.25em + //line-height: 1.5em; // Was 1.25em + line-height: 150%; padding: 0 $pad; text-decoration: none; &.lg, diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index b2a0352594..bcec870f95 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -102,7 +102,7 @@ .btn-bar { // position: relative; - .btn, +/* .btn, .btn-set, .t-btn { display: inline-block; @@ -113,7 +113,7 @@ &:first-child { // margin-left: 0; } - } + }*/ } .l-composite-control { @@ -153,6 +153,7 @@ font-size: 0.7rem; } +/* .btn-set { // Buttons that have a very tight conceptual grouping - no internal space between them. display: inline-block; @@ -171,24 +172,21 @@ } } } +*/ .object-browse-bar .btn, .object-browse-bar .t-btn, +.object-browse-bar .view-switcher, .top-bar .buttons-main .btn, .top-bar .buttons-main .t-btn, +.top-bar .view-switcher, .tool-bar .btn, .tool-bar .t-btn { $h: $btnToolbarH; display: inline-block; font-size: $h * $btnFontSizeToH; - height: $h; - line-height: $h - 3; - .icon:not(.invoke-menu) { - // position: relative; - // top: -0.04em; - //font-size: 150%; - //vertical-align: middle; - } + line-height: 200%; + vertical-align: top; } label.checkbox.custom { @@ -325,9 +323,9 @@ label.checkbox.custom { $p: 10px; $badgeM: $interiorMargin; $badgeD: $h - ($badgeM * 2); - height: $h; - line-height: $h; - padding-right: 10px; + //height: $h; + //line-height: $h; + //padding-right: 10px; &.browse-btn { margin-right: $interiorMargin; padding-left: $badgeD + $badgeM * 2; @@ -350,7 +348,6 @@ label.checkbox.custom { .context-available { $c: $colorKey; color: $c; - //padding: 0 5px; &:hover { color: lighten($c, 10%); } @@ -358,23 +355,21 @@ label.checkbox.custom { .view-switcher { @include trans-prop-nice-fade($controlFadeMs); + .type-icon { + //vertical-align: top; + } } /******************************************************** OBJECT-HEADER */ .object-header { //@include test(); font-size: 1em; - //line-height: 120%; - .label { - //display: flex; - //flex-direction: row; - } - .title-label, - .type-icon, - .context-available { + > .title-label, + > .type-icon, + > .context-available { //@include tmpBorder(#6666ff); - vertical-align: middle; + //vertical-align: middle; } > .type-icon { font-size: 120%; @@ -382,7 +377,6 @@ label.checkbox.custom { margin-right: $interiorMargin; } - .l-elem-wrapper { display: flex; flex-flow: row nowrap; @@ -401,15 +395,18 @@ label.checkbox.custom { } .context-available { - @include trans-prop-nice(opacity, 0.25s); - opacity: 0; font-size: 0.7em; - //position: absolute; - //right: 0; } - &:hover { + + @include desktop { .context-available { - opacity: 1; + @include trans-prop-nice(opacity, 0.25s); + opacity: 0; + } + &:hover { + .context-available { + opacity: 1; + } } } } diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss index 3fdc925b5b..567f2116a1 100644 --- a/platform/commonUI/general/res/sass/user-environ/_frame.scss +++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss @@ -48,16 +48,20 @@ left: $myM; } &.frame-template { - // Hide the view switcher by default when it's in an element that's in a frame context - // Frame template is used because we need to target the lowest nested frame .view-switcher { - opacity: 0; + line-height: 16px; z-index: 10; } - &:hover .view-switcher { - // Show the view switcher on frame hover - //display: inline-block !important; - opacity: 1; + // Hide the view switcher by default when it's in an element that's in a frame context + // Frame template is used because we need to target the lowest nested frame + @include desktop { + .view-switcher { + opacity: 0; + } + &:hover .view-switcher { + // Show the view switcher on frame hover + opacity: 1; + } } } .view-switcher { diff --git a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss index 3ec809343a..602a8adeae 100644 --- a/platform/commonUI/general/res/sass/user-environ/_object-browse.scss +++ b/platform/commonUI/general/res/sass/user-environ/_object-browse.scss @@ -20,7 +20,8 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .object-browse-bar { - @include absPosDefault(); + //@include test(blue); + @include absPosDefault(0, visible); @include box-sizing(border-box); height: $ueTopBarH; line-height: $ueTopBarH; diff --git a/platform/commonUI/general/res/templates/controls/switcher.html b/platform/commonUI/general/res/templates/controls/switcher.html index 3dec71ab6c..beaf497709 100644 --- a/platform/commonUI/general/res/templates/controls/switcher.html +++ b/platform/commonUI/general/res/templates/controls/switcher.html @@ -21,7 +21,7 @@ -->
From e1858bf0aebc9ead745d0d4166a693c5efff464b Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 25 Aug 2015 10:15:14 -0700 Subject: [PATCH 13/21] [Mobile] IN PROGRESS: Moved position of view-switcher open #74 view-switcher in object browse and edit moved to precede action buttons, with margin; Re-located CSS for .btn, etc. from _controls.scss to _layout.scss; Cleaned up line-spacing in object-header in .frame; --- .../browse/res/templates/browse-object.html | 9 ++- .../general/res/css/theme-espresso.css | 55 ++++++++++++------- .../general/res/sass/controls/_controls.scss | 4 +- .../general/res/sass/user-environ/_frame.scss | 10 ++-- .../res/sass/user-environ/_layout.scss | 22 ++++++++ .../res/sass/user-environ/_top-bar.scss | 6 +- 6 files changed, 71 insertions(+), 35 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index 90b3c11504..fb1ae37740 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -28,15 +28,14 @@
- - - + +
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 28337e74f6..2854861951 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -735,6 +735,25 @@ mct-container { right: 3px; } /* line 299, ../sass/user-environ/_layout.scss */ +.object-browse-bar .btn, +.object-browse-bar .t-btn, +.object-browse-bar .view-switcher, +.top-bar .buttons-main .btn, +.top-bar .buttons-main .t-btn, +.top-bar .view-switcher, +.tool-bar .btn, +.tool-bar .t-btn { + display: inline-block; + font-size: 11.25px; + line-height: 200%; + vertical-align: top; } + +/* line 316, ../sass/user-environ/_layout.scss */ +.object-browse-bar .view-switcher, +.top-bar .view-switcher { + margin-right: 20px; } + +/* line 321, ../sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } @@ -2382,8 +2401,7 @@ a.l-btn span { } } */ -/* line 177, ../sass/controls/_controls.scss */ -.object-browse-bar .btn, +/*.object-browse-bar .btn, .object-browse-bar .t-btn, .object-browse-bar .view-switcher, .top-bar .buttons-main .btn, @@ -2391,11 +2409,12 @@ a.l-btn span { .top-bar .view-switcher, .tool-bar .btn, .tool-bar .t-btn { - display: inline-block; - font-size: 11.25px; - line-height: 200%; - vertical-align: top; } - + $h: $btnToolbarH; + display: inline-block; + font-size: $h * $btnFontSizeToH; + line-height: 200%; + vertical-align: top; +}*/ /* line 192, ../sass/controls/_controls.scss */ label.checkbox.custom { cursor: pointer; @@ -4510,31 +4529,32 @@ input[type="text"] { /* line 28, ../sass/user-environ/_frame.scss */ .frame.child-frame.panel:hover { border-color: #666666; } -/* line 36, ../sass/user-environ/_frame.scss */ +/* line 32, ../sass/user-environ/_frame.scss */ .frame > .object-header.abs, .btn-menu .frame > span.object-header.l-click-area { font-size: 0.75em; - height: 20px; } -/* line 40, ../sass/user-environ/_frame.scss */ + height: 16px; + line-height: 16px; } +/* line 38, ../sass/user-environ/_frame.scss */ .frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area { - top: 23px; } -/* line 43, ../sass/user-environ/_frame.scss */ + top: 19px; } +/* line 41, ../sass/user-environ/_frame.scss */ .frame .contents { top: 5px; right: 5px; bottom: 5px; left: 5px; } -/* line 51, ../sass/user-environ/_frame.scss */ +/* line 49, ../sass/user-environ/_frame.scss */ .frame.frame-template .view-switcher { line-height: 16px; z-index: 10; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 58, ../sass/user-environ/_frame.scss */ + /* line 56, ../sass/user-environ/_frame.scss */ .frame.frame-template .view-switcher { opacity: 0; } - /* line 61, ../sass/user-environ/_frame.scss */ + /* line 59, ../sass/user-environ/_frame.scss */ .frame.frame-template:hover .view-switcher { opacity: 1; } } -/* line 69, ../sass/user-environ/_frame.scss */ +/* line 67, ../sass/user-environ/_frame.scss */ .frame .view-switcher .name { display: none; } @@ -4576,9 +4596,6 @@ input[type="text"] { font-size: 0.8em; left: auto; text-align: right; } - /* line 40, ../sass/user-environ/_top-bar.scss */ - .top-bar .buttons-main .btn { - margin-left: 5px; } /* line 48, ../sass/user-environ/_top-bar.scss */ .edit-mode .top-bar .buttons-main { diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index bcec870f95..4671d7d48a 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -174,7 +174,7 @@ } */ -.object-browse-bar .btn, +/*.object-browse-bar .btn, .object-browse-bar .t-btn, .object-browse-bar .view-switcher, .top-bar .buttons-main .btn, @@ -187,7 +187,7 @@ font-size: $h * $btnFontSizeToH; line-height: 200%; vertical-align: top; -} +}*/ label.checkbox.custom { $bg: lighten($colorBodyBg, $ltGamma); diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss index 567f2116a1..d67c0ccb9a 100644 --- a/platform/commonUI/general/res/sass/user-environ/_frame.scss +++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss @@ -20,22 +20,20 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .frame { - $ohH: 20px; + $ohH: 16px; $bc: $colorInteriorBorder; &.child-frame.panel { background: $colorBodyBg; border: 1px solid $bc; &:hover { border-color: lighten($bc, 10%); - //z-index: 2; - } - .contents { -// overflow: hidden; } } >.object-header.abs { + //@include test(red); font-size: 0.75em; height: $ohH; + line-height: $ohH; } >.object-holder.abs { top: $ohH + $interiorMarginSm; @@ -49,7 +47,7 @@ } &.frame-template { .view-switcher { - line-height: 16px; + line-height: $ohH; z-index: 10; } // Hide the view switcher by default when it's in an element that's in a frame context diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 9538a2bb74..b06b00100c 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -296,6 +296,28 @@ } } +.object-browse-bar .btn, +.object-browse-bar .t-btn, +.object-browse-bar .view-switcher, +.top-bar .buttons-main .btn, +.top-bar .buttons-main .t-btn, +.top-bar .view-switcher, +.tool-bar .btn, +.tool-bar .t-btn { + $h: $btnToolbarH; + display: inline-block; + font-size: $h * $btnFontSizeToH; + line-height: 200%; + vertical-align: top; +} + +.object-browse-bar, +.top-bar { + .view-switcher { + margin-right: $interiorMarginLg * 2; + } +} + .vscroll { overflow-y: auto; } diff --git a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss index 638edab9ec..7bb5ecd852 100644 --- a/platform/commonUI/general/res/sass/user-environ/_top-bar.scss +++ b/platform/commonUI/general/res/sass/user-environ/_top-bar.scss @@ -37,9 +37,9 @@ left: auto; text-align: right; // width: 200px; - .btn { - margin-left: $interiorMargin; - } +// .btn { +// margin-left: $interiorMargin; +// } } } From c71f1fe447133c93596e281e91181d0d9e577960 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 25 Aug 2015 13:34:37 -0700 Subject: [PATCH 14/21] [Mobile] IN PROGRESS: Significant refactor in mobile/_layout.scss open #74 Made view-switcher visible when browsing via mobile; Fixed class in browse.html markup from left-menu to left; Moved object-browse-bar, top-bar classes from _controls into _layout; Renamed and simplified menu widths in mobile _constants; Really significant refactor of mobiles/_layout; Tweaks in user-environ/_layout; TO-DO: figure out why object-browse-bar flex styles not working in mobile; --- .../browse/res/templates/browse-object.html | 7 +- .../commonUI/browse/res/templates/browse.html | 2 +- .../general/res/css/theme-espresso.css | 321 ++++++------------ .../general/res/sass/controls/_controls.scss | 4 +- .../general/res/sass/mobile/_constants.scss | 7 +- .../general/res/sass/mobile/_layout.scss | 233 ++++--------- .../res/sass/user-environ/_layout.scss | 9 +- 7 files changed, 188 insertions(+), 395 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse-object.html b/platform/commonUI/browse/res/templates/browse-object.html index fb1ae37740..80bb313d22 100644 --- a/platform/commonUI/browse/res/templates/browse-object.html +++ b/platform/commonUI/browse/res/templates/browse-object.html @@ -26,15 +26,16 @@
- -
+
+ + parameters="{ category: 'view-control' }" + class="mobile-hide">
diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 8bb6b7fa8e..402cf7a197 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -24,7 +24,7 @@
-
+
.pane { margin-top: 5px; } - /* line 274, ../sass/user-environ/_layout.scss */ + /* line 275, ../sass/user-environ/_layout.scss */ .split-layout.horizontal > .pane:first-child { margin-top: 0; } -/* line 281, ../sass/user-environ/_layout.scss */ +/* line 282, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane { margin-left: 5px; } - /* line 284, ../sass/user-environ/_layout.scss */ + /* line 285, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane > .holder { left: 0; right: 0; } - /* line 288, ../sass/user-environ/_layout.scss */ + /* line 289, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child { margin-left: 0; } - /* line 290, ../sass/user-environ/_layout.scss */ + /* line 291, ../sass/user-environ/_layout.scss */ .split-layout.vertical > .pane:first-child .holder { right: 3px; } -/* line 299, ../sass/user-environ/_layout.scss */ +/* line 300, ../sass/user-environ/_layout.scss */ .object-browse-bar .btn, .object-browse-bar .t-btn, .object-browse-bar .view-switcher, @@ -748,12 +745,12 @@ mct-container { line-height: 200%; vertical-align: top; } -/* line 316, ../sass/user-environ/_layout.scss */ +/* line 317, ../sass/user-environ/_layout.scss */ .object-browse-bar .view-switcher, .top-bar .view-switcher { margin-right: 20px; } -/* line 321, ../sass/user-environ/_layout.scss */ +/* line 322, ../sass/user-environ/_layout.scss */ .vscroll { overflow-y: auto; } @@ -786,183 +783,115 @@ mct-container { top: 0 !important; right: 0; bottom: 0; - left: 0; } } + left: 0; } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 35, ../sass/mobile/_layout.scss */ + /* line 32, ../sass/mobile/_layout.scss */ + .mobile-pane.right-repr { + -moz-transition-duration: 0.35s; + -o-transition-duration: 0.35s; + -webkit-transition-duration: 0.35s; + transition-duration: 0.35s; + transition-timing-function: ease; + backface-visibility: hidden; + margin-left: 0 !important; } + + /* line 38, ../sass/mobile/_layout.scss */ .user-environ .browse-area, .user-environ .edit-area, .user-environ .editor { top: 0; left: 0; right: 0; - bottom: 25px; } } + bottom: 25px; } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 44, ../sass/mobile/_layout.scss */ .holder.l-mobile { top: 10px !important; right: 10px !important; bottom: 10px !important; - left: 10px !important; } } + left: 10px !important; } -@media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 56, ../sass/mobile/_layout.scss */ - .desktop-browse { - min-width: 150px; - max-width: 800px; - width: 25%; } } - -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 67, ../sass/mobile/_layout.scss */ + /* line 54, ../sass/mobile/_layout.scss */ .browse-hidetree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; - user-select: none; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 78, ../sass/mobile/_layout.scss */ - .browse-hidetree .mobile-pane.left-menu { - -moz-transition-property: opacity; - -o-transition-property: opacity; - -webkit-transition-property: opacity; - transition-property: opacity; - -moz-transition-duration: 0.4s; - -o-transition-duration: 0.4s; - -webkit-transition-duration: 0.4s; - transition-duration: 0.4s; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - opacity: 0; - right: 100% !important; - width: auto !important; - overflow-y: hidden; - overflow-x: hidden; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 91, ../sass/mobile/_layout.scss */ - .browse-hidetree .mobile-pane.right-repr { - -moz-transition-duration: 0.35s; - -o-transition-duration: 0.35s; - -webkit-transition-duration: 0.35s; - transition-duration: 0.35s; - transition-timing-function: ease; - backface-visibility: hidden; - left: auto !important; - width: 100% !important; } } + user-select: none; } + /* line 58, ../sass/mobile/_layout.scss */ + .browse-hidetree .mobile-pane.left { + opacity: 0; + right: 100% !important; + width: auto !important; + overflow-y: hidden; + overflow-x: hidden; } + /* line 67, ../sass/mobile/_layout.scss */ + .browse-hidetree .mobile-pane.right-repr { + left: 0 !important; } -/* line 100, ../sass/mobile/_layout.scss */ -.mobile-tree-holder { - top: 30px; } - -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 109, ../sass/mobile/_layout.scss */ + /* line 74, ../sass/mobile/_layout.scss */ .browse-showtree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; - user-select: none; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 120, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left-menu { - -moz-transition-property: opacity; - -o-transition-property: opacity; - -webkit-transition-property: opacity; - transition-property: opacity; - -moz-transition-duration: 0.4s; - -o-transition-duration: 0.4s; - -webkit-transition-duration: 0.4s; - transition-duration: 0.4s; - -moz-transition-timing-function: ease-in-out; - -o-transition-timing-function: ease-in-out; - -webkit-transition-timing-function: ease-in-out; - transition-timing-function: ease-in-out; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); - background-size: 100%; - background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); - background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); - background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); - opacity: 1; - display: block !important; - width: auto !important; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 120, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left-menu { - right: 10% !important; } } -@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 120, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left-menu { - right: 60% !important; } } -@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 120, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left-menu { - right: 500px !important; } } -@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 120, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left-menu { - right: 70% !important; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 144, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { - -moz-transition-duration: 0.35s; - -o-transition-duration: 0.35s; - -webkit-transition-duration: 0.35s; - transition-duration: 0.35s; - transition-timing-function: ease; - backface-visibility: hidden; - left: auto !important; } } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 144, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { - left: 0 !important; - transform: translateX(90%); } } -@media screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 144, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { - width: 60% !important; } } -@media screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 144, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { - width: 500px !important; } } -@media screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 144, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { - width: 70% !important; } } + user-select: none; } + /* line 83, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.left { + -moz-transition-property: opacity; + -o-transition-property: opacity; + -webkit-transition-property: opacity; + transition-property: opacity; + -moz-transition-duration: 0.4s; + -o-transition-duration: 0.4s; + -webkit-transition-duration: 0.4s; + transition-duration: 0.4s; + -moz-transition-timing-function: ease-in-out; + -o-transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; + background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSI5OCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); + background-size: 100%; + background-image: -moz-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); + background-image: -webkit-linear-gradient(0deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); + background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.3) 100%); + opacity: 1; + display: block !important; + right: auto !important; + width: 40% !important; } + /* line 93, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.right-repr { + left: 40% !important; } -@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 171, ../sass/mobile/_layout.scss */ + /* line 103, ../sass/mobile/_layout.scss */ .mobile-menu-icon { font-size: 110%; position: absolute; top: 12px; left: 10px; } - /* line 178, ../sass/mobile/_layout.scss */ - .object-browse-bar { - display: block !important; - left: 35px !important; } - /* line 183, ../sass/mobile/_layout.scss */ - .object-browse-bar .context-available { - opacity: 1 !important; } + /* line 113, ../sass/mobile/_layout.scss */ + .object-browse-bar .context-available { + opacity: 1 !important; } + /* line 116, ../sass/mobile/_layout.scss */ + .object-browse-bar .view-switcher { + margin-right: 0 !important; } - /* line 188, ../sass/mobile/_layout.scss */ + /* line 121, ../sass/mobile/_layout.scss */ .tree-holder { overflow-x: hidden !important; } - /* line 192, ../sass/mobile/_layout.scss */ + /* line 125, ../sass/mobile/_layout.scss */ .mobile-disable-select { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 197, ../sass/mobile/_layout.scss */ + /* line 130, ../sass/mobile/_layout.scss */ .mobile-hide, .mobile-hide-important { display: none !important; } - /* line 202, ../sass/mobile/_layout.scss */ + /* line 135, ../sass/mobile/_layout.scss */ .mobile-back-hide { pointer-events: none; -moz-transition-property: opacity; @@ -979,7 +908,7 @@ mct-container { transition-timing-function: ease-in-out; opacity: 0; } - /* line 207, ../sass/mobile/_layout.scss */ + /* line 140, ../sass/mobile/_layout.scss */ .mobile-back-unhide { pointer-events: all; -moz-transition-property: opacity; @@ -995,54 +924,18 @@ mct-container { -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; opacity: 1; } } +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { + /* line 149, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.left { + width: 90% !important; } + /* line 152, ../sass/mobile/_layout.scss */ + .browse-showtree .mobile-pane.right-repr { + left: 0 !important; + transform: translateX(90%); } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 214, ../sass/mobile/_layout.scss */ + /* line 160, ../sass/mobile/_layout.scss */ .desktop-hide { display: none; } } - -/* - -.mobile-back-hide { - @include phoneandtablet { - pointer-events: none; - @include trans-prop-nice(opacity, .4s); - opacity: 0; - } -} - - -// Hides objects on phone and tablet -.mobile-back-unhide { - @include phoneandtablet { - pointer-events: all; - @include trans-prop-nice(opacity, .4s); - opacity: 1; - } -} - - -// Hides objects only on the phone -.phone-hide { - @include phone { - display: none; - } -} - -.tree-holder { - @include phoneandtablet { - .tree-holder { - overflow-x: hidden !important; - } - } -} -.mobile-disable-select { - @include phoneandtablet { - .mobile-disable-select { - @include user-select(none); - } - } -} -*/ /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -2401,7 +2294,8 @@ a.l-btn span { } } */ -/*.object-browse-bar .btn, +/* line 177, ../sass/controls/_controls.scss */ +.object-browse-bar .btn, .object-browse-bar .t-btn, .object-browse-bar .view-switcher, .top-bar .buttons-main .btn, @@ -2409,12 +2303,11 @@ a.l-btn span { .top-bar .view-switcher, .tool-bar .btn, .tool-bar .t-btn { - $h: $btnToolbarH; - display: inline-block; - font-size: $h * $btnFontSizeToH; - line-height: 200%; - vertical-align: top; -}*/ + display: inline-block; + font-size: 11.25px; + line-height: 200%; + vertical-align: top; } + /* line 192, ../sass/controls/_controls.scss */ label.checkbox.custom { cursor: pointer; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index 4671d7d48a..bcec870f95 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -174,7 +174,7 @@ } */ -/*.object-browse-bar .btn, +.object-browse-bar .btn, .object-browse-bar .t-btn, .object-browse-bar .view-switcher, .top-bar .buttons-main .btn, @@ -187,7 +187,7 @@ font-size: $h * $btnFontSizeToH; line-height: 200%; vertical-align: top; -}*/ +} label.checkbox.custom { $bg: lighten($colorBodyBg, $ltGamma); diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index aedd4c3abd..737c06ac63 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -81,8 +81,5 @@ $desktopPortrait: "screen and #{$desktopPortraitCheck}"; $desktopLandscape: "screen and #{$desktopLandscapeCheck}"; /************************** DEVICE PARAMETERS FOR MENUS/REPRESENTATIONS */ -$phoneRepSizePortrait: 10%; -$phoneRepSizeLandscape: 60%; -$tabletRepSizePortrait: 500px; -$tabletRepSizeLandscape: 70%; -$desktopMenuSize: 25%; +$proporMenuOnly: 90%; +$proporMenuWithView: 40%; diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index e13334ec61..c073a65134 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -20,154 +20,86 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -// Wrapper of the entire 2 panes, only enacted on -// phone and tablet. Also for the panes - -.browse-wrapper, -.mobile-pane { - @include phoneandtablet { +@include phoneandtablet { + // Wrapper of the entire 2 panes, only enacted on + // phone and tablet. Also for the panes + .browse-wrapper, + .mobile-pane { position: absolute; top: 0 !important; right: 0; bottom: 0; left: 0; - //white-space: nowrap; // CH CO } -} -.user-environ .browse-area, -.user-environ .edit-area, -.user-environ .editor { - @include phoneandtablet { - //@include test(red); + .mobile-pane.right-repr { + //@include test(); + @include slMenuTransitions; + margin-left: 0 !important; + } + + .user-environ .browse-area, + .user-environ .edit-area, + .user-environ .editor { top: 0; left: 0; right: 0; bottom: $ueFooterH; } -} -.holder.l-mobile { - @include phoneandtablet { - //@include test(); + .holder.l-mobile { top: $bodyMargin !important; right: $bodyMargin !important; bottom: $bodyMargin !important; left: $bodyMargin !important; } -} -// Default views of the panels -// if in desktop browser -.desktop-browse { - @include desktop { - min-width: 150px; - max-width: 800px; - width: $desktopMenuSize; - } -} - -// When the tree is hidden, these are the -// classes used for the left menu and the -// right representation. -.browse-hidetree { - // NOTE: DISABLED SELECTION - // Selection disabled in both panes - // causing cut/copy/paste menu to - // not appear. Should me moved in - // future to properly work - @include phoneandtablet { + // When the tree is hidden, these are the + // classes used for the left menu and the + // right representation. + .browse-hidetree { @include user-select(none); - } - // Sets the left tree menu when the tree - // is hidden. - .mobile-pane.left-menu { - @include phoneandtablet { - @include trans-prop-nice(opacity, .4s); + // Sets the left tree menu when the tree + // is hidden. + .mobile-pane.left { opacity: 0; right: 100% !important; width: auto !important; overflow-y: hidden; overflow-x: hidden; } - } - - // Sets the right represenation when - // the tree is hidden. - .mobile-pane.right-repr { - @include phoneandtablet { - @include slMenuTransitions; - left: auto !important; - width: 100% !important; + // Sets the right represenation when + // the tree is hidden. + .mobile-pane.right-repr { + //@include slMenuTransitions; + left: 0 !important; + //width: 100% !important; } } -} -.mobile-tree-holder { - top: 30px; -} - -// When the tree is shown, these are -// the classes used for the left menu -// and the right menu (for each device & -// orientation combination, separate -// parameters are used) -.browse-showtree { - // NOTE: DISABLED SELECTION - // Selection disabled in both panes - // causing cut/copy/paste menu to - // not appear. Should me moved in - // future to properly work - @include phoneandtablet { + .browse-showtree { + // NOTE: DISABLED SELECTION + // Selection disabled in both panes + // causing cut/copy/paste menu to + // not appear. Should me moved in + // future to properly work @include user-select(none); - } - // Sets the left tree menu when the tree - // is shown. - .mobile-pane.left-menu { - @include phoneandtablet { + + // Sets the left tree menu when the tree is shown. + .mobile-pane.left { @include trans-prop-nice(opacity, .4s); @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%)); opacity: 1; display: block !important; - width: auto !important; + //width: auto !important; // CH CO + right: auto !important; + width: $proporMenuWithView !important; } - // On both phones and tablets, the amount of - // space allowed for the right pane is specified - @include phonePortrait { - right: $phoneRepSizePortrait !important; - } - @include phoneLandscape { - right: $phoneRepSizeLandscape !important; - } - @include tabletPortrait { - right: $tabletRepSizePortrait !important; - } - @include tabletLandscape { - right: $tabletRepSizeLandscape !important; - } - } - // Sets the right representation when the tree is shown. - .mobile-pane.right-repr { - @include phoneandtablet { - @include slMenuTransitions; - left: auto !important; - } - // On both phones and tablets, the width of - // the right pane is specified - @include phonePortrait { - //width: $phoneRepSizePortrait !important; - left: 0 !important; - transform: translateX(100% - $phoneRepSizePortrait); - } - @include phoneLandscape { - width: $phoneRepSizeLandscape !important; - } - @include tabletPortrait { - //@include test(green); - width: $tabletRepSizePortrait !important; - } - @include tabletLandscape { - //@include test(orange); - width: $tabletRepSizeLandscape !important; - } - } -} + // Sets the right representation when the tree is shown. + .mobile-pane.right-repr { + //@include slMenuTransitions; CH MOVED + left: $proporMenuWithView !important; + //width: auto !important; + + //left: 0 !important; + //transform: translateX($proporMenuWithView); + } + } -@include phoneandtablet { .mobile-menu-icon { font-size: 110%; position: absolute; @@ -177,12 +109,13 @@ .object-browse-bar { //@include test(); - display: block !important; - //font-size: 0.95em; - left: 35px !important; + //left: 35px !important; // TEMP .context-available { opacity: 1 !important; } + .view-switcher { + margin-right: 0 !important; + } } .tree-holder { @@ -211,52 +144,20 @@ } } -.desktop-hide { - @include desktop { - display: none; - } -} - -/* - -.mobile-back-hide { - @include phoneandtablet { - pointer-events: none; - @include trans-prop-nice(opacity, .4s); - opacity: 0; - } -} - - -// Hides objects on phone and tablet -.mobile-back-unhide { - @include phoneandtablet { - pointer-events: all; - @include trans-prop-nice(opacity, .4s); - opacity: 1; - } -} - - -// Hides objects only on the phone -.phone-hide { - @include phone { - display: none; - } -} - -.tree-holder { - @include phoneandtablet { - .tree-holder { - overflow-x: hidden !important; +@include phonePortrait { + .browse-showtree { + .mobile-pane.left { + width: $proporMenuOnly !important; + } + .mobile-pane.right-repr { + left: 0 !important; + transform: translateX($proporMenuOnly); } } } -.mobile-disable-select { - @include phoneandtablet { - .mobile-disable-select { - @include user-select(none); - } + +@include desktop { + .desktop-hide { + display: none; } -} -*/ \ No newline at end of file +} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index b06b00100c..1c87dc6d0e 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -88,8 +88,8 @@ &.l-flex { display: flex; flex-flow: row nowrap; - align-items: stretch; .left { + @include test(green); flex: 1 1 auto; } } @@ -208,7 +208,8 @@ .split-layout { .split-pane-component.pane.left { min-width: 150px; - max-width: 50%; + max-width: 800px; + width: $ueBrowseLeftPaneW; } } } @@ -216,8 +217,8 @@ .edit-mode { .split-layout { .split-pane-component.pane.right { - min-width: 150px; - max-width: 50%; + //min-width: 150px; + //max-width: 50%; .split-pane-component.pane.bottom { min-height: 50px; max-height: 80%; From fd5a911d501d8fb8e60b3475f95eadcbee941efb Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 25 Aug 2015 13:51:02 -0700 Subject: [PATCH 15/21] [Mobile] IN PROGRESS: Fixed object-browse-bar flex open #74 Also set left position of .object-browse-bar; --- .../general/res/css/theme-espresso.css | 18 ++++++++++-------- .../general/res/sass/mobile/_constants.scss | 1 - .../general/res/sass/mobile/_layout.scss | 2 +- .../general/res/sass/user-environ/_layout.scss | 4 ++-- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index b6af269225..f06a544a3d 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -566,8 +566,7 @@ mct-container { flex-flow: row nowrap; } /* line 91, ../sass/user-environ/_layout.scss */ .bar.l-flex .left { - background-color: rgba(0, 128, 0, 0.2); - flex: 1 1 auto; } + flex: 1 1 0; } /* line 99, ../sass/user-environ/_layout.scss */ .user-environ .browse-area, @@ -868,12 +867,15 @@ mct-container { top: 12px; left: 10px; } - /* line 113, ../sass/mobile/_layout.scss */ - .object-browse-bar .context-available { - opacity: 1 !important; } - /* line 116, ../sass/mobile/_layout.scss */ - .object-browse-bar .view-switcher { - margin-right: 0 !important; } + /* line 110, ../sass/mobile/_layout.scss */ + .object-browse-bar { + left: 30px !important; } + /* line 113, ../sass/mobile/_layout.scss */ + .object-browse-bar .context-available { + opacity: 1 !important; } + /* line 116, ../sass/mobile/_layout.scss */ + .object-browse-bar .view-switcher { + margin-right: 0 !important; } /* line 121, ../sass/mobile/_layout.scss */ .tree-holder { diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 737c06ac63..913d47c0e3 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -30,7 +30,6 @@ $tabletItemH: floor($ueBrowseGridItemLg/3); /************************** MOBILE TREE MENU DIMENSIONS */ $mobileTreeItemH: 35px; -$mobile-startingTreeLeft: 3px; $mobileTreeItemIndent: 20px; $mobileTreeRightArrowW: 30px; diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index c073a65134..008beef117 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -109,7 +109,7 @@ .object-browse-bar { //@include test(); - //left: 35px !important; // TEMP + left: 30px !important; .context-available { opacity: 1 !important; } diff --git a/platform/commonUI/general/res/sass/user-environ/_layout.scss b/platform/commonUI/general/res/sass/user-environ/_layout.scss index 1c87dc6d0e..e8960464f8 100644 --- a/platform/commonUI/general/res/sass/user-environ/_layout.scss +++ b/platform/commonUI/general/res/sass/user-environ/_layout.scss @@ -89,8 +89,8 @@ display: flex; flex-flow: row nowrap; .left { - @include test(green); - flex: 1 1 auto; + //@include test(green); + flex: 1 1 0; } } } From 07d0706cd1a611f97049828be73da009b5c3aaf7 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 25 Aug 2015 14:17:34 -0700 Subject: [PATCH 16/21] [Mobile] IN PROGRESS: open #74 Added name for "base" (unknown) type in core/bundle.json; Fixes to grid-item .details element: - ellipsize, - type now displayed properly; - number of items with correct plural syntax; --- .../browse/res/templates/items/grid-item.html | 6 +-- platform/commonUI/general/res/css/items.css | 13 +++--- .../general/res/css/theme-espresso.css | 44 +++++++++---------- .../general/res/sass/items/_item.scss | 1 + platform/core/bundle.json | 1 + 5 files changed, 34 insertions(+), 31 deletions(-) diff --git a/platform/commonUI/browse/res/templates/items/grid-item.html b/platform/commonUI/browse/res/templates/items/grid-item.html index f1fd6dd5ee..647d8e26da 100644 --- a/platform/commonUI/browse/res/templates/items/grid-item.html +++ b/platform/commonUI/browse/res/templates/items/grid-item.html @@ -39,11 +39,9 @@
{{model.name}}
+ {{type.getName()}} - {{model.composition.length}} Items - - - {{model.name}} + - {{model.composition.length}} Items
diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index cf77cbed9a..a30f37c1c6 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -294,8 +294,11 @@ color: #cccccc; } /* line 133, ../sass/items/_item.scss */ .items-holder .item.grid-item .details { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; font-size: 0.8em; } - /* line 136, ../sass/items/_item.scss */ + /* line 137, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBhYzJmZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwYjRmMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -332,16 +335,16 @@ /* line 175, ../sass/_mixins.scss */ .items-holder .item.grid-item.selected.btn-menu .invoke-menu { color: #52d4ff; } - /* line 141, ../sass/items/_item.scss */ + /* line 142, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .item-type, .items-holder .item.grid-item.selected .top-bar .icon:not(.alert) { color: #80dfff; } - /* line 142, ../sass/items/_item.scss */ + /* line 143, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .item-main .item-open { color: #80dfff; } - /* line 143, ../sass/items/_item.scss */ + /* line 144, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected .title { color: white; } - /* line 145, ../sass/items/_item.scss */ + /* line 146, ../sass/items/_item.scss */ .items-holder .item.grid-item.selected:hover .item-main .item-type { color: white !important; } diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index f06a544a3d..bdda60265b 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -775,7 +775,7 @@ mct-container { * at runtime from the About dialog for additional information. *****************************************************************************/ @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 26, ../sass/mobile/_layout.scss */ + /* line 30, ../sass/mobile/_layout.scss */ .browse-wrapper, .mobile-pane { position: absolute; @@ -784,7 +784,7 @@ mct-container { bottom: 0; left: 0; } - /* line 32, ../sass/mobile/_layout.scss */ + /* line 36, ../sass/mobile/_layout.scss */ .mobile-pane.right-repr { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; @@ -794,7 +794,7 @@ mct-container { backface-visibility: hidden; margin-left: 0 !important; } - /* line 38, ../sass/mobile/_layout.scss */ + /* line 42, ../sass/mobile/_layout.scss */ .user-environ .browse-area, .user-environ .edit-area, .user-environ .editor { @@ -803,37 +803,37 @@ mct-container { right: 0; bottom: 25px; } - /* line 44, ../sass/mobile/_layout.scss */ + /* line 48, ../sass/mobile/_layout.scss */ .holder.l-mobile { top: 10px !important; right: 10px !important; bottom: 10px !important; left: 10px !important; } - /* line 54, ../sass/mobile/_layout.scss */ + /* line 58, ../sass/mobile/_layout.scss */ .browse-hidetree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 58, ../sass/mobile/_layout.scss */ + /* line 62, ../sass/mobile/_layout.scss */ .browse-hidetree .mobile-pane.left { opacity: 0; right: 100% !important; width: auto !important; overflow-y: hidden; overflow-x: hidden; } - /* line 67, ../sass/mobile/_layout.scss */ + /* line 71, ../sass/mobile/_layout.scss */ .browse-hidetree .mobile-pane.right-repr { left: 0 !important; } - /* line 74, ../sass/mobile/_layout.scss */ + /* line 78, ../sass/mobile/_layout.scss */ .browse-showtree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 83, ../sass/mobile/_layout.scss */ + /* line 87, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left { -moz-transition-property: opacity; -o-transition-property: opacity; @@ -856,44 +856,44 @@ mct-container { display: block !important; right: auto !important; width: 40% !important; } - /* line 93, ../sass/mobile/_layout.scss */ + /* line 97, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { left: 40% !important; } - /* line 103, ../sass/mobile/_layout.scss */ + /* line 107, ../sass/mobile/_layout.scss */ .mobile-menu-icon { font-size: 110%; position: absolute; top: 12px; left: 10px; } - /* line 110, ../sass/mobile/_layout.scss */ + /* line 114, ../sass/mobile/_layout.scss */ .object-browse-bar { left: 30px !important; } - /* line 113, ../sass/mobile/_layout.scss */ + /* line 117, ../sass/mobile/_layout.scss */ .object-browse-bar .context-available { opacity: 1 !important; } - /* line 116, ../sass/mobile/_layout.scss */ + /* line 120, ../sass/mobile/_layout.scss */ .object-browse-bar .view-switcher { margin-right: 0 !important; } - /* line 121, ../sass/mobile/_layout.scss */ + /* line 125, ../sass/mobile/_layout.scss */ .tree-holder { overflow-x: hidden !important; } - /* line 125, ../sass/mobile/_layout.scss */ + /* line 129, ../sass/mobile/_layout.scss */ .mobile-disable-select { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 130, ../sass/mobile/_layout.scss */ + /* line 134, ../sass/mobile/_layout.scss */ .mobile-hide, .mobile-hide-important { display: none !important; } - /* line 135, ../sass/mobile/_layout.scss */ + /* line 139, ../sass/mobile/_layout.scss */ .mobile-back-hide { pointer-events: none; -moz-transition-property: opacity; @@ -910,7 +910,7 @@ mct-container { transition-timing-function: ease-in-out; opacity: 0; } - /* line 140, ../sass/mobile/_layout.scss */ + /* line 144, ../sass/mobile/_layout.scss */ .mobile-back-unhide { pointer-events: all; -moz-transition-property: opacity; @@ -927,15 +927,15 @@ mct-container { transition-timing-function: ease-in-out; opacity: 1; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 149, ../sass/mobile/_layout.scss */ + /* line 153, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.left { width: 90% !important; } - /* line 152, ../sass/mobile/_layout.scss */ + /* line 156, ../sass/mobile/_layout.scss */ .browse-showtree .mobile-pane.right-repr { left: 0 !important; transform: translateX(90%); } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 160, ../sass/mobile/_layout.scss */ + /* line 164, ../sass/mobile/_layout.scss */ .desktop-hide { display: none; } } /***************************************************************************** diff --git a/platform/commonUI/general/res/sass/items/_item.scss b/platform/commonUI/general/res/sass/items/_item.scss index c04568d8fa..55c37b2884 100644 --- a/platform/commonUI/general/res/sass/items/_item.scss +++ b/platform/commonUI/general/res/sass/items/_item.scss @@ -131,6 +131,7 @@ color: lighten($colorBodyFg, 20%); } .details { + @include ellipsize(); font-size: 0.8em; } &.selected { diff --git a/platform/core/bundle.json b/platform/core/bundle.json index c8c56299f6..f5bf73b8fc 100644 --- a/platform/core/bundle.json +++ b/platform/core/bundle.json @@ -145,6 +145,7 @@ "glyph": "\u003f" }, { + "name": "Unknown Type", "glyph": "\u003f" } ], From 39bd2928864273de4698f24359edadb344a0eb51 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 26 Aug 2015 09:43:51 -0700 Subject: [PATCH 17/21] [Mobile] IN PROGRESS: Overlay and form cleanups open #74 Widths and layout strategy fixed for label and controls in form when appearing in mobile; Overlay margins adjusted; Cleaned up font size, line-height in tree items; --- platform/commonUI/general/res/css/forms.css | 41 ++--- platform/commonUI/general/res/css/items.css | 1 + .../general/res/css/theme-espresso.css | 157 ++++++++++-------- platform/commonUI/general/res/css/tree.css | 50 +++--- .../commonUI/general/res/sass/_constants.scss | 1 + platform/commonUI/general/res/sass/_main.scss | 2 - .../general/res/sass/controls/_controls.scss | 2 +- .../general/res/sass/forms/_elems.scss | 15 +- .../general/res/sass/forms/_validation.scss | 8 +- .../general/res/sass/mobile/_constants.scss | 6 +- .../general/res/sass/mobile/_tree.scss | 8 +- .../res/sass/mobile/overlay/_overlay.scss | 44 ++++- .../commonUI/general/res/sass/tree/_tree.scss | 1 + 13 files changed, 196 insertions(+), 140 deletions(-) diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index 34a14c0107..6e2aec574a 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -69,6 +69,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** STYLE */ /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ /************************** MOBILE TREE MENU DIMENSIONS */ /************************** WINDOW DIMENSIONS FOR RWD */ @@ -192,14 +193,14 @@ box-sizing: border-box; overflow: hidden; *zoom: 1; - border-top: 1px solid #4d4d4d; + border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 5px; padding: 5px; position: relative; } - /* line 46, ../sass/forms/_elems.scss */ + /* line 47, ../sass/forms/_elems.scss */ .form .form-row.first { border-top: none; } - /* line 50, ../sass/forms/_elems.scss */ + /* line 51, ../sass/forms/_elems.scss */ .form .form-row .label, .form .form-row .controls { -moz-box-sizing: border-box; @@ -207,45 +208,45 @@ box-sizing: border-box; overflow: hidden; *zoom: 1; - box-sizing: border-box; - font-size: 0.75rem; + font-size: 0.8rem; line-height: 22px; min-height: 22px; } - /* line 61, ../sass/forms/_elems.scss */ + /* line 60, ../sass/forms/_elems.scss */ .form .form-row > .label { float: left; + min-width: 120px; position: relative; white-space: nowrap; width: 20%; } - /* line 69, ../sass/forms/_elems.scss */ + /* line 70, ../sass/forms/_elems.scss */ .form .form-row .value { color: #cccccc; } - /* line 73, ../sass/forms/_elems.scss */ + /* line 74, ../sass/forms/_elems.scss */ .form .form-row .controls { float: left; position: relative; width: 79.9%; } - /* line 80, ../sass/forms/_elems.scss */ + /* line 81, ../sass/forms/_elems.scss */ .form .form-row .controls .l-composite-control.l-checkbox { display: inline-block; line-height: 14px; margin-right: 5px; } - /* line 89, ../sass/forms/_elems.scss */ + /* line 90, ../sass/forms/_elems.scss */ .form .form-row .controls .l-med input[type="text"] { width: 200px; } - /* line 93, ../sass/forms/_elems.scss */ + /* line 94, ../sass/forms/_elems.scss */ .form .form-row .controls .l-small input[type="text"] { width: 50px; } - /* line 97, ../sass/forms/_elems.scss */ + /* line 98, ../sass/forms/_elems.scss */ .form .form-row .controls .l-numeric input[type="text"] { text-align: right; } - /* line 101, ../sass/forms/_elems.scss */ + /* line 102, ../sass/forms/_elems.scss */ .form .form-row .controls .select { margin-right: 5px; } - /* line 106, ../sass/forms/_elems.scss */ + /* line 107, ../sass/forms/_elems.scss */ .form .form-row .field-hints { color: #666666; } - /* line 110, ../sass/forms/_elems.scss */ + /* line 111, ../sass/forms/_elems.scss */ .form .form-row .selector-list { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -258,7 +259,7 @@ position: relative; height: 150px; overflow: auto; } - /* line 121, ../sass/forms/_elems.scss */ + /* line 122, ../sass/forms/_elems.scss */ .form .form-row .selector-list .wrapper { overflow-y: auto; position: absolute; @@ -267,24 +268,24 @@ bottom: 5px; left: 5px; } -/* line 135, ../sass/forms/_elems.scss */ +/* line 136, ../sass/forms/_elems.scss */ label.form-control.checkbox input { margin-right: 5px; vertical-align: top; } -/* line 141, ../sass/forms/_elems.scss */ +/* line 142, ../sass/forms/_elems.scss */ .hint, .s-hint { font-size: 0.9em; } -/* line 146, ../sass/forms/_elems.scss */ +/* line 147, ../sass/forms/_elems.scss */ .l-result { display: inline-block; min-width: 32px; min-height: 32px; position: relative; vertical-align: top; } - /* line 153, ../sass/forms/_elems.scss */ + /* line 154, ../sass/forms/_elems.scss */ .l-result div.s-hint { -moz-border-radius: 2px; -webkit-border-radius: 2px; diff --git a/platform/commonUI/general/res/css/items.css b/platform/commonUI/general/res/css/items.css index a30f37c1c6..0c29bd9ebb 100644 --- a/platform/commonUI/general/res/css/items.css +++ b/platform/commonUI/general/res/css/items.css @@ -69,6 +69,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** STYLE */ /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ /************************** MOBILE TREE MENU DIMENSIONS */ /************************** WINDOW DIMENSIONS FOR RWD */ diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index bdda60265b..c503b222f4 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -70,6 +70,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** STYLE */ /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ /************************** MOBILE TREE MENU DIMENSIONS */ /************************** WINDOW DIMENSIONS FOR RWD */ @@ -775,17 +776,20 @@ mct-container { * at runtime from the About dialog for additional information. *****************************************************************************/ @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 30, ../sass/mobile/_layout.scss */ + /* line 26, ../sass/mobile/_layout.scss */ .browse-wrapper, - .mobile-pane { - position: absolute; + .pane { top: 0 !important; right: 0; bottom: 0; left: 0; } - /* line 36, ../sass/mobile/_layout.scss */ - .mobile-pane.right-repr { + /* line 31, ../sass/mobile/_layout.scss */ + .pane.left { + background-color: #222; } + + /* line 35, ../sass/mobile/_layout.scss */ + .pane.right-repr { -moz-transition-duration: 0.35s; -o-transition-duration: 0.35s; -webkit-transition-duration: 0.35s; @@ -794,7 +798,7 @@ mct-container { backface-visibility: hidden; margin-left: 0 !important; } - /* line 42, ../sass/mobile/_layout.scss */ + /* line 41, ../sass/mobile/_layout.scss */ .user-environ .browse-area, .user-environ .edit-area, .user-environ .editor { @@ -803,38 +807,38 @@ mct-container { right: 0; bottom: 25px; } - /* line 48, ../sass/mobile/_layout.scss */ + /* line 47, ../sass/mobile/_layout.scss */ .holder.l-mobile { top: 10px !important; right: 10px !important; bottom: 10px !important; left: 10px !important; } - /* line 58, ../sass/mobile/_layout.scss */ + /* line 57, ../sass/mobile/_layout.scss */ .browse-hidetree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 62, ../sass/mobile/_layout.scss */ - .browse-hidetree .mobile-pane.left { + /* line 61, ../sass/mobile/_layout.scss */ + .browse-hidetree .pane.left { opacity: 0; right: 100% !important; width: auto !important; overflow-y: hidden; overflow-x: hidden; } - /* line 71, ../sass/mobile/_layout.scss */ - .browse-hidetree .mobile-pane.right-repr { + /* line 70, ../sass/mobile/_layout.scss */ + .browse-hidetree .pane.right-repr { left: 0 !important; } - /* line 78, ../sass/mobile/_layout.scss */ + /* line 77, ../sass/mobile/_layout.scss */ .browse-showtree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 87, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left { + /* line 86, ../sass/mobile/_layout.scss */ + .browse-showtree .pane.left { -moz-transition-property: opacity; -o-transition-property: opacity; -webkit-transition-property: opacity; @@ -856,44 +860,44 @@ mct-container { display: block !important; right: auto !important; width: 40% !important; } - /* line 97, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { + /* line 96, ../sass/mobile/_layout.scss */ + .browse-showtree .pane.right-repr { left: 40% !important; } - /* line 107, ../sass/mobile/_layout.scss */ + /* line 106, ../sass/mobile/_layout.scss */ .mobile-menu-icon { font-size: 110%; position: absolute; top: 12px; left: 10px; } - /* line 114, ../sass/mobile/_layout.scss */ + /* line 113, ../sass/mobile/_layout.scss */ .object-browse-bar { left: 30px !important; } - /* line 117, ../sass/mobile/_layout.scss */ + /* line 116, ../sass/mobile/_layout.scss */ .object-browse-bar .context-available { opacity: 1 !important; } - /* line 120, ../sass/mobile/_layout.scss */ + /* line 119, ../sass/mobile/_layout.scss */ .object-browse-bar .view-switcher { margin-right: 0 !important; } - /* line 125, ../sass/mobile/_layout.scss */ + /* line 124, ../sass/mobile/_layout.scss */ .tree-holder { overflow-x: hidden !important; } - /* line 129, ../sass/mobile/_layout.scss */ + /* line 128, ../sass/mobile/_layout.scss */ .mobile-disable-select { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 134, ../sass/mobile/_layout.scss */ + /* line 133, ../sass/mobile/_layout.scss */ .mobile-hide, .mobile-hide-important { display: none !important; } - /* line 139, ../sass/mobile/_layout.scss */ + /* line 138, ../sass/mobile/_layout.scss */ .mobile-back-hide { pointer-events: none; -moz-transition-property: opacity; @@ -910,7 +914,7 @@ mct-container { transition-timing-function: ease-in-out; opacity: 0; } - /* line 144, ../sass/mobile/_layout.scss */ + /* line 143, ../sass/mobile/_layout.scss */ .mobile-back-unhide { pointer-events: all; -moz-transition-property: opacity; @@ -927,15 +931,15 @@ mct-container { transition-timing-function: ease-in-out; opacity: 1; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 153, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.left { + /* line 152, ../sass/mobile/_layout.scss */ + .browse-showtree .pane.left { width: 90% !important; } - /* line 156, ../sass/mobile/_layout.scss */ - .browse-showtree .mobile-pane.right-repr { + /* line 155, ../sass/mobile/_layout.scss */ + .browse-showtree .pane.right-repr { left: 0 !important; transform: translateX(90%); } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 164, ../sass/mobile/_layout.scss */ + /* line 163, ../sass/mobile/_layout.scss */ .desktop-hide { display: none; } } /***************************************************************************** @@ -2318,7 +2322,7 @@ label.checkbox.custom { margin-right: 20px; padding-left: 19px; position: relative; - vertical-align: top; } + vertical-align: middle; } /* line 202, ../sass/controls/_controls.scss */ label.checkbox.custom em { color: #999; @@ -3457,14 +3461,14 @@ label.checkbox.custom { box-sizing: border-box; overflow: hidden; *zoom: 1; - border-top: 1px solid #4d4d4d; + border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 5px; padding: 5px; position: relative; } - /* line 46, ../sass/forms/_elems.scss */ + /* line 47, ../sass/forms/_elems.scss */ .form .form-row.first { border-top: none; } - /* line 50, ../sass/forms/_elems.scss */ + /* line 51, ../sass/forms/_elems.scss */ .form .form-row .label, .form .form-row .controls { -moz-box-sizing: border-box; @@ -3472,45 +3476,45 @@ label.checkbox.custom { box-sizing: border-box; overflow: hidden; *zoom: 1; - box-sizing: border-box; - font-size: 0.75rem; + font-size: 0.8rem; line-height: 22px; min-height: 22px; } - /* line 61, ../sass/forms/_elems.scss */ + /* line 60, ../sass/forms/_elems.scss */ .form .form-row > .label { float: left; + min-width: 120px; position: relative; white-space: nowrap; width: 20%; } - /* line 69, ../sass/forms/_elems.scss */ + /* line 70, ../sass/forms/_elems.scss */ .form .form-row .value { color: #cccccc; } - /* line 73, ../sass/forms/_elems.scss */ + /* line 74, ../sass/forms/_elems.scss */ .form .form-row .controls { float: left; position: relative; width: 79.9%; } - /* line 80, ../sass/forms/_elems.scss */ + /* line 81, ../sass/forms/_elems.scss */ .form .form-row .controls .l-composite-control.l-checkbox { display: inline-block; line-height: 14px; margin-right: 5px; } - /* line 89, ../sass/forms/_elems.scss */ + /* line 90, ../sass/forms/_elems.scss */ .form .form-row .controls .l-med input[type="text"] { width: 200px; } - /* line 93, ../sass/forms/_elems.scss */ + /* line 94, ../sass/forms/_elems.scss */ .form .form-row .controls .l-small input[type="text"] { width: 50px; } - /* line 97, ../sass/forms/_elems.scss */ + /* line 98, ../sass/forms/_elems.scss */ .form .form-row .controls .l-numeric input[type="text"] { text-align: right; } - /* line 101, ../sass/forms/_elems.scss */ + /* line 102, ../sass/forms/_elems.scss */ .form .form-row .controls .select { margin-right: 5px; } - /* line 106, ../sass/forms/_elems.scss */ + /* line 107, ../sass/forms/_elems.scss */ .form .form-row .field-hints { color: #666666; } - /* line 110, ../sass/forms/_elems.scss */ + /* line 111, ../sass/forms/_elems.scss */ .form .form-row .selector-list { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -3523,7 +3527,7 @@ label.checkbox.custom { position: relative; height: 150px; overflow: auto; } - /* line 121, ../sass/forms/_elems.scss */ + /* line 122, ../sass/forms/_elems.scss */ .form .form-row .selector-list .wrapper { overflow-y: auto; position: absolute; @@ -3532,24 +3536,24 @@ label.checkbox.custom { bottom: 5px; left: 5px; } -/* line 135, ../sass/forms/_elems.scss */ +/* line 136, ../sass/forms/_elems.scss */ label.form-control.checkbox input { margin-right: 5px; vertical-align: top; } -/* line 141, ../sass/forms/_elems.scss */ +/* line 142, ../sass/forms/_elems.scss */ .hint, .s-hint { font-size: 0.9em; } -/* line 146, ../sass/forms/_elems.scss */ +/* line 147, ../sass/forms/_elems.scss */ .l-result { display: inline-block; min-width: 32px; min-height: 32px; position: relative; vertical-align: top; } - /* line 153, ../sass/forms/_elems.scss */ + /* line 154, ../sass/forms/_elems.scss */ .l-result div.s-hint { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -3585,18 +3589,16 @@ label.form-control.checkbox input { padding-right: 25px; } /* line 26, ../sass/forms/_validation.scss */ .validates > .label::after { - display: block; - position: absolute; - top: 0; - right: 10px; - bottom: 0; - left: auto; - height: auto; - width: 15px; + /* display: block; + position: absolute; + top: 0; + right: $reqSymbolM; + bottom: 0; + left: auto; + height: auto; + width: $reqSymbolW;*/ font-family: symbolsfont; - font-size: 0.7em; - text-align: right; - vertical-align: middle; } + font-size: 0.7em; } /* line 44, ../sass/forms/_validation.scss */ .validates.invalid > .label::after, .validates.invalid.req > .label::after { color: #ff9900; @@ -4386,7 +4388,7 @@ input[type="text"] { overflow: auto; } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 6, ../sass/mobile/overlay/_overlay.scss */ + /* line 4, ../sass/mobile/overlay/_overlay.scss */ .overlay > .holder { -moz-border-radius: 0; -webkit-border-radius: 0; @@ -4394,8 +4396,29 @@ input[type="text"] { top: 0; right: 0; bottom: 0; - left: 0; } } - + left: 0; } + /* line 10, ../sass/mobile/overlay/_overlay.scss */ + .overlay > .holder > .contents { + top: 10px; + right: 10px; + bottom: 10px; + left: 10px; } + /* line 16, ../sass/mobile/overlay/_overlay.scss */ + .overlay > .holder > .contents .form.editor { + border: none; } + /* line 19, ../sass/mobile/overlay/_overlay.scss */ + .overlay > .holder > .contents .form.editor .contents { + top: 0; + right: 0; + bottom: 0; + left: 0; } } +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { + /* line 33, ../sass/mobile/overlay/_overlay.scss */ + .overlay > .holder > .contents .form.editor .contents .form-row > .label, + .overlay > .holder > .contents .form.editor .contents .form-row > .controls { + display: block; + float: none; + width: 100%; } } /***************************************************************************** * Open MCT Web, Copyright (c) 2014-2015, United States Government * as represented by the Administrator of the National Aeronautics and Space @@ -4431,7 +4454,7 @@ input[type="text"] { line-height: 16px; } /* line 38, ../sass/user-environ/_frame.scss */ .frame > .object-holder.abs, .btn-menu .frame > span.object-holder.l-click-area { - top: 19px; } + top: 21px; } /* line 41, ../sass/user-environ/_frame.scss */ .frame .contents { top: 5px; diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 0566559e1b..2ca3b73ab9 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -69,6 +69,7 @@ * this source code distribution or the Licensing information page available * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** STYLE */ /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ /************************** MOBILE TREE MENU DIMENSIONS */ /************************** WINDOW DIMENSIONS FOR RWD */ @@ -200,8 +201,9 @@ ul.tree { left: 0px; width: auto; height: auto; + line-height: 1.5rem; left: 15px; } - /* line 61, ../sass/tree/_tree.scss */ + /* line 62, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon { text-shadow: rgba(0, 0, 0, 0.6) 0 1px 2px; font-size: 16px; @@ -214,12 +216,12 @@ ul.tree { line-height: 100%; right: auto; width: 16px; } - /* line 74, ../sass/tree/_tree.scss */ + /* line 75, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon .icon.l-icon-link, ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { text-shadow: black 0 1px 2px; position: absolute; z-index: 2; } - /* line 80, ../sass/tree/_tree.scss */ + /* line 81, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon .icon.l-icon-alert { color: #ff3c00; font-size: 8px; @@ -228,7 +230,7 @@ ul.tree { width: 8px; top: 1px; right: -2px; } - /* line 86, ../sass/tree/_tree.scss */ + /* line 87, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .type-icon .icon.l-icon-link { color: #49dedb; font-size: 8px; @@ -237,7 +239,7 @@ ul.tree { width: 8px; left: -3px; bottom: 0px; } - /* line 94, ../sass/tree/_tree.scss */ + /* line 95, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .label .title-label { overflow: hidden; position: absolute; @@ -252,53 +254,53 @@ ul.tree { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } - /* line 105, ../sass/tree/_tree.scss */ + /* line 106, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading { pointer-events: none; } - /* line 107, ../sass/tree/_tree.scss */ + /* line 108, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .label { opacity: 0.5; } - /* line 109, ../sass/tree/_tree.scss */ + /* line 110, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .label .title-label { font-style: italic; } - /* line 113, ../sass/tree/_tree.scss */ + /* line 114, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.loading .wait-spinner { margin-left: 14px; } - /* line 118, ../sass/tree/_tree.scss */ + /* line 119, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected { background: #005177; color: #fff; } - /* line 122, ../sass/tree/_tree.scss */ + /* line 123, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected .view-control { color: #0099cc; } - /* line 125, ../sass/tree/_tree.scss */ + /* line 126, ../sass/tree/_tree.scss */ ul.tree li span.tree-item.selected .label .type-icon { color: #fff; } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 133, ../sass/tree/_tree.scss */ + /* line 134, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover { background: #404040; color: #cccccc; } - /* line 136, ../sass/tree/_tree.scss */ + /* line 137, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover .context-trigger { display: block; } - /* line 139, ../sass/tree/_tree.scss */ + /* line 140, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover .icon { color: #33ccff; } } - /* line 146, ../sass/tree/_tree.scss */ + /* line 147, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.loading) { cursor: pointer; } - /* line 150, ../sass/tree/_tree.scss */ + /* line 151, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .context-trigger { top: -1px; position: absolute; right: 3px; } - /* line 156, ../sass/tree/_tree.scss */ + /* line 157, ../sass/tree/_tree.scss */ ul.tree li span.tree-item .context-trigger .invoke-menu { font-size: 0.75em; height: 0.9rem; line-height: 0.9rem; } - /* line 165, ../sass/tree/_tree.scss */ + /* line 166, ../sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } @@ -329,23 +331,23 @@ ul.tree { height: 35px; line-height: 35px; margin-bottom: 0px; } - /* line 33, ../sass/mobile/_tree.scss */ + /* line 32, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .view-control { position: absolute; font-size: 1.1em; right: 0px; width: 30px; text-align: center; } - /* line 42, ../sass/mobile/_tree.scss */ + /* line 41, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .label { left: 0; right: 35px; - font-size: 1.1em; } - /* line 50, ../sass/mobile/_tree.scss */ + line-height: 35px; } + /* line 46, ../sass/mobile/_tree.scss */ ul.tree li span.tree-item .label .type-icon { top: 9px; bottom: auto; height: 16px; } - /* line 61, ../sass/mobile/_tree.scss */ + /* line 57, ../sass/mobile/_tree.scss */ ul.tree ul.tree { margin-left: 20px; } } diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index d1f826443c..bb10a83455 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -47,6 +47,7 @@ $colorPausedBg: #c56f01; $colorPausedFg: #fff; $colorCreateBtn: $colorKey; $colorGridLines: rgba(#fff, 0.05); +$colorFormLines: rgba(#fff, 0.1); // Menu colors $colorMenuBg: lighten($colorBodyBg, 23%); $colorMenuFg: lighten($colorMenuBg, 70%); diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index 18dc5aa1e1..a388fcac35 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -48,12 +48,10 @@ @import "controls/controls"; @import "controls/lists"; @import "controls/menus"; -//@import "mobile/controls/menus"; @import "controls/time-controller"; @import "edit/editor"; @import "features/imagery"; @import "features/time-display"; -//@import "flex"; @import "forms/elems"; @import "forms/validation"; @import "forms/text-input"; diff --git a/platform/commonUI/general/res/sass/controls/_controls.scss b/platform/commonUI/general/res/sass/controls/_controls.scss index bcec870f95..2e7a0e09d3 100644 --- a/platform/commonUI/general/res/sass/controls/_controls.scss +++ b/platform/commonUI/general/res/sass/controls/_controls.scss @@ -198,7 +198,7 @@ label.checkbox.custom { margin-right: $interiorMargin * 4; padding-left: $d + $interiorMargin; position: relative; - vertical-align: top; + vertical-align: middle; // was top em { color: $colorBodyFg; display: inline-block; diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss index 9a2adab2e3..095e9fc582 100644 --- a/platform/commonUI/general/res/sass/forms/_elems.scss +++ b/platform/commonUI/general/res/sass/forms/_elems.scss @@ -21,7 +21,7 @@ *****************************************************************************/ .section-header { @include border-radius(3px); - background: rgba(white, 0.1); + background: $colorFormLines; font-size: 0.8em; margin-top: $interiorMargin; padding: $interiorMargin; @@ -37,11 +37,12 @@ } .form-row { + $m: $interiorMargin; @include box-sizing(border-box); @include clearfix; - border-top: 1px solid $colorInteriorBorder; - margin-top: $interiorMargin; - padding: $interiorMargin; + border-top: 1px solid $colorFormLines; + margin-top: $m; + padding: $m; position: relative; &.first { border-top: none; @@ -49,18 +50,18 @@ .label, .controls { -// @include test(orange); @include box-sizing(border-box); @include clearfix; - box-sizing: border-box; - font-size: 0.75rem; + font-size: 0.8rem; line-height: $formInputH; min-height: $formInputH; } >.label { // Only style this way for immediate children of .form-row; prevents problems when .label is used in .controls section of a form + //@include test(orange, 0.05); float: left; + min-width: 120px; position: relative; white-space: nowrap; width: $formLabelW; diff --git a/platform/commonUI/general/res/sass/forms/_validation.scss b/platform/commonUI/general/res/sass/forms/_validation.scss index eba95840c5..07f15cb660 100644 --- a/platform/commonUI/general/res/sass/forms/_validation.scss +++ b/platform/commonUI/general/res/sass/forms/_validation.scss @@ -25,18 +25,18 @@ padding-right: $reqSymbolW + $reqSymbolM; // Keep room for validation element &::after { // @include test(yellow, 0.3); - display: block; +/* display: block; position: absolute; top: 0; right: $reqSymbolM; bottom: 0; left: auto; height: auto; - width: $reqSymbolW; + width: $reqSymbolW;*/ font-family: symbolsfont; font-size: $reqSymbolFontSize; - text-align: right; - vertical-align: middle; + //text-align: right; + //vertical-align: middle; } } &.invalid, diff --git a/platform/commonUI/general/res/sass/mobile/_constants.scss b/platform/commonUI/general/res/sass/mobile/_constants.scss index 913d47c0e3..f4fe4ceaad 100644 --- a/platform/commonUI/general/res/sass/mobile/_constants.scss +++ b/platform/commonUI/general/res/sass/mobile/_constants.scss @@ -20,11 +20,13 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ +/************************** STYLE */ +$colorMobilePaneLeft: #222; + /************************** MOBILE REPRESENTATION ITEMS DIMENSIONS */ $mobileListIconSize: 30px; $mobileTitleDescH: 35px; -$mobile-listRight: 10px; - +$mobileOverlayMargin: 10px; $phoneItemH: floor($ueBrowseGridItemLg/4); $tabletItemH: floor($ueBrowseGridItemLg/3); diff --git a/platform/commonUI/general/res/sass/mobile/_tree.scss b/platform/commonUI/general/res/sass/mobile/_tree.scss index 5cc0ac1b25..03e8051a14 100644 --- a/platform/commonUI/general/res/sass/mobile/_tree.scss +++ b/platform/commonUI/general/res/sass/mobile/_tree.scss @@ -26,7 +26,6 @@ li { //border-top: 1px solid $colorInteriorBorder; // TEMP span.tree-item { - // Adds some space to the top of each tree item height: $mobileTreeItemH; line-height: $mobileTreeItemH; margin-bottom: 0px; @@ -40,13 +39,10 @@ } .label { - // Designates the starting left margin - // (indentation) of 'My Items' - // Also adds right space for selection button left: 0; right: $mobileTreeRightArrowW + $interiorMargin; // Allows tree item name to stop prior to the arrow - font-size: 1.1em; - //font-size: 1.2em; // CH CO + line-height: $mobileTreeItemH; + //font-size: 1.1em; // CH CO .type-icon { @include verticalCenterBlock($mobileTreeItemH, $treeTypeIconH); } diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss index ac99a36d17..9bee6e6865 100644 --- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss @@ -1,11 +1,41 @@ -.overlay { - @include phoneandtablet { +@include phoneandtablet { + .overlay { $m: 0; - // Removes curved edges on the dialog box - // and makes it take up fullscreen - >.holder { - @include border-radius($m); - top: $m; right: $m; bottom: $m; left: $m; + > .holder { + @include border-radius($m); + top: $m; + right: $m; + bottom: $m; + left: $m; + > .contents { + top: $mobileOverlayMargin; + right: $mobileOverlayMargin; + bottom: $mobileOverlayMargin; + left: $mobileOverlayMargin; + + .form.editor { + border: none; + + .contents { + top: 0; + right: 0; + bottom: 0; + left: 0; + } + } + } + } + } +} + +@include phone { + .overlay > .holder > .contents .form.editor .contents .form-row { + > .label, + > .controls { + //@include test(blue); + display: block; + float: none; + width: 100%; } } } \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index cb0b0f1a72..cf1ad57a50 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -56,6 +56,7 @@ ul.tree { // @include test(orange); @include absPosDefault(); //left: $runningItemW + $interiorMargin; // Adding pad to left to make room for link icon + line-height: $menuLineH; left: $runningItemW; .type-icon { From 89bfa54563d164cd9c5972d982f680b1a5f4e980 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 26 Aug 2015 10:08:57 -0700 Subject: [PATCH 18/21] [Mobile] IN PROGRESS: Misc layout tweaks; treeview pane styling open #74 Treeview pane darkened; Spacing in frame tweaked; #content-area in right pane hidden when treeview expanded for phone portrait only; Removed mobile-pane and desktop-browse classes from markup; --- .../commonUI/browse/res/templates/browse.html | 4 +- .../general/res/css/theme-espresso.css | 62 +++++++++++-------- .../general/res/sass/mobile/_layout.scss | 31 ++++++---- .../general/res/sass/user-environ/_frame.scss | 2 +- 4 files changed, 59 insertions(+), 40 deletions(-) diff --git a/platform/commonUI/browse/res/templates/browse.html b/platform/commonUI/browse/res/templates/browse.html index 402cf7a197..811e9e8bd9 100644 --- a/platform/commonUI/browse/res/templates/browse.html +++ b/platform/commonUI/browse/res/templates/browse.html @@ -24,7 +24,7 @@
-
+
-
+
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index c503b222f4..ec9f0aac32 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -785,7 +785,7 @@ mct-container { left: 0; } /* line 31, ../sass/mobile/_layout.scss */ - .pane.left { + .pane.left.treeview { background-color: #222; } /* line 35, ../sass/mobile/_layout.scss */ @@ -797,8 +797,17 @@ mct-container { transition-timing-function: ease; backface-visibility: hidden; margin-left: 0 !important; } + /* line 39, ../sass/mobile/_layout.scss */ + .pane.right-repr #content-area { + -moz-transition-duration: 0.35s; + -o-transition-duration: 0.35s; + -webkit-transition-duration: 0.35s; + transition-duration: 0.35s; + transition-timing-function: ease; + backface-visibility: hidden; + opacity: 1; } - /* line 41, ../sass/mobile/_layout.scss */ + /* line 45, ../sass/mobile/_layout.scss */ .user-environ .browse-area, .user-environ .edit-area, .user-environ .editor { @@ -807,38 +816,38 @@ mct-container { right: 0; bottom: 25px; } - /* line 47, ../sass/mobile/_layout.scss */ + /* line 51, ../sass/mobile/_layout.scss */ .holder.l-mobile { top: 10px !important; right: 10px !important; bottom: 10px !important; left: 10px !important; } - /* line 57, ../sass/mobile/_layout.scss */ + /* line 61, ../sass/mobile/_layout.scss */ .browse-hidetree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 61, ../sass/mobile/_layout.scss */ - .browse-hidetree .pane.left { + /* line 65, ../sass/mobile/_layout.scss */ + .browse-hidetree .pane.left.treeview { opacity: 0; right: 100% !important; width: auto !important; overflow-y: hidden; overflow-x: hidden; } - /* line 70, ../sass/mobile/_layout.scss */ + /* line 74, ../sass/mobile/_layout.scss */ .browse-hidetree .pane.right-repr { left: 0 !important; } - /* line 77, ../sass/mobile/_layout.scss */ + /* line 79, ../sass/mobile/_layout.scss */ .browse-showtree { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 86, ../sass/mobile/_layout.scss */ - .browse-showtree .pane.left { + /* line 88, ../sass/mobile/_layout.scss */ + .browse-showtree .pane.left.treeview { -moz-transition-property: opacity; -o-transition-property: opacity; -webkit-transition-property: opacity; @@ -860,44 +869,44 @@ mct-container { display: block !important; right: auto !important; width: 40% !important; } - /* line 96, ../sass/mobile/_layout.scss */ + /* line 98, ../sass/mobile/_layout.scss */ .browse-showtree .pane.right-repr { left: 40% !important; } - /* line 106, ../sass/mobile/_layout.scss */ + /* line 107, ../sass/mobile/_layout.scss */ .mobile-menu-icon { font-size: 110%; position: absolute; top: 12px; left: 10px; } - /* line 113, ../sass/mobile/_layout.scss */ + /* line 114, ../sass/mobile/_layout.scss */ .object-browse-bar { left: 30px !important; } - /* line 116, ../sass/mobile/_layout.scss */ + /* line 117, ../sass/mobile/_layout.scss */ .object-browse-bar .context-available { opacity: 1 !important; } - /* line 119, ../sass/mobile/_layout.scss */ + /* line 120, ../sass/mobile/_layout.scss */ .object-browse-bar .view-switcher { margin-right: 0 !important; } - /* line 124, ../sass/mobile/_layout.scss */ + /* line 125, ../sass/mobile/_layout.scss */ .tree-holder { overflow-x: hidden !important; } - /* line 128, ../sass/mobile/_layout.scss */ + /* line 129, ../sass/mobile/_layout.scss */ .mobile-disable-select { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 133, ../sass/mobile/_layout.scss */ + /* line 134, ../sass/mobile/_layout.scss */ .mobile-hide, .mobile-hide-important { display: none !important; } - /* line 138, ../sass/mobile/_layout.scss */ + /* line 139, ../sass/mobile/_layout.scss */ .mobile-back-hide { pointer-events: none; -moz-transition-property: opacity; @@ -914,7 +923,7 @@ mct-container { transition-timing-function: ease-in-out; opacity: 0; } - /* line 143, ../sass/mobile/_layout.scss */ + /* line 144, ../sass/mobile/_layout.scss */ .mobile-back-unhide { pointer-events: all; -moz-transition-property: opacity; @@ -931,15 +940,18 @@ mct-container { transition-timing-function: ease-in-out; opacity: 1; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 152, ../sass/mobile/_layout.scss */ - .browse-showtree .pane.left { + /* line 153, ../sass/mobile/_layout.scss */ + .browse-showtree .pane.left.treeview { width: 90% !important; } - /* line 155, ../sass/mobile/_layout.scss */ + /* line 156, ../sass/mobile/_layout.scss */ .browse-showtree .pane.right-repr { left: 0 !important; - transform: translateX(90%); } } + transform: translateX(90%); } + /* line 159, ../sass/mobile/_layout.scss */ + .browse-showtree .pane.right-repr #content-area { + opacity: 0; } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 163, ../sass/mobile/_layout.scss */ + /* line 167, ../sass/mobile/_layout.scss */ .desktop-hide { display: none; } } /***************************************************************************** diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index 008beef117..aee784f537 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -24,15 +24,22 @@ // Wrapper of the entire 2 panes, only enacted on // phone and tablet. Also for the panes .browse-wrapper, - .mobile-pane { - position: absolute; + .pane { top: 0 !important; right: 0; bottom: 0; left: 0; } - .mobile-pane.right-repr { + .pane.left.treeview { + background-color: $colorMobilePaneLeft; + } + + .pane.right-repr { //@include test(); @include slMenuTransitions; margin-left: 0 !important; + #content-area { + @include slMenuTransitions; + opacity: 1; + } } .user-environ .browse-area, @@ -55,7 +62,7 @@ @include user-select(none); // Sets the left tree menu when the tree // is hidden. - .mobile-pane.left { + .pane.left.treeview { opacity: 0; right: 100% !important; width: auto !important; @@ -64,10 +71,8 @@ } // Sets the right represenation when // the tree is hidden. - .mobile-pane.right-repr { - //@include slMenuTransitions; + .pane.right-repr { left: 0 !important; - //width: 100% !important; } } @@ -80,7 +85,7 @@ @include user-select(none); // Sets the left tree menu when the tree is shown. - .mobile-pane.left { + .pane.left.treeview { @include trans-prop-nice(opacity, .4s); @include background-image(linear-gradient(90deg, rgba(black, 0) 98%, rgba(black, 0.3) 100%)); opacity: 1; @@ -90,8 +95,7 @@ width: $proporMenuWithView !important; } // Sets the right representation when the tree is shown. - .mobile-pane.right-repr { - //@include slMenuTransitions; CH MOVED + .pane.right-repr { left: $proporMenuWithView !important; //width: auto !important; @@ -146,12 +150,15 @@ @include phonePortrait { .browse-showtree { - .mobile-pane.left { + .pane.left.treeview { width: $proporMenuOnly !important; } - .mobile-pane.right-repr { + .pane.right-repr { left: 0 !important; transform: translateX($proporMenuOnly); + #content-area { + opacity: 0; + } } } } diff --git a/platform/commonUI/general/res/sass/user-environ/_frame.scss b/platform/commonUI/general/res/sass/user-environ/_frame.scss index d67c0ccb9a..f04071fa0e 100644 --- a/platform/commonUI/general/res/sass/user-environ/_frame.scss +++ b/platform/commonUI/general/res/sass/user-environ/_frame.scss @@ -36,7 +36,7 @@ line-height: $ohH; } >.object-holder.abs { - top: $ohH + $interiorMarginSm; + top: $ohH + $interiorMargin; } .contents { $myM: $interiorMargin; From 9a3009f32746c621ce5b6b9e75c18953a5017ea1 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 26 Aug 2015 10:50:14 -0700 Subject: [PATCH 19/21] [Mobile] IN PROGRESS: Styling on Create menu open #74 --- .../general/res/css/theme-espresso.css | 34 +++++++++++++++++++ platform/commonUI/general/res/sass/_main.scss | 1 + .../res/sass/mobile/controls/_menus.scss | 29 ++++++++++------ 3 files changed, 54 insertions(+), 10 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index ec9f0aac32..75d2c7b754 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -2999,6 +2999,40 @@ label.checkbox.custom { right: 0; width: auto; } +/***************************************************************************** + * Open MCT Web, Copyright (c) 2014-2015, United States Government + * as represented by the Administrator of the National Aeronautics and Space + * Administration. All rights reserved. + * + * Open MCT Web is licensed under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * http://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * Open MCT Web includes source code licensed under additional open source + * licenses. See the Open Source Licenses file (LICENSES.md) included with + * this source code distribution or the Licensing information page available + * at runtime from the About dialog for additional information. + *****************************************************************************/ +@media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { + /* line 26, ../sass/mobile/controls/_menus.scss */ + .menu-element .super-menu { + width: 250px; + height: 250px; } + /* line 32, ../sass/mobile/controls/_menus.scss */ + .menu-element .super-menu .pane.left { + border-right: none; + padding-right: 0; + width: 100%; } + /* line 37, ../sass/mobile/controls/_menus.scss */ + .menu-element .super-menu .pane.right { + display: none; } } /* line 1, ../sass/controls/_time-controller.scss */ .l-time-controller { position: relative; diff --git a/platform/commonUI/general/res/sass/_main.scss b/platform/commonUI/general/res/sass/_main.scss index a388fcac35..8803074f63 100644 --- a/platform/commonUI/general/res/sass/_main.scss +++ b/platform/commonUI/general/res/sass/_main.scss @@ -48,6 +48,7 @@ @import "controls/controls"; @import "controls/lists"; @import "controls/menus"; +@import "mobile/controls/menus"; @import "controls/time-controller"; @import "edit/editor"; @import "features/imagery"; diff --git a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss index e06fdb7979..3c8ea79917 100644 --- a/platform/commonUI/general/res/sass/mobile/controls/_menus.scss +++ b/platform/commonUI/general/res/sass/mobile/controls/_menus.scss @@ -20,15 +20,24 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ -// Mobile hamburger icon is -// sized according to the device -.mobile-menu-icon { - display: inline-block; - @include phoneandtablet { - font-size: 21px; - //padding-top: $imageThumbPad; - } - @include desktop { - display: none; +// Override the Create menu for mobile +@include phoneandtablet { + .menu-element { + .super-menu { + $d: 250px; + width: $d; + height: $d; + + .pane { + &.left { + border-right: none; + padding-right: 0; + width: 100%; + } + &.right { + display: none; + } + } + } } } From f80266b23f40d92d418b608147bce03bd8bb96e0 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 26 Aug 2015 12:34:45 -0700 Subject: [PATCH 20/21] [Mobile] IN PROGRESS: Styling in forms, overlay and tree open #74 .section-header and form-row styles changed in forms/_elems.scss; significant changes to overlay in mobile: full-screen, close button, more; tree hover bg changed to use rgba(#fff, 0.1); removed "Hide title by default" in core/bundle.json; --- .../commonUI/dialog/res/templates/dialog.html | 2 +- .../dialog/res/templates/overlay.html | 2 +- platform/commonUI/general/res/css/forms.css | 59 +++++----- .../general/res/css/theme-espresso.css | 103 +++++++++--------- platform/commonUI/general/res/css/tree.css | 2 +- .../commonUI/general/res/sass/_constants.scss | 6 +- .../general/res/sass/forms/_elems.scss | 17 +-- .../res/sass/mobile/overlay/_overlay.scss | 10 ++ .../general/res/sass/overlay/_overlay.scss | 14 +-- .../commonUI/general/res/sass/tree/_tree.scss | 2 +- platform/core/bundle.json | 6 - 11 files changed, 113 insertions(+), 110 deletions(-) diff --git a/platform/commonUI/dialog/res/templates/dialog.html b/platform/commonUI/dialog/res/templates/dialog.html index 661ea36ff5..1bea0290e7 100644 --- a/platform/commonUI/dialog/res/templates/dialog.html +++ b/platform/commonUI/dialog/res/templates/dialog.html @@ -25,7 +25,7 @@ All fields marked * are required.
-
+
+ class="clk-icon icon ui-symbol close"> x
diff --git a/platform/commonUI/general/res/css/forms.css b/platform/commonUI/general/res/css/forms.css index 6e2aec574a..a9ce755177 100644 --- a/platform/commonUI/general/res/css/forms.css +++ b/platform/commonUI/general/res/css/forms.css @@ -172,21 +172,20 @@ *****************************************************************************/ /* line 22, ../sass/forms/_elems.scss */ .section-header { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; background: rgba(255, 255, 255, 0.1); + color: #cccccc; font-size: 0.8em; - margin-top: 5px; - padding: 5px; } - /* line 28, ../sass/forms/_elems.scss */ - .section-header:first-child { - margin-top: 0; } + padding: 5px 5px; + text-transform: uppercase; } /* line 35, ../sass/forms/_elems.scss */ .form .form-section { - position: relative; } -/* line 39, ../sass/forms/_elems.scss */ + position: relative; + margin-bottom: 20px; } +/* line 40, ../sass/forms/_elems.scss */ .form .form-row { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -195,12 +194,12 @@ *zoom: 1; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 5px; - padding: 5px; + padding: 5px 5px; position: relative; } - /* line 47, ../sass/forms/_elems.scss */ + /* line 48, ../sass/forms/_elems.scss */ .form .form-row.first { border-top: none; } - /* line 51, ../sass/forms/_elems.scss */ + /* line 52, ../sass/forms/_elems.scss */ .form .form-row .label, .form .form-row .controls { -moz-box-sizing: border-box; @@ -211,42 +210,42 @@ font-size: 0.8rem; line-height: 22px; min-height: 22px; } - /* line 60, ../sass/forms/_elems.scss */ + /* line 61, ../sass/forms/_elems.scss */ .form .form-row > .label { float: left; min-width: 120px; position: relative; white-space: nowrap; - width: 20%; } - /* line 70, ../sass/forms/_elems.scss */ + width: 30%; } + /* line 71, ../sass/forms/_elems.scss */ .form .form-row .value { color: #cccccc; } - /* line 74, ../sass/forms/_elems.scss */ + /* line 75, ../sass/forms/_elems.scss */ .form .form-row .controls { float: left; position: relative; - width: 79.9%; } - /* line 81, ../sass/forms/_elems.scss */ + width: 69.9%; } + /* line 82, ../sass/forms/_elems.scss */ .form .form-row .controls .l-composite-control.l-checkbox { display: inline-block; line-height: 14px; margin-right: 5px; } - /* line 90, ../sass/forms/_elems.scss */ + /* line 91, ../sass/forms/_elems.scss */ .form .form-row .controls .l-med input[type="text"] { width: 200px; } - /* line 94, ../sass/forms/_elems.scss */ + /* line 95, ../sass/forms/_elems.scss */ .form .form-row .controls .l-small input[type="text"] { width: 50px; } - /* line 98, ../sass/forms/_elems.scss */ + /* line 99, ../sass/forms/_elems.scss */ .form .form-row .controls .l-numeric input[type="text"] { text-align: right; } - /* line 102, ../sass/forms/_elems.scss */ + /* line 103, ../sass/forms/_elems.scss */ .form .form-row .controls .select { margin-right: 5px; } - /* line 107, ../sass/forms/_elems.scss */ + /* line 108, ../sass/forms/_elems.scss */ .form .form-row .field-hints { color: #666666; } - /* line 111, ../sass/forms/_elems.scss */ + /* line 112, ../sass/forms/_elems.scss */ .form .form-row .selector-list { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -259,7 +258,7 @@ position: relative; height: 150px; overflow: auto; } - /* line 122, ../sass/forms/_elems.scss */ + /* line 123, ../sass/forms/_elems.scss */ .form .form-row .selector-list .wrapper { overflow-y: auto; position: absolute; @@ -268,24 +267,24 @@ bottom: 5px; left: 5px; } -/* line 136, ../sass/forms/_elems.scss */ +/* line 137, ../sass/forms/_elems.scss */ label.form-control.checkbox input { margin-right: 5px; vertical-align: top; } -/* line 142, ../sass/forms/_elems.scss */ +/* line 143, ../sass/forms/_elems.scss */ .hint, .s-hint { font-size: 0.9em; } -/* line 147, ../sass/forms/_elems.scss */ +/* line 148, ../sass/forms/_elems.scss */ .l-result { display: inline-block; min-width: 32px; min-height: 32px; position: relative; vertical-align: top; } - /* line 154, ../sass/forms/_elems.scss */ + /* line 155, ../sass/forms/_elems.scss */ .l-result div.s-hint { -moz-border-radius: 2px; -webkit-border-radius: 2px; diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 75d2c7b754..289902281a 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -3486,21 +3486,20 @@ label.checkbox.custom { *****************************************************************************/ /* line 22, ../sass/forms/_elems.scss */ .section-header { - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; + -moz-border-radius: 2px; + -webkit-border-radius: 2px; + border-radius: 2px; background: rgba(255, 255, 255, 0.1); + color: #cccccc; font-size: 0.8em; - margin-top: 5px; - padding: 5px; } - /* line 28, ../sass/forms/_elems.scss */ - .section-header:first-child { - margin-top: 0; } + padding: 5px 5px; + text-transform: uppercase; } /* line 35, ../sass/forms/_elems.scss */ .form .form-section { - position: relative; } -/* line 39, ../sass/forms/_elems.scss */ + position: relative; + margin-bottom: 20px; } +/* line 40, ../sass/forms/_elems.scss */ .form .form-row { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -3509,12 +3508,12 @@ label.checkbox.custom { *zoom: 1; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 5px; - padding: 5px; + padding: 5px 5px; position: relative; } - /* line 47, ../sass/forms/_elems.scss */ + /* line 48, ../sass/forms/_elems.scss */ .form .form-row.first { border-top: none; } - /* line 51, ../sass/forms/_elems.scss */ + /* line 52, ../sass/forms/_elems.scss */ .form .form-row .label, .form .form-row .controls { -moz-box-sizing: border-box; @@ -3525,42 +3524,42 @@ label.checkbox.custom { font-size: 0.8rem; line-height: 22px; min-height: 22px; } - /* line 60, ../sass/forms/_elems.scss */ + /* line 61, ../sass/forms/_elems.scss */ .form .form-row > .label { float: left; min-width: 120px; position: relative; white-space: nowrap; - width: 20%; } - /* line 70, ../sass/forms/_elems.scss */ + width: 30%; } + /* line 71, ../sass/forms/_elems.scss */ .form .form-row .value { color: #cccccc; } - /* line 74, ../sass/forms/_elems.scss */ + /* line 75, ../sass/forms/_elems.scss */ .form .form-row .controls { float: left; position: relative; - width: 79.9%; } - /* line 81, ../sass/forms/_elems.scss */ + width: 69.9%; } + /* line 82, ../sass/forms/_elems.scss */ .form .form-row .controls .l-composite-control.l-checkbox { display: inline-block; line-height: 14px; margin-right: 5px; } - /* line 90, ../sass/forms/_elems.scss */ + /* line 91, ../sass/forms/_elems.scss */ .form .form-row .controls .l-med input[type="text"] { width: 200px; } - /* line 94, ../sass/forms/_elems.scss */ + /* line 95, ../sass/forms/_elems.scss */ .form .form-row .controls .l-small input[type="text"] { width: 50px; } - /* line 98, ../sass/forms/_elems.scss */ + /* line 99, ../sass/forms/_elems.scss */ .form .form-row .controls .l-numeric input[type="text"] { text-align: right; } - /* line 102, ../sass/forms/_elems.scss */ + /* line 103, ../sass/forms/_elems.scss */ .form .form-row .controls .select { margin-right: 5px; } - /* line 107, ../sass/forms/_elems.scss */ + /* line 108, ../sass/forms/_elems.scss */ .form .form-row .field-hints { color: #666666; } - /* line 111, ../sass/forms/_elems.scss */ + /* line 112, ../sass/forms/_elems.scss */ .form .form-row .selector-list { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -3573,7 +3572,7 @@ label.checkbox.custom { position: relative; height: 150px; overflow: auto; } - /* line 122, ../sass/forms/_elems.scss */ + /* line 123, ../sass/forms/_elems.scss */ .form .form-row .selector-list .wrapper { overflow-y: auto; position: absolute; @@ -3582,24 +3581,24 @@ label.checkbox.custom { bottom: 5px; left: 5px; } -/* line 136, ../sass/forms/_elems.scss */ +/* line 137, ../sass/forms/_elems.scss */ label.form-control.checkbox input { margin-right: 5px; vertical-align: top; } -/* line 142, ../sass/forms/_elems.scss */ +/* line 143, ../sass/forms/_elems.scss */ .hint, .s-hint { font-size: 0.9em; } -/* line 147, ../sass/forms/_elems.scss */ +/* line 148, ../sass/forms/_elems.scss */ .l-result { display: inline-block; min-width: 32px; min-height: 32px; position: relative; vertical-align: top; } - /* line 154, ../sass/forms/_elems.scss */ + /* line 155, ../sass/forms/_elems.scss */ .l-result div.s-hint { -moz-border-radius: 2px; -webkit-border-radius: 2px; @@ -4346,19 +4345,14 @@ input[type="text"] { background: rgba(0, 0, 0, 0.7); z-index: 100; } /* line 27, ../sass/overlay/_overlay.scss */ -.overlay .btn.close { - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - border-radius: 4px; - padding: 3px 6px; +.overlay .clk-icon.close { position: absolute; - border: none; - top: 3px; - right: 3px; + top: 10px; + right: 10px; bottom: auto; left: auto; z-index: 100; } -/* line 38, ../sass/overlay/_overlay.scss */ +/* line 32, ../sass/overlay/_overlay.scss */ .overlay > .holder { background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyNTI1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ1NDU0NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; @@ -4391,29 +4385,29 @@ input[type="text"] { /* line 175, ../sass/_mixins.scss */ .overlay > .holder.btn-menu .invoke-menu { color: #757575; } - /* line 45, ../sass/overlay/_overlay.scss */ + /* line 39, ../sass/overlay/_overlay.scss */ .overlay > .holder > .contents { top: 25px; right: 25px; bottom: 25px; left: 25px; } -/* line 50, ../sass/overlay/_overlay.scss */ +/* line 44, ../sass/overlay/_overlay.scss */ .overlay .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - font-size: 1.3em; + font-size: 1.2em; margin-bottom: 5px; } -/* line 56, ../sass/overlay/_overlay.scss */ +/* line 50, ../sass/overlay/_overlay.scss */ .overlay .top-bar { height: 60px; } -/* line 60, ../sass/overlay/_overlay.scss */ +/* line 54, ../sass/overlay/_overlay.scss */ .overlay .editor { top: 70px; bottom: 50px; left: 0; right: 0; } -/* line 66, ../sass/overlay/_overlay.scss */ +/* line 60, ../sass/overlay/_overlay.scss */ .overlay .bottom-bar { top: auto; right: 0; @@ -4422,10 +4416,10 @@ input[type="text"] { overflow: visible; height: 40px; text-align: right; } - /* line 72, ../sass/overlay/_overlay.scss */ + /* line 66, ../sass/overlay/_overlay.scss */ .overlay .bottom-bar .btn { margin-left: 10px; } -/* line 76, ../sass/overlay/_overlay.scss */ +/* line 70, ../sass/overlay/_overlay.scss */ .overlay .contents.l-dialog { top: 5px; right: 5px; @@ -4435,6 +4429,10 @@ input[type="text"] { @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px), screen and (orientation: portrait) and (min-width: 515px) and (max-width: 799px) and (min-height: 741px) and (max-height: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (min-height: 515px) and (max-height: 799px) and (min-width: 741px) and (max-width: 1024px) and (max-device-width: 1024px) and (max-device-height: 799px) { /* line 4, ../sass/mobile/overlay/_overlay.scss */ + .overlay .clk-icon.close { + top: 10px; + right: 10px; } + /* line 8, ../sass/mobile/overlay/_overlay.scss */ .overlay > .holder { -moz-border-radius: 0; -webkit-border-radius: 0; @@ -4443,23 +4441,26 @@ input[type="text"] { right: 0; bottom: 0; left: 0; } - /* line 10, ../sass/mobile/overlay/_overlay.scss */ + /* line 14, ../sass/mobile/overlay/_overlay.scss */ .overlay > .holder > .contents { top: 10px; right: 10px; bottom: 10px; left: 10px; } - /* line 16, ../sass/mobile/overlay/_overlay.scss */ + /* line 21, ../sass/mobile/overlay/_overlay.scss */ + .overlay > .holder > .contents .top-bar > .title { + margin-right: 1.2em; } + /* line 26, ../sass/mobile/overlay/_overlay.scss */ .overlay > .holder > .contents .form.editor { border: none; } - /* line 19, ../sass/mobile/overlay/_overlay.scss */ + /* line 29, ../sass/mobile/overlay/_overlay.scss */ .overlay > .holder > .contents .form.editor .contents { top: 0; right: 0; bottom: 0; left: 0; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 799px) and (max-device-height: 1024px), screen and (orientation: landscape) and (max-height: 514px) and (max-width: 740px) and (max-device-width: 1024px) and (max-device-height: 799px) { - /* line 33, ../sass/mobile/overlay/_overlay.scss */ + /* line 43, ../sass/mobile/overlay/_overlay.scss */ .overlay > .holder > .contents .form.editor .contents .form-row > .label, .overlay > .holder > .contents .form.editor .contents .form-row > .controls { display: block; diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 2ca3b73ab9..701433a525 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -279,7 +279,7 @@ ul.tree { @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { /* line 134, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover { - background: #404040; + background: rgba(255, 255, 255, 0.1); color: #cccccc; } /* line 137, ../sass/tree/_tree.scss */ ul.tree li span.tree-item:not(.selected):hover .context-trigger { diff --git a/platform/commonUI/general/res/sass/_constants.scss b/platform/commonUI/general/res/sass/_constants.scss index bb10a83455..83031d6b0e 100644 --- a/platform/commonUI/general/res/sass/_constants.scss +++ b/platform/commonUI/general/res/sass/_constants.scss @@ -48,6 +48,7 @@ $colorPausedFg: #fff; $colorCreateBtn: $colorKey; $colorGridLines: rgba(#fff, 0.05); $colorFormLines: rgba(#fff, 0.1); +$colorFormSectionHeader: rgba(#000, 0.2); // Menu colors $colorMenuBg: lighten($colorBodyBg, 23%); $colorMenuFg: lighten($colorMenuBg, 70%); @@ -104,6 +105,7 @@ $ueEditLeftPaneW: 75%; // Overlay $ovrTopBarH: 60px; $ovrFooterH: 40px; +$overlayMargin: 25px; // Items $ueBrowseGridItemLg: 200px; $ueBrowseGridItemTopBarH: 20px; @@ -145,9 +147,11 @@ $reqSymbolFontSize: 0.7em; /************************** CONTROLS */ $controlDisabledOpacity: 0.3; -$formLabelW: 20%; +$formLabelW: 30%; $formInputH: 22px; $formRowCtrlsH: 14px; +$formTBPad: $interiorMargin; +$formLRPad: $interiorMargin; $menuLineH: 1.5rem; $menuLineHPx: 24px; $scrollbarTrackSize: 10px; diff --git a/platform/commonUI/general/res/sass/forms/_elems.scss b/platform/commonUI/general/res/sass/forms/_elems.scss index 095e9fc582..3971036983 100644 --- a/platform/commonUI/general/res/sass/forms/_elems.scss +++ b/platform/commonUI/general/res/sass/forms/_elems.scss @@ -20,20 +20,21 @@ * at runtime from the About dialog for additional information. *****************************************************************************/ .section-header { - @include border-radius(3px); - background: $colorFormLines; + @include border-radius($basicCr); + background: rgba(#fff, 0.1); + $c: lighten($colorBodyFg, 20%); + //border-bottom: 1px solid rgba(#fff, 0.3); + color: $c; font-size: 0.8em; - margin-top: $interiorMargin; - padding: $interiorMargin; - &:first-child { - margin-top: 0; - } + padding: $formTBPad $formLRPad; + text-transform: uppercase; } .form { // @include test(orange); .form-section { position: relative; + margin-bottom: $interiorMarginLg * 2; } .form-row { @@ -42,7 +43,7 @@ @include clearfix; border-top: 1px solid $colorFormLines; margin-top: $m; - padding: $m; + padding: $formTBPad $formLRPad; position: relative; &.first { border-top: none; diff --git a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss index 9bee6e6865..2c455a9941 100644 --- a/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/mobile/overlay/_overlay.scss @@ -1,6 +1,10 @@ @include phoneandtablet { .overlay { $m: 0; + .clk-icon.close { + top: $mobileOverlayMargin; right: $mobileOverlayMargin; + } + > .holder { @include border-radius($m); top: $m; @@ -13,6 +17,12 @@ bottom: $mobileOverlayMargin; left: $mobileOverlayMargin; + .top-bar { + > .title { + margin-right: 1.2em; + } + } + .form.editor { border: none; diff --git a/platform/commonUI/general/res/sass/overlay/_overlay.scss b/platform/commonUI/general/res/sass/overlay/_overlay.scss index 692db103e1..f5c9cd477f 100644 --- a/platform/commonUI/general/res/sass/overlay/_overlay.scss +++ b/platform/commonUI/general/res/sass/overlay/_overlay.scss @@ -24,16 +24,10 @@ background: $colorOvrBlocker; z-index: 100; } - .btn.close { - @include border-radius($basicCr * 2); - padding: 3px 6px; + .clk-icon.close { position: absolute; - border: none; - top: $interiorMarginSm; right: $interiorMarginSm; bottom: auto; left: auto; + top: $interiorMarginLg; right: $interiorMarginLg; bottom: auto; left: auto; z-index: 100; - } - .editor { -// background: $colorBodyBg; } >.holder { $i: 15%; @@ -43,13 +37,13 @@ top: $i; right: $i; bottom: $i; left: $i; z-index: 101; >.contents { - $m: 25px; + $m: $overlayMargin; top: $m; right: $m; bottom: $m; left: $m; } } .title { @include ellipsize(); - font-size: 1.3em; + font-size: 1.2em; margin-bottom: $interiorMargin; } diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index cf1ad57a50..65ddab2a63 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -132,7 +132,7 @@ ul.tree { // NOTE: [Mobile] Removed Hover on Mobile @include desktop { &:hover { - background: lighten($colorBodyBg, 5%); + background: rgba(#fff, 0.1); //lighten($colorBodyBg, 5%); color: lighten($colorBodyFg, 20%); .context-trigger { display: block; diff --git a/platform/core/bundle.json b/platform/core/bundle.json index f5bf73b8fc..0643be2646 100644 --- a/platform/core/bundle.json +++ b/platform/core/bundle.json @@ -117,12 +117,6 @@ "pattern": "\\S+", "required": true, "cssclass": "l-med" - }, - { - "control": "checkbox", - "name": "Display title by default", - "key": "displayTitle", - "property": [ "display", "title" ] } ] }, From b8b9721ddc961c92d2a9cf8e4f362f0e308d58c9 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 26 Aug 2015 13:04:09 -0700 Subject: [PATCH 21/21] [Mobile] IN PROGRESS: Hide name in view-switcher in mobile open #74 --- .../general/res/css/theme-espresso.css | 21 +++++++++++-------- .../general/res/sass/mobile/_layout.scss | 4 ++++ 2 files changed, 16 insertions(+), 9 deletions(-) diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 289902281a..0f33224f0d 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -889,24 +889,27 @@ mct-container { /* line 120, ../sass/mobile/_layout.scss */ .object-browse-bar .view-switcher { margin-right: 0 !important; } + /* line 122, ../sass/mobile/_layout.scss */ + .object-browse-bar .view-switcher .name { + display: none; } - /* line 125, ../sass/mobile/_layout.scss */ + /* line 129, ../sass/mobile/_layout.scss */ .tree-holder { overflow-x: hidden !important; } - /* line 129, ../sass/mobile/_layout.scss */ + /* line 133, ../sass/mobile/_layout.scss */ .mobile-disable-select { -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none; } - /* line 134, ../sass/mobile/_layout.scss */ + /* line 138, ../sass/mobile/_layout.scss */ .mobile-hide, .mobile-hide-important { display: none !important; } - /* line 139, ../sass/mobile/_layout.scss */ + /* line 143, ../sass/mobile/_layout.scss */ .mobile-back-hide { pointer-events: none; -moz-transition-property: opacity; @@ -923,7 +926,7 @@ mct-container { transition-timing-function: ease-in-out; opacity: 0; } - /* line 144, ../sass/mobile/_layout.scss */ + /* line 148, ../sass/mobile/_layout.scss */ .mobile-back-unhide { pointer-events: all; -moz-transition-property: opacity; @@ -940,18 +943,18 @@ mct-container { transition-timing-function: ease-in-out; opacity: 1; } } @media screen and (orientation: portrait) and (max-width: 514px) and (max-height: 740px) and (max-device-width: 799px) and (max-device-height: 1024px) { - /* line 153, ../sass/mobile/_layout.scss */ + /* line 157, ../sass/mobile/_layout.scss */ .browse-showtree .pane.left.treeview { width: 90% !important; } - /* line 156, ../sass/mobile/_layout.scss */ + /* line 160, ../sass/mobile/_layout.scss */ .browse-showtree .pane.right-repr { left: 0 !important; transform: translateX(90%); } - /* line 159, ../sass/mobile/_layout.scss */ + /* line 163, ../sass/mobile/_layout.scss */ .browse-showtree .pane.right-repr #content-area { opacity: 0; } } @media screen and (min-device-width: 800px) and (min-device-height: 1025px), screen and (min-device-width: 1025px) and (min-device-height: 800px) { - /* line 167, ../sass/mobile/_layout.scss */ + /* line 171, ../sass/mobile/_layout.scss */ .desktop-hide { display: none; } } /***************************************************************************** diff --git a/platform/commonUI/general/res/sass/mobile/_layout.scss b/platform/commonUI/general/res/sass/mobile/_layout.scss index aee784f537..a6ffe688c4 100644 --- a/platform/commonUI/general/res/sass/mobile/_layout.scss +++ b/platform/commonUI/general/res/sass/mobile/_layout.scss @@ -119,6 +119,10 @@ } .view-switcher { margin-right: 0 !important; + .name { + // Hide the name in mobile + display: none; + } } }