diff options
-rw-r--r-- | plugins/markdown/markdown.css | 2 | ||||
-rw-r--r-- | tpl/default/css/pure-extras.css | 262 | ||||
-rw-r--r-- | tpl/default/css/shaarli.css | 128 | ||||
-rw-r--r-- | tpl/default/includes.html | 1 | ||||
-rw-r--r-- | tpl/default/js/shaarli.js | 58 | ||||
-rw-r--r-- | tpl/default/linklist.html | 15 | ||||
-rw-r--r-- | tpl/default/linklist.paging.html | 91 | ||||
-rw-r--r-- | tpl/default/page.footer.html | 32 | ||||
-rw-r--r-- | tpl/default/page.header.html | 45 |
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 | ||
28 | pre { | ||
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 | */ | ||
105 | var 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 | */ | ||
117 | var 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 | */ | ||
129 | var newVersionDismiss = document.getElementById('new-version-dismiss'); | ||
130 | var newVersionMessage = document.querySelector('.new-version-message'); | ||
131 | if (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 | } | ||
137 | if (newVersionDismiss != null) { | ||
138 | newVersionDismiss.addEventListener('click', function () { | ||
139 | localStorage.setItem('newVersionDismiss', (new Date()).getTime()); | ||
140 | }); | ||
141 | } | ||
142 | |||
143 | /** | ||
144 | * Login button | ||
145 | */ | ||
146 | var loginButton = document.getElementById('login-button'); | ||
147 | loginButton.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}&token={$token}" title="Delete"><i class="fa fa-trash"></i></a> | 50 | <a href="?delete_link={$value.linkdate}&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"}·{/if} | 111 | {if="$link_plugin_counter - 1 != $counter"}·{/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">●</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'"} |