aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2016-02-28 14:08:45 +0100
committerArthurHoaro <arthur@hoa.ro>2016-08-07 12:17:36 +0200
commit348e1587ea23408954568f8c3ed6c0defa5d2f89 (patch)
tree65261e0f3a8d291ff31bdddce39cda5281bf9700 /tpl/default
parent4d7cd1b0e2ff3c4ac5df03774640164f681b5e96 (diff)
downloadShaarli-348e1587ea23408954568f8c3ed6c0defa5d2f89.tar.gz
Shaarli-348e1587ea23408954568f8c3ed6c0defa5d2f89.tar.zst
Shaarli-348e1587ea23408954568f8c3ed6c0defa5d2f89.zip
Linklist template
Diffstat (limited to 'tpl/default')
-rw-r--r--tpl/default/css/shaarli.css166
-rw-r--r--tpl/default/linklist.html173
-rw-r--r--tpl/default/linklist.paging.html6
3 files changed, 270 insertions, 75 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 2fd477b3..72ea4df5 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -13,6 +13,18 @@ body {
13 clear: both; 13 clear: both;
14} 14}
15 15
16.label {
17 display: inline-block;
18 padding: .25em .4em;
19 font-size: 75%;
20 font-weight: 700;
21 line-height: 1;
22 text-align: center;
23 white-space: nowrap;
24 vertical-align: baseline;
25 border-radius: .25rem;
26}
27
16/** 28/**
17 * Extends Pure grids responsive to hide items. 29 * Extends Pure grids responsive to hide items.
18 * Use xx-0 to hide an item on xx screen. 30 * Use xx-0 to hide an item on xx screen.
@@ -288,4 +300,156 @@ body {
288 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; 300 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
289 color: #252525; 301 color: #252525;
290 font-size: 0.8em; 302 font-size: 0.8em;
291} \ No newline at end of file 303}
304
305/**
306 * CONTENT - LINKLIST ITEMS
307 */
308.linklist-item {
309 margin: 15px 0;
310 background: #fff;
311 box-shadow: 2px 2px 0.5em #797979;
312}
313
314.linklist-item-title, .linklist-item-title h2 {
315 margin: 0;
316}
317
318.linklist-item-title {
319 background: #20b988 url(../img/noise.png);
320 border-bottom: 1px solid #1b926c;
321 box-shadow: 1px 1px 0.2em #1b926c;
322}
323
324.linklist-item-title h2 {
325 padding: 2px 10px;
326 line-height: 25px;
327}
328
329.linklist-item-title a {
330 font-size: 0.6em;
331 color: #d0fff0;
332 text-decoration: none;
333 vertical-align: middle;
334}
335
336.linklist-item-title a:hover {
337 color: #fff;
338}
339
340.linklist-item-title .label-private {
341 border: solid 1px #d0fff0;
342}
343
344.linklist-item-editbuttons {
345 float: right;
346 padding: 5px;
347}
348
349.linklist-item-editbuttons a {
350 font-size: 1em;
351}
352
353.linklist-item-description {
354 padding: 10px;
355}
356
357.linklist-item-infos {
358 padding: 5px;
359 background: #ddd url(../img/noise.png);
360 border-top: 1px solid #989898;
361 box-shadow: 1px -1px 0.2em #989898;
362 color: #252525;
363 font-size: 0.8em;
364}
365
366.linklist-item-infos a {
367 color: #505050;
368 text-decoration: none;
369}
370
371.linklist-item-infos a:hover {
372 color: #000;
373}
374
375.linklist-item-infos .label-tag {
376 border: 1px solid #505050;
377 font-size: 0.9em;
378}
379
380.linklist-item-infos .label-tag:hover {
381 border: 1px solid #000;
382}
383
384.linklist-item-infos-url {
385 text-align: right;
386 white-space: nowrap;
387 overflow: hidden;
388 text-overflow: ellipsis;
389}
390
391/**
392 * CONTENT - LINKLIST ITEMS
393 */
394.linklist-item {
395 margin: 15px 0;
396 background: #fff;
397 box-shadow: 2px 2px 0.5em #797979;
398}
399
400.linklist-item-title, .linklist-item-title h2 {
401 margin: 0;
402}
403
404.linklist-item-title {
405 background: #20b988 url(../img/noise.png);
406 border-bottom: 1px solid #1b926c;
407 box-shadow: 1px 1px 0.2em #1b926c;
408}
409
410.linklist-item-title h2 {
411 padding: 2px 10px;
412 line-height: 25px;
413}
414
415.linklist-item-title a {
416 font-size: 0.6em;
417 color: #d0fff0;
418 text-decoration: none;
419 vertical-align: middle;
420}
421
422.linklist-item-title a:hover {
423 color: #fff;
424}
425
426.linklist-item-editbuttons {
427 float: right;
428 padding: 5px;
429}
430
431.linklist-item-editbuttons a {
432 font-size: 1em;
433}
434
435.linklist-item-description {
436 padding: 10px;
437}
438
439.linklist-item-infos {
440 padding: 5px;
441 background: #ddd url(../img/noise.png);
442 border-top: 1px solid #989898;
443 box-shadow: 1px -1px 0.2em #989898;
444 color: #252525;
445 font-size: 0.8em;
446}
447
448.linklist-item-infos a {
449 color: #000;
450 text-decoration: none;
451}
452
453.linklist-item-infos a:hover {
454 color: #252525;
455}
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index c42245e4..2694edfe 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -1,99 +1,130 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<html> 2<html>
3<head> 3<head>
4 {include="includes"} 4 {include="includes"}
5</head> 5</head>
6<body> 6<body>
7{include="page.header"} 7{include="page.header"}
8 8
9 <!--{loop="$plugins_header.fields_toolbar"} 9<!--{loop="$plugins_header.fields_toolbar"}
10 {$value} 10 {$value}
11 {/loop}--> 11{/loop}-->
12 12
13<div id="linklist"> 13<div id="linklist">
14 14
15 {include="linklist.paging"} 15 {include="linklist.paging"}
16 16
17 <div id="plugin_zone_start_linklist" class="plugin_zone"> 17 <div id="plugin_zone_start_linklist" class="plugin_zone">
18 {loop="$plugin_start_zone"} 18 {loop="$plugin_start_zone"}
19 {$value} 19 {$value}
20 {/loop} 20 {/loop}
21 </div> 21 </div>
22 22
23 {if="count($links)==0"} 23 <!-- TODO: Search results. -->
24 <div id="searchcriteria">Nothing found.</i></div> 24 {if="count($links)==0"}
25 {else} 25 <div id="searchcriteria">Nothing found.</div>
26 {if="$search_type=='fulltext'"} 26 {else}
27 <div id="searchcriteria">{$result_count} results for <i>{$search_crits}</i></div> 27 {if="$search_type=='fulltext'"}
28 {/if} 28 <div id="searchcriteria">{$result_count} results for <i>{$search_crits}</i></div>
29 {if="$search_type=='tags'"}
30 <div id="searchcriteria">{$result_count} results for tags <i>
31 {loop="search_crits"}
32 <span class="linktag" title="Remove tag">
33 <a href="?removetag={function="urlencode($value)"}">{$value} <span class="remove">x</span></a>
34 </span>
35 {/loop}</i></div>
36 {/if}
37 {/if} 29 {/if}
38 <ul> 30 {if="$search_type=='tags'"}
39 {loop="links"} 31 <div id="searchcriteria">{$result_count} results for tags <i>
40 <li{if="$value.class"} class="{$value.class}"{/if}> 32 {loop="search_crits"}
41 <a id="{$value.shorturl}"></a> 33 <span class="linktag" title="Remove tag">
42 <div class="thumbnail">{$value.url|thumbnail}</div> 34 <a href="?removetag={function="urlencode($value)"}">{$value} <span class="remove">x</span></a>
43 <div class="linkcontainer"> 35 </span>
44 {if="isLoggedIn()"} 36 {/loop}</i></div>
45 <div class="linkeditbuttons"> 37 {/if}
46 <form method="GET" class="buttoneditform"> 38 {/if}
47 <input type="hidden" name="edit_link" value="{$value.linkdate}"> 39 <div class="pure-g">
48 <input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit"> 40 <div class="pure-u-2-24"></div>
49 </form><br> 41 <div class="pure-u-20-24">
50 <form method="POST" class="buttoneditform"> 42 {loop="links"}
51 <input type="hidden" name="lf_linkdate" value="{$value.linkdate}"> 43 <div class="linklist-item{if="$value.class"} {$value.class}{/if}">
52 <input type="hidden" name="token" value="{$token}"> 44
53 <input type="hidden" name="delete_link"> 45 <div class="linklist-item-title">
54 <input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete" 46 {if="isLoggedIn()"}
55 class="button_delete" onClick="return confirmDeleteLink();"> 47 <div class="linklist-item-editbuttons">
56 </form> 48 <a href="#" title="Fold" class="fold-button"><i class="fa fa-chevron-up"></i></a>
57 </div> 49 <a href="?edit_link={$value.linkdate}" title="Edit"><i class="fa fa-pencil-square-o"></i></a>
58 {/if} 50 <a href="?delete_link={$value.linkdate}&amp;token={$token}" title="Delete"><i class="fa fa-trash"></i></a>
59 <span class="linktitle"> 51 </div>
60 <a href="{$value.real_url}">{$value.title}</a> 52 {/if}
61 </span> 53
62 <br> 54 <h2>
63 {if="$value.description"}<div class="linkdescription">{$value.description}</div>{/if} 55 <a href="{$value.real_url}" id="{$value.shorturl}">
64 {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"} 56 {if="strpos($value.url, $value.shorturl) === false"}
65 <span class="linkdate" title="Permalink"><a href="?{$value.linkdate|smallHash}">{function="strftime('%c', $value.timestamp)"} - permalink</a> - </span> 57 <i class="fa fa-external-link"></i>
66 {else} 58 {else}
67 <span class="linkdate" title="Short link here"><a href="?{$value.shorturl}">permalink</a> - </span> 59 <i class="fa fa-sticky-note"></i>
68 {/if} 60 {/if}
69 61
70 {loop="$value.link_plugin"} 62 {if="$value.private"}
71 <span>{$value}</span> - 63 <span class="label label-private">Private</span>
72 {/loop}
73
74 <a href="{$value.real_url}"><span class="linkurl" title="Short link">{$value.url}</span></a><br>
75 {if="$value.tags"}
76 <div class="linktaglist">
77 {loop="value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value}</a></span> {/loop}
78 </div>
79 {/if} 64 {/if}
80 65
66 {$value.title}
67 </a>
68 </h2>
69 </div>
70
71 <div class="linklist-item-thumbnail">{$value.url|thumbnail}</div>
81 72
73 {if="$value.description"}
74 <div class="linklist-item-description">
75 {$value.description}
82 </div> 76 </div>
83 </li> 77 {/if}
84 {/loop} 78
85 </ul> 79 <div class="linklist-item-infos">
80 {if="$value.tags"}
81 <div class="linklist-item-tags">
82 <i class="fa fa-tags"></i>
83 {loop="value.taglist"}
84 <span class="label label-tag" title="Add tag">
85 <a href="?addtag={$value|urlencode}">{$value}</a>
86 </span>
87 {/loop}
88 </div>
89 {/if}
86 90
87 <div id="plugin_zone_end_linklist" class="plugin_zone"> 91 <div class="pure-g">
88 {loop="$plugin_end_zone"} 92 <div class="pure-u-lg-5-8 pure-u-sm-1">
89 {$value} 93 <a href="?{$value.shorturl}" title="Permalink">
90 {/loop} 94 {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"}
95 <span class="linkdate">
96 <i class="fa fa-clock-o"></i>
97 {function="strftime('%d %B %Y %H:%M', $value.timestamp)"} &middot;
98 </span>
99 {/if}
100 permalink &middot;
101 </a>
102
103 {loop="$value.link_plugin"}
104 <span>{$value}</span> &middot;
105 {/loop}
106 </div>
107 <div class="linklist-item-infos-url pure-u-lg-3-8 pure-u-sm-1">
108 <a href="{$value.real_url}"><span class="linkurl" title="Short link">{$value.url}</span></a>
109 </div>
110 </div>
111 </div>
112 </div>
113 {/loop}
91 </div> 114 </div>
115 </div>
116</div>
117
118 <div id="plugin_zone_end_linklist" class="plugin_zone">
119 {loop="$plugin_end_zone"}
120 {$value}
121 {/loop}
122 </div>
92 123
93 {include="linklist.paging"} 124 {include="linklist.paging"}
94 125
95</div> 126</div>
96 127
97 {include="page.footer"} 128{include="page.footer"}
98</body> 129</body>
99</html> 130</html>
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index 57ee1657..c8c13fe0 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -3,7 +3,7 @@
3 <div class="linklist-filters pure-u-1-3"> 3 <div class="linklist-filters pure-u-1-3">
4 {if="isLoggedIn() or !empty($action_plugin)"} 4 {if="isLoggedIn() or !empty($action_plugin)"}
5 <span class="linklist-filters-text"> 5 <span class="linklist-filters-text">
6 Filters: 6 Filters
7 </span> 7 </span>
8 {if="isLoggedIn()"} 8 {if="isLoggedIn()"}
9 <a href="?privateonly" title="Click to see all links" 9 <a href="?privateonly" title="Click to see all links"
@@ -39,12 +39,12 @@
39 </div> 39 </div>
40 40
41 <div class="linksperpage pure-u-1-3"> 41 <div class="linksperpage pure-u-1-3">
42 Links per page: 42 Links per page
43 <a href="?linksperpage=20">20</a> 43 <a href="?linksperpage=20">20</a>
44 <a href="?linksperpage=50">50</a> 44 <a href="?linksperpage=50">50</a>
45 <a href="?linksperpage=100">100</a> 45 <a href="?linksperpage=100">100</a>
46 <form method="GET"> 46 <form method="GET">
47 <input type="text" name="linksperpage" size="2"> 47 <input type="text" name="linksperpage" placeholder="133">
48 </form> 48 </form>
49 </div> 49 </div>
50 </div> 50 </div>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 04:54:11 +0000