diff options
Diffstat (limited to 'view')
| -rw-r--r-- | view/css/mod_webpages.css | 74 | ||||
| -rw-r--r-- | view/tpl/webpage_export_list.tpl | 42 |
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> 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> 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> |