From caf1971c841ad62ee4b1901b7d0fc092ffb9c690 Mon Sep 17 00:00:00 2001 From: Will Rossiter Date: Wed, 15 Jan 2014 16:50:29 +1300 Subject: [PATCH] FIX: browse by page dropdown is unusable. (Fixes #26) --- css/DMSMainCMS.css | 18 +++++++++--------- scss/DMSMainCMS.scss | 39 ++++++++++++++++++++++----------------- 2 files changed, 31 insertions(+), 26 deletions(-) diff --git a/css/DMSMainCMS.css b/css/DMSMainCMS.css index 7fb7980..1b305f3 100644 --- a/css/DMSMainCMS.css +++ b/css/DMSMainCMS.css @@ -11,11 +11,11 @@ .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li { padding-bottom: 1px; border: 1px solid #C0C0C2; } .DMSDocumentAddController .ui-tabs ul.ui-tabs-nav li a { padding: 8px 20px 8px; } -.ss-add .document-add-existing input { position: absolute; z-index: 9999; width: 390px; padding: 9px 7px; border-bottom-right-radius: 0; border-top-right-radius: 0; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; } -.ss-add .document-add-existing input[disabled] { color: #C0C0C2; text-shadow: 0 -1px 0 white; background: #EEE; background-image: none; box-shadow: inset 0 1px 8px 0 #C4C4C4; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } -.ss-add .document-add-existing .TreeDropdownField { border: none; width: 100%; max-width: 512px; box-sizing: border-box; cursor: pointer; overflow: hidden; } -.ss-add .document-add-existing .treedropdownfield-toggle-panel-link { padding: 5px 9px 9px; border: 1px solid #B3B3B3; float: right; z-index: 99999; position: relative; } -.ss-add .document-add-existing .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree { background: transparent; border: 1px solid #B3B3B3; border-bottom: none; border-bottom-right-radius: 0; } +.ss-add .document-add-existing input.document-autocomplete { position: absolute; z-index: 9999; width: 390px; padding: 9px 7px; border-bottom-right-radius: 0; border-top-right-radius: 0; outline: none; box-sizing: border-box; -moz-box-sizing: border-box; } +.ss-add .document-add-existing input.document-autocomplete[disabled] { color: #C0C0C2; text-shadow: 0 -1px 0 #FFF; background: #EEE; background-image: none; box-shadow: inset 0 1px 8px 0 #C4C4C4; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } +.ss-add .document-add-existing .TreeDropdownField { border: none; width: 100%; max-width: 512px; box-sizing: border-box; cursor: pointer; } +.ss-add .document-add-existing .treedropdownfield-toggle-panel-link { padding: 5px 9px 9px; background: #fff; border: 1px solid #B3B3B3; float: right; z-index: 99999; position: relative; } +.ss-add .document-add-existing .treedropdownfield-toggle-panel-link.treedropdownfield-open-tree { background: #fff; border: 1px solid #B3B3B3; border-bottom: none; border-bottom-right-radius: 0; } .ss-add .document-add-existing .treedropdownfield-title { width: auto; } .ss-add .document-add-existing .treedropdownfield-toggle-panel-link a { display: inline-block; top: 4px; position: relative; } .ss-add .document-add-existing .document-list { position: absolute; z-index: 9999; width: 510px; border: 1px solid #DDD; border-top: none; background: #ffffff; display: none; box-shadow: 0 2px 4px 1px #DDD; max-height: 300px; border-radius: 6px; background-clip: padding-box; overflow: scroll; } @@ -50,7 +50,7 @@ #SectionID .middleColumn ul li, #DocumentTypeID .middleColumn ul li { display: table; padding: 0; width: 125px; height: 40px; white-space: normal; margin-right: -1px; border-radius: 0; } #SectionID .middleColumn ul li:first-child, #DocumentTypeID .middleColumn ul li:first-child { border-radius: 6px 0 0 6px; border-left: 1px solid #C0C0C2; } #SectionID .middleColumn ul li:last-child, #DocumentTypeID .middleColumn ul li:last-child { border-radius: 0 6px 6px 0; } -#SectionID .middleColumn ul li.selected, .ie8 #SectionID .middleColumn ul li.selected, #DocumentTypeID .middleColumn ul li.selected, .ie8 #DocumentTypeID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } +#SectionID .middleColumn ul li.selected, .ie8 #SectionID .middleColumn ul li.selected, #DocumentTypeID .middleColumn ul li.selected, .ie8 #DocumentTypeID .middleColumn ul li.selected { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } #SectionID .middleColumn ul li.selected :after, .ie8 #SectionID .middleColumn ul li.selected :after, #DocumentTypeID .middleColumn ul li.selected :after, .ie8 #DocumentTypeID .middleColumn ul li.selected :after { box-shadow: 0 1px 1px 0 #DDD; } #SectionID .middleColumn ul li label, #DocumentTypeID .middleColumn ul li label { display: table-cell; vertical-align: middle; text-align: center; padding: 0 10px; } @@ -58,10 +58,10 @@ #Form_ItemEditForm ul.SelectionGroup { display: inline-block; position: relative; padding: 0; margin-top: 9px; margin-left: 0; height: 110px; background: none; border: none; } #Form_ItemEditForm ul.SelectionGroup li { width: auto; clear: none; display: inline; margin-right: 4px; } #Form_ItemEditForm ul.SelectionGroup li input.selector { display: none; } -#Form_ItemEditForm ul.SelectionGroup li label.ui-button { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: -ms-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); font-weight: bold; border: 1px solid #C0C0C2; border-radius: 3px; padding: 0.8em 1.5em; } +#Form_ItemEditForm ul.SelectionGroup li label.ui-button { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #d9d9d9)); background: -webkit-linear-gradient(#ffffff, #d9d9d9); background: -moz-linear-gradient(#ffffff, #d9d9d9); background: -o-linear-gradient(#ffffff, #d9d9d9); background: linear-gradient(#ffffff, #d9d9d9); font-weight: bold; border: 1px solid #C0C0C2; border-radius: 3px; padding: 0.8em 1.5em; } #Form_ItemEditForm ul.SelectionGroup li label.ui-button:hover { box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } -#Form_ItemEditForm ul.SelectionGroup li div.field { margin-left: 0px; margin-bottom: 1em; width: 600px; position: absolute; left: 0; margin-top: 13px; padding: 10px; background: white; border: 1px solid #B3B3B3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -ms-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } -#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: -ms-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } +#Form_ItemEditForm ul.SelectionGroup li div.field { margin-left: 0px; margin-bottom: 1em; width: 600px; position: absolute; left: 0; margin-top: 13px; padding: 10px; background: white; border: 1px solid #B3B3B3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #efefef), color-stop(10%, #ffffff), color-stop(90%, #ffffff), color-stop(100%, #efefef)); background-image: -webkit-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -moz-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: -o-linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); background-image: linear-gradient(#efefef, #ffffff 10%, #ffffff 90%, #efefef); } +#Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button { border-bottom: 1px solid #C0C0C2; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #c0c0c0), color-stop(100%, #e6e6e6)); background: -webkit-linear-gradient(#c0c0c0, #e6e6e6); background: -moz-linear-gradient(#c0c0c0, #e6e6e6); background: -o-linear-gradient(#c0c0c0, #e6e6e6); background: linear-gradient(#c0c0c0, #e6e6e6); background-color: silver; filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6'); /* IE6 & IE7 */ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#C0C0C2', endColorstr='#E6E6E6')"; /* IE8 */ box-shadow: 0 1px 1px 0 #A0A0A0 inset; } #Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button:after { content: ''; display: block; position: absolute; top: 33px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #F8F8F8; border-right: 1px solid #B3B3B3; border-top: 1px solid #B3B3B3; -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); pointer-events: none; z-index: 10; } #Form_ItemEditForm ul.SelectionGroup li.selected label.ui-button:after { top: 43px; } #Form_ItemEditForm ul.SelectionGroup .treedropdownfield-panel { margin: 1px 0 0 -1px; box-sizing: content-box; } diff --git a/scss/DMSMainCMS.scss b/scss/DMSMainCMS.scss index 9d9538a..28fb91c 100644 --- a/scss/DMSMainCMS.scss +++ b/scss/DMSMainCMS.scss @@ -54,9 +54,9 @@ $gf_colour_zebra: #F0F4F7; } } -.ss-add{ - .document-add-existing{ - input{ +.ss-add { + .document-add-existing { + input.document-autocomplete { position: absolute; z-index: 9999; //top: 70px; @@ -67,7 +67,8 @@ $gf_colour_zebra: #F0F4F7; outline:none; box-sizing:border-box; -moz-box-sizing: border-box; - &[disabled]{ + + &[disabled] { color: #C0C0C2; text-shadow: 0 -1px 0 #FFF; background: #EEE; @@ -77,36 +78,38 @@ $gf_colour_zebra: #F0F4F7; border-bottom-right-radius:0; } } - .TreeDropdownField{ + .TreeDropdownField { border:none; width: 100%; max-width: 512px; box-sizing: border-box; cursor:pointer; - overflow:hidden; } - .treedropdownfield-toggle-panel-link{ + + .treedropdownfield-toggle-panel-link { padding: 5px 9px 9px; + background: #fff; border: 1px solid #B3B3B3; float: right; z-index: 99999; position: relative; - &.treedropdownfield-open-tree{ - background:transparent; + + &.treedropdownfield-open-tree { + background: #fff; border: 1px solid #B3B3B3; border-bottom:none; border-bottom-right-radius:0; } } - .treedropdownfield-title{ + .treedropdownfield-title { width: auto; } - .treedropdownfield-toggle-panel-link a{ + .treedropdownfield-toggle-panel-link a { display: inline-block; top: 4px; position: relative; } - .document-list{ + .document-list { position: absolute; z-index: 9999; width: 510px; @@ -193,17 +196,19 @@ $gf_colour_zebra: #F0F4F7; //Styling for tree dropdown field .cms{ .ss-add, .selectiongroup{ - .treedropdownfield-panel{ + .treedropdownfield-panel { margin: -1px 0 0 0; box-sizing: border-box; - ul{ + + ul { padding: 4px 0; - li{ + li { border: 1px solid #ffffff; - a{ + a { display: block; padding: 4px 2px; - &.jstree-hovered{ + + &.jstree-hovered { background: rgba(203, 203, 203, 0.4); border: 1px solid #CCC; }