BUGFIX:Trac #6854 / #7115 - fixed styling issues with filter panel across CMS - fixed the issue with the width of the date fields - aligned action buttons in filter panel with the designs.

This commit is contained in:
Jeremy Bridson 2012-04-11 16:00:56 +12:00
parent cbb0259dd7
commit 98399f7779
7 changed files with 87 additions and 55 deletions

View File

@ -180,10 +180,10 @@ abstract class ModelAdmin extends LeftAndMain {
$form = new Form($this, "SearchForm",
$context->getSearchFields(),
new FieldList(
Object::create('ResetFormAction','clearsearch', _t('ModelAdmin.CLEAR_SEARCH','Clear Search'))
->setUseButtonTag(true)->addExtraClass('ss-ui-action-minor'),
Object::create('FormAction', 'search', _t('MemberTableField.SEARCH', 'Search'))
->setUseButtonTag(true)
Object::create('FormAction', 'search', _t('MemberTableField.APPLY FILTER', 'Apply Filter'))
->setUseButtonTag(true)->addExtraClass('ss-ui-action-constructive'),
Object::create('ResetFormAction','clearsearch', _t('ModelAdmin.RESET','Reset'))
->setUseButtonTag(true)
),
new RequiredFields()
);

View File

@ -35,49 +35,49 @@ If more variables exist in the future, consider creating a variables file.*/
/** ---------------------------------------------------- Double tone borders http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
/** ----------------------------- Sprite images ----------------------------- */
/** Helper SCSS file for generating sprites for the interface. */
.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-sc495ceeeca.png') no-repeat; }
.btn-icon-sprite, .ui-state-default .btn-icon-accept, .ui-state-default .btn-icon-accept_disabled, .ui-state-default .btn-icon-add, .ui-state-default .btn-icon-add_disabled, .ui-state-default .btn-icon-addpage, .ui-state-default .btn-icon-addpage_disabled, .ui-state-default .btn-icon-arrow-circle-135-left, .ui-state-default .btn-icon-back, .ui-state-default .btn-icon-back_disabled, .ui-state-default .btn-icon-chain--arrow, .ui-state-default .btn-icon-chain--exclamation, .ui-state-default .btn-icon-chain--minus, .ui-state-default .btn-icon-chain--pencil, .ui-state-default .btn-icon-chain--plus, .ui-state-default .btn-icon-chain-small, .ui-state-default .btn-icon-chain-unchain, .ui-state-default .btn-icon-chain, .ui-state-default .btn-icon-cross-circle, .ui-state-default .btn-icon-cross-circle_disabled, .ui-state-default .btn-icon-decline, .ui-state-default .btn-icon-decline_disabled, .ui-state-default .btn-icon-download-csv, .ui-state-default .btn-icon-drive-upload, .ui-state-default .btn-icon-drive-upload_disabled, .ui-state-default .btn-icon-magnifier, .ui-state-default .btn-icon-minus-circle, .ui-state-default .btn-icon-minus-circle_disabled, .ui-state-default .btn-icon-navigation, .ui-state-default .btn-icon-navigation_disabled, .ui-state-default .btn-icon-network-cloud, .ui-state-default .btn-icon-network-cloud_disabled, .ui-state-default .btn-icon-pencil, .ui-state-default .btn-icon-pencil_disabled, .ui-state-default .btn-icon-plug-disconnect-prohibition, .ui-state-default .btn-icon-plug-disconnect-prohibition_disabled, .ui-state-default .btn-icon-preview, .ui-state-default .btn-icon-preview_disabled, .ui-state-default .btn-icon-settings, .ui-state-default .btn-icon-settings_disabled, .ui-state-default .btn-icon-unpublish, .ui-state-default .btn-icon-unpublish_disabled { background: url('../images/btn-icon-s41050dc384.png') no-repeat; }
.ui-state-default .btn-icon-accept { background-position: 0 0; }
.ui-state-default .btn-icon-accept_disabled { background-position: 0 -17px; }
.ui-state-default .btn-icon-add { background-position: 0 -34px; }
.ui-state-default .btn-icon-add_disabled { background-position: 0 -52px; }
.ui-state-default .btn-icon-addpage { background-position: 0 -70px; }
.ui-state-default .btn-icon-addpage_disabled { background-position: 0 -88px; }
.ui-state-default .btn-icon-arrow-circle-135-left { background-position: 0 -104px; }
.ui-state-default .btn-icon-back { background-position: 0 -120px; }
.ui-state-default .btn-icon-back_disabled { background-position: 0 -136px; }
.ui-state-default .btn-icon-chain--arrow { background-position: 0 -151px; }
.ui-state-default .btn-icon-chain--exclamation { background-position: 0 -167px; }
.ui-state-default .btn-icon-chain--minus { background-position: 0 -183px; }
.ui-state-default .btn-icon-chain--pencil { background-position: 0 -199px; }
.ui-state-default .btn-icon-chain--plus { background-position: 0 -215px; }
.ui-state-default .btn-icon-chain-small { background-position: 0 -231px; }
.ui-state-default .btn-icon-chain-unchain { background-position: 0 -247px; }
.ui-state-default .btn-icon-chain { background-position: 0 -263px; }
.ui-state-default .btn-icon-cross-circle { background-position: 0 -279px; }
.ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -295px; }
.ui-state-default .btn-icon-decline { background-position: 0 -311px; }
.ui-state-default .btn-icon-decline_disabled { background-position: 0 -328px; }
.ui-state-default .btn-icon-download-csv { background-position: 0 -345px; }
.ui-state-default .btn-icon-drive-upload { background-position: 0 -363px; }
.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -379px; }
.ui-state-default .btn-icon-magnifier { background-position: 0 -395px; }
.ui-state-default .btn-icon-minus-circle { background-position: 0 -411px; }
.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -427px; }
.ui-state-default .btn-icon-navigation { background-position: 0 -443px; }
.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -459px; }
.ui-state-default .btn-icon-network-cloud { background-position: 0 -475px; }
.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -491px; }
.ui-state-default .btn-icon-pencil { background-position: 0 -507px; }
.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -523px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -539px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -555px; }
.ui-state-default .btn-icon-preview { background-position: 0 -571px; }
.ui-state-default .btn-icon-preview_disabled { background-position: 0 -588px; }
.ui-state-default .btn-icon-settings { background-position: 0 -605px; }
.ui-state-default .btn-icon-settings_disabled { background-position: 0 -621px; }
.ui-state-default .btn-icon-unpublish { background-position: 0 -637px; }
.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -655px; }
.ui-state-default .btn-icon-addpage_disabled { background-position: 0 -86px; }
.ui-state-default .btn-icon-arrow-circle-135-left { background-position: 0 -102px; }
.ui-state-default .btn-icon-back { background-position: 0 -118px; }
.ui-state-default .btn-icon-back_disabled { background-position: 0 -134px; }
.ui-state-default .btn-icon-chain--arrow { background-position: 0 -149px; }
.ui-state-default .btn-icon-chain--exclamation { background-position: 0 -165px; }
.ui-state-default .btn-icon-chain--minus { background-position: 0 -181px; }
.ui-state-default .btn-icon-chain--pencil { background-position: 0 -197px; }
.ui-state-default .btn-icon-chain--plus { background-position: 0 -213px; }
.ui-state-default .btn-icon-chain-small { background-position: 0 -229px; }
.ui-state-default .btn-icon-chain-unchain { background-position: 0 -245px; }
.ui-state-default .btn-icon-chain { background-position: 0 -261px; }
.ui-state-default .btn-icon-cross-circle { background-position: 0 -277px; }
.ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -293px; }
.ui-state-default .btn-icon-decline { background-position: 0 -309px; }
.ui-state-default .btn-icon-decline_disabled { background-position: 0 -326px; }
.ui-state-default .btn-icon-download-csv { background-position: 0 -343px; }
.ui-state-default .btn-icon-drive-upload { background-position: 0 -361px; }
.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -377px; }
.ui-state-default .btn-icon-magnifier { background-position: 0 -393px; }
.ui-state-default .btn-icon-minus-circle { background-position: 0 -409px; }
.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -425px; }
.ui-state-default .btn-icon-navigation { background-position: 0 -441px; }
.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -457px; }
.ui-state-default .btn-icon-network-cloud { background-position: 0 -473px; }
.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -489px; }
.ui-state-default .btn-icon-pencil { background-position: 0 -505px; }
.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -521px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -537px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -553px; }
.ui-state-default .btn-icon-preview { background-position: 0 -569px; }
.ui-state-default .btn-icon-preview_disabled { background-position: 0 -586px; }
.ui-state-default .btn-icon-settings { background-position: 0 -603px; }
.ui-state-default .btn-icon-settings_disabled { background-position: 0 -619px; }
.ui-state-default .btn-icon-unpublish { background-position: 0 -635px; }
.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -653px; }
.icon { text-indent: -9999px; border: none; outline: none; }
.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); }
@ -349,10 +349,18 @@ body.cms { overflow: hidden; }
.cms-content-tools { background-color: #dde3e7; width: 192px; border-right: 1px solid #bfcad2; overflow-y: auto; overflow-x: hidden; z-index: 70; -moz-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -webkit-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; -o-box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; box-shadow: rgba(107, 120, 123, 0.5) 0 0 4px; float: left; position: relative; }
.cms-content-tools .cms-panel-header { clear: both; margin: 0 0 7px; line-height: 24px; border-bottom: 1px solid rgba(201, 205, 206, 0.8); -webkit-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -moz-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); -o-box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); box-shadow: 0 1px 0 rgba(228, 230, 230, 0.8); }
.cms-content-tools .cms-panel-content { width: 176px; padding: 8px 8px; overflow: auto; height: 100%; }
.cms-content-tools .cms-panel-content #LastEditedFrom { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.cms-content-tools .cms-panel-content #LastEditedFrom input { width: 160px; }
.cms-content-tools .cms-panel-content #LastEditedFrom input.hasDatepicker { max-width: 160px; }
.cms-content-tools .cms-panel-content #LastEditedTo { -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
.cms-content-tools .cms-panel-content #LastEditedTo input { width: 160px; }
.cms-content-tools .cms-panel-content #LastEditedTo input.hasDatepicker { max-width: 160px; }
.cms-content-tools .cms-panel-content .Actions .ss-ui-action-constructive { margin-right: 5px; }
.cms-content-tools .cms-content-header { background-color: #748d9d; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzc0OGQ5ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #748d9d)); background-image: -webkit-linear-gradient(#b0bec7, #748d9d); background-image: -moz-linear-gradient(#b0bec7, #748d9d); background-image: -o-linear-gradient(#b0bec7, #748d9d); background-image: -ms-linear-gradient(#b0bec7, #748d9d); background-image: linear-gradient(#b0bec7, #748d9d); }
.cms-content-tools .cms-content-header h2 { text-shadow: #5c7382 -1px -1px 0; width: 176px; color: white; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; o-text-overflow: ellipsis; }
.cms-content-tools h3, .cms-content-tools h4, .cms-content-tools h5 { font-weight: bold; line-height: 16px; }
.cms-content-tools h3 { font-size: 13px; }
.cms-content-tools h4 { font-size: 12px; margin: 5px 0; }
.cms-content-tools .ui-widget-content { background: none; }
.cms-content-tools .field { /* Fields are more compressed in the sidebar compared to the main content editing window so the below alters the internal spacing of the fields so we can move that spacing to between the form fields rather than padding */ }
.cms-content-tools .field label { float: none; width: auto; font-size: 11px; padding: 0 8px 4px 0; }
@ -536,7 +544,9 @@ form.import-form label.left { width: 250px; }
/** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file). The styles are usually added through jstree.js on DOM load, but we need it earlier in order to correctly display the uninitialized tree. */
.cms .jstree ul, .TreeDropdownField .treedropdownfield-panel .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; }
.cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }
.cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; min-width: 18px; }
.cms .jstree li li, .TreeDropdownField .treedropdownfield-panel .jstree li li { margin: 0; }
.cms .jstree li li li, .TreeDropdownField .treedropdownfield-panel .jstree li li li { margin-left: 10px; }
.cms .jstree ins, .TreeDropdownField .treedropdownfield-panel .jstree ins { display: inline-block; text-decoration: none; width: 18px; height: 18px; margin: 0 0 0 0; padding: 0; float: left; }
.cms .jstree a, .TreeDropdownField .treedropdownfield-panel .jstree a { display: inline-block; line-height: 16px; height: 16px; color: black; white-space: nowrap; text-decoration: none; padding: 1px 2px; margin: 0; border: 1px solid #fff; }
.cms .jstree a:focus, .cms .jstree a:active, .cms .jstree a:hover, .TreeDropdownField .treedropdownfield-panel .jstree a:focus, .TreeDropdownField .treedropdownfield-panel .jstree a:active, .TreeDropdownField .treedropdownfield-panel .jstree a:hover { outline: none; text-decoration: none; cursor: pointer; text-shadow: none; }
@ -572,7 +582,7 @@ form.import-form label.left { width: 250px; }
.cms .jstree a > ins, .TreeDropdownField .treedropdownfield-panel .jstree a > ins { height: 16px; width: 16px; }
.cms .jstree a > .jstree-icon, .TreeDropdownField .treedropdownfield-panel .jstree a > .jstree-icon { margin-right: 3px; }
.cms .jstree-rtl a > .jstree-icon, .TreeDropdownField .treedropdownfield-panel .jstree-rtl a > .jstree-icon { margin-left: 3px; margin-right: 0; }
.cms li.jstree-open > ul, .TreeDropdownField .treedropdownfield-panel li.jstree-open > ul { display: block; margin-left: -13px; }
.cms li.jstree-open > ul, .TreeDropdownField .treedropdownfield-panel li.jstree-open > ul { display: block; }
.cms li.jstree-open > ul li ul, .TreeDropdownField .treedropdownfield-panel li.jstree-open > ul li ul { margin-left: 2px; }
.cms li.jstree-closed > ul, .TreeDropdownField .treedropdownfield-panel li.jstree-closed > ul { display: none; }
.cms #vakata-dragged ins, .TreeDropdownField .treedropdownfield-panel #vakata-dragged ins { display: block; text-decoration: none; width: 16px; height: 16px; margin: 0 0 0 0; padding: 0; position: absolute; top: 4px; left: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; }
@ -699,7 +709,6 @@ li.class-ErrorPage > a .jstree-pageicon { background-position: 0 -112px; }
.ModelAdmin .cms-content-fields { overflow: hidden; }
.ModelAdmin .cms-content-fields .cms-edit-form { overflow-y: auto; }
.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form .resetformaction { margin-right: 0px; }
.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content .cms-search-form .resetformaction span { padding-left: 0px; }
.ModelAdmin .cms-content-fields .cms-content-tools .cms-panel-content #Form_ImportForm { overflow: hidden; }
.SecurityAdmin .cms-edit-form .cms-content-header h2 { display: none; }

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

View File

@ -7,9 +7,6 @@
.cms-search-form {
.resetformaction {
margin-right:0px;
span {
padding-left:0px;
}
}
}
#Form_ImportForm {

View File

@ -602,6 +602,27 @@ body.cms {
padding: $grid-y $grid-x;
overflow: auto;
height:100%;
#LastEditedFrom {
@include box-shadow(none);
input {
width:$grid-x * 20;
&.hasDatepicker {
max-width:$grid-x * 20;
}
}
}
#LastEditedTo {
@include box-shadow(none);
input {
width:$grid-x * 20;
&.hasDatepicker {
max-width:$grid-x * 20;
}
}
}
.Actions .ss-ui-action-constructive {
margin-right:5px; //accounts for the scrollbar in the filter - keeps the actions on one line instead of wrapping onto two.
}
}
.cms-content-header {
@ -626,6 +647,11 @@ body.cms {
h3 {
font-size: $font-base-size + 1;
}
h4 {
font-size: $font-base-size;
margin:5px 0;
}
.ui-widget-content {
background: none;

View File

@ -8,17 +8,17 @@ table.details tr { background: #eeeee0; }
p { line-height: 1.5em; margin-top: 0.5em; margin-bottom: 1.0em; }
h1 { margin: 0px 0px 5px; font: 165% verdana,arial,helvetica; }
h1 { margin: 0px 0px 5px; font: 165% verdana, arial, helvetica; }
h2 { margin-top: 1em; margin-bottom: 0.5em; font: bold 125% verdana,arial,helvetica; }
h2 { margin-top: 1em; margin-bottom: 0.5em; font: bold 125% verdana, arial, helvetica; }
h3 { margin-bottom: 0.5em; font: bold 115% verdana,arial,helvetica; }
h3 { margin-bottom: 0.5em; font: bold 115% verdana, arial, helvetica; }
h4 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
h4 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
h5 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
h5 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
h6 { margin-bottom: 0.5em; font: bold 100% verdana,arial,helvetica; }
h6 { margin-bottom: 0.5em; font: bold 100% verdana, arial, helvetica; }
.Error { font-weight: bold; color: red; }

View File

@ -597,11 +597,11 @@ $lang['en_US']['MemberTableField']['DeleteTitleTextDatabase'] = array(
);
$lang['en_US']['MemberTableField']['ERRORADDINGUSER'] = 'There was an error adding the user to the group: %s';
$lang['en_US']['MemberTableField']['FILTER'] = 'Filter';
$lang['en_US']['MemberTableField']['SEARCH'] = 'Search';
$lang['en_US']['MemberTableField']['APPLY FILTER'] = 'Apply Filter';
$lang['en_US']['ModelAdmin']['ADDBUTTON'] = 'Add';
$lang['en_US']['ModelAdmin']['ADDFORM'] = 'Fill out this form to add a %s to the database.';
$lang['en_US']['ModelAdmin']['CHOOSE_COLUMNS'] = 'Select result columns...';
$lang['en_US']['ModelAdmin']['CLEAR_SEARCH'] = 'Clear Search';
$lang['en_US']['ModelAdmin']['RESET'] = 'Reset';
$lang['en_US']['ModelAdmin']['CREATEBUTTON'] = array(
'Create \'%s\'',
PR_MEDIUM,