doc and article theme cleanup

stevenrskelton · Oct 7, 2014 · a70fcc5 · a70fcc5
1 parent 65eca4b
commit a70fcc5
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 79 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 bower_components
+.directory
diff --git a/css/article.css b/css/article.css
@@ -81,7 +81,11 @@
 	font-weight: 700;
 	padding-right: 4px;
 }
-.article::shadow > table > tfoot > tr > td > table.articlePager td select {
+.article::shadow > table > tfoot > tr > td > table.articlePager td select,
+.article::shadow .defaultPager > div > button,
+.article::shadow .simplePager > button,
+.article::shadow .indexedPager > ul > li > a {
+	font: inherit;
 	-webkit-appearance: none;
 	border: 1px solid #ccc;
 	color: #333;
@@ -90,7 +94,16 @@
 }
 .article::shadow > table > tfoot > tr > td > table.articlePager td select:hover,
 .article::shadow > table > tfoot > tr > td > table.articlePager td select:active,
-.article::shadow > table > tfoot > tr > td > table.articlePager td select:focus {
+.article::shadow > table > tfoot > tr > td > table.articlePager td select:focus,
+.article::shadow .defaultPager > div > button:not([disabled=""]):hover,
+.article::shadow .defaultPager > div > button:not([disabled=""]):active,
+.article::shadow .defaultPager > div > button:not([disabled=""]):focus,
+.article::shadow .simplePager > button:not([disabled=""]):hover,
+.article::shadow .simplePager > button:not([disabled=""]):active,
+.article::shadow .simplePager > button:not([disabled=""]):focus,
+.article::shadow .indexedPager > ul > li > a:not([disabled=""]):hover,
+.article::shadow .indexedPager > ul > li > a:not([disabled=""]):active,
+.article::shadow .indexedPager > ul > li > a:not([disabled=""]):focus {
 	color: #d38b28;
 }
 .article::shadow > table > thead > tr > th.column-0.sorted-column-asc,
@@ -140,4 +153,30 @@
 }
 .article::shadow .indexedPager > ul > li.active {
 	vertical-align: bottom;
+}
+.article::shadow .indexedPager > ul > li:first-of-type a:after,
+.article::shadow .defaultPager > div:nth-of-type(1) > button:nth-of-type(1):after {
+	content: 'First';
+}
+.article::shadow .simplePager > button:nth-of-type(1):after,
+.article::shadow .defaultPager > div:nth-of-type(1) > button:nth-of-type(2):after {
+	content: 'Previous';
+}
+.article::shadow .simplePager > button:nth-of-type(2):after,
+.article::shadow .defaultPager > div:nth-of-type(2) > button:nth-of-type(1):after {
+	content: 'Next';
+}
+.article::shadow .indexedPager > ul > li:last-of-type a:after,
+.article::shadow .defaultPager > div:nth-of-type(2) > button:nth-of-type(2):after {
+	content: 'Last';
+}
+.article::shadow .defaultPager > div > button,
+.article::shadow .simplePager > button,
+.article::shadow .indexedPager > ul > li > a {
+	padding: 0;
+	min-width: 90px;
+	border: none;
+	background-color: inherit;
+	font-weight: 700;
+	outline: none;
 }
diff --git a/css/extjs4.css b/css/extjs4.css
@@ -376,7 +376,7 @@ sortable-table.extjs4 {
 }
 .extjs4::shadow .indexedPager li {
 	display: inline-block;
-	padding: 0 8px;
+	padding: 0 4px;
 	line-height: 22px;
 }
 .extjs4::shadow .indexedPager li a {

diff --git a/examples/css.html b/examples/css.html
@@ -11,16 +11,37 @@
 	<link rel="import" href="project-docs.html">
 
 	<style shim-shadowdom>
-		sortable-table { width: 500px; margin-left: 65px; }
-		sortable-table::shadow td.column-alice,
-		sortable-table::shadow td.column-bill,
-		sortable-table::shadow td.column-casey,
-		sortable-table::shadow td.column-average,
-		sortable-table::shadow td.column-total {
+		sortable-table {
+			width: 650px;
+			margin-left: 25px;
+		}
+		::shadow td.column-alice {
+			width: 75px;
+			text-align: right;
+		}
+		::shadow td.column-bill {
+			width: 75px;
 			text-align: right;
-			padding-right: 5px;
+		}
+		::shadow td.column-casey {
+			width: 75px;
+			text-align: right;
+		}
+		::shadow td.column-average {
+			font-weight: bold;
 			width: 100px;
-			vertical-align: middle;
+			text-align: right;
+		}
+		::shadow tr:nth-of-type(even) .column-average {
+			background-color: rgba(0,132,180,0.15);
+		}
+		::shadow tr:nth-of-type(odd) .column-average {
+			background-color: rgba(0,132,180,0.05);
+		}
+		::shadow td.column-total {
+			font-weight: bold;
+			width: 100px;
+			text-align: right;
 		}
 	</style>
 </head>
@@ -32,39 +53,7 @@ <h1>CSS</h1>
 	Individual columns can be styled using CSS.
 
 	<template is="auto-binding">
-		<style shim-shadowdom>
-			::shadow .column-alice {
-				width: 75px;
-				text-align: right;
-			}
-			::shadow .column-bill {
-				width: 75px;
-				text-align: right;
-			}
-			::shadow .column-casey {
-				width: 75px;
-				text-align: right;
-			}
-			::shadow .column-average {
-				font-weight: bold;
-				width: 100px;
-				text-align: right;
-			}
-			::shadow tr:nth-of-type(even) .column-average {
-				background-color: rgba(0,132,180,0.15);
-			}
-			::shadow tr:nth-of-type(odd) .column-average {
-				background-color: rgba(0,132,180,0.05);
-			}
-			::shadow .column-total {
-				font-weight: bold;
-				width: 100px;
-				text-align: right;
-			}
-			::shadow tr:nth-of-type(even) .column-total {
-
-			}
-		</style>
+
 		<alice-column columns="{{columns}}" checkbox="{{isCheckbox}}"></alice-column>
 
 		<p>

diff --git a/examples/dom-elements.html b/examples/dom-elements.html
@@ -7,6 +7,7 @@
 	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 	<script src="../../platform/platform.js"></script>
 	<link rel="import" href="../sortable-table.html">
+	<link rel="import" href="../../prism-js/prism-js.html">
 	<link rel="import" href="fruit-icon.html">
 	<link rel="import" href="project-docs.html">
 	<style shim-shadowdom>
@@ -29,26 +30,26 @@ <h1>DOM Elements</h1>
 
 	The <code>sortable-column</code> elements should work the same way as a <code>columns</code> array.
 
-	<pre>
-	&lt;sortable-table&gt;
-		&lt;sortable-column name="fruit" cellTemplate="fruitsTemplate"&gt;Type of Fruit&lt;/sortable-column&gt;
-		&lt;sortable-column name="alice"&gt;&lt;/sortable-column&gt;
-		&lt;sortable-column name="bill"&gt;&lt;/sortable-column&gt;
-		&lt;sortable-column name="casey"&gt;&lt;/sortable-column&gt;
-		&lt;template id="fruitsTemplate"&gt;
-			&lt;td&gt;
-				&lt;fruit-icon fruit="{{value}}"&gt;&lt;/fruit-icon&gt; {{value}}
-			&lt;/td&gt;
-		&lt;/template&gt;
-		[
-			{ "fruit":"apple",	"alice": 4,	"bill": 10,	"casey": 2 },
-			{ "fruit":"banana",	"alice": 0,	"bill": 4,	"casey": 0 },
-			{ "fruit":"grape",	"alice": 2,	"bill": 3,	"casey": 5 },
-			{ "fruit":"pear",	"alice": 4,	"bill": 2,	"casey": 8 },
-			{ "fruit":"strawberry",	"alice": 0,	"bill": 14,	"casey": 0 }
-		]
-	&lt;/sortable-table&gt;
-	</pre>
+	<prism-js language="markup">&lt;sortable-table&gt;
+	&lt;sortable-column name="fruit" cellTemplate="fruitsTemplate"&gt;Type of Fruit&lt;/sortable-column&gt;
+	&lt;sortable-column name="alice"&gt;&lt;/sortable-column&gt;
+	&lt;sortable-column name="bill"&gt;&lt;/sortable-column&gt;
+	&lt;sortable-column name="casey"&gt;&lt;/sortable-column&gt;
+	&lt;template id="fruitsTemplate"&gt;
+		&lt;td&gt;
+			&lt;fruit-icon fruit="{{value}}"&gt;&lt;/fruit-icon&gt; {{value}}
+		&lt;/td&gt;
+	&lt;/template&gt;
+	[
+		{ "fruit":"apple",	"alice": 4,	"bill": 10,	"casey": 2 },
+		{ "fruit":"banana",	"alice": 0,	"bill": 4,	"casey": 0 },
+		{ "fruit":"grape",	"alice": 2,	"bill": 3,	"casey": 5 },
+		{ "fruit":"pear",	"alice": 4,	"bill": 2,	"casey": 8 },
+		{ "fruit":"strawberry",	"alice": 0,	"bill": 14,	"casey": 0 }
+	]
+&lt;/sortable-table&gt;	</prism-js>
+
+	<p>
 
 	<sortable-table class="default">
 		<sortable-column name="fruit" cellTemplate="fruitsTemplate">Type of Fruit</sortable-column>
@@ -74,19 +75,19 @@ <h1>DOM Elements</h1>
 	If data is only specified using arrays and column information isn't available, column names are ascending integers.
 
 	<p>
-	<strong>Note:</strong> If columns are named, then <code>data</code> must also name columns within the rows. This is intentional to
-	avoid reformatting the <code>data</code> array.
+		<strong>Note:</strong> If columns are named, then <code>data</code> must also name columns within the rows. This is intentional to
+		avoid reformatting the <code>data</code> array.
 	</p>
 
-	<pre>
-	&lt;sortable-table&gt;
-		[[ "apple", 4, 10, 2 ],
-		 [ "banana", 0, 4, 0 ],
-		 [ "grape", 2, 3, 5 ],
-		 [ "pear", 4, 2, 8 ],
-		 [ "strawberry", 0, 14, 0 ]]
-	&lt;/sortable-table&gt;
-	</pre>
+	<prism-js language="markup">&lt;sortable-table&gt;
+   [[ "apple", 4, 10, 2 ],
+	[ "banana", 0, 4, 0 ],
+	[ "grape", 2, 3, 5 ],
+	[ "pear", 4, 2, 8 ],
+	[ "strawberry", 0, 14, 0 ]]
+&lt;/sortable-table&gt;</prism-js>
+
+	<p>
 
 	<sortable-table class="default">
 		[[ "apple", 4, 10, 2 ],

diff --git a/examples/themes/article.html b/examples/themes/article.html
@@ -38,12 +38,12 @@ <h2>Pagination Templates</h2>
 	<div id="paginationDiv" style="background-color:#FFF;padding:10px;border:1px solid #666;border-radius:4px;"></div>
 
 	<template id="pagination">
-		<div template class="panel panel-default">
+		<div class="panel panel-default">
 			<div class="panel-heading">
 				<h3 class="panel-title"></h3>
 			</div>
 			<div class="panel-body">
-				<div class="panel panel-default">
+				<div class="panel panel-default" style="padding-bottom: 25px;">
 					<sortable-table
 						class="article"
 						rowSelection

diff --git a/examples/themes/bootstrap.html b/examples/themes/bootstrap.html
@@ -55,7 +55,7 @@ <h2>Pagination Templates</h2>
 	</section>
 
 	<template id="pagination">
-		<div template class="panel panel-default">
+		<div class="panel panel-default">
 			<div class="panel-heading">
 				<h3 class="panel-title"></h3>
 			</div>

diff --git a/examples/themes/extjs4.html b/examples/themes/extjs4.html
@@ -48,7 +48,7 @@ <h1>ExtJS 4 Theme</h1>
 		<section id="paginationDiv"></section>
 
 		<template id="pagination">
-			<div template class="panel panel-default">
+			<div class="panel panel-default">
 				<div class="panel-heading">
 					<h3 class="panel-title"></h3>
 				</div>