aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2016-05-10 00:44:17 +0200
committerArthurHoaro <arthur@hoa.ro>2016-08-07 12:17:36 +0200
commitf26d4d56f99e2be9fa2ad4598a7b55ce0e9dcfdf (patch)
tree6ebe0c8e6fd4fef3868253c5fec36573cd9dd4d1 /tpl/default
parent735bda920c2a696bbe2e6e8bc0f608c97ac9cdf4 (diff)
downloadShaarli-f26d4d56f99e2be9fa2ad4598a7b55ce0e9dcfdf.tar.gz
Shaarli-f26d4d56f99e2be9fa2ad4598a7b55ce0e9dcfdf.tar.zst
Shaarli-f26d4d56f99e2be9fa2ad4598a7b55ce0e9dcfdf.zip
Login page and header login
Note: the header login isn't functional
Diffstat (limited to 'tpl/default')
-rw-r--r--tpl/default/404.html17
-rw-r--r--tpl/default/css/shaarli.css130
-rw-r--r--tpl/default/img/sad_star.pngbin0 -> 7099 bytes
-rw-r--r--tpl/default/js/shaarli.js14
-rw-r--r--tpl/default/linklist.html4
-rw-r--r--tpl/default/loginform.html55
-rw-r--r--tpl/default/page.header.html34
7 files changed, 226 insertions, 28 deletions
diff --git a/tpl/default/404.html b/tpl/default/404.html
new file mode 100644
index 00000000..a9738160
--- /dev/null
+++ b/tpl/default/404.html
@@ -0,0 +1,17 @@
1<!DOCTYPE html>
2<html>
3<head>
4 {include="includes"}
5</head>
6<body>
7<div id="pageheader">
8 {include="page.header"}
9</div>
10<div class="center" id="page404">
11 <h2>Sorry, nothing to see here.</h2>
12 <img src="img/sad_star.png">
13 <p>{$error_message}</p>
14</div>
15{include="page.footer"}
16</body>
17</html>
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 9a075574..14fddc4b 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -13,6 +13,10 @@ body {
13 clear: both; 13 clear: both;
14} 14}
15 15
16.center {
17 text-align: center;
18}
19
16.label { 20.label {
17 display: inline-block; 21 display: inline-block;
18 padding: .25em .4em; 22 padding: .25em .4em;
@@ -63,6 +67,10 @@ pre {
63 .pure-u-xl-visible { display: inline-block !important; } 67 .pure-u-xl-visible { display: inline-block !important; }
64} 68}
65 69
70.pure-g [class*="pure-u"]{
71 font-family: Roboto Slab, Arial, sans-serif;
72}
73
66/** 74/**
67 * Make pure-extras alert closable. 75 * Make pure-extras alert closable.
68 */ 76 */
@@ -242,15 +250,20 @@ pre {
242} 250}
243 251
244#header-login-form { 252#header-login-form {
245 display: none; 253 height: 0;
246 height: 30px;
247 padding: 5px 0;
248 text-align: center; 254 text-align: center;
249 background: #1b926c; 255 background: #1b926c;
256 transition: 0.3s;
257}
258
259#header-login-form.open {
260 display: block;
261 height: 30px;
262 padding: 5px 0;
250 box-shadow: 0 1px 1px 1px #797979; 263 box-shadow: 0 1px 1px 1px #797979;
251} 264}
252 265
253#header-login-form input[type="text"], #header-login-form input[type="password"] { 266#header-login-form input[type="text"], #header-login-form input[type="password"], #header-login-form .remember-me {
254 margin: 0 0 5px 0; 267 margin: 0 0 5px 0;
255 padding: 5px 5px 3px 15px; 268 padding: 5px 5px 3px 15px;
256 height: 20px; 269 height: 20px;
@@ -269,6 +282,17 @@ pre {
269 color: #b0ddce; 282 color: #b0ddce;
270} 283}
271 284
285#header-login-form .remember-me {
286 display: inline-block;
287 width: auto;
288 padding: 5px 20px 3px 20px;
289 cursor: pointer;
290}
291
292#header-login-form .remember-me label, #header-login-form .remember-me input {
293 cursor: pointer;
294}
295
272#header-login-form input[type="submit"] { 296#header-login-form input[type="submit"] {
273 display: inline-block; 297 display: inline-block;
274 margin: 0 0 5px 0; 298 margin: 0 0 5px 0;
@@ -281,6 +305,17 @@ pre {
281 color: #b0ddce; 305 color: #b0ddce;
282} 306}
283 307
308#header-login-form input, #header-login-form .remember-me {
309 transition: visibility 1s, opacity 1s;
310 visibility: hidden;
311 opacity: 0;
312}
313
314#header-login-form.open input, #header-login-form.open .remember-me {
315 visibility: visible;
316 opacity: 1;
317}
318
284.new-version-message { 319.new-version-message {
285 text-align: center; 320 text-align: center;
286} 321}
@@ -295,30 +330,31 @@ pre {
295 */ 330 */
296#content { 331#content {
297 position: relative; 332 position: relative;
298 /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
299 margin-top: -4px;
300 /* Hack-ish way to only shadow the top part. */ 333 /* Hack-ish way to only shadow the top part. */
301 box-shadow: 0 -20px 20px -20px #797979; 334 box-shadow: 0 -20px 20px -20px #797979;
302 z-index: 2; 335 z-index: 2;
303 background: url(../img/noise.png) #979797; 336 background: url(../img/noise.png) #979797;
304} 337}
305 338
306/**
307 * CONTENT - LINKLIST PAGING
308 * 64em -> lg
309 */
310@media screen and (max-width: 64em) { 339@media screen and (max-width: 64em) {
311 .linklist-paging { 340 #content {
312 margin: 2.1em 0 0 0; 341 margin: 2.1em 0 0 0;
313 } 342 }
314} 343}
315 344
316@media screen and (min-width: 64em) { 345@media screen and (min-width: 64em) {
317 .linklist-paging { 346 #content {
318 margin: 0; 347 /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
348 margin-top: -4px;
319 } 349 }
320} 350}
321 351
352/**
353 * CONTENT - LINKLIST PAGING
354 * 64em -> lg
355 */
356
357
322.linklist-filters { 358.linklist-filters {
323 margin: 10px 0; 359 margin: 10px 0;
324 color: #252525; 360 color: #252525;
@@ -399,6 +435,7 @@ pre {
399 435
400.linklist-item-title, .linklist-item-title h2 { 436.linklist-item-title, .linklist-item-title h2 {
401 margin: 0; 437 margin: 0;
438 word-wrap: break-word;
402} 439}
403 440
404.linklist-item-title { 441.linklist-item-title {
@@ -451,6 +488,7 @@ pre {
451.linklist-item-description { 488.linklist-item-description {
452 padding: 10px; 489 padding: 10px;
453 font-family: Roboto Slab, Arial, sans-serif; 490 font-family: Roboto Slab, Arial, sans-serif;
491 word-wrap: break-word;
454} 492}
455 493
456.linklist-item-description a { 494.linklist-item-description a {
@@ -548,7 +586,73 @@ pre {
548#footer a { 586#footer a {
549 color: #252525; 587 color: #252525;
550} 588}
589
551/** 590/**
591 * Login page
592 */
593#login-form {
594 margin: 20px 0 0 0;
595 background: url(../img/noise.png) #1fa67a;
596 border-radius: 5px;
597 box-shadow: 1px 1px 2px #797979;
598}
599
600#login-form h2 {
601 margin: 0 0 10px 0;
602 padding: 10px 0;
603 width: 100%;
604 color: #b0ddce;
605 background: #1b926c;
606 text-align: center;
607 border-radius: 5px 5px 0 0;
608 border-bottom: 1px solid #797979;
609}
610
611#login-form div {
612 width: 100%;
613 text-align: center;
614}
615
616#login-form input[type="text"], #login-form input[type="password"] {
617 margin: 10px 0;
618 padding: 5px 5px 3px 15px;
619 height: 30px;
620 width: 80%;
621 background: #1b926c;
622 border: medium none currentColor;
623 border-radius: 25px;
624 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
625 color: #b0ddce;
626}
627
628/* because chrome */
629#login-form input[type="text"]::-webkit-input-placeholder,
630#login-form input[type="password"]::-webkit-input-placeholder {
631 color: #b0ddce;
632}
633
634#login-form .remember-me {
635 margin: 5px 0;
636 color: #b0ddce;
637 font-weight: bold;
638}
639
640#login-form input[type="submit"] {
641 margin: 10px 0;
642 height: 35px;
643 width: 150px;
644 background: #1b926c;
645 border: medium none currentColor;
646 border-radius: 25px;
647 box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653;
648 font-size: 1.2em;
649 font-weight: bold;
650 color: #b0ddce;
651}
652
653#page404 {
654 color: #3f3f3f;
655}/**
552 * CONTENT - LINKLIST ITEMS 656 * CONTENT - LINKLIST ITEMS
553 */ 657 */
554.linklist-item { 658.linklist-item {
diff --git a/tpl/default/img/sad_star.png b/tpl/default/img/sad_star.png
new file mode 100644
index 00000000..ed3bd158
--- /dev/null
+++ b/tpl/default/img/sad_star.png
Binary files differ
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 8e541998..f24aff73 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -144,12 +144,18 @@ if (newVersionDismiss != null) {
144 * Login button 144 * Login button
145 */ 145 */
146var loginButton = document.getElementById('login-button'); 146var loginButton = document.getElementById('login-button');
147var loginBlock = document.getElementById('header-login-form');
148
147loginButton.addEventListener('click', function(event) { 149loginButton.addEventListener('click', function(event) {
148 event.preventDefault(); 150 event.preventDefault();
149 var loginBlock = document.getElementById('header-login-form');
150 loginBlock.style.display = 'block';
151 loginBlock.classList.toggle('open'); 151 loginBlock.classList.toggle('open');
152 // Focus on login field.
153 loginBlock.firstElementChild.focus();
154 document.getElementById('content').style.boxShadow = 'none'; 152 document.getElementById('content').style.boxShadow = 'none';
155}); 153});
154
155// Focus on login field.
156loginBlock.addEventListener('transitionend', function() {
157 loginBlock.firstElementChild.focus();
158});
159
160var hiddenReturnurl = document.getElementsByName('returnurl');
161hiddenReturnurl.value = window.location.href; \ No newline at end of file
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 964cc400..4a0f44c6 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -94,7 +94,7 @@
94 {/if} 94 {/if}
95 95
96 <div class="pure-g"> 96 <div class="pure-g">
97 <div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-sm-1"> 97 <div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-1">
98 <a href="?{$value.shorturl}" title="Permalink"> 98 <a href="?{$value.shorturl}" title="Permalink">
99 {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"} 99 {if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"}
100 <span class="linkdate"> 100 <span class="linkdate">
@@ -111,7 +111,7 @@
111 {if="$link_plugin_counter - 1 != $counter"}&middot;{/if} 111 {if="$link_plugin_counter - 1 != $counter"}&middot;{/if}
112 {/loop} 112 {/loop}
113 </div> 113 </div>
114 <div class="linklist-item-infos-url pure-u-lg-5-8 pure-u-sm-1"> 114 <div class="linklist-item-infos-url pure-u-lg-5-8 pure-u-1">
115 <a href="{$value.real_url}" title="{$value.title}"> 115 <a href="{$value.real_url}" title="{$value.title}">
116 <i class="fa fa-link"></i> {$value.url} 116 <i class="fa fa-link"></i> {$value.url}
117 </a> 117 </a>
diff --git a/tpl/default/loginform.html b/tpl/default/loginform.html
new file mode 100644
index 00000000..0ee96153
--- /dev/null
+++ b/tpl/default/loginform.html
@@ -0,0 +1,55 @@
1<!DOCTYPE html>
2<html>
3<head>
4 {include="includes"}
5</head>
6<body>
7{include="page.header"}
8{if="!ban_canLogin()"}
9<div class="pure-g pure-alert pure-alert-error pure-alert-closable center">
10 <div class="pure-u-2-24"></div>
11 <div class="pure-u-20-24">
12 You have been banned after too many failed login attempts. Try again later.
13 </div>
14 <div class="pure-u-2-24">
15 <i class="fa fa-times pure-alert-close"></i>
16 </div>
17</div>
18{else}
19 <div class="pure-g">
20 <div class="pure-u-lg-1-3 pure-u-1-8"></div>
21 <div id="login-form" class="pure-u-lg-1-3 pure-u-3-4">
22 <form method="post" name="loginform">
23 <h2>Login</h2>
24 <div>
25 <input type="text" name="login" placeholder="Username" tabindex="3">
26 </div>
27 <div>
28 <input type="password" name="password" placeholder="Password" tabindex="4">
29 </div>
30 <div class="remember-me">
31 <input type="checkbox" name="longlastingsession" id="longlastingsession" tabindex="5">
32 <label for="longlastingsession">Remember me</label>
33 </div>
34 <div>
35 <input type="submit" value="Login" class="bigbutton" tabindex="6">
36 </div>
37 <input type="hidden" name="token" value="{$token}">
38 {if="$returnurl"}<input type="hidden" name="returnurl" value="{$returnurl}">{/if}
39 </form>
40 </div>
41 <div class="pure-u-lg-1-3 pure-u-1-8"></div>
42 </div>
43
44{/if}
45
46
47</div>
48
49{include="page.footer"}
50<script>
51 document.getElementsByName('login')[1].focus();
52</script>
53</body>
54</html>
55
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index e6cf5aff..e368d00d 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -12,7 +12,7 @@
12 </div> 12 </div>
13 <div class="pure-u-1"> 13 <div class="pure-u-1">
14 <div class="pure-menu menu-transform pure-menu-horizontal pure-g"> 14 <div class="pure-menu menu-transform pure-menu-horizontal pure-g">
15 <ul class="pure-menu-list pure-u-lg-11-12 pure-u-sm-1"> 15 <ul class="pure-menu-list pure-u-lg-11-12 pure-u-1">
16 <li class="pure-menu-item pure-menu-selected pure-u-0 pure-u-lg-visible"> 16 <li class="pure-menu-item pure-menu-selected pure-u-0 pure-u-lg-visible">
17 <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}" 17 <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}"
18 class="pure-menu-link"> 18 class="pure-menu-link">
@@ -63,17 +63,23 @@
63 </li> 63 </li>
64 {/if} 64 {/if}
65 </ul> 65 </ul>
66 <div class="header-buttons 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-0 pure-u-lg-visible">
67 <ul class="pure-menu-list"> 67 <ul class="pure-menu-list">
68 {if="!isLoggedIn()"} 68 {if="!isLoggedIn()"}
69 <li class="pure-menu-item"> 69 <li class="pure-menu-item">
70 <a href="?do=login" class="pure-menu-link" id="login-button"> 70 <a href="?do=login" class="pure-menu-link" id="login-button" title="Login">
71 <i class="fa fa-user"></i> 71 <i class="fa fa-user"></i>
72 </a> 72 </a>
73 </li> 73 </li>
74 {else}
75 <li class="pure-menu-item">
76 <a href="?do=logout" class="pure-menu-link" title="Logout">
77 <i class="fa fa-sign-out"></i>
78 </a>
79 </li>
74 {/if} 80 {/if}
75 <li class="pure-menu-item"> 81 <li class="pure-menu-item">
76 <a href="?do=atom{$searchcrits}" class="pure-menu-link"> 82 <a href="?do=atom{$searchcrits}" class="pure-menu-link" title="ATOM Feed">
77 <i class="fa fa-rss"></i> 83 <i class="fa fa-rss"></i>
78 </a> 84 </a>
79 </li> 85 </li>
@@ -99,6 +105,7 @@
99 {if="!empty($search_crits) && $search_type=='fulltext'"} 105 {if="!empty($search_crits) && $search_type=='fulltext'"}
100 value="{$search_crits}" 106 value="{$search_crits}"
101 {/if} 107 {/if}
108 tabindex="1"
102 > 109 >
103 <button type="submit" class="search-button"><i class="fa fa-search"></i></button> 110 <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
104 </form> 111 </form>
@@ -109,6 +116,7 @@
109 {/if} 116 {/if}
110 autocomplete="off" data-multiple data-minChars="1" 117 autocomplete="off" data-multiple data-minChars="1"
111 data-list="{loop="$tags"}{$key}, {/loop}" 118 data-list="{loop="$tags"}{$key}, {/loop}"
119 tabindex="2"
112 > 120 >
113 <button type="submit" class="search-button"><i class="fa fa-search"></i></button> 121 <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
114 </form> 122 </form>
@@ -116,11 +124,19 @@
116</div> 124</div>
117 125
118<div id="content"> 126<div id="content">
119 <div id="header-login-form"> 127 <form method="post" name="loginform">
120 <input type="text" name="login" placeholder="Username"> 128 <div id="header-login-form">
121 <input type="password" name="password" placeholder="Password"> 129 <input type="text" name="login" placeholder="Username" tabindex="3">
122 <input type="submit" value="Login"> 130 <input type="password" name="password" placeholder="Password" tabindex="5">
123 </div> 131 <div class="remember-me">
132 <input type="checkbox" name="longlastingsession" id="longlastingsession" tabindex="6">
133 <label for="longlastingsession">Remember me</label>
134 </div>
135 <input type="hidden" name="token" value="{$token}">
136 <input type="hidden" name="returnurl">
137 <input type="submit" value="Login" tabindex="7">
138 </div>
139 </form>
124 140
125{if="!empty($newVersion) || !empty($versionError)"} 141{if="!empty($newVersion) || !empty($versionError)"}
126 <div class="pure-g new-version-message pure-alert pure-alert-warning pure-alert-closable"> 142 <div class="pure-g new-version-message pure-alert pure-alert-warning pure-alert-closable">
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-05 20:42:10 +0000