Skip to content
This repository
Browse code

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

  • Loading branch information...
commit e0b429491c21fba2aea7fc698dd32b74d9fd4f19 1 parent 1176d8d
authored April 10, 2012
47  admin/css/screen.css
@@ -35,7 +35,8 @@ If more variables exist in the future, consider creating a variables file.*/
35 35
 /** ---------------------------------------------------- Double tone borders  http://daverupert.com/2011/06/two-tone-borders-with-css3/ ----------------------------------------------------- */
36 36
 /** ----------------------------- Sprite images ----------------------------- */
37 37
 /** Helper SCSS file for generating sprites for the interface. */
38  
-.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; }
  38
+
  39
+.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; }
39 40
 
40 41
 .ui-state-default .btn-icon-accept { background-position: 0 0; }
41 42
 .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.*/
58 59
 .ui-state-default .btn-icon-cross-circle_disabled { background-position: 0 -293px; }
59 60
 .ui-state-default .btn-icon-decline { background-position: 0 -309px; }
60 61
 .ui-state-default .btn-icon-decline_disabled { background-position: 0 -326px; }
61  
-.ui-state-default .btn-icon-download-csv { background-position: 0 -343px; }
62  
-.ui-state-default .btn-icon-drive-upload { background-position: 0 -361px; }
63  
-.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -377px; }
64  
-.ui-state-default .btn-icon-grid_print { background-position: 0 -393px; }
65  
-.ui-state-default .btn-icon-magnifier { background-position: 0 -409px; }
66  
-.ui-state-default .btn-icon-minus-circle { background-position: 0 -425px; }
67  
-.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -441px; }
68  
-.ui-state-default .btn-icon-navigation { background-position: 0 -457px; }
69  
-.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -473px; }
70  
-.ui-state-default .btn-icon-network-cloud { background-position: 0 -489px; }
71  
-.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -505px; }
72  
-.ui-state-default .btn-icon-pencil { background-position: 0 -521px; }
73  
-.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -537px; }
74  
-.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -553px; }
75  
-.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -569px; }
76  
-.ui-state-default .btn-icon-preview { background-position: 0 -585px; }
77  
-.ui-state-default .btn-icon-preview_disabled { background-position: 0 -602px; }
78  
-.ui-state-default .btn-icon-settings { background-position: 0 -619px; }
79  
-.ui-state-default .btn-icon-settings_disabled { background-position: 0 -635px; }
80  
-.ui-state-default .btn-icon-unpublish { background-position: 0 -651px; }
81  
-.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -669px; }
  62
+
  63
+.ui-state-default .btn-icon-document--pencil { background-position: 0 -343px; }
  64
+.ui-state-default .btn-icon-download-csv { background-position: 0 -359px; }
  65
+.ui-state-default .btn-icon-drive-upload { background-position: 0 -377px; }
  66
+.ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -393px; }
  67
+.ui-state-default .btn-icon-grid_print { background-position: 0 -409px; }
  68
+.ui-state-default .btn-icon-magnifier { background-position: 0 -425px; }
  69
+.ui-state-default .btn-icon-minus-circle { background-position: 0 -441px; }
  70
+.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -457px; }
  71
+.ui-state-default .btn-icon-navigation { background-position: 0 -473px; }
  72
+.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -489px; }
  73
+.ui-state-default .btn-icon-network-cloud { background-position: 0 -505px; }
  74
+.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -521px; }
  75
+.ui-state-default .btn-icon-pencil { background-position: 0 -537px; }
  76
+.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -553px; }
  77
+.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -569px; }
  78
+.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -585px; }
  79
+.ui-state-default .btn-icon-preview { background-position: 0 -601px; }
  80
+.ui-state-default .btn-icon-preview_disabled { background-position: 0 -618px; }
  81
+.ui-state-default .btn-icon-settings { background-position: 0 -635px; }
  82
+.ui-state-default .btn-icon-settings_disabled { background-position: 0 -651px; }
  83
+.ui-state-default .btn-icon-unpublish { background-position: 0 -667px; }
  84
+.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -685px; }
82 85
 
83 86
 .icon { text-indent: -9999px; border: none; outline: none; }
84 87
 .icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); }
13  css/GridField.css
@@ -17,6 +17,16 @@
17 17
 .cms table.ss-gridfield-table tbody td { width: 100%; }
18 18
 .cms table.ss-gridfield-table tbody td.col-buttons { width: auto; text-align: right; white-space: nowrap; }
19 19
 .cms table.ss-gridfield-table tbody td.col-description { width: auto; white-space: nowrap; }
  20
+.cms table.ss-gridfield-table tbody td.col-listChildrenLink { width: auto; border-right: none; text-indent: -9999em; padding: 0; }
  21
+.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; }
  22
+.cms table.ss-gridfield-table tbody td.col-Created { white-space: nowrap; }
  23
+.cms table.ss-gridfield-table tbody td.col-LastEdited { white-space: nowrap; }
  24
+.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; }
  25
+.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.modified { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; }
  26
+.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.addedtodraft { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; }
  27
+.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.deletedonlive { color: #636363; border: 1px solid #E49393; background-color: #F2DADB; }
  28
+.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.removedfromdraft { color: #636363; border: 1px solid #E49393; background-color: #F2DADB; }
  29
+.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.workflow-approval { color: #56660C; border: 1px solid #7C8816; background-color: #DAE79A; }
20 30
 .cms table.ss-gridfield-table tbody td button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; }
21 31
 .cms table.ss-gridfield-table tbody td button.ui-state-hover { background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
22 32
 .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 @@
40 50
 .cms table.ss-gridfield-table tr th div.fieldgroup { min-width: 200px; padding-right: 0; }
41 51
 .cms table.ss-gridfield-table tr th.extra, .cms table.ss-gridfield-table tr th.action { padding: 0; cursor: default; }
42 52
 .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; }
43  
-.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); }
  53
+.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); }
44 54
 .cms table.ss-gridfield-table tr th.main span { text-shadow: rgba(0, 0, 0, 0.3) 0px -1px 0; }
45 55
 .cms table.ss-gridfield-table tr th.extra { background: #bac8ce; padding: 5px; border-top: rgba(0, 0, 0, 0.3); }
46 56
 .cms table.ss-gridfield-table tr th.extra span { width: auto; display: inline; position: static; }
@@ -65,6 +75,7 @@
65 75
 .cms table.ss-gridfield-table tr th input.ss-gridfield-sort { padding: 2px; }
66 76
 .cms table.ss-gridfield-table tr th input.ss-gridfield-sort:focus { -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
67 77
 .cms table.ss-gridfield-table tr th span.non-sortable { padding: 1em 1em; display: block; }
  78
+.cms table.ss-gridfield-table tr th.col-listChildrenLink { border-right: none; }
68 79
 .cms table.ss-gridfield-table tr td { border-right: 1px solid rgba(0, 0, 0, 0.1); padding: 6.4px 12px; color: #666666; }
69 80
 .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); }
70 81
 .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
69  scss/GridField.scss
@@ -119,6 +119,70 @@ $gf_grid_x:	16px;
119 119
 					white-space:nowrap;
120 120
 				}
121 121
 
  122
+				&.col-listChildrenLink {
  123
+					width:auto;
  124
+					border-right:none;
  125
+					text-indent:-9999em;
  126
+					padding:0;
  127
+					.list-children-link {
  128
+						background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 12px -4px;
  129
+						display:block;
  130
+					}
  131
+				}
  132
+
  133
+				&.col-Created {
  134
+					white-space:nowrap;
  135
+				}
  136
+
  137
+				&.col-LastEdited {
  138
+					white-space:nowrap;
  139
+				}
  140
+
  141
+				&.col-getTreeTitle {
  142
+					span.badge {
  143
+						clear: both;
  144
+						text-transform: uppercase;
  145
+						display: inline-block;
  146
+						padding: 0px 3px;
  147
+						font-size: 0.75em;
  148
+						line-height: 1em;
  149
+						margin-left: 10px;
  150
+						margin-right: 6px;
  151
+						margin-top:  -1px;
  152
+						@include border-radius(2px, 2px);
  153
+					}
  154
+					
  155
+					span.badge.modified {
  156
+						color:  #7E7470;
  157
+						border: 1px solid #C9B800;
  158
+						background-color: #FFF0BC;
  159
+					}
  160
+					
  161
+					span.badge.addedtodraft {
  162
+						color:  #7E7470;
  163
+						border: 1px solid #C9B800;
  164
+						background-color: #FFF0BC;
  165
+					}
  166
+					
  167
+					span.badge.deletedonlive {
  168
+						color:  #636363;
  169
+						border: 1px solid #E49393;
  170
+						background-color: #F2DADB;
  171
+					}
  172
+					
  173
+					span.badge.removedfromdraft {
  174
+						color:  #636363;
  175
+						border: 1px solid #E49393;
  176
+						background-color: #F2DADB;
  177
+					}
  178
+					
  179
+					span.badge.workflow-approval {
  180
+						color:  #56660C;
  181
+						border: 1px solid #7C8816;
  182
+						background-color: #DAE79A;
  183
+					}
  184
+				}
  185
+
122 186
 				button {
123 187
 					border: none;
124 188
 					background: none;
@@ -244,6 +308,7 @@ $gf_grid_x:	16px;
244 308
 					}
245 309
 				}
246 310
 				&.main{
  311
+					white-space:nowrap;
247 312
 					border-top: 1px solid $gf_colour_border;
248 313
 					color:#fff;
249 314
 					background: darken($gf_colour_subheader,10%);
@@ -402,6 +467,10 @@ $gf_grid_x:	16px;
402 467
 					padding:1em 1em; 
403 468
 					display:block;
404 469
 				}
  470
+
  471
+				&.col-listChildrenLink {
  472
+					border-right:none;
  473
+				}
405 474
 			}
406 475
 
407 476
 			td {

0 notes on commit e0b4294

Please sign in to comment.
Something went wrong with that request. Please try again.