From: ArthurHoaro Date: Mon, 9 May 2016 22:44:17 +0000 (+0200) Subject: Login page and header login X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=f26d4d56f99e2be9fa2ad4598a7b55ce0e9dcfdf;p=github%2Fshaarli%2FShaarli.git Login page and header login Note: the header login isn't functional --- 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 00000000..ed3bd158 Binary files /dev/null and b/tpl/default/img/sad_star.png 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) { * 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)"}