[Bug] CSS and markup mods

CSS markup and mods to fix issues related to bug WTD-618;
fix is complete and verified in Chrome
This commit is contained in:
Charles Hacskaylo 2014-12-30 17:02:48 -08:00 committed by Victor Woeltjen
parent 7db5c0692b
commit f820cd47b6
8 changed files with 95 additions and 53 deletions

View File

@ -5,28 +5,29 @@
<div class="holder edit-area outline abs">
<!-- edit toolbar goes here -->
<div class='split-layout vertical contents abs work-area'>
<div class='split-pane-component edit-main pane' style="right: 200px; left: 0px;">
<div class='abs pane left edit-main'>
<div class='holder abs object-holder'>
<mct-representation key="representation.selected.key"
mct-object="domainObject">
</mct-representation>
</div>
</div>
<div class="splitter" style="right: 200px"></div>
<div class='split-pane-component edit-objects pane menus-to-left'
style="right: 0px; width: 200px">
<div class="splitter"></div>
<div class='abs pane right edit-objects menus-to-left'>
<div class='holder abs split-layout horizontal'>
<mct-container key="accordion" title="Library" style="position: relative; top: 0px; height: 200px;">
<mct-representation key="'tree'" mct-object="context.getRoot()">
<div class="abs pane top accordion" ng-controller="ToggleController as toggle">
<mct-container key="accordion" title="Library">
<mct-representation key="'tree'" alias="foo1" mct-object="context.getRoot()">
</mct-representation>
</mct-container>
<mct-container key="accordion" title="Elements" style="position: relative; top: 200px;">
</div>
<div class="splitter"></div>
<div class="abs pane bottom accordion" ng-controller="ToggleController as toggle">
<mct-container key="accordion" title="Elements">
<mct-representation key="'edit-elements'" mct-object="domainObject">
</mct-representation>
</mct-container>
</div>
</div>
</div>
</div>

View File

@ -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; }

View File

@ -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; }

View File

@ -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 {

View File

@ -1,7 +0,0 @@
.pane {
.holder {
// left: $interiorMargin;
// right: $interiorMargin;
}
// &:first-child .holder { left: 0; }
}

View File

@ -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;
}
}
}

View File

@ -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;

View File

@ -1,10 +1,7 @@
<div class="accordion" ng-controller="ToggleController as toggle">
<div class="accordion-head" ng-click="toggle.toggle()">
{{container.title}}
</div>
<div class="accordion-contents"
ng-show="!toggle.isActive()"
style="height: 180px;"
ng-transclude>
</div>
<div class="accordion-head" ng-click="toggle.toggle()">
{{container.title}}
</div>
<div class="accordion-contents"
ng-show="!toggle.isActive()"
ng-transclude>
</div>