From f26d4d56f99e2be9fa2ad4598a7b55ce0e9dcfdf Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Tue, 10 May 2016 00:44:17 +0200 Subject: [PATCH] Login page and header login Note: the header login isn't functional --- COPYING | 4 ++ tpl/default/404.html | 17 +++++ tpl/default/css/shaarli.css | 130 +++++++++++++++++++++++++++++++---- tpl/default/img/sad_star.png | Bin 0 -> 7099 bytes tpl/default/js/shaarli.js | 14 ++-- tpl/default/linklist.html | 4 +- tpl/default/loginform.html | 55 +++++++++++++++ tpl/default/page.header.html | 34 ++++++--- 8 files changed, 230 insertions(+), 28 deletions(-) create mode 100644 tpl/default/404.html create mode 100644 tpl/default/img/sad_star.png create mode 100644 tpl/default/loginform.html diff --git a/COPYING b/COPYING index 28939100..d8241e50 100644 --- a/COPYING +++ b/COPYING @@ -76,6 +76,10 @@ Files: plugins/markdown/Parsedown.php License: MIT License (http://opensource.org/licenses/MIT) Copyright: (C) 2015 Emanuil Rusev - https://github.com/erusev/parsedown +Files: tpl/default/img/sad_star.png +License: MIT License (http://opensource.org/licenses/MIT) +Copyright: (C) 2015 kalvn - https://github.com/kalvn/Shaarli-Material + ---------------------------------------------------- ZLIB/LIBPNG LICENSE 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 @@ + + + + {include="includes"} + + +

+ {include="page.header"} +

Sorry, nothing to see here.

{$error_message}

+{include="page.footer"} + + 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 { clear: both; } +.center { + text-align: center; +} + .label { display: inline-block; padding: .25em .4em; @@ -63,6 +67,10 @@ pre { .pure-u-xl-visible { display: inline-block !important; } } +.pure-g [class*="pure-u"]{ + font-family: Roboto Slab, Arial, sans-serif; +} + /** * Make pure-extras alert closable. */ @@ -242,15 +250,20 @@ pre { } #header-login-form { - display: none; - height: 30px; - padding: 5px 0; + height: 0; text-align: center; background: #1b926c; + transition: 0.3s; +} + +#header-login-form.open { + display: block; + height: 30px; + padding: 5px 0; box-shadow: 0 1px 1px 1px #797979; } -#header-login-form input[type="text"], #header-login-form input[type="password"] { +#header-login-form input[type="text"], #header-login-form input[type="password"], #header-login-form .remember-me { margin: 0 0 5px 0; padding: 5px 5px 3px 15px; height: 20px; @@ -269,6 +282,17 @@ pre { color: #b0ddce; } +#header-login-form .remember-me { + display: inline-block; + width: auto; + padding: 5px 20px 3px 20px; + cursor: pointer; +} + +#header-login-form .remember-me label, #header-login-form .remember-me input { + cursor: pointer; +} + #header-login-form input[type="submit"] { display: inline-block; margin: 0 0 5px 0; @@ -281,6 +305,17 @@ pre { color: #b0ddce; } +#header-login-form input, #header-login-form .remember-me { + transition: visibility 1s, opacity 1s; + visibility: hidden; + opacity: 0; +} + +#header-login-form.open input, #header-login-form.open .remember-me { + visibility: visible; + opacity: 1; +} + .new-version-message { text-align: center; } @@ -295,30 +330,31 @@ pre { */ #content { position: relative; - /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */ - margin-top: -4px; /* Hack-ish way to only shadow the top part. */ box-shadow: 0 -20px 20px -20px #797979; z-index: 2; background: url(../img/noise.png) #979797; } -/** - * CONTENT - LINKLIST PAGING - * 64em -> lg - */ @media screen and (max-width: 64em) { - .linklist-paging { + #content { margin: 2.1em 0 0 0; } } @media screen and (min-width: 64em) { - .linklist-paging { - margin: 0; + #content { + /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */ + margin-top: -4px; } } +/** + * CONTENT - LINKLIST PAGING + * 64em -> lg + */ + + .linklist-filters { margin: 10px 0; color: #252525; @@ -399,6 +435,7 @@ pre { .linklist-item-title, .linklist-item-title h2 { margin: 0; + word-wrap: break-word; } .linklist-item-title { @@ -451,6 +488,7 @@ pre { .linklist-item-description { padding: 10px; font-family: Roboto Slab, Arial, sans-serif; + word-wrap: break-word; } .linklist-item-description a { @@ -548,7 +586,73 @@ pre { #footer a { color: #252525; } + /** + * Login page + */ +#login-form { + margin: 20px 0 0 0; + background: url(../img/noise.png) #1fa67a; + border-radius: 5px; + box-shadow: 1px 1px 2px #797979; +} + +#login-form h2 { + margin: 0 0 10px 0; + padding: 10px 0; + width: 100%; + color: #b0ddce; + background: #1b926c; + text-align: center; + border-radius: 5px 5px 0 0; + border-bottom: 1px solid #797979; +} + +#login-form div { + width: 100%; + text-align: center; +} + +#login-form input[type="text"], #login-form input[type="password"] { + margin: 10px 0; + padding: 5px 5px 3px 15px; + height: 30px; + width: 80%; + background: #1b926c; + border: medium none currentColor; + border-radius: 25px; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; + color: #b0ddce; +} + +/* because chrome */ +#login-form input[type="text"]::-webkit-input-placeholder, +#login-form input[type="password"]::-webkit-input-placeholder { + color: #b0ddce; +} + +#login-form .remember-me { + margin: 5px 0; + color: #b0ddce; + font-weight: bold; +} + +#login-form input[type="submit"] { + margin: 10px 0; + height: 35px; + width: 150px; + background: #1b926c; + border: medium none currentColor; + border-radius: 25px; + box-shadow: 1px 1px 4px #0C7653, -1px -1px 6px #0C7653, -1px 1px 6px #0C7653, 1px -1px 6px #0C7653; + font-size: 1.2em; + font-weight: bold; + color: #b0ddce; +} + +#page404 { + color: #3f3f3f; +}/** * CONTENT - LINKLIST ITEMS */ .linklist-item { diff --git a/tpl/default/img/sad_star.png b/tpl/default/img/sad_star.png new file mode 100644 index 0000000000000000000000000000000000000000..ed3bd158bb897e916c5cf25c085e4f28996e39e9 GIT binary patch literal 7099 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 literal 0 HcmV?d00001 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) { * Login button */ var loginButton = document.getElementById('login-button'); +var loginBlock = document.getElementById('header-login-form'); + loginButton.addEventListener('click', function(event) { event.preventDefault(); - var loginBlock = document.getElementById('header-login-form'); - loginBlock.style.display = 'block'; loginBlock.classList.toggle('open'); - // Focus on login field. - loginBlock.firstElementChild.focus(); document.getElementById('content').style.boxShadow = 'none'; }); + +// Focus on login field. +loginBlock.addEventListener('transitionend', function() { + loginBlock.firstElementChild.focus(); +}); + +var hiddenReturnurl = document.getElementsByName('returnurl'); +hiddenReturnurl.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 @@ {/if}

{if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"} @@ -111,7 +111,7 @@ {if="$link_plugin_counter - 1 != $counter"}·{/if} {/loop}

{$value.url} 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 @@ + + + + {include="includes"} + + +{include="page.header"} +{if="!ban_canLogin()"} +

+ You have been banned after too many failed login attempts. Try again later. +

+ +

+{else} +

+ +

+ +{/if} + + +

+ +{include="page.footer"} + + + + 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 @@

- +
+ + + +
- +

- + {if="!empty($newVersion) || !empty($versionError)"}

-- 2.41.0