Skip to content
This repository
Browse code

ENHANCEMENT: SSF-168 updated print styles to the datagrid

  • Loading branch information...
commit 4ffef20b09fe004881077d36867a20e5f1757754 1 parent 721184c
Felipe authored April 04, 2012
39  admin/css/screen.css
@@ -35,7 +35,7 @@ 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-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; }
  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-s469eb2bf90.png') no-repeat; }
39 39
 
40 40
 .ui-state-default .btn-icon-accept { background-position: 0 0; }
41 41
 .ui-state-default .btn-icon-accept_disabled { background-position: 0 -17px; }
@@ -61,23 +61,24 @@ If more variables exist in the future, consider creating a variables file.*/
61 61
 .ui-state-default .btn-icon-download-csv { background-position: 0 -343px; }
62 62
 .ui-state-default .btn-icon-drive-upload { background-position: 0 -361px; }
63 63
 .ui-state-default .btn-icon-drive-upload_disabled { background-position: 0 -377px; }
64  
-.ui-state-default .btn-icon-magnifier { background-position: 0 -393px; }
65  
-.ui-state-default .btn-icon-minus-circle { background-position: 0 -409px; }
66  
-.ui-state-default .btn-icon-minus-circle_disabled { background-position: 0 -425px; }
67  
-.ui-state-default .btn-icon-navigation { background-position: 0 -441px; }
68  
-.ui-state-default .btn-icon-navigation_disabled { background-position: 0 -457px; }
69  
-.ui-state-default .btn-icon-network-cloud { background-position: 0 -473px; }
70  
-.ui-state-default .btn-icon-network-cloud_disabled { background-position: 0 -489px; }
71  
-.ui-state-default .btn-icon-pencil { background-position: 0 -505px; }
72  
-.ui-state-default .btn-icon-pencil_disabled { background-position: 0 -521px; }
73  
-.ui-state-default .btn-icon-plug-disconnect-prohibition { background-position: 0 -537px; }
74  
-.ui-state-default .btn-icon-plug-disconnect-prohibition_disabled { background-position: 0 -553px; }
75  
-.ui-state-default .btn-icon-preview { background-position: 0 -569px; }
76  
-.ui-state-default .btn-icon-preview_disabled { background-position: 0 -586px; }
77  
-.ui-state-default .btn-icon-settings { background-position: 0 -603px; }
78  
-.ui-state-default .btn-icon-settings_disabled { background-position: 0 -619px; }
79  
-.ui-state-default .btn-icon-unpublish { background-position: 0 -635px; }
80  
-.ui-state-default .btn-icon-unpublish_disabled { background-position: 0 -653px; }
  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; }
81 82
 
82 83
 .icon { text-indent: -9999px; border: none; outline: none; }
83 84
 .icon.icon-24 { width: 24px; height: 24px; background: url('../images/menu-icons/24x24-s546fcae8fd.png'); }
@@ -272,7 +273,7 @@ body.cms { overflow: hidden; }
272 273
 /** -------------------------------------------- Tabs -------------------------------------------- */
273 274
 .cms-content-header .ui-tabs-nav li, .cms-dialog .ui-tabs-nav li { margin: 0; }
274 275
 .cms-content-header .ui-tabs-nav li a, .cms-dialog .ui-tabs-nav li a { font-weight: bold; line-height: 16px; padding: 12px 20px 11px; }
275  
-.cms-content-header .ui-tabs-nav .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-dialog .ui-tabs-nav .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-default { background-color: #b0bec7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhjYTFhZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-right-color: #a6a6a6; border-left-color: #d9d9d9; border-bottom: none; text-shadow: white 0 1px 0; }
  276
+.cms-content-header .ui-tabs-nav .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-default, .cms-dialog .ui-tabs-nav .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-default, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-default { background-color: #b0bec7; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IwYmVjNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzhjYTFhZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b0bec7), color-stop(100%, #8ca1ae)); background-image: -webkit-linear-gradient(#b0bec7, #8ca1ae); background-image: -moz-linear-gradient(#b0bec7, #8ca1ae); background-image: -o-linear-gradient(#b0bec7, #8ca1ae); background-image: -ms-linear-gradient(#b0bec7, #8ca1ae); background-image: linear-gradient(#b0bec7, #8ca1ae); border-right-color: #a6a6a6; border-left-color: #d9d9d9; border-bottom: none; text-shadow: #e6e6e6 0 1px 0; }
276 277
 .cms-content-header .ui-tabs-nav .ui-state-active, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-active, .cms-dialog .ui-tabs-nav .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active { background: #eceff1; border-right-color: #a6a6a6; border-left-color: #a6a6a6; margin-right: -1px; margin-left: -1px; z-index: 2; }
277 278
 .cms-content-header .ui-tabs-nav .ui-state-active a, .cms-content-header .ui-tabs-nav .ui-widget-content .ui-state-active a, .cms-content-header .ui-tabs-nav .ui-widget-header .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-content .ui-state-active a, .cms-dialog .ui-tabs-nav .ui-widget-header .ui-state-active a { border-bottom: none; }
278 279
 
BIN  admin/images/btn-icon-s41050dc384.png
BIN  admin/images/btn-icon-sc495ceeeca.png
2  admin/scss/_style.scss
@@ -206,7 +206,7 @@ body.cms {
206 206
 			bottom:none;
207 207
 		}
208 208
 
209  
-		text-shadow: lighten($color-tab, 60%) 0 1px 0;
  209
+		text-shadow: lighten($color-tab, 5%) 0 1px 0;
210 210
 	}
211 211
 	
212 212
 	.ui-state-active, 
2  css/GridField.css
@@ -8,6 +8,8 @@
8 8
 .cms .ss-gridfield p button#action_export span.ui-button-text { padding-left: 26px; }
9 9
 .cms .ss-gridfield .add-existing-autocompleter { width: 500px; }
10 10
 .cms .ss-gridfield .add-existing-autocompleter input.relation-search { width: 380px; }
  11
+.cms .ss-gridfield .grid-print-button { display: inline-block; }
  12
+.cms .ss-gridfield .grid-csv-button { display: inline-block; }
11 13
 .cms table.ss-gridfield-table { display: table; box-shadow: none; padding: 0; border-collapse: separate; border-bottom: 0 none; width: 100%; }
12 14
 .cms table.ss-gridfield-table thead { color: #1d2224; background: transparent; }
13 15
 .cms table.ss-gridfield-table thead tr.filter-header .fieldgroup { max-width: 512px; }
2  forms/gridfield/GridFieldExportButton.php
@@ -56,7 +56,7 @@ public function getHTMLFragments($gridField) {
56 56
 		$button->setAttribute('data-icon', 'download-csv');
57 57
 		$button->addExtraClass('no-ajax');
58 58
 		return array(
59  
-			$this->targetFragment => '<p>' . $button->Field() . '</p>',
  59
+			$this->targetFragment => '<p class="grid-csv-button">' . $button->Field() . '</p>',
60 60
 		);
61 61
 	}
62 62
 
2  forms/gridfield/GridFieldPrintButton.php
@@ -52,7 +52,7 @@ public function getHTMLFragments($gridField) {
52 52
 		$button->addExtraClass('gridfield-button-print');
53 53
 		//$button->addExtraClass('no-ajax');
54 54
 		return array(
55  
-			$this->targetFragment => '<p>' . $button->Field() . '</p>',
  55
+			$this->targetFragment => '<p class="grid-print-button">' . $button->Field() . '</p>',
56 56
 		);
57 57
 	}
58 58
 
6  scss/GridField.scss
@@ -75,6 +75,12 @@ $gf_grid_x:	16px;
75 75
 			}
76 76
 			width: 500px;
77 77
 		}
  78
+		.grid-print-button{
  79
+			display: inline-block;
  80
+		}
  81
+		.grid-csv-button{
  82
+			display: inline-block;
  83
+		}
78 84
 	}
79 85
 
80 86
 	table.ss-gridfield-table {
29  scss/GridField_print.scss
... ...
@@ -1,3 +1,28 @@
1  
-table td{
2  
-	border: 1px solid black;
  1
+table {
  2
+	border-collapse: collapse;
  3
+	font-family: Arial, sans-serif;
  4
+	color: #333;
  5
+	font-size: 12pt;
  6
+	tr{
  7
+		
  8
+	}
  9
+	th{
  10
+		border-bottom: 2px solid #333;
  11
+		padding: 5px 10px; 
  12
+		font-weight: bold;
  13
+		text-align: left;
  14
+		&:first-child{
  15
+			padding-left: 0px; 
  16
+		}
  17
+		
  18
+	}
  19
+	td{
  20
+		border-top: 1px solid #aaa;
  21
+		border-bottom: 1px solid #aaa;
  22
+		text-align: left;
  23
+		padding: 5px 10px;
  24
+		&:first-child{
  25
+			padding-left: 0px; 
  26
+		} 
  27
+	}
3 28
 }
6  templates/Includes/GridField_print.ss
... ...
@@ -1,5 +1,5 @@
1  
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//MI" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2  
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="mi" lang="mi">
  1
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
3 3
 	<head>
4 4
 		
5 5
 	</head>
@@ -7,7 +7,7 @@
7 7
 		<% if $Title %><h3>$Title</h3><% end_if %>
8 8
 		<table>
9 9
 			<thead>
10  
-				<tr><% control Header %><td>$CellString</td><% end_control %></tr>
  10
+				<tr><% control Header %><th>$CellString</th><% end_control %></tr>
11 11
 			</thead>
12 12
 			<tbody>
13 13
 				<% control ItemRows %>

0 notes on commit 4ffef20

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