From f80266b23f40d92d418b608147bce03bd8bb96e0 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Wed, 26 Aug 2015 12:34:45 -0700 Subject: [PATCH] [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" ] } ] },