aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2017-02-21 14:16:48 +0100
committerArthurHoaro <arthur@hoa.ro>2017-02-27 20:01:54 +0100
commit7040169069322d72cec4276b7b812291b57a0d40 (patch)
treed038b8d560873852c2cbf0ef147ed71543b255a6 /tpl/default
parent430ff0710265ff281727ef6824cf292d1dfc50f1 (diff)
downloadShaarli-7040169069322d72cec4276b7b812291b57a0d40.tar.gz
Shaarli-7040169069322d72cec4276b7b812291b57a0d40.tar.zst
Shaarli-7040169069322d72cec4276b7b812291b57a0d40.zip
Multiple minor improvements and bugfixes regarding the new templates:
* Add API settings in `configure.html` * Fix textarea autoresize * Load user.css from data folder * Move fold/expand all button to the right and fix an issue with already folded items * Reset datetime display to international datetime * Temporarilly remove JS login panel (need improvement and integration with the plugin system) * Body background is slightly lighter * Fix an issue where thumbnails were hidden by description * Fix an issue where private orange bar wasn't displayed with thumbnails * Remove the gradient bar behind titles * Fix empty bookmarklet name in Firefox
Diffstat (limited to 'tpl/default')
-rw-r--r--tpl/default/configure.html30
-rw-r--r--tpl/default/css/shaarli.css68
-rw-r--r--tpl/default/editlink.html15
-rw-r--r--tpl/default/includes.html2
-rw-r--r--tpl/default/js/shaarli.js34
-rw-r--r--tpl/default/linklist.html2
-rw-r--r--tpl/default/linklist.paging.html5
-rw-r--r--tpl/default/page.header.html2
8 files changed, 116 insertions, 42 deletions
diff --git a/tpl/default/configure.html b/tpl/default/configure.html
index a2425601..2f54a085 100644
--- a/tpl/default/configure.html
+++ b/tpl/default/configure.html
@@ -183,6 +183,36 @@
183 </div> 183 </div>
184 </div> 184 </div>
185 </div> 185 </div>
186 <div class="pure-g">
187 <div class="pure-u-lg-{$ratioLabel} pure-u-{$ratioLabelMobile}">
188 <div class="form-label">
189 <label for="apiEnabled">
190 <span class="label-name">{'Enable REST API'|t}</span><br>
191 <span class="label-desc">{'Allow third party software to use Shaarli such as mobile application'|t}</span>
192 </label>
193 </div>
194 </div>
195 <div class="pure-u-lg-{$ratioInput} pure-u-{$ratioInputMobile}">
196 <div class="form-input">
197 <input type="checkbox" name="apiEnabled" id="apiEnabled"
198 {if="$api_enabled"}checked{/if}/>
199 </div>
200 </div>
201 </div>
202 <div class="pure-g">
203 <div class="pure-u-lg-{$ratioLabel} pure-u-1">
204 <div class="form-label">
205 <label for="apiSecret">
206 <span class="label-name">{'API secret'|t}</span><br>
207 </label>
208 </div>
209 </div>
210 <div class="pure-u-lg-{$ratioLabel} pure-u-1">
211 <div class="form-input">
212 <input type="text" name="apiSecret" id="apiSecret" size="50" value="{$api_secret}">
213 </div>
214 </div>
215 </div>
186 <div class="center"> 216 <div class="center">
187 <input type="submit" value="{'Save'|t}" name="save"> 217 <input type="submit" value="{'Save'|t}" name="save">
188 </div> 218 </div>
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 161c36d6..b937c596 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: #c5c5c5; 5 background: #d0d0d0;
6} 6}
7 7
8.strong { 8.strong {
@@ -268,6 +268,12 @@ pre {
268 width: 200px; 268 width: 200px;
269} 269}
270 270
271/* because chrome */
272#header-login-form input[type="text"]::-webkit-input-placeholder,
273#header-login-form input[type="password"]::-webkit-input-placeholder {
274 color: #777777;
275}
276
271.subheader-form { 277.subheader-form {
272 visibility: hidden; 278 visibility: hidden;
273 position: fixed; 279 position: fixed;
@@ -384,6 +390,10 @@ pre {
384 color: #252525; 390 color: #252525;
385} 391}
386 392
393.toolbar-plugin input[type="submit"]:hover {
394 background: #fff;
395}
396
387@media screen and (max-width: 64em) { 397@media screen and (max-width: 64em) {
388 .toolbar-plugin input[type="text"] { 398 .toolbar-plugin input[type="text"] {
389 width: 70%; 399 width: 70%;
@@ -484,19 +494,6 @@ pre {
484 background: #f5f5f5; 494 background: #f5f5f5;
485} 495}
486 496
487.linklist-item.private .linklist-item-title::before {
488 position: absolute;
489 left: 3px;
490 top: 0;
491 display: block;
492 content:"";
493 background: #F89406;
494 height: 95%;
495 width: 2px;
496 margin-top: 3px;
497 z-index: 1;
498}
499
500.linklist-item-title h2 { 497.linklist-item-title h2 {
501 padding: 3px 10px 0 10px; 498 padding: 3px 10px 0 10px;
502 line-height: 30px; 499 line-height: 30px;
@@ -563,14 +560,13 @@ pre {
563.linklist-item-description { 560.linklist-item-description {
564 position: relative; 561 position: relative;
565 padding: 10px; 562 padding: 10px;
566 background: #f5f5f5;
567 font-family: Roboto Slab, Arial, sans-serif; 563 font-family: Roboto Slab, Arial, sans-serif;
568 word-wrap: break-word; 564 word-wrap: break-word;
569 color: #252525; 565 color: #252525;
570 line-height: 1.3em; 566 line-height: 1.3em;
571} 567}
572 568
573.linklist-item.private .linklist-item-description::before { 569 {
574 position: absolute; 570 position: absolute;
575 left: 3px; 571 left: 3px;
576 top: 0; 572 top: 0;
@@ -596,9 +592,29 @@ pre {
596} 592}
597 593
598.linklist-item-thumbnail { 594.linklist-item-thumbnail {
595 position: relative;
599 margin-top: 10px; 596 margin-top: 10px;
600 padding: 10px; 597 padding: 10px;
601 float: left; 598 float: left;
599 z-index: 50;
600}
601
602.linklist-item.private .linklist-item-title::before,
603.linklist-item.private .linklist-item-description::before,
604.linklist-item.private .linklist-item-thumbnail::before {
605 position: absolute;
606 left: 3px;
607 top: 0;
608 display: block;
609 content:"";
610 background: #F89406;
611 height: 95%;
612 width: 2px;
613 z-index: 1;
614}
615
616.linklist-item.private .linklist-item-title::before {
617 margin-top: 3px;
602} 618}
603 619
604.linklist-item-infos { 620.linklist-item-infos {
@@ -702,15 +718,6 @@ pre {
702 text-align: center; 718 text-align: center;
703} 719}
704 720
705.page-form .window-title:after {
706 display: block;
707 content:"";
708 background: linear-gradient(to right, #f5f5f5, #1b926c, #f5f5f5);
709 height: 1px;
710 width: 80%;
711 margin: auto;
712}
713
714.page-form .window-subtitle { 721.page-form .window-subtitle {
715 text-align: center; 722 text-align: center;
716} 723}
@@ -740,7 +747,7 @@ pre {
740} 747}
741 748
742.page-form textarea { 749.page-form textarea {
743 height: 240px; 750 min-height: 240px;
744 padding: 15px 5px 3px 15px; 751 padding: 15px 5px 3px 15px;
745 resize: vertical; 752 resize: vertical;
746 overflow-y: auto; 753 overflow-y: auto;
@@ -1163,7 +1170,7 @@ div.awesomplete > ul {
1163 1170
1164.daily-entry-thumbnail { 1171.daily-entry-thumbnail {
1165 float: left; 1172 float: left;
1166 margin: 15px 5px 5px 5px; 1173 margin: 15px 5px 5px 15px;
1167} 1174}
1168 1175
1169.daily-entry-description a { 1176.daily-entry-description a {
@@ -1178,3 +1185,10 @@ div.awesomplete > ul {
1178.daily-entry-description a:visited { 1185.daily-entry-description a:visited {
1179 color: #20b988; 1186 color: #20b988;
1180} 1187}
1188
1189/*
1190 * Fix empty bookmarklet name in Firefox
1191 */
1192.pure-button {
1193 -moz-user-select: auto;
1194}
diff --git a/tpl/default/editlink.html b/tpl/default/editlink.html
index 4f10ffb2..d6f81f96 100644
--- a/tpl/default/editlink.html
+++ b/tpl/default/editlink.html
@@ -33,8 +33,7 @@
33 <label for="lf_description">{'Description'|t}</label> 33 <label for="lf_description">{'Description'|t}</label>
34 </div> 34 </div>
35 <div> 35 <div>
36 <textarea name="lf_description" id="lf_description" onkeyup="textAreaAdjust(this)" 36 <textarea name="lf_description" id="lf_description">{$link.description}</textarea>
37 >{$link.description}</textarea>
38 </div> 37 </div>
39 <div> 38 <div>
40 <label for="lf_tags">{'Tags'|t}</label> 39 <label for="lf_tags">{'Tags'|t}</label>
@@ -46,7 +45,7 @@
46 45
47 <div> 46 <div>
48 <input type="checkbox" name="lf_private" id="lf_private" 47 <input type="checkbox" name="lf_private" id="lf_private"
49 {if="($link_is_new && $default_private_links) || $link.private == true"} 48 {if="($link_is_new && $default_private_links || $link.private == true)"}
50 checked="checked" 49 checked="checked"
51 {/if}> 50 {/if}>
52 &nbsp;<label for="lf_private">{'Private'|t}</label> 51 &nbsp;<label for="lf_private">{'Private'|t}</label>
@@ -62,7 +61,7 @@
62 <div class="submit-buttons center"> 61 <div class="submit-buttons center">
63 <input type="submit" value="{'Save'|t}" name="save_edit" class=""> 62 <input type="submit" value="{'Save'|t}" name="save_edit" class="">
64 {if="!$link_is_new"} 63 {if="!$link_is_new"}
65 <a href="?delete_link&amp;lf_linkdate={$value.id}&amp;token={$token}" 64 <a href="?delete_link&amp;lf_linkdate={$link.id}&amp;token={$token}"
66 title="" name="delete_link" class="button button-red confirm-delete"> 65 title="" name="delete_link" class="button button-red confirm-delete">
67 {'Delete'|t} 66 {'Delete'|t}
68 </a> 67 </a>
@@ -75,7 +74,7 @@
75 {/if} 74 {/if}
76 </form> 75 </form>
77 </div> 76 </div>
78 {if="$source !== 'firefoxsocialapi'"} 77 {if="$source !== 'firefoxsocialapi' && $source !== 'bookmarklet'"}
79 {include="page.footer"} 78 {include="page.footer"}
80 {/if} 79 {/if}
81<script> 80<script>
@@ -87,12 +86,6 @@
87 } else { 86 } else {
88 document.linkform.lf_tags.focus(); 87 document.linkform.lf_tags.focus();
89 } 88 }
90 function textAreaAdjust(el) {
91 el.style.height = (el.scrollHeight > el.clientHeight) ? (el.scrollHeight) + "px" : (el.clientHeight - 18) + "px";
92 }
93 (function (window, document) {
94 textAreaAdjust(document.linkform.lf_description)
95 })(this, this.document);
96</script> 89</script>
97</body> 90</body>
98</html> 91</html>
diff --git a/tpl/default/includes.html b/tpl/default/includes.html
index ca5c4f33..91c6ca3b 100644
--- a/tpl/default/includes.html
+++ b/tpl/default/includes.html
@@ -12,7 +12,7 @@
12<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" /> 12<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
13<link type="text/css" rel="stylesheet" href="css/shaarli.css" /> 13<link type="text/css" rel="stylesheet" href="css/shaarli.css" />
14{if="is_file('inc/user.css')"} 14{if="is_file('inc/user.css')"}
15 <link type="text/css" rel="stylesheet" href="inc/user.css#" /> 15 <link type="text/css" rel="stylesheet" href="data/user.css#" />
16{/if} 16{/if}
17{loop="$plugins_includes.css_files"} 17{loop="$plugins_includes.css_files"}
18 <link type="text/css" rel="stylesheet" href="{$value}#"/> 18 <link type="text/css" rel="stylesheet" href="{$value}#"/>
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index d8464aa4..d47c257f 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -84,7 +84,13 @@ window.onload = function () {
84 [].forEach.call(foldAllButtons, function (foldAllButton) { 84 [].forEach.call(foldAllButtons, function (foldAllButton) {
85 foldAllButton.addEventListener('click', function (event) { 85 foldAllButton.addEventListener('click', function (event) {
86 event.preventDefault(); 86 event.preventDefault();
87 var state = foldAllButton.firstElementChild.getAttribute('class').indexOf('down') != -1 ? 'down' : 'up';
87 [].forEach.call(foldButtons, function (foldButton) { 88 [].forEach.call(foldButtons, function (foldButton) {
89 if (foldButton.firstElementChild.classList.contains('fa-chevron-up') && state == 'down'
90 || foldButton.firstElementChild.classList.contains('fa-chevron-down') && state == 'up'
91 ) {
92 return;
93 }
88 // Retrieve description 94 // Retrieve description
89 var description = null; 95 var description = null;
90 var thumbnail = null; 96 var thumbnail = null;
@@ -225,4 +231,32 @@ window.onload = function () {
225 anchor.style.paddingTop = 0; 231 anchor.style.paddingTop = 0;
226 } 232 }
227 } 233 }
234
235 /**
236 * Text area resizer
237 */
238 var description = document.getElementById('lf_description');
239 var observe = function (element, event, handler) {
240 element.addEventListener(event, handler, false);
241 };
242 function init () {
243 function resize () {
244 description.style.height = 'auto';
245 description.style.height = description.scrollHeight+10+'px';
246 }
247 /* 0-timeout to get the already changed text */
248 function delayedResize () {
249 window.setTimeout(resize, 0);
250 }
251 observe(description, 'change', resize);
252 observe(description, 'cut', delayedResize);
253 observe(description, 'paste', delayedResize);
254 observe(description, 'drop', delayedResize);
255 observe(description, 'keydown', delayedResize);
256
257 resize();
258 }
259 if (description != null) {
260 init();
261 }
228}; 262};
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 639fbe76..a9712704 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -174,7 +174,7 @@
174 {$updated=$value.updated_timestamp ? 'Edited: '. strftime('%c', $value.updated_timestamp) : 'Permalink'} 174 {$updated=$value.updated_timestamp ? 'Edited: '. strftime('%c', $value.updated_timestamp) : 'Permalink'}
175 <span class="linkdate" title="{$updated}"> 175 <span class="linkdate" title="{$updated}">
176 <i class="fa fa-clock-o"></i> 176 <i class="fa fa-clock-o"></i>
177 {function="strftime('%d %B %Y %H:%M', $value.timestamp)"}{if="$value.updated_timestamp"}*{/if} 177 {function="strftime('%c', $value.timestamp)"}{if="$value.updated_timestamp"}*{/if}
178 &middot; 178 &middot;
179 </span> 179 </span>
180 {/if} 180 {/if}
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html
index bc1591e4..d8c1e76e 100644
--- a/tpl/default/linklist.paging.html
+++ b/tpl/default/linklist.paging.html
@@ -10,7 +10,7 @@
10 class={if="$privateonly"}"filter-on"{else}"filter-off"{/if} 10 class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
11 ><i class="fa fa-key"></i></a> 11 ><i class="fa fa-key"></i></a>
12 {/if} 12 {/if}
13 <a href="#" class="filter-off fold-all" title="Fold all"> 13 <a href="#" class="filter-off fold-all pure-u-lg-0" title="Fold all">
14 <i class="fa fa-chevron-up"></i> 14 <i class="fa fa-chevron-up"></i>
15 </a> 15 </a>
16 {loop="$action_plugin"} 16 {loop="$action_plugin"}
@@ -50,6 +50,9 @@
50 <form method="GET" class="pure-u-0 pure-u-lg-visible"> 50 <form method="GET" class="pure-u-0 pure-u-lg-visible">
51 <input type="text" name="linksperpage" placeholder="133"> 51 <input type="text" name="linksperpage" placeholder="133">
52 </form> 52 </form>
53 <a href="#" class="filter-off fold-all pure-u-0 pure-u-lg-visible" title="Fold all">
54 <i class="fa fa-chevron-up"></i>
55 </a>
53 </div> 56 </div>
54 </div> 57 </div>
55</div> \ No newline at end of file 58</div> \ No newline at end of file
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index c304e5d9..b76fc03e 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -76,7 +76,7 @@
76 </li> 76 </li>
77 {if="!isLoggedIn()"} 77 {if="!isLoggedIn()"}
78 <li class="pure-menu-item"> 78 <li class="pure-menu-item">
79 <a href="?do=login" class="pure-menu-link subheader-opener" 79 <a href="?do=login" class="pure-menu-link"
80 data-open-id="header-login-form" 80 data-open-id="header-login-form"
81 id="login-button" title="{'Login'|t}"> 81 id="login-button" title="{'Login'|t}">
82 <i class="fa fa-user"></i> 82 <i class="fa fa-user"></i>