aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--plugins/markdown/markdown.css2
-rw-r--r--tpl/default/css/pure-extras.css262
-rw-r--r--tpl/default/css/shaarli.css128
-rw-r--r--tpl/default/includes.html1
-rw-r--r--tpl/default/js/shaarli.js58
-rw-r--r--tpl/default/linklist.html15
-rw-r--r--tpl/default/linklist.paging.html91
-rw-r--r--tpl/default/page.footer.html32
-rw-r--r--tpl/default/page.header.html45
9 files changed, 548 insertions, 86 deletions
diff --git a/plugins/markdown/markdown.css b/plugins/markdown/markdown.css
index e012b864..8f2c0051 100644
--- a/plugins/markdown/markdown.css
+++ b/plugins/markdown/markdown.css
@@ -5,7 +5,7 @@
5 */ 5 */
6 6
7.markdown p{ 7.markdown p{
8 margin:0.75em 0; 8 margin: 0.75em 0;
9} 9}
10 10
11.markdown img{ 11.markdown img{
diff --git a/tpl/default/css/pure-extras.css b/tpl/default/css/pure-extras.css
new file mode 100644
index 00000000..d72fc94c
--- /dev/null
+++ b/tpl/default/css/pure-extras.css
@@ -0,0 +1,262 @@
1/* Images */
2.pure-img-eliptical {
3 border-radius: 80%;
4}
5.pure-img-rounded {
6 border-radius: 3px;
7}
8.pure-img-bordered {
9 background-color: #FFFFFF;
10 border: 1px solid rgba(0, 0, 0, 0.2);
11 padding: 5px;
12}
13
14
15/* Thumbnails */
16.pure-thumbnails li {
17 text-align: center;
18 display: inline-block;
19 *display: inline;
20 /* IE7 inline-block hack */
21 *zoom: 1;
22 vertical-align: top;
23 -webkit-box-sizing: border-box;
24 -moz-box-sizing: border-box;
25 box-sizing: border-box;
26 padding: 0.5em;
27}
28.pure-thumbnails {
29 list-style: none;
30 margin: 0;
31 padding: 0;
32}
33
34.pure-thumbnails a:focus {
35 outline: 0 none;
36}
37
38.pure-thumb {
39 display: block;
40 text-decoration: none;
41 color: inherit;
42}
43.pure-thumb img {
44 max-width: 100%;
45 margin-right: auto;
46 margin-left: auto;
47 vertical-align: middle; /* this will remove a thin line below the image */
48 -webkit-box-sizing: border-box;
49 -moz-box-sizing: border-box;
50 box-sizing: border-box;
51}
52
53.pure-thumb-bordered {
54 border: 1px solid rgba(0, 0, 0, 0.2);
55}
56.pure-thumb .caption {
57 text-align: left;
58 display: block;
59 margin: 0 5px 6px;
60
61}
62.pure-thumb .caption p {
63 margin: 0.3em 0 0;
64 font-size: 75%;
65}
66.pure-thumb .caption .caption-head {
67 font-weight: bold;
68 margin-top: 0.3em;
69}
70
71.pure-thumb-eliptical img {
72 border-radius: 50%;
73}
74.pure-thumb-rounded img {
75 border-radius: 3px;
76}
77
78/* Badges/Pills */
79.pure-badge,
80.pure-badge-error,
81.pure-badge-warning,
82.pure-badge-success,
83.pure-badge-info,
84.pure-badge-inverse {
85 padding: 0.35em 0.9em 0.35em;
86 background-color: #9D988E;
87 color: #fff;
88 display: inline-block;
89 font-size: 11.844px;
90 font-weight: bold;
91 line-height: 1.2em;
92 vertical-align: baseline;
93 white-space: nowrap;
94 border-radius: 20px;
95 margin: 0.2em;
96}
97.pure-badge-error {
98 background-color: #D13C38;
99}
100.pure-badge-warning {
101 background-color: #E78C05;
102}
103.pure-badge-success {
104 background-color: rgb(83, 180, 79);
105}
106.pure-badge-info {
107 background-color: rgb(18, 169, 218);
108}
109.pure-badge-inverse {
110 background-color: #4D370C;
111}
112
113/* Alerts */
114.pure-alert {
115 position: relative;
116 margin-bottom: 1em;
117 padding: 1em;
118 background: #ccc;
119 border-radius: 3px;
120}
121
122.pure-alert label {
123 display: inline-block;
124 *display: inline;
125 /* IE7 inline-block hack */
126 *zoom: 1;
127 white-space: nowrap;
128}
129
130.pure-alert {
131 background-color: rgb(209, 235, 238);
132 color: rgb(102, 131, 145);
133}
134.pure-alert-error {
135 background-color: #D13C38;
136 color: #fff;
137}
138
139.pure-alert-warning {
140 background-color: rgb(250, 191, 103);
141 color: rgb(151, 96, 13);
142}
143
144.pure-alert-success {
145 background-color: rgb(83, 180, 79);
146 color: #fff;
147}
148
149
150/* Contextual Modals */
151
152.pure-popover {
153 position: relative;
154 width: 300px;
155 background-color: #f0f1f3;
156 color: #2f3034;
157 padding: 15px;
158 border: 1px solid #bfc0c8;
159 border-radius: 2px;
160 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
161 box-padding: border-box;
162 -webkit-background-clip: padding-box;
163 -moz-background-clip: padding;
164 background-clip: padding-box;
165}
166
167.pure-arrow-border, .pure-arrow {
168 border-style: solid;
169 border-width: 10px;
170 height:0;
171 width:0;
172 position:absolute;
173}
174
175
176/* POPOVER ARROW POSITIONING BOTTOM */
177
178.pure-popover.bottom .pure-arrow-border {
179 border-color: #bfc0c8 transparent transparent transparent;
180 bottom: -20px;
181 left: 50%;
182}
183.pure-popover.bottom .pure-arrow {
184 border-color: #f0f1f3 transparent transparent transparent;
185 bottom:-19px;
186 left: 50%;
187}
188
189/* POPOVER ARROW POSITIONING TOP*/
190
191.pure-popover.top .pure-arrow-border {
192 border-color: transparent transparent #bfc0c8 transparent;
193 top: -21px;
194 left: 50%;
195}
196.pure-popover.top .pure-arrow {
197 border-color: transparent transparent #f0f1f3 transparent;
198 top:-20px;
199 left: 50%;
200}
201
202/* POPOVER ARROW POSITIONING RIGHT*/
203
204.pure-popover.right .pure-arrow-border {
205 border-color: transparent transparent transparent #bfc0c8;
206 top: 45%;
207 right: -21px;
208}
209.pure-popover.right .pure-arrow {
210 border-color: transparent transparent transparent #f0f1f3;
211 top:45%;
212 right: -20px;
213}
214
215
216/* POPOVER ARROW POSITIONING LEFT*/
217
218.pure-popover.left .pure-arrow-border {
219 border-color: transparent #bfc0c8 transparent transparent;
220 top: 45%;
221 left: -21px;
222}
223.pure-popover.left .pure-arrow {
224 border-color: transparent #f0f1f3 transparent transparent;
225 top:45%;
226 left: -20px;
227}
228
229
230/* BUTTON IMPROVEMENTS */
231.pure-button-block {
232 display: block;
233}
234.pure-button-small {
235 padding: .6em 2em .65em;
236 font-size:70%;
237}
238.pure-button-large {
239 padding: .8em 5em .9em;
240 font-size:110%;
241}
242.pure-button-selected {
243 background-color: #345fcb;
244 color: #fff;
245}
246.pure-button-secondary {
247 background: rgb(161, 195, 238);
248 color: rgb(26, 88, 122);
249}
250.pure-button-error {
251 background: rgb(214, 86, 75);
252 color: white;
253}
254.pure-button-success {
255 background: rgb(54, 197, 71);
256 color: white;
257}
258.pure-button-warning {
259 background: rgb(255, 163, 0);
260 color: white;
261}
262
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index eeff5151..9a075574 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -25,6 +25,10 @@ body {
25 border-radius: .25rem; 25 border-radius: .25rem;
26} 26}
27 27
28pre {
29 max-width: 100%;
30}
31
28@font-face { 32@font-face {
29 font-family: 'Roboto Slab'; 33 font-family: 'Roboto Slab';
30 font-weight: 400; 34 font-weight: 400;
@@ -60,6 +64,16 @@ body {
60} 64}
61 65
62/** 66/**
67 * Make pure-extras alert closable.
68 */
69.pure-alert-closable .fa-times {
70 float: right;
71}
72.pure-alert-close {
73 cursor: pointer;
74}
75
76/**
63 * MENU 77 * MENU
64 **/ 78 **/
65.shaarli-menu { 79.shaarli-menu {
@@ -174,6 +188,10 @@ body {
174 color: #d1fff0; 188 color: #d1fff0;
175} 189}
176 190
191.header-buttons {
192 text-align: right;
193}
194
177#linkcount { 195#linkcount {
178 /* position: fixed; */ 196 /* position: fixed; */
179 position: absolute; 197 position: absolute;
@@ -208,6 +226,11 @@ body {
208 color: #b0ddce; 226 color: #b0ddce;
209} 227}
210 228
229/* because chrome */
230#search input[type="text"]::-webkit-input-placeholder {
231 color: #b0ddce;
232}
233
211#search button { 234#search button {
212 background: transparent; 235 background: transparent;
213 border: none; 236 border: none;
@@ -218,6 +241,55 @@ body {
218 color: #fff; 241 color: #fff;
219} 242}
220 243
244#header-login-form {
245 display: none;
246 height: 30px;
247 padding: 5px 0;
248 text-align: center;
249 background: #1b926c;
250 box-shadow: 0 1px 1px 1px #797979;
251}
252
253#header-login-form input[type="text"], #header-login-form input[type="password"] {
254 margin: 0 0 5px 0;
255 padding: 5px 5px 3px 15px;
256 height: 20px;
257 width: 200px;
258 background: #1fa67a;
259 border: medium none currentColor;
260 border-radius: 25px;
261 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
262 color: #b0ddce;
263}
264
265/* because chrome */
266#header-login-form input[type="text"]::-webkit-input-placeholder,
267#header-login-form input[type="password"]::-webkit-input-placeholder
268{
269 color: #b0ddce;
270}
271
272#header-login-form input[type="submit"] {
273 display: inline-block;
274 margin: 0 0 5px 0;
275 height: 25px;
276 width: 100px;
277 background: #0C7653;
278 border: medium none currentColor;
279 border-radius: 25px;
280 box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E;
281 color: #b0ddce;
282}
283
284.new-version-message {
285 text-align: center;
286}
287
288.new-version-message a {
289 color: rgb(151, 96, 13);
290 font-weight: bold;
291}
292
221/** 293/**
222 * CONTENT - GENERAL 294 * CONTENT - GENERAL
223 */ 295 */
@@ -233,6 +305,7 @@ body {
233 305
234/** 306/**
235 * CONTENT - LINKLIST PAGING 307 * CONTENT - LINKLIST PAGING
308 * 64em -> lg
236 */ 309 */
237@media screen and (max-width: 64em) { 310@media screen and (max-width: 64em) {
238 .linklist-paging { 311 .linklist-paging {
@@ -249,10 +322,7 @@ body {
249.linklist-filters { 322.linklist-filters {
250 margin: 10px 0; 323 margin: 10px 0;
251 color: #252525; 324 color: #252525;
252} 325 font-size: 0.9em;
253
254.linklist-filters span {
255 margin: 0 0 0 10px;
256} 326}
257 327
258.linklist-filters a { 328.linklist-filters a {
@@ -289,6 +359,7 @@ body {
289 margin: 10px 0; 359 margin: 10px 0;
290 text-align: right; 360 text-align: right;
291 color: #252525; 361 color: #252525;
362 font-size: 0.9em;
292} 363}
293 364
294.linksperpage a { 365.linksperpage a {
@@ -306,12 +377,12 @@ body {
306 377
307.linksperpage input[type="text"] { 378.linksperpage input[type="text"] {
308 width: 28px; 379 width: 28px;
309 height: 20px; 380 height: 16px;
310 margin: 0 0 5px 0; 381 margin: 0;
311 padding: 3px 5px 3px 8px; 382 padding: 3px 5px 3px 8px;
312 background: #c8c8c8; 383 background: #c8c8c8;
313 border: medium none currentColor; 384 border: medium none currentColor;
314 border-radius: 25px; 385 --border-radius: 25px;
315 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; 386 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
316 color: #252525; 387 color: #252525;
317 font-size: 0.8em; 388 font-size: 0.8em;
@@ -395,13 +466,17 @@ body {
395 color: #20b988; 466 color: #20b988;
396} 467}
397 468
469.linklist-item-thumbnail {
470 padding: 10px;
471 float: left;
472}
473
398.linklist-item-infos { 474.linklist-item-infos {
399 padding: 5px; 475 padding: 5px 5px 0 5px;
400 background: #ddd url(../img/noise.png); 476 background: #ddd url(../img/noise.png);
401 border-top: 1px solid #989898; 477 border-top: 1px solid #989898;
402 box-shadow: 1px -1px 0.2em #989898; 478 box-shadow: 1px -1px 0.2em #989898;
403 color: #252525; 479 color: #252525;
404 font-size: 0.8em;
405} 480}
406 481
407.linklist-item-infos a { 482.linklist-item-infos a {
@@ -415,6 +490,7 @@ body {
415 490
416.linklist-item-tags { 491.linklist-item-tags {
417 margin: 0 0 5px 0; 492 margin: 0 0 5px 0;
493 font-size: 0.8em;
418} 494}
419 495
420.linklist-item-infos .label-tag { 496.linklist-item-infos .label-tag {
@@ -426,6 +502,10 @@ body {
426 border: 1px solid #000; 502 border: 1px solid #000;
427} 503}
428 504
505.linklist-item-infos-dateblock {
506 font-size: 0.9em;
507}
508
429.linklist-plugin-icon { 509.linklist-plugin-icon {
430 width: 13px; 510 width: 13px;
431 height: 13px; 511 height: 13px;
@@ -436,9 +516,39 @@ body {
436 white-space: nowrap; 516 white-space: nowrap;
437 overflow: hidden; 517 overflow: hidden;
438 text-overflow: ellipsis; 518 text-overflow: ellipsis;
519 font-size: 0.8em;
520}
521
522/** 64em -> lg **/
523@media screen and (max-width: 64em) {
524 .linklist-item-infos-url {
525 text-align: left;
526 }
439} 527}
440 528
441/** 529/**
530 * Footer
531 */
532#footer {
533 margin: 20px 0;
534 padding: 5px;
535 text-align: center;
536 color: #252525;
537}
538
539#footer:before {
540 display: block;
541 content:"";
542 background: linear-gradient(to right, #949393, #252525, #949393);
543 height: 1px;
544 width: 80%;
545 margin: 10px auto;
546}
547
548#footer a {
549 color: #252525;
550}
551/**
442 * CONTENT - LINKLIST ITEMS 552 * CONTENT - LINKLIST ITEMS
443 */ 553 */
444.linklist-item { 554.linklist-item {
diff --git a/tpl/default/includes.html b/tpl/default/includes.html
index 03cc3d2a..24c4bef0 100644
--- a/tpl/default/includes.html
+++ b/tpl/default/includes.html
@@ -7,6 +7,7 @@
7<link href="images/favicon.ico#" rel="shortcut icon" type="image/x-icon" /> 7<link href="images/favicon.ico#" rel="shortcut icon" type="image/x-icon" />
8<link type="text/css" rel="stylesheet" href="css/pure.min.css" /> 8<link type="text/css" rel="stylesheet" href="css/pure.min.css" />
9<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css"> 9<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css">
10<link type="text/css" rel="stylesheet" href="css/pure-extras.css">
10<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" /> 11<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
11<link type="text/css" rel="stylesheet" href="css/shaarli.css" /> 12<link type="text/css" rel="stylesheet" href="css/shaarli.css" />
12<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" /> 13<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index d73bd29b..8e541998 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -87,7 +87,6 @@ var foldButtons = document.querySelectorAll('.fold-button');
87 87
88 // Switch fold/expand - up = fold 88 // Switch fold/expand - up = fold
89 if (event.target.classList.contains('fa-chevron-up')) { 89 if (event.target.classList.contains('fa-chevron-up')) {
90
91 event.target.title = 'Expand'; 90 event.target.title = 'Expand';
92 description.style.display = 'none'; 91 description.style.display = 'none';
93 } 92 }
@@ -98,4 +97,59 @@ var foldButtons = document.querySelectorAll('.fold-button');
98 event.target.classList.toggle('fa-chevron-down'); 97 event.target.classList.toggle('fa-chevron-down');
99 event.target.classList.toggle('fa-chevron-up'); 98 event.target.classList.toggle('fa-chevron-up');
100 }); 99 });
101}); \ No newline at end of file 100});
101
102/**
103 * Confirmation message before deletion.
104 */
105var deleteLinks = document.querySelectorAll('.delete-link');
106[].forEach.call(deleteLinks, function(deleteLink) {
107 deleteLink.addEventListener('click', function(event) {
108 if(!confirm('Are you sure you want to delete this link ?')) {
109 event.preventDefault();
110 }
111 });
112});
113
114/**
115 * Close alerts
116 */
117var closeLinks = document.querySelectorAll('.pure-alert-close');
118[].forEach.call(closeLinks, function(closeLink) {
119 closeLink.addEventListener('click', function(event) {
120 var alert = getParentByClass(event.target, 'pure-alert-closable');
121 alert.style.display = 'none';
122 });
123});
124
125/**
126 * New version dismiss.
127 * Hide the message for one week using localStorage.
128 */
129var newVersionDismiss = document.getElementById('new-version-dismiss');
130var newVersionMessage = document.querySelector('.new-version-message');
131if (newVersionMessage != null
132 && localStorage.getItem('newVersionDismiss') != null
133 && parseInt(localStorage.getItem('newVersionDismiss')) + 7*24*60*60*1000 > (new Date()).getTime()
134) {
135 newVersionMessage.style.display = 'none';
136}
137if (newVersionDismiss != null) {
138 newVersionDismiss.addEventListener('click', function () {
139 localStorage.setItem('newVersionDismiss', (new Date()).getTime());
140 });
141}
142
143/**
144 * Login button
145 */
146var loginButton = document.getElementById('login-button');
147loginButton.addEventListener('click', function(event) {
148 event.preventDefault();
149 var loginBlock = document.getElementById('header-login-form');
150 loginBlock.style.display = 'block';
151 loginBlock.classList.toggle('open');
152 // Focus on login field.
153 loginBlock.firstElementChild.focus();
154 document.getElementById('content').style.boxShadow = 'none';
155});
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index cc70cc6a..964cc400 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -47,7 +47,9 @@
47 <div class="linklist-item-editbuttons"> 47 <div class="linklist-item-editbuttons">
48 <a href="#" title="Fold" class="fold-button"><i class="fa fa-chevron-up"></i></a> 48 <a href="#" title="Fold" class="fold-button"><i class="fa fa-chevron-up"></i></a>
49 <a href="?edit_link={$value.linkdate}" title="Edit"><i class="fa fa-pencil-square-o"></i></a> 49 <a href="?edit_link={$value.linkdate}" title="Edit"><i class="fa fa-pencil-square-o"></i></a>
50 <a href="?delete_link={$value.linkdate}&amp;token={$token}" title="Delete"><i class="fa fa-trash"></i></a> 50 <a href="?delete_link={$value.linkdate}&amp;token={$token}" title="Delete" class="delete-link">
51 <i class="fa fa-trash"></i>
52 </a>
51 </div> 53 </div>
52 {/if} 54 {/if}
53 55
@@ -68,7 +70,10 @@
68 </h2> 70 </h2>
69 </div> 71 </div>
70 72
71 <div class="linklist-item-thumbnail">{$value.url|thumbnail}</div> 73 {$thumb=thumbnail($value.url)}
74 {if="$thumb!=false"}
75 <div class="linklist-item-thumbnail">{$thumb}</div>
76 {/if}
72 77
73 {if="$value.description"} 78 {if="$value.description"}
74 <div class="linklist-item-description"> 79 <div class="linklist-item-description">
@@ -76,7 +81,7 @@
76 </div> 81 </div>
77 {/if} 82 {/if}
78 83
79 <div class="linklist-item-infos"> 84 <div class="linklist-item-infos clear">
80 {if="$value.tags"} 85 {if="$value.tags"}
81 <div class="linklist-item-tags"> 86 <div class="linklist-item-tags">
82 <i class="fa fa-tags"></i> 87 <i class="fa fa-tags"></i>
@@ -89,7 +94,7 @@
89 {/if} 94 {/if}
90 95
91 <div class="pure-g"> 96 <div class="pure-g">
92 <div class="pure-u-lg-5-8 pure-u-sm-1"> 97 <div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-sm-1">
93 <a href="?{$value.shorturl}" title="Permalink"> 98 <a href="?{$value.shorturl}" title="Permalink">
94 {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"} 99 {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"}
95 <span class="linkdate"> 100 <span class="linkdate">
@@ -106,7 +111,7 @@
106 {if="$link_plugin_counter - 1 != $counter"}&middot;{/if} 111 {if="$link_plugin_counter - 1 != $counter"}&middot;{/if}
107 {/loop} 112 {/loop}
108 </div> 113 </div>
109 <div class="linklist-item-infos-url pure-u-lg-3-8 pure-u-sm-1"> 114 <div class="linklist-item-infos-url pure-u-lg-5-8 pure-u-sm-1">
110 <a href="{$value.real_url}" title="{$value.title}"> 115 <a href="{$value.real_url}" title="{$value.title}">
111 <i class="fa fa-link"></i> {$value.url} 116 <i class="fa fa-link"></i> {$value.url}
112 </a> 117 </a>
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index 1a8256f3..9a3fd7a8 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -1,52 +1,57 @@
1<div class="linklist-paging"> 1<div class="linklist-paging">
2 <div class="paging pure-g"> 2 <div class="pure-g">
3 <div class="linklist-filters pure-u-1-3"> 3 <div class="pure-u-2-24"></div>
4 {if="isLoggedIn() or !empty($action_plugin)"} 4 <div class="pure-u-20-24">
5 <span class="linklist-filters-text"> 5 <div class="paging pure-g">
6 Filters 6 <div class="linklist-filters pure-u-1-3">
7 </span> 7 {if="isLoggedIn() or !empty($action_plugin)"}
8 {if="isLoggedIn()"} 8 <span class="linklist-filters-text">
9 <a href="?privateonly" title="Click to see all links" 9 Filters
10 class={if="$privateonly"}"filter-on"{else}"filter-off"{/if} 10 </span>
11 ><i class="fa fa-key"></i></a> 11 {if="isLoggedIn()"}
12 {/if} 12 <a href="?privateonly" title="Click to see all links"
13 {loop="$action_plugin"} 13 class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
14 <!-- FIXME! Plugin update to handle that. --> 14 ><i class="fa fa-key"></i></a>
15 <a href="?privateonly" title="{$value.title}" class=
16 {if="$value.on"}
17 "filter-on"
18 {else}
19 "filter-off"
20 {/if} 15 {/if}
21 >{$value.url}</a> 16 {loop="$action_plugin"}
22 {/loop} 17 <!-- FIXME! Plugin update to handle that. -->
23 {/if} 18 <a href="?privateonly" title="{$value.title}" class=
24 </div> 19 {if="$value.on"}
20 "filter-on"
21 {else}
22 "filter-off"
23 {/if}
24 >{$value.url}</a>
25 {/loop}
26 {/if}
27 </div>
25 28
26 29
27 <div class="linklist-pages pure-u-1-3"> 30 <div class="linklist-pages pure-u-1-3">
28 {if="$next_page_url"} 31 {if="$next_page_url"}
29 <a href="{$next_page_url}" class="paging_newer"> 32 <a href="{$next_page_url}" class="paging_newer">
30 <i class="fa fa-arrow-circle-left"></i> 33 <i class="fa fa-arrow-circle-left"></i>
31 </a> 34 </a>
32 {/if} 35 {/if}
33 {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}
34 {if="$previous_page_url"} 37 {if="$previous_page_url"}
35 <a href="{$previous_page_url}" class="paging_older"> 38 <a href="{$previous_page_url}" class="paging_older">
36 <i class="fa fa-arrow-circle-right"></i> 39 <i class="fa fa-arrow-circle-right"></i>
37 </a> 40 </a>
38 {/if} 41 {/if}
39 42
40 </div> 43 </div>
41 44
42 <div class="linksperpage pure-u-1-3"> 45 <div class="linksperpage pure-u-1-3">
43 Links per page 46 <div class="pure-u-0 pure-u-lg-visible">Links per page</div>
44 <a href="?linksperpage=20">20</a> 47 <a href="?linksperpage=20">20</a>
45 <a href="?linksperpage=50">50</a> 48 <a href="?linksperpage=50">50</a>
46 <a href="?linksperpage=100">100</a> 49 <a href="?linksperpage=100">100</a>
47 <form method="GET"> 50 <form method="GET">
48 <input type="text" name="linksperpage" placeholder="133"> 51 <input type="text" name="linksperpage" placeholder="133">
49 </form> 52 </form>
53 </div>
54 </div>
50 </div> 55 </div>
51 </div> 56 </div>
52</div> \ No newline at end of file 57</div> \ No newline at end of file
diff --git a/tpl/default/page.footer.html b/tpl/default/page.footer.html
index 5e4ff9ee..f5a92382 100644
--- a/tpl/default/page.footer.html
+++ b/tpl/default/page.footer.html
@@ -1,29 +1,19 @@
1<div id="footer"> 1<div class="pure-g">
2 <b><a href="https://github.com/shaarli/Shaarli">Shaarli</a></b> - The personal, minimalist, super-fast, no-database delicious clone by the <a href="https://github.com/shaarli/Shaarli">Shaarli</a> community - <a href="doc/Home.html">Help/documentation</a> 2 <div class="pure-u-2-24"></div>
3 {loop="$plugins_footer.text"} 3 <div id="footer" class="pure-u-20-24">
4 {$value} 4 <strong><a href="https://github.com/shaarli/Shaarli">Shaarli</a></strong> -
5 {/loop} 5 The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community -
6 <a href="doc/Home.html" rel="nofollow">Help/documentation</a>
7 {loop="$plugins_footer.text"}
8 {$value}
9 {/loop}
10 </div>
11 <div class="pure-u-2-24"></div>
6</div> 12</div>
7
8{loop="$plugins_footer.endofpage"} 13{loop="$plugins_footer.endofpage"}
9 {$value} 14 {$value}
10{/loop} 15{/loop}
11 16
12{if="$newVersion"}
13<div id="newversion">
14 <span id="version_id">&#x25CF;</span> Shaarli {$newVersion} is
15 <a href="https://github.com/shaarli/Shaarli/releases">available</a>.
16</div>
17{/if}
18{if="$versionError"}
19<div id="newversion">
20 Error: {$versionError}
21</div>
22{/if}
23{if="isLoggedIn()"}
24<script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
25{/if}
26
27{loop="$plugins_footer.js_files"} 17{loop="$plugins_footer.js_files"}
28 <script src="{$value}#"></script> 18 <script src="{$value}#"></script>
29{/loop} 19{/loop}
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 7a67fb2a..e6cf5aff 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -63,11 +63,21 @@
63 </li> 63 </li>
64 {/if} 64 {/if}
65 </ul> 65 </ul>
66 <div class="pure-u-lg-1-12 pure-u-sm-0 pure-u-lg-visible"> 66 <div class="header-buttons pure-u-lg-1-12 pure-u-sm-0 pure-u-lg-visible">
67 <!--<i class="fa fa-user"></i>--> 67 <ul class="pure-menu-list">
68 <a href="?do=atom{$searchcrits}" class="pure-menu-link"> 68 {if="!isLoggedIn()"}
69 <i class="fa fa-rss"></i> 69 <li class="pure-menu-item">
70 </a> 70 <a href="?do=login" class="pure-menu-link" id="login-button">
71 <i class="fa fa-user"></i>
72 </a>
73 </li>
74 {/if}
75 <li class="pure-menu-item">
76 <a href="?do=atom{$searchcrits}" class="pure-menu-link">
77 <i class="fa fa-rss"></i>
78 </a>
79 </li>
80 </ul>
71 </div> 81 </div>
72 </div> 82 </div>
73 </div> 83 </div>
@@ -106,6 +116,31 @@
106</div> 116</div>
107 117
108<div id="content"> 118<div id="content">
119 <div id="header-login-form">
120 <input type="text" name="login" placeholder="Username">
121 <input type="password" name="password" placeholder="Password">
122 <input type="submit" value="Login">
123 </div>
124
125{if="!empty($newVersion) || !empty($versionError)"}
126 <div class="pure-g new-version-message pure-alert pure-alert-warning pure-alert-closable">
127 <div class="pure-u-2-24"></div>
128 {if="$newVersion"}
129 <div class="pure-u-20-24">
130 Shaarli {$newVersion} is
131 <a href="https://github.com/shaarli/Shaarli/releases">available</a>.
132 </div>
133 {/if}
134 {if="$versionError"}
135 <div class="pure-u-20-24">
136 Error: {$versionError}
137 </div>
138 {/if}
139 <div class="pure-u-2-24">
140 <i id="new-version-dismiss" class="fa fa-times pure-alert-close"></i>
141 </div>
142 </div>
143{/if}
109 144
110 145
111{if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"} 146{if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}