diff options
-rw-r--r-- | tpl/default/css/shaarli.css | 166 | ||||
-rw-r--r-- | tpl/default/linklist.html | 173 | ||||
-rw-r--r-- | tpl/default/linklist.paging.html | 6 |
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}&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)"} · | ||
98 | </span> | ||
99 | {/if} | ||
100 | permalink · | ||
101 | </a> | ||
102 | |||
103 | {loop="$value.link_plugin"} | ||
104 | <span>{$value}</span> · | ||
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> |