aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2017-01-14 13:51:29 +0100
committerArthurHoaro <arthur@hoa.ro>2017-01-14 13:51:29 +0100
commit19ac80e11ab70218adc70d7f3ad64669a90aab70 (patch)
tree700ec162a3ed0d55ea1d3310ec8ad807002a6d70 /tpl
parent73b9d6b3b348172f347d4f2a091f4c4053f4eed8 (diff)
downloadShaarli-19ac80e11ab70218adc70d7f3ad64669a90aab70.tar.gz
Shaarli-19ac80e11ab70218adc70d7f3ad64669a90aab70.tar.zst
Shaarli-19ac80e11ab70218adc70d7f3ad64669a90aab70.zip
Use latest feedbacks
Diffstat (limited to 'tpl')
-rw-r--r--tpl/default/configure.html5
-rw-r--r--tpl/default/css/shaarli.css86
-rw-r--r--tpl/default/img/noise.pngbin4275 -> 0 bytes
-rw-r--r--tpl/default/js/shaarli.js10
-rw-r--r--tpl/default/linklist.html49
-rw-r--r--tpl/default/linklist.paging.html99
-rw-r--r--tpl/default/pluginsadmin.html10
7 files changed, 140 insertions, 119 deletions
diff --git a/tpl/default/configure.html b/tpl/default/configure.html
index b959a91b..450fe4ca 100644
--- a/tpl/default/configure.html
+++ b/tpl/default/configure.html
@@ -13,8 +13,8 @@
13 13
14<form method="POST" action="#" name="configform" id="configform"> 14<form method="POST" action="#" name="configform" id="configform">
15 <div class="pure-g"> 15 <div class="pure-g">
16 <div class="pure-u-lg-1-6 pure-u-1-24"></div> 16 <div class="pure-u-lg-1-8 pure-u-1-24"></div>
17 <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-complete"> 17 <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-complete">
18 <h2 class="window-title">{'Configure'|t}</h2> 18 <h2 class="window-title">{'Configure'|t}</h2>
19 <div class="pure-g"> 19 <div class="pure-g">
20 <div class="pure-u-lg-{$ratioLabel} pure-u-1"> 20 <div class="pure-u-lg-{$ratioLabel} pure-u-1">
@@ -76,6 +76,7 @@
76 </div> 76 </div>
77 </div> 77 </div>
78 </div> 78 </div>
79 <div class="clear"></div>
79 <div class="pure-g"> 80 <div class="pure-g">
80 <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} "> 81 <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile} ">
81 <div class="form-label"> 82 <div class="form-label">
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 6b073437..63cf68ac 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -2,7 +2,7 @@
2 * General 2 * General
3 */ 3 */
4body { 4body {
5 background: url(../img/noise.png) #c5c5c5; 5 background: #c5c5c5;
6} 6}
7 7
8.strong { 8.strong {
@@ -87,7 +87,7 @@ pre {
87} 87}
88 88
89.anchor:target { 89.anchor:target {
90 padding-top: 35px; 90 padding-top: 40px;
91} 91}
92/** 92/**
93 * MENU 93 * MENU
@@ -96,10 +96,11 @@ pre {
96 position: fixed; 96 position: fixed;
97 top: 0; 97 top: 0;
98 width: 100%; 98 width: 100%;
99 --height: 50px;
99 background: #1b926c; 100 background: #1b926c;
100 -webkit-font-smoothing: antialiased; 101 -webkit-font-smoothing: antialiased;
101 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */ 102 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
102 max-height: 2.1em; 103 max-height: 45px;
103 transition: max-height 0.5s; 104 transition: max-height 0.5s;
104 overflow: hidden; 105 overflow: hidden;
105 z-index: 999; 106 z-index: 999;
@@ -107,7 +108,7 @@ pre {
107 108
108/* Chrome bugfix: with 100% height, it only displays the first element. */ 109/* Chrome bugfix: with 100% height, it only displays the first element. */
109.pure-menu-item { 110.pure-menu-item {
110 height: inherit; 111 height: 45px;
111} 112}
112 113
113.shaarli-menu.open { 114.shaarli-menu.open {
@@ -124,6 +125,7 @@ pre {
124.pure-menu-link:visited, 125.pure-menu-link:visited,
125.pure-menu-selected .pure-menu-link, 126.pure-menu-selected .pure-menu-link,
126.pure-menu-selected .pure-menu-link:visited { 127.pure-menu-selected .pure-menu-link:visited {
128 padding: 0.8em 1em;
127 color: #f5f5f5; 129 color: #f5f5f5;
128} 130}
129 131
@@ -132,14 +134,22 @@ pre {
132.pure-menu-selected .pure-menu-link:focus { 134.pure-menu-selected .pure-menu-link:focus {
133 color: #fff; 135 color: #fff;
134 background: transparent; 136 background: transparent;
137}
135 138
139.pure-menu-item:hover::after {
140 margin: -4px auto 0 auto;
141 display: block;
142 content:"";
143 background: #fff;
144 height: 4px;
145 width: 100%;
136} 146}
137 147
138.menu-toggle { 148.menu-toggle {
139 width: 34px; 149 width: 34px;
140 height: 34px; 150 height: 45px;
141 position: absolute; 151 position: absolute;
142 top: 0; 152 top: 5px;
143 right: 0; 153 right: 0;
144 display: none; 154 display: none;
145} 155}
@@ -183,6 +193,13 @@ pre {
183 font-size: 0.8em; 193 font-size: 0.8em;
184} 194}
185 195
196@media screen and (min-width: 64em) {
197 #linkcount {
198 position: absolute;
199 right: 5px;
200 }
201}
202
186#search, #search-linklist { 203#search, #search-linklist {
187 text-align: center; 204 text-align: center;
188 width: 100%; 205 width: 100%;
@@ -219,12 +236,9 @@ pre {
219 color: #252525; 236 color: #252525;
220} 237}
221 238
222#search button:hover { 239#search button:hover,
223 color: #fff;
224}
225
226#search-linklist button:hover { 240#search-linklist button:hover {
227 color: #000; 241 color: #fff;
228} 242}
229 243
230#search-linklist { 244#search-linklist {
@@ -261,7 +275,7 @@ pre {
261 text-align: center; 275 text-align: center;
262 background: #1b926c; 276 background: #1b926c;
263 display: block; 277 display: block;
264 z-index: 9999; 278 z-index: 999;
265 height: 30px; 279 height: 30px;
266 padding: 5px 0; 280 padding: 5px 0;
267} 281}
@@ -328,18 +342,7 @@ pre {
328#content { 342#content {
329 position: relative; 343 position: relative;
330 z-index: 2; 344 z-index: 2;
331} 345 margin-top: 45px;
332
333@media screen and (max-width: 64em) {
334 #content {
335 margin: 2.1em 0 0 0;
336 }
337}
338
339@media screen and (min-width: 64em) {
340 #content {
341 margin-top: 33px;
342 }
343} 346}
344 347
345/** 348/**
@@ -393,7 +396,7 @@ pre {
393} 396}
394 397
395.linklist-filters a { 398.linklist-filters a {
396 padding: 2px 5px; 399 padding: 5px 8px;
397 text-decoration: none; 400 text-decoration: none;
398} 401}
399 402
@@ -430,7 +433,7 @@ pre {
430} 433}
431 434
432.linksperpage a { 435.linksperpage a {
433 padding: 2px 5px; 436 padding: 5px 5px;
434 text-decoration: none; 437 text-decoration: none;
435 color: #252525; 438 color: #252525;
436 background: #f5f5f5; 439 background: #f5f5f5;
@@ -447,9 +450,9 @@ pre {
447} 450}
448 451
449.linksperpage input[type="text"] { 452.linksperpage input[type="text"] {
450 height: 15px; 453 height: 20px;
451 margin: 0; 454 margin: 0;
452 padding: 3px 5px 3px 8px; 455 padding: 4px 5px 3px 8px;
453 background: #f5f5f5; 456 background: #f5f5f5;
454 border: medium none currentColor; 457 border: medium none currentColor;
455 color: #252525; 458 color: #252525;
@@ -483,13 +486,14 @@ pre {
483 content:""; 486 content:"";
484 background: #F89406; 487 background: #F89406;
485 height: 95%; 488 height: 95%;
486 width: 3px; 489 width: 2px;
487 margin-top: 3px; 490 margin-top: 3px;
491 z-index: 1;
488} 492}
489 493
490.linklist-item-title h2 { 494.linklist-item-title h2 {
491 padding: 3px 10px 0 10px; 495 padding: 3px 10px 0 10px;
492 line-height: 25px; 496 line-height: 30px;
493} 497}
494 498
495.linklist-item-title a { 499.linklist-item-title a {
@@ -525,18 +529,9 @@ pre {
525 display: none; 529 display: none;
526} 530}
527 531
528.linklist-item-title:after {
529 display: block;
530 content:"";
531 background: linear-gradient(to right, #f5f5f5, #8e8e8e, #f5f5f5);
532 height: 1px;
533 width: 90%;
534 margin: 1px auto 0 auto;
535}
536
537.linklist-item-editbuttons { 532.linklist-item-editbuttons {
538 float: right; 533 float: right;
539 padding: 5px; 534 padding: 8px 5px;
540} 535}
541 536
542.linklist-item-editbuttons * { 537.linklist-item-editbuttons * {
@@ -555,7 +550,7 @@ pre {
555} 550}
556 551
557.delete-link { 552.delete-link {
558 font-size: 1.1em; 553 font-size: 1.3em;
559 color: #ac2925 !important; 554 color: #ac2925 !important;
560} 555}
561 556
@@ -566,6 +561,7 @@ pre {
566 font-family: Roboto Slab, Arial, sans-serif; 561 font-family: Roboto Slab, Arial, sans-serif;
567 word-wrap: break-word; 562 word-wrap: break-word;
568 color: #252525; 563 color: #252525;
564 line-height: 1.3em;
569} 565}
570 566
571.linklist-item.private .linklist-item-description::before { 567.linklist-item.private .linklist-item-description::before {
@@ -576,9 +572,8 @@ pre {
576 content:""; 572 content:"";
577 background: #F89406; 573 background: #F89406;
578 height: 95%; 574 height: 95%;
579 width: 3px; 575 width: 2px;
580 z-index: 9999; 576 z-index: 1;
581 #margin: 0;
582} 577}
583 578
584.linklist-item-description a { 579.linklist-item-description a {
@@ -807,7 +802,7 @@ pre {
807 802
808.page-form-complete .form-label, .page-form-complete .form-input { 803.page-form-complete .form-label, .page-form-complete .form-input {
809 position: relative; 804 position: relative;
810 height: 60px; 805 min-height: 60px;
811} 806}
812 807
813.page-form-complete .form-label label, 808.page-form-complete .form-label label,
@@ -1128,6 +1123,7 @@ pre {
1128 padding: 5px 5px 0 5px; 1123 padding: 5px 5px 0 5px;
1129 font-size: 0.9em; 1124 font-size: 0.9em;
1130 text-align: justify; 1125 text-align: justify;
1126 word-wrap: break-word;
1131} 1127}
1132 1128
1133.daily-entry .daily-entry-tags { 1129.daily-entry .daily-entry-tags {
diff --git a/tpl/default/img/noise.png b/tpl/default/img/noise.png
deleted file mode 100644
index 8f7fa660..00000000
--- a/tpl/default/img/noise.png
+++ /dev/null
Binary files differ
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index ebe0b521..925f6ce7 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -212,3 +212,13 @@ if (openers != null) {
212function removeClass(element, classname) { 212function removeClass(element, classname) {
213 element.className = element.className.replace(new RegExp('(?:^|\\s)'+ classname + '(?:\\s|$)'), ' '); 213 element.className = element.className.replace(new RegExp('(?:^|\\s)'+ classname + '(?:\\s|$)'), ' ');
214} 214}
215
216/**
217 * Remove CSS target padding (for fixed bar)
218 */
219var anchor = document.querySelector('.anchor:target');
220if (anchor != null) {
221 var padsize = anchor.clientHeight;
222 this.window.scroll(0, this.window.scrollY - padsize);
223 anchor.style.paddingTop = 0;
224}
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 5bd8a12e..5a601d82 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -6,7 +6,17 @@
6<body> 6<body>
7{include="page.header"} 7{include="page.header"}
8 8
9<div id="linkcount" class="pure-u-0 pure-u-lg-visible">
10 {if="!empty($linkcount)"}
11 <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
12 {if="$privateLinkcount>0"}
13 <br><span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
14 {/if}
15 {/if}
16</div>
17
9<div id="search-linklist"> 18<div id="search-linklist">
19
10 <div class="pure-g"> 20 <div class="pure-g">
11 <div class="pure-u-1 pure-u-lg-1-2"> 21 <div class="pure-u-1 pure-u-lg-1-2">
12 <form method="GET" class="searchform" name="searchform"> 22 <form method="GET" class="searchform" name="searchform">
@@ -50,22 +60,26 @@
50{/loop} 60{/loop}
51 61
52<div id="linklist"> 62<div id="linklist">
63 <div class="pure-g">
64 <div class="pure-u-lg-2-24 pure-u-1-24"></div>
65 <div class="pure-u-lg-20-24 pure-u-22-24">
66 <div id="linkcount" class="pure-u-lg-0 center">
67 {if="!empty($linkcount)"}
68 <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
69 {if="$privateLinkcount>0"}
70 &middot; <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
71 {/if}
72 {/if}
73 </div>
53 74
54 <div id="linkcount" class="center"> 75 {include="linklist.paging"}
55 {if="!empty($linkcount)"}
56 <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
57 {if="$privateLinkcount>0"}
58 &middot; <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
59 {/if}
60 {/if}
61 </div>
62
63 {include="linklist.paging"}
64 76
65 <div id="plugin_zone_start_linklist" class="plugin_zone"> 77 <div id="plugin_zone_start_linklist" class="plugin_zone">
66 {loop="$plugin_start_zone"} 78 {loop="$plugin_start_zone"}
67 {$value} 79 {$value}
68 {/loop} 80 {/loop}
81 </div>
82 </div>
69 </div> 83 </div>
70 84
71 {if="count($links)==0"} 85 {if="count($links)==0"}
@@ -220,7 +234,12 @@
220 {/loop} 234 {/loop}
221 </div> 235 </div>
222 236
223 {include="linklist.paging"} 237<div class="pure-g">
238 <div class="pure-u-lg-2-24 pure-u-1-24"></div>
239 <div class="pure-u-lg-20-24 pure-u-22-24">
240 {include="linklist.paging"}
241 </div>
242</div>
224 243
225{include="page.footer"} 244{include="page.footer"}
226</body> 245</body>
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index a48f4c18..bc1591e4 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -1,60 +1,55 @@
1<div class="linklist-paging"> 1<div class="linklist-paging">
2 <div class="pure-g"> 2 <div class="paging pure-g">
3 <div class="pure-u-lg-2-24 pure-u-1-24"></div> 3 <div class="linklist-filters pure-u-1-3">
4 <div class="pure-u-lg-20-24 pure-u-22-24"> 4 {if="isLoggedIn() or !empty($action_plugin)"}
5 <div class="paging pure-g"> 5 <span class="linklist-filters-text pure-u-0 pure-u-lg-visible">
6 <div class="linklist-filters pure-u-1-3"> 6 {'Filters'|t}
7 {if="isLoggedIn() or !empty($action_plugin)"} 7 </span>
8 <span class="linklist-filters-text"> 8 {if="isLoggedIn()"}
9 {'Filters'|t} 9 <a href="?privateonly" title="{'Filter private links'|t}"
10 </span> 10 class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
11 {if="isLoggedIn()"} 11 ><i class="fa fa-key"></i></a>
12 <a href="?privateonly" title="{'Filter private links'|t}" 12 {/if}
13 class={if="$privateonly"}"filter-on"{else}"filter-off"{/if} 13 <a href="#" class="filter-off fold-all" title="Fold all">
14 ><i class="fa fa-key"></i></a> 14 <i class="fa fa-chevron-up"></i>
15 {/if} 15 </a>
16 <a href="#" class="filter-off fold-all" title="Fold all"> 16 {loop="$action_plugin"}
17 <i class="fa fa-chevron-up"></i> 17 {$value.attr.class=isset($value.attr.class) ? $value.attr.class : ''}
18 </a> 18 {$value.attr.class=!empty($value.on) ? $value.attr.class .' filter-on' : $value.attr.class .' filter-off'}
19 {loop="$action_plugin"} 19 <a
20 {$value.attr.class=isset($value.attr.class) ? $value.attr.class : ''} 20 {loop="$value.attr"}
21 {$value.attr.class=!empty($value.on) ? $value.attr.class .' filter-on' : $value.attr.class .' filter-off'} 21 {$key}="{$value}"
22 <a 22 {/loop}>
23 {loop="$value.attr"} 23 {$value.html}
24 {$key}="{$value}" 24 </a>
25 {/loop}> 25 {/loop}
26 {$value.html} 26 {/if}
27 </a> 27 </div>
28 {/loop}
29 {/if}
30 </div>
31 28
32 29
33 <div class="linklist-pages pure-u-1-3"> 30 <div class="linklist-pages pure-u-1-3">
34 {if="$next_page_url"} 31 {if="$next_page_url"}
35 <a href="{$next_page_url}" class="paging_newer"> 32 <a href="{$next_page_url}" class="paging_newer">
36 <i class="fa fa-arrow-circle-left"></i> 33 <i class="fa fa-arrow-circle-left"></i>
37 </a> 34 </a>
38 {/if} 35 {/if}
39 {if="$page_max>1"}<span class="strong">{$page_current} / {$page_max}</span>{/if} 36 {if="$page_max>1"}<span class="strong">{$page_current} / {$page_max}</span>{/if}
40 {if="$previous_page_url"} 37 {if="$previous_page_url"}
41 <a href="{$previous_page_url}" class="paging_older"> 38 <a href="{$previous_page_url}" class="paging_older">
42 <i class="fa fa-arrow-circle-right"></i> 39 <i class="fa fa-arrow-circle-right"></i>
43 </a> 40 </a>
44 {/if} 41 {/if}
45 42
46 </div> 43 </div>
47 44
48 <div class="linksperpage pure-u-1-3"> 45 <div class="linksperpage pure-u-1-3">
49 <div class="pure-u-0 pure-u-lg-visible">{'Links per page'|t}</div> 46 <div class="pure-u-0 pure-u-lg-visible">{'Links per page'|t}</div>
50 <a href="?linksperpage=20">20</a> 47 <a href="?linksperpage=20">20</a>
51 <a href="?linksperpage=50">50</a> 48 <a href="?linksperpage=50">50</a>
52 <a href="?linksperpage=100">100</a> 49 <a href="?linksperpage=100">100</a>
53 <form method="GET" class="pure-u-0 pure-u-lg-visible"> 50 <form method="GET" class="pure-u-0 pure-u-lg-visible">
54 <input type="text" name="linksperpage" placeholder="133"> 51 <input type="text" name="linksperpage" placeholder="133">
55 </form> 52 </form>
56 </div>
57 </div>
58 </div> 53 </div>
59 </div> 54 </div>
60</div> \ No newline at end of file 55</div> \ No newline at end of file
diff --git a/tpl/default/pluginsadmin.html b/tpl/default/pluginsadmin.html
index 22fa81f6..92af2eef 100644
--- a/tpl/default/pluginsadmin.html
+++ b/tpl/default/pluginsadmin.html
@@ -18,8 +18,8 @@
18 18
19<form method="POST" action="?do=save_pluginadmin" name="pluginform" id="pluginform"> 19<form method="POST" action="?do=save_pluginadmin" name="pluginform" id="pluginform">
20 <div class="pure-g"> 20 <div class="pure-g">
21 <div class="pure-u-lg-1-6 pure-u-1-24"></div> 21 <div class="pure-u-lg-1-8 pure-u-1-24"></div>
22 <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-complete"> 22 <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-complete">
23 <h2 class="window-title">{'Plugin administration'|t}</h2> 23 <h2 class="window-title">{'Plugin administration'|t}</h2>
24 24
25 <section id="enabled_plugins"> 25 <section id="enabled_plugins">
@@ -60,7 +60,7 @@
60 <input type="hidden" name="order_{$key}" value="{$counter}"> 60 <input type="hidden" name="order_{$key}" value="{$counter}">
61 </td> 61 </td>
62 </tr> 62 </tr>
63 <tr class="pure-u-lg-0 mobile-row"> 63 <tr data-line="{$key}" data-order="{$counter}" class="pure-u-lg-0 mobile-row">
64 <td colspan="4"><label for="{$key}">{$value.description}</label></td> 64 <td colspan="4"><label for="{$key}">{$value.description}</label></td>
65 </tr> 65 </tr>
66 {/loop} 66 {/loop}
@@ -135,8 +135,8 @@
135 135
136<form action="?do=save_pluginadmin" method="POST"> 136<form action="?do=save_pluginadmin" method="POST">
137 <div class="pure-g"> 137 <div class="pure-g">
138 <div class="pure-u-lg-1-6 pure-u-1-24"></div> 138 <div class="pure-u-lg-1-8 pure-u-1-24"></div>
139 <div class="pure-u-lg-2-3 pure-u-22-24 page-form page-form-light"> 139 <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-light">
140 <h2 class="window-title">{'Plugin configuration'|t}</h2> 140 <h2 class="window-title">{'Plugin configuration'|t}</h2>
141 <section id="plugin_parameters"> 141 <section id="plugin_parameters">
142 <div> 142 <div>