From f820cd47b64a929aa9ecfd08fd887209efebcde2 Mon Sep 17 00:00:00 2001 From: Charles Hacskaylo Date: Tue, 30 Dec 2014 17:02:48 -0800 Subject: [PATCH] [Bug] CSS and markup mods CSS markup and mods to fix issues related to bug WTD-618; fix is complete and verified in Chrome --- .../edit/res/templates/edit-object.html | 21 +++--- .../general/res/css/theme-espresso.css | 69 ++++++++++++------- platform/commonUI/general/res/css/tree.css | 4 +- .../commonUI/general/res/sass/_global.scss | 5 +- .../commonUI/general/res/sass/_holder.scss | 7 -- .../general/res/sass/helpers/_splitter.scss | 24 +++++++ .../commonUI/general/res/sass/tree/_tree.scss | 3 +- .../res/templates/containers/accordion.html | 15 ++-- 8 files changed, 95 insertions(+), 53 deletions(-) delete mode 100644 platform/commonUI/general/res/sass/_holder.scss diff --git a/platform/commonUI/edit/res/templates/edit-object.html b/platform/commonUI/edit/res/templates/edit-object.html index c017759cf1..a27016a3a4 100644 --- a/platform/commonUI/edit/res/templates/edit-object.html +++ b/platform/commonUI/edit/res/templates/edit-object.html @@ -5,28 +5,29 @@
-
+
-
-
+
+
- - - +
+ + - - +
+
+
+ - +
diff --git a/platform/commonUI/general/res/css/theme-espresso.css b/platform/commonUI/general/res/css/theme-espresso.css index 1b5826e412..b900296e7f 100644 --- a/platform/commonUI/general/res/css/theme-espresso.css +++ b/platform/commonUI/general/res/css/theme-espresso.css @@ -103,33 +103,36 @@ body, html { color: #999999; font-family: Helvetica, Arial, sans-serif; font-size: 100%; - margin: 5px; + height: 100%; + width: 100%; overflow: hidden; } -/* line 34, ../sass/_global.scss */ +/* line 35, ../sass/_global.scss */ em { color: rgba(255, 255, 255, 0.2); font-style: normal; } -/* line 39, ../sass/_global.scss */ +/* line 40, ../sass/_global.scss */ input, textarea { font-family: Helvetica, Arial, sans-serif; } -/* line 43, ../sass/_global.scss */ +/* line 44, ../sass/_global.scss */ h1, h2, h3 { margin: 0; } -/* line 47, ../sass/_global.scss */ +/* line 48, ../sass/_global.scss */ h1 { font-size: 1.7em; font-weight: normal; margin-bottom: 20px; } -/* line 53, ../sass/_global.scss */ +/* line 54, ../sass/_global.scss */ span { - box-sizing: border-box; } + /* 618 DEBUG + box-sizing: border-box; + */ } -/* line 57, ../sass/_global.scss */ +/* line 60, ../sass/_global.scss */ .abs { position: absolute; top: 0; @@ -139,28 +142,28 @@ span { height: auto; width: auto; } -/* line 67, ../sass/_global.scss */ +/* line 70, ../sass/_global.scss */ .code { font-family: "Lucida Console", monospace; font-size: 0.7em; line-height: 150%; white-space: pre; } -/* line 74, ../sass/_global.scss */ +/* line 77, ../sass/_global.scss */ .centered { text-align: center; } -/* line 78, ../sass/_global.scss */ +/* line 81, ../sass/_global.scss */ .colorKey { color: #0099cc; } -/* line 82, ../sass/_global.scss */ +/* line 85, ../sass/_global.scss */ .ds { -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 4px 10px 2px; -moz-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 87, ../sass/_global.scss */ +/* line 90, ../sass/_global.scss */ .hide, .hidden { display: none !important; } @@ -2360,7 +2363,7 @@ input[type="text"] { border-right: 7px solid transparent; border-top: 10.5px solid #990000; } -/* line 4, ../sass/helpers/_splitter.scss */ +/* line 8, ../sass/helpers/_splitter.scss */ .split-layout .splitter { background-color: #404040; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px; @@ -2369,20 +2372,30 @@ input[type="text"] { overflow: hidden; position: absolute; z-index: 1; } -/* line 11, ../sass/helpers/_splitter.scss */ +/* line 15, ../sass/helpers/_splitter.scss */ .split-layout.horizontal { overflow: hidden; } - /* line 14, ../sass/helpers/_splitter.scss */ + /* line 18, ../sass/helpers/_splitter.scss */ .split-layout.horizontal .pane { left: 0; right: 0; } - /* line 18, ../sass/helpers/_splitter.scss */ + /* line 21, ../sass/helpers/_splitter.scss */ + .split-layout.horizontal .pane.top { + bottom: auto; + height: 70%; } + /* line 25, ../sass/helpers/_splitter.scss */ + .split-layout.horizontal .pane.bottom { + top: auto; + height: 30%; } + /* line 30, ../sass/helpers/_splitter.scss */ .split-layout.horizontal > .splitter { cursor: row-resize; left: 0; right: 0; width: auto; - height: 5px; } + height: 5px; + margin-top: -7px; + top: 70%; } /* line 54, ../sass/_mixins.scss */ .split-layout.horizontal > .splitter:before { content: ''; @@ -2397,15 +2410,25 @@ input[type="text"] { /* line 75, ../sass/_mixins.scss */ .split-layout.horizontal > .splitter:not(.disabled):hover:before { border-color: rgba(0, 153, 204, 0.9); } -/* line 28, ../sass/helpers/_splitter.scss */ +/* line 42, ../sass/helpers/_splitter.scss */ .split-layout.vertical .pane { top: 0; bottom: 0; } -/* line 32, ../sass/helpers/_splitter.scss */ + /* line 45, ../sass/helpers/_splitter.scss */ + .split-layout.vertical .pane.left { + right: auto; + width: 84%; } + /* line 49, ../sass/helpers/_splitter.scss */ + .split-layout.vertical .pane.right { + left: auto; + width: 15%; } +/* line 54, ../sass/helpers/_splitter.scss */ .split-layout.vertical > .splitter { bottom: 0; cursor: col-resize; - width: 5px; } + width: 5px; + margin-left: -7px; + left: 85%; } /* line 54, ../sass/_mixins.scss */ .split-layout.vertical > .splitter:before { content: ''; @@ -2421,11 +2444,11 @@ input[type="text"] { .split-layout.vertical > .splitter:not(.disabled):hover:before { border-color: rgba(0, 153, 204, 0.9); } -/* line 41, ../sass/helpers/_splitter.scss */ +/* line 65, ../sass/helpers/_splitter.scss */ .browse-area .splitter { top: 40px; } -/* line 45, ../sass/helpers/_splitter.scss */ +/* line 69, ../sass/helpers/_splitter.scss */ .edit-area .splitter { top: 0; } diff --git a/platform/commonUI/general/res/css/tree.css b/platform/commonUI/general/res/css/tree.css index 4122c31bb6..d02b479302 100644 --- a/platform/commonUI/general/res/css/tree.css +++ b/platform/commonUI/general/res/css/tree.css @@ -91,12 +91,12 @@ ul.tree { position: absolute; top: 0; left: 37px; - right: 25px; + right: 0; overflow: hidden; text-overflow: ellipsis; height: 1.5rem; bottom: auto; white-space: nowrap; } - /* line 98, ../sass/tree/_tree.scss */ + /* line 99, ../sass/tree/_tree.scss */ ul.tree ul.tree { margin-left: 15px; } diff --git a/platform/commonUI/general/res/sass/_global.scss b/platform/commonUI/general/res/sass/_global.scss index b78730b8c3..b0096a3d71 100644 --- a/platform/commonUI/general/res/sass/_global.scss +++ b/platform/commonUI/general/res/sass/_global.scss @@ -27,7 +27,8 @@ body, html { color: $colorBodyFg; font-family: Helvetica, Arial, sans-serif; font-size: 100%; - margin: $bodyMargin; + height: 100%; + width: 100%; overflow: hidden; } @@ -51,7 +52,9 @@ h1 { } span { + /* 618 DEBUG box-sizing: border-box; + */ } .abs { diff --git a/platform/commonUI/general/res/sass/_holder.scss b/platform/commonUI/general/res/sass/_holder.scss deleted file mode 100644 index 194904b40c..0000000000 --- a/platform/commonUI/general/res/sass/_holder.scss +++ /dev/null @@ -1,7 +0,0 @@ -.pane { - .holder { -// left: $interiorMargin; -// right: $interiorMargin; - } -// &:first-child .holder { left: 0; } -} \ No newline at end of file diff --git a/platform/commonUI/general/res/sass/helpers/_splitter.scss b/platform/commonUI/general/res/sass/helpers/_splitter.scss index 4c2997b374..b8d6996867 100644 --- a/platform/commonUI/general/res/sass/helpers/_splitter.scss +++ b/platform/commonUI/general/res/sass/helpers/_splitter.scss @@ -1,6 +1,10 @@ .split-layout { $b: lighten($colorBodyBg, 5%); $splitterD: 5px; + // TEMP VAlS - this will need to be redone when we implement a draggable splitter + $splitL: 85%; + $splitT: 70%; + .splitter { background-color: $b; @include box-shadow(rgba(black, 0.4) 0 0 3px); @@ -14,6 +18,14 @@ .pane { left: 0; right: 0; + &.top { + bottom: auto; + height: $splitT; + } + &.bottom { + top: auto; + height: 100% - $splitT; + } } >.splitter { @include controlGrippy($b, horizontal); @@ -21,6 +33,8 @@ left: 0; right: 0; width: auto; height: $splitterD; + margin-top: ($splitterD + 2) * -1; + top: $splitT; } } &.vertical { @@ -28,12 +42,22 @@ .pane { top: 0; bottom: 0; + &.left { + right: auto; + width: $splitL - 1%; + } + &.right { + left: auto; + width: 100% - $splitL; + } } >.splitter { @include controlGrippy($b, vertical); bottom: 0; cursor: col-resize; width: $splitterD; + margin-left: ($splitterD + 2) * -1; + left: $splitL; } } } diff --git a/platform/commonUI/general/res/sass/tree/_tree.scss b/platform/commonUI/general/res/sass/tree/_tree.scss index 594d1988bd..1890bc0a89 100644 --- a/platform/commonUI/general/res/sass/tree/_tree.scss +++ b/platform/commonUI/general/res/sass/tree/_tree.scss @@ -86,7 +86,8 @@ ul.tree { position: absolute; top: 0; left: $treeVCW + $treeTypeIconW + ($interiorMargin * 2); //38px; - right: $treeContextTriggerW + $interiorMargin; +// right: $treeContextTriggerW + $interiorMargin; //Disabling as context trigger not being used + right: 0; overflow: hidden; text-overflow: ellipsis; height: $menuLineH; diff --git a/platform/commonUI/general/res/templates/containers/accordion.html b/platform/commonUI/general/res/templates/containers/accordion.html index deac7d0edb..89d8dd60ad 100644 --- a/platform/commonUI/general/res/templates/containers/accordion.html +++ b/platform/commonUI/general/res/templates/containers/accordion.html @@ -1,10 +1,7 @@ -
-
- {{container.title}} -
-
-
+
+ {{container.title}} +
+
\ No newline at end of file