tonyair/silverstripe-framework
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-framework synced 2024-10-22 14:05:37 +02:00
Code Issues Projects Releases Wiki Activity

ENHANCEMENT: SSF-124 - styled the pages list view.

Browse Source
This commit is contained in:
Jeremy Bridson 2012-04-10 12:19:53 +12:00
parent 1176d8d100
commit e0b429491c
4 changed files with 106 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
admin/css/screen.css
View File

@ -35,7 +35,8 @@ 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-grid_print, .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-sfafdfa106f.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-document--pencil, .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-grid_print, .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-s9416553f5b.png') no-repeat; }
.ui-state-default .btn-icon-accept { background-position: 0 0; }
.ui-state-default .btn-icon-accept_disabled { background-position: 0 -17px; }
@ -58,27 +59,29 @@ If more variables exist in the future, consider creating a variables file.*/
.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-grid_print { background-position: 0 -393px; }
.ui-state-default .btn-icon-magnifier { background-position: 0 -409px; }
.ui-state-default .btn-icon-minus-circle { background-position: 0 -425px; }
.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -441px; }
.ui-state-default .btn-icon-navigation { background-position: 0 -457px; }
.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -473px; }
.ui-state-default .btn-icon-network-cloud { background-position: 0 -489px; }
.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -505px; }
.ui-state-default .btn-icon-pencil { background-position: 0 -521px; }
.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -537px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -553px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -569px; }
.ui-state-default .btn-icon-preview { background-position: 0 -585px; }
.ui-state-default .btn-icon-preview_disabled { background-position: 0 -602px; }
.ui-state-default .btn-icon-settings { background-position: 0 -619px; }
.ui-state-default .btn-icon-settings_disabled { background-position: 0 -635px; }
.ui-state-default .btn-icon-unpublish { background-position: 0 -651px; }
.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -669px; }
.ui-state-default .btn-icon-document--pencil { background-position: 0 -343px; }
.ui-state-default .btn-icon-download-csv { background-position: 0 -359px; }
.ui-state-default .btn-icon-drive-upload { background-position: 0 -377px; }
.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -393px; }
.ui-state-default .btn-icon-grid_print { background-position: 0 -409px; }
.ui-state-default .btn-icon-magnifier { background-position: 0 -425px; }
.ui-state-default .btn-icon-minus-circle { background-position: 0 -441px; }
.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -457px; }
.ui-state-default .btn-icon-navigation { background-position: 0 -473px; }
.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -489px; }
.ui-state-default .btn-icon-network-cloud { background-position: 0 -505px; }
.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -521px; }
.ui-state-default .btn-icon-pencil { background-position: 0 -537px; }
.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -553px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -569px; }
.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -585px; }
.ui-state-default .btn-icon-preview { background-position: 0 -601px; }
.ui-state-default .btn-icon-preview_disabled { background-position: 0 -618px; }
.ui-state-default .btn-icon-settings { background-position: 0 -635px; }
.ui-state-default .btn-icon-settings_disabled { background-position: 0 -651px; }
.ui-state-default .btn-icon-unpublish { background-position: 0 -667px; }
.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -685px; }
.icon { text-indent: -9999px; border: none; outline: none; }
.icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); }

13
css/GridField.css
View File

@ -17,6 +17,16 @@
.cms table.ss-gridfield-table tbody td { width: 100%; }
.cms table.ss-gridfield-table tbody td.col-buttons { width: auto; text-align: right; white-space: nowrap; }
.cms table.ss-gridfield-table tbody td.col-description { width: auto; white-space: nowrap; }
.cms table.ss-gridfield-table tbody td.col-listChildrenLink { width: auto; border-right: none; text-indent: -9999em; padding: 0; }
.cms table.ss-gridfield-table tbody td.col-listChildrenLink .list-children-link { background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 12px -4px; display: block; }
.cms table.ss-gridfield-table tbody td.col-Created { white-space: nowrap; }
.cms table.ss-gridfield-table tbody td.col-LastEdited { white-space: nowrap; }
.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge { clear: both; text-transform: uppercase; display: inline-block; padding: 0px 3px; font-size: 0.75em; line-height: 1em; margin-left: 10px; margin-right: 6px; margin-top: -1px; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; -o-border-radius: 2px / 2px; -ms-border-radius: 2px / 2px; -khtml-border-radius: 2px / 2px; border-radius: 2px / 2px; }
.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.modified { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; }
.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.addedtodraft { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; }
.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.deletedonlive { color: #636363; border: 1px solid #E49393; background-color: #F2DADB; }
.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.removedfromdraft { color: #636363; border: 1px solid #E49393; background-color: #F2DADB; }
.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.workflow-approval { color: #56660C; border: 1px solid #7C8816; background-color: #DAE79A; }
.cms table.ss-gridfield-table tbody td button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; }
.cms table.ss-gridfield-table tbody td button.ui-state-hover { background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms table.ss-gridfield-table tbody td button.ui-state-active { border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
@ -40,7 +50,7 @@
.cms table.ss-gridfield-table tr th div.fieldgroup { min-width: 200px; padding-right: 0; }
.cms table.ss-gridfield-table tr th.extra, .cms table.ss-gridfield-table tr th.action { padding: 0; cursor: default; }
.cms table.ss-gridfield-table tr th.extra button.ss-ui-button, .cms table.ss-gridfield-table tr th.extra button:hover.ss-ui-button, .cms table.ss-gridfield-table tr th.action button.ss-ui-button, .cms table.ss-gridfield-table tr th.action button:hover.ss-ui-button { margin-left: .9em; color: #222; }
.cms table.ss-gridfield-table tr th.main { border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; background: #9cb0b9; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.cms table.ss-gridfield-table tr th.main { white-space: nowrap; border-top: 1px solid rgba(0, 0, 0, 0.1); color: #fff; background: #9cb0b9; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
.cms table.ss-gridfield-table tr th.main span { text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
.cms table.ss-gridfield-table tr th.extra { background: #bac8ce; padding: 5px; border-top: rgba(0, 0, 0, 0.3); }
.cms table.ss-gridfield-table tr th.extra span { width: auto; display: inline; position: static; }
@ -65,6 +75,7 @@
.cms table.ss-gridfield-table tr th input.ss-gridfield-sort { padding: 2px; }
.cms table.ss-gridfield-table tr th input.ss-gridfield-sort:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
.cms table.ss-gridfield-table tr th span.non-sortable { padding: 1em 1em; display: block; }
.cms table.ss-gridfield-table tr th.col-listChildrenLink { border-right: none; }
.cms table.ss-gridfield-table tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 6.4px 12px; color: #666666; }
.cms table.ss-gridfield-table tr td.bottom-all { -moz-border-radius-bottomleft: 7px; -webkit-border-bottom-left-radius: 7px; -o-border-bottom-left-radius: 7px; -ms-border-bottom-left-radius: 7px; -khtml-border-bottom-left-radius: 7px; border-bottom-left-radius: 7px; -moz-border-radius-bottomright: 7px; -webkit-border-bottom-right-radius: 7px; -o-border-bottom-right-radius: 7px; -ms-border-bottom-right-radius: 7px; -khtml-border-bottom-right-radius: 7px; border-bottom-right-radius: 7px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b1c0c5), color-stop(100%, #7f9198)); background-image: -webkit-linear-gradient(#b1c0c5, #7f9198); background-image: -moz-linear-gradient(#b1c0c5, #7f9198); background-image: -o-linear-gradient(#b1c0c5, #7f9198); background-image: -ms-linear-gradient(#b1c0c5, #7f9198); background-image: linear-gradient(#b1c0c5, #7f9198); }
.cms table.ss-gridfield-table tr td.bottom-all .datagrid-pagination { padding-top: 2px; position: absolute; left: 50%; margin-left: -116px; }

BIN
images/sitetree_ss_default_icons.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.8 KiB

69
scss/GridField.scss
View File

@ -119,6 +119,70 @@ $gf_grid_x: 16px;
white-space:nowrap;
}
&.col-listChildrenLink {
width:auto;
border-right:none;
text-indent:-9999em;
padding:0;
.list-children-link {
background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 12px -4px;
display:block;
}
}
&.col-Created {
white-space:nowrap;
}
&.col-LastEdited {
white-space:nowrap;
}
&.col-getTreeTitle {
span.badge {
clear: both;
text-transform: uppercase;
display: inline-block;
padding: 0px 3px;
font-size: 0.75em;
line-height: 1em;
margin-left: 10px;
margin-right: 6px;
margin-top: -1px;
@include border-radius(2px, 2px);
}
span.badge.modified {
color: #7E7470;
border: 1px solid #C9B800;
background-color: #FFF0BC;
}
span.badge.addedtodraft {
color: #7E7470;
border: 1px solid #C9B800;
background-color: #FFF0BC;
}
span.badge.deletedonlive {
color: #636363;
border: 1px solid #E49393;
background-color: #F2DADB;
}
span.badge.removedfromdraft {
color: #636363;
border: 1px solid #E49393;
background-color: #F2DADB;
}
span.badge.workflow-approval {
color: #56660C;
border: 1px solid #7C8816;
background-color: #DAE79A;
}
}
button {
border: none;
background: none;
@ -244,6 +308,7 @@ $gf_grid_x: 16px;
}
}
&.main{
white-space:nowrap;
border-top: 1px solid $gf_colour_border;
color:#fff;
background: darken($gf_colour_subheader,10%);
@ -402,6 +467,10 @@ $gf_grid_x: 16px;
padding:1em 1em;
display:block;
}
&.col-listChildrenLink {
border-right:none;
}
}
td {