Pages populate the available-to-export list. New checkbox class for smaller boxes.

2 files changed, 110 insertions, 6 deletions

diff --git a/view/css/mod_webpages.css b/view/css/mod_webpages.css
index f72f632dd..805d95dc2 100644
--- a/view/css/mod_webpages.css
+++ b/view/css/mod_webpages.css
@@ -119,3 +119,77 @@
 	opacity: 1;
 }
 
+
+/* SQUARED THREE */
+.squaredThree {
+	width: 14px;
+	height: 14px;
+	background: #fcfff4;
+
+	background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+	background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+	background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+	background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+	background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
+	margin: 5px auto;
+
+	-webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
+	-moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
+	box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
+	position: relative;
+}
+
+.squaredThree label {
+	cursor: pointer;
+	position: absolute;
+	width: 10px;
+	height: 10px;
+	left: 2px;
+	top: 2px;
+
+	-webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
+	-moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
+	box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
+
+	background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
+	background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
+	background: -o-linear-gradient(top, #222 0%, #45484d 100%);
+	background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
+	background: linear-gradient(top, #222 0%, #45484d 100%);
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
+}
+
+.squaredThree label:after {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+	filter: alpha(opacity=0);
+	opacity: 0;
+	content: '';
+	position: absolute;
+	width: 9px;
+	height: 5px;
+	background: transparent;
+	top: 2px;
+	left: 2px;
+	border: 3px solid #fcfff4;
+	border-top: none;
+	border-right: none;
+
+	-webkit-transform: rotate(-45deg);
+	-moz-transform: rotate(-45deg);
+	-o-transform: rotate(-45deg);
+	-ms-transform: rotate(-45deg);
+	transform: rotate(-45deg);
+}
+
+.squaredThree label:hover::after {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+	filter: alpha(opacity=30);
+	opacity: 0.3;
+}
+
+.squaredThree input[type=checkbox]:checked + label:after {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	filter: alpha(opacity=100);
+	opacity: 1;
+}
\ No newline at end of file
diff --git a/view/tpl/webpage_export_list.tpl b/view/tpl/webpage_export_list.tpl
index 4ee14359d..1b943ace8 100644
--- a/view/tpl/webpage_export_list.tpl
+++ b/view/tpl/webpage_export_list.tpl
@@ -9,13 +9,43 @@
 			<div class="clear"></div>
 		</div>
 		<div id="import-website-content-wrapper" class="section-content-wrapper">
-						<div class="pull-left">
-								<button id="toggle-select-all" class="btn btn-xs btn-primary" onclick="checkedAll(window.isChecked); return false;"><i class="fa fa-check"></i>&nbsp;Toggle Select All</button>
-						</div>
-						<div class="clear"></div>
-				
+				<div class="pull-left">
+						<button id="toggle-select-all" class="btn btn-xs btn-primary" onclick="checkedAll(window.isChecked); return false;"><i class="fa fa-check"></i>&nbsp;Toggle Select All</button>
+				</div>
+
+				<div class="clear"></div>
+				<h4>Pages</h4>
+				<div>
+				<table class="table-striped table-responsive table-hover" style="width: 100%;">
+					<tr><td>Export?</td><td>Page Title</td><td>Page Link</td><td>Type</td></tr>
+						{{foreach $pages as $page}}
+								<tr>
+									<td>
+										<div class='squaredThree'>
+										<input type="checkbox" id="page_{{$page.mid}}" name="page[]" value="{{$page.mid}}">
+										<label for="page_{{$page.mid}}"></label>
+										</div>
+									</td>
+									<td>
+										<div class='desc'>
+											{{$page.title}}<br>
+										</div>
+									</td>
+									<td>
+										<div class='desc'>
+											{{$page.pagetitle}}<br>
+										</div>
+									</td>
+									<td>
+										<div class='desc'>
+											{{$page.mimetype}}<br>
+										</div>
+									</td>
+								</tr>
+						{{/foreach}}
+				</table>
+				</div>
 		</div>
-		<div class="clear"></div>
 		</form>
 </div>