diff options
| author | ArthurHoaro <arthur@hoa.ro> | 2016-10-15 17:33:18 +0200 |
|---|---|---|
| committer | ArthurHoaro <arthur@hoa.ro> | 2016-11-05 14:29:53 +0100 |
| commit | 6885613a33a8418690521bf740e9ea5f0c235655 (patch) | |
| tree | 6cd53a9d0f731148d49fc6d23390fcf84da113bd /tpl | |
| parent | 07f9187e0aedd5d5d2dc533713512f412ef9244b (diff) | |
| download | Shaarli-6885613a33a8418690521bf740e9ea5f0c235655.tar.gz Shaarli-6885613a33a8418690521bf740e9ea5f0c235655.tar.zst Shaarli-6885613a33a8418690521bf740e9ea5f0c235655.zip | |
picwall template
Diffstat (limited to 'tpl')
| -rw-r--r-- | tpl/default/css/shaarli.css | 65 | ||||
| -rw-r--r-- | tpl/default/picwall.html | 49 |
2 files changed, 114 insertions, 0 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css index 85b8e7a1..e73375d4 100644 --- a/tpl/default/css/shaarli.css +++ b/tpl/default/css/shaarli.css | |||
| @@ -1003,3 +1003,68 @@ pre { | |||
| 1003 | text-decoration: none; | 1003 | text-decoration: none; |
| 1004 | } | 1004 | } |
| 1005 | 1005 | ||
| 1006 | /** | ||
| 1007 | * Picture wall CSS | ||
| 1008 | */ | ||
| 1009 | #picwall_container { | ||
| 1010 | color: #fff; | ||
| 1011 | background-color: #000; | ||
| 1012 | clear: both; | ||
| 1013 | } | ||
| 1014 | |||
| 1015 | .picwall_pictureframe { | ||
| 1016 | background-color: #000; | ||
| 1017 | z-index: 5; | ||
| 1018 | position: relative; | ||
| 1019 | display: table-cell; | ||
| 1020 | vertical-align: middle; | ||
| 1021 | width: 90px; | ||
| 1022 | height: 90px; | ||
| 1023 | overflow: hidden; | ||
| 1024 | text-align: center; | ||
| 1025 | float: left; | ||
| 1026 | } | ||
| 1027 | |||
| 1028 | .b-lazy { | ||
| 1029 | -webkit-transition: opacity 500ms ease-in-out; | ||
| 1030 | -moz-transition: opacity 500ms ease-in-out; | ||
| 1031 | -o-transition: opacity 500ms ease-in-out; | ||
| 1032 | transition: opacity 500ms ease-in-out; | ||
| 1033 | opacity: 0; | ||
| 1034 | } | ||
| 1035 | .b-lazy.b-loaded { | ||
| 1036 | opacity: 1; | ||
| 1037 | } | ||
| 1038 | |||
| 1039 | .picwall_pictureframe img { | ||
| 1040 | max-width: 100%; | ||
| 1041 | height: auto; | ||
| 1042 | color: transparent; | ||
| 1043 | } /* Adapt the width of the image */ | ||
| 1044 | |||
| 1045 | .picwall_pictureframe a { | ||
| 1046 | text-decoration: none; | ||
| 1047 | } | ||
| 1048 | |||
| 1049 | /* CSS to show title when hovering an image - no javascript required. */ | ||
| 1050 | .picwall_pictureframe span.info { | ||
| 1051 | display: none; | ||
| 1052 | } | ||
| 1053 | |||
| 1054 | .picwall_pictureframe:hover span.info { | ||
| 1055 | display: block; | ||
| 1056 | position: absolute; | ||
| 1057 | top: 0; | ||
| 1058 | left: 0; | ||
| 1059 | width: 90px; | ||
| 1060 | font-weight: bold; | ||
| 1061 | font-size: 8pt; | ||
| 1062 | color: #fff; | ||
| 1063 | text-align: left; | ||
| 1064 | background-color: transparent; | ||
| 1065 | background-color: rgba(0, 0, 0, 0.4); | ||
| 1066 | /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */ | ||
| 1067 | filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000); | ||
| 1068 | /* IE6IE9 */ | ||
| 1069 | text-shadow: 2px 2px 1px #000000; | ||
| 1070 | } | ||
diff --git a/tpl/default/picwall.html b/tpl/default/picwall.html new file mode 100644 index 00000000..686f506c --- /dev/null +++ b/tpl/default/picwall.html | |||
| @@ -0,0 +1,49 @@ | |||
| 1 | <!DOCTYPE html> | ||
| 2 | <html> | ||
| 3 | <head> | ||
| 4 | {include="includes"} | ||
| 5 | <script src="inc/blazy-1.3.1.min.js#"></script> | ||
| 6 | </head> | ||
| 7 | <body> | ||
| 8 | {include="page.header"} | ||
| 9 | |||
| 10 | <div class="pure-g"> | ||
| 11 | <div class="pure-u-lg-1-6 pure-u-1-8"></div> | ||
| 12 | <div class="pure-u-lg-2-3 pure-u-3-4 page-form page-visitor"> | ||
| 13 | {$countPics=count($linksToDisplay)} | ||
| 14 | <h2>{'Picture Wall'|t} - {$countPics} {'pics'|t}</h2> | ||
| 15 | |||
| 16 | <div id="plugin_zone_start_picwall" class="plugin_zone"> | ||
| 17 | {loop="$plugin_start_zone"} | ||
| 18 | {$value} | ||
| 19 | {/loop} | ||
| 20 | </div> | ||
| 21 | |||
| 22 | <div id="picwall_container"> | ||
| 23 | {loop="$linksToDisplay"} | ||
| 24 | <div class="picwall_pictureframe"> | ||
| 25 | {$value.thumbnail}<a href="{$value.real_url}"><span class="info">{$value.title}</span></a> | ||
| 26 | {loop="$value.picwall_plugin"} | ||
| 27 | {$value} | ||
| 28 | {/loop} | ||
| 29 | </div> | ||
| 30 | {/loop} | ||
| 31 | </div> | ||
| 32 | |||
| 33 | <div id="plugin_zone_end_picwall" class="plugin_zone"> | ||
| 34 | {loop="$plugin_end_zone"} | ||
| 35 | {$value} | ||
| 36 | {/loop} | ||
| 37 | </div> | ||
| 38 | </div> | ||
| 39 | </div> | ||
| 40 | |||
| 41 | {include="page.footer"} | ||
| 42 | <script> | ||
| 43 | window.onload = function() { | ||
| 44 | var bLazy = new Blazy(); | ||
| 45 | } | ||
| 46 | </script> | ||
| 47 | </body> | ||
| 48 | </html> | ||
| 49 | |||