From: ArthurHoaro Date: Sun, 8 May 2016 16:55:55 +0000 (+0200) Subject: Work in progress: linklist, header and footer X-Git-Url: https://git.immae.eu/?a=commitdiff_plain;h=735bda920c2a696bbe2e6e8bc0f608c97ac9cdf4;p=github%2Fshaarli%2FShaarli.git Work in progress: linklist, header and footer --- 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 @@ */ .markdown p{ - margin:0.75em 0; + margin: 0.75em 0; } .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 @@ +/* Images */ +.pure-img-eliptical { + border-radius: 80%; +} +.pure-img-rounded { + border-radius: 3px; +} +.pure-img-bordered { + background-color: #FFFFFF; + border: 1px solid rgba(0, 0, 0, 0.2); + padding: 5px; +} + + +/* Thumbnails */ +.pure-thumbnails li { + text-align: center; + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + *zoom: 1; + vertical-align: top; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + padding: 0.5em; +} +.pure-thumbnails { + list-style: none; + margin: 0; + padding: 0; +} + +.pure-thumbnails a:focus { + outline: 0 none; +} + +.pure-thumb { + display: block; + text-decoration: none; + color: inherit; +} +.pure-thumb img { + max-width: 100%; + margin-right: auto; + margin-left: auto; + vertical-align: middle; /* this will remove a thin line below the image */ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.pure-thumb-bordered { + border: 1px solid rgba(0, 0, 0, 0.2); +} +.pure-thumb .caption { + text-align: left; + display: block; + margin: 0 5px 6px; + +} +.pure-thumb .caption p { + margin: 0.3em 0 0; + font-size: 75%; +} +.pure-thumb .caption .caption-head { + font-weight: bold; + margin-top: 0.3em; +} + +.pure-thumb-eliptical img { + border-radius: 50%; +} +.pure-thumb-rounded img { + border-radius: 3px; +} + +/* Badges/Pills */ +.pure-badge, +.pure-badge-error, +.pure-badge-warning, +.pure-badge-success, +.pure-badge-info, +.pure-badge-inverse { + padding: 0.35em 0.9em 0.35em; + background-color: #9D988E; + color: #fff; + display: inline-block; + font-size: 11.844px; + font-weight: bold; + line-height: 1.2em; + vertical-align: baseline; + white-space: nowrap; + border-radius: 20px; + margin: 0.2em; +} +.pure-badge-error { + background-color: #D13C38; +} +.pure-badge-warning { + background-color: #E78C05; +} +.pure-badge-success { + background-color: rgb(83, 180, 79); +} +.pure-badge-info { + background-color: rgb(18, 169, 218); +} +.pure-badge-inverse { + background-color: #4D370C; +} + +/* Alerts */ +.pure-alert { + position: relative; + margin-bottom: 1em; + padding: 1em; + background: #ccc; + border-radius: 3px; +} + +.pure-alert label { + display: inline-block; + *display: inline; + /* IE7 inline-block hack */ + *zoom: 1; + white-space: nowrap; +} + +.pure-alert { + background-color: rgb(209, 235, 238); + color: rgb(102, 131, 145); +} +.pure-alert-error { + background-color: #D13C38; + color: #fff; +} + +.pure-alert-warning { + background-color: rgb(250, 191, 103); + color: rgb(151, 96, 13); +} + +.pure-alert-success { + background-color: rgb(83, 180, 79); + color: #fff; +} + + +/* Contextual Modals */ + +.pure-popover { + position: relative; + width: 300px; + background-color: #f0f1f3; + color: #2f3034; + padding: 15px; + border: 1px solid #bfc0c8; + border-radius: 2px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + box-padding: border-box; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; +} + +.pure-arrow-border, .pure-arrow { + border-style: solid; + border-width: 10px; + height:0; + width:0; + position:absolute; +} + + +/* POPOVER ARROW POSITIONING BOTTOM */ + +.pure-popover.bottom .pure-arrow-border { + border-color: #bfc0c8 transparent transparent transparent; + bottom: -20px; + left: 50%; +} +.pure-popover.bottom .pure-arrow { + border-color: #f0f1f3 transparent transparent transparent; + bottom:-19px; + left: 50%; +} + +/* POPOVER ARROW POSITIONING TOP*/ + +.pure-popover.top .pure-arrow-border { + border-color: transparent transparent #bfc0c8 transparent; + top: -21px; + left: 50%; +} +.pure-popover.top .pure-arrow { + border-color: transparent transparent #f0f1f3 transparent; + top:-20px; + left: 50%; +} + +/* POPOVER ARROW POSITIONING RIGHT*/ + +.pure-popover.right .pure-arrow-border { + border-color: transparent transparent transparent #bfc0c8; + top: 45%; + right: -21px; +} +.pure-popover.right .pure-arrow { + border-color: transparent transparent transparent #f0f1f3; + top:45%; + right: -20px; +} + + +/* POPOVER ARROW POSITIONING LEFT*/ + +.pure-popover.left .pure-arrow-border { + border-color: transparent #bfc0c8 transparent transparent; + top: 45%; + left: -21px; +} +.pure-popover.left .pure-arrow { + border-color: transparent #f0f1f3 transparent transparent; + top:45%; + left: -20px; +} + + +/* BUTTON IMPROVEMENTS */ +.pure-button-block { + display: block; +} +.pure-button-small { + padding: .6em 2em .65em; + font-size:70%; +} +.pure-button-large { + padding: .8em 5em .9em; + font-size:110%; +} +.pure-button-selected { + background-color: #345fcb; + color: #fff; +} +.pure-button-secondary { + background: rgb(161, 195, 238); + color: rgb(26, 88, 122); +} +.pure-button-error { + background: rgb(214, 86, 75); + color: white; +} +.pure-button-success { + background: rgb(54, 197, 71); + color: white; +} +.pure-button-warning { + background: rgb(255, 163, 0); + color: white; +} + 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 { border-radius: .25rem; } +pre { + max-width: 100%; +} + @font-face { font-family: 'Roboto Slab'; font-weight: 400; @@ -59,6 +63,16 @@ body { .pure-u-xl-visible { display: inline-block !important; } } +/** + * Make pure-extras alert closable. + */ +.pure-alert-closable .fa-times { + float: right; +} +.pure-alert-close { + cursor: pointer; +} + /** * MENU **/ @@ -174,6 +188,10 @@ body { color: #d1fff0; } +.header-buttons { + text-align: right; +} + #linkcount { /* position: fixed; */ position: absolute; @@ -208,6 +226,11 @@ body { color: #b0ddce; } +/* because chrome */ +#search input[type="text"]::-webkit-input-placeholder { + color: #b0ddce; +} + #search button { background: transparent; border: none; @@ -218,6 +241,55 @@ body { color: #fff; } +#header-login-form { + display: none; + height: 30px; + padding: 5px 0; + text-align: center; + background: #1b926c; + box-shadow: 0 1px 1px 1px #797979; +} + +#header-login-form input[type="text"], #header-login-form input[type="password"] { + margin: 0 0 5px 0; + padding: 5px 5px 3px 15px; + height: 20px; + width: 200px; + background: #1fa67a; + 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 */ +#header-login-form input[type="text"]::-webkit-input-placeholder, +#header-login-form input[type="password"]::-webkit-input-placeholder +{ + color: #b0ddce; +} + +#header-login-form input[type="submit"] { + display: inline-block; + margin: 0 0 5px 0; + height: 25px; + width: 100px; + background: #0C7653; + border: medium none currentColor; + border-radius: 25px; + box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E; + color: #b0ddce; +} + +.new-version-message { + text-align: center; +} + +.new-version-message a { + color: rgb(151, 96, 13); + font-weight: bold; +} + /** * CONTENT - GENERAL */ @@ -233,6 +305,7 @@ body { /** * CONTENT - LINKLIST PAGING + * 64em -> lg */ @media screen and (max-width: 64em) { .linklist-paging { @@ -249,10 +322,7 @@ body { .linklist-filters { margin: 10px 0; color: #252525; -} - -.linklist-filters span { - margin: 0 0 0 10px; + font-size: 0.9em; } .linklist-filters a { @@ -289,6 +359,7 @@ body { margin: 10px 0; text-align: right; color: #252525; + font-size: 0.9em; } .linksperpage a { @@ -306,12 +377,12 @@ body { .linksperpage input[type="text"] { width: 28px; - height: 20px; - margin: 0 0 5px 0; + height: 16px; + margin: 0; padding: 3px 5px 3px 8px; background: #c8c8c8; border: medium none currentColor; - border-radius: 25px; + --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: #252525; font-size: 0.8em; @@ -395,13 +466,17 @@ body { color: #20b988; } +.linklist-item-thumbnail { + padding: 10px; + float: left; +} + .linklist-item-infos { - padding: 5px; + padding: 5px 5px 0 5px; background: #ddd url(../img/noise.png); border-top: 1px solid #989898; box-shadow: 1px -1px 0.2em #989898; color: #252525; - font-size: 0.8em; } .linklist-item-infos a { @@ -415,6 +490,7 @@ body { .linklist-item-tags { margin: 0 0 5px 0; + font-size: 0.8em; } .linklist-item-infos .label-tag { @@ -426,6 +502,10 @@ body { border: 1px solid #000; } +.linklist-item-infos-dateblock { + font-size: 0.9em; +} + .linklist-plugin-icon { width: 13px; height: 13px; @@ -436,8 +516,38 @@ body { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + font-size: 0.8em; +} + +/** 64em -> lg **/ +@media screen and (max-width: 64em) { + .linklist-item-infos-url { + text-align: left; + } } +/** + * Footer + */ +#footer { + margin: 20px 0; + padding: 5px; + text-align: center; + color: #252525; +} + +#footer:before { + display: block; + content:""; + background: linear-gradient(to right, #949393, #252525, #949393); + height: 1px; + width: 80%; + margin: 10px auto; +} + +#footer a { + color: #252525; +} /** * CONTENT - LINKLIST ITEMS */ 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 @@ + 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'); // Switch fold/expand - up = fold if (event.target.classList.contains('fa-chevron-up')) { - event.target.title = 'Expand'; description.style.display = 'none'; } @@ -98,4 +97,59 @@ var foldButtons = document.querySelectorAll('.fold-button'); event.target.classList.toggle('fa-chevron-down'); event.target.classList.toggle('fa-chevron-up'); }); -}); \ No newline at end of file +}); + +/** + * Confirmation message before deletion. + */ +var deleteLinks = document.querySelectorAll('.delete-link'); +[].forEach.call(deleteLinks, function(deleteLink) { + deleteLink.addEventListener('click', function(event) { + if(!confirm('Are you sure you want to delete this link ?')) { + event.preventDefault(); + } + }); +}); + +/** + * Close alerts + */ +var closeLinks = document.querySelectorAll('.pure-alert-close'); +[].forEach.call(closeLinks, function(closeLink) { + closeLink.addEventListener('click', function(event) { + var alert = getParentByClass(event.target, 'pure-alert-closable'); + alert.style.display = 'none'; + }); +}); + +/** + * New version dismiss. + * Hide the message for one week using localStorage. + */ +var newVersionDismiss = document.getElementById('new-version-dismiss'); +var newVersionMessage = document.querySelector('.new-version-message'); +if (newVersionMessage != null + && localStorage.getItem('newVersionDismiss') != null + && parseInt(localStorage.getItem('newVersionDismiss')) + 7*24*60*60*1000 > (new Date()).getTime() +) { + newVersionMessage.style.display = 'none'; +} +if (newVersionDismiss != null) { + newVersionDismiss.addEventListener('click', function () { + localStorage.setItem('newVersionDismiss', (new Date()).getTime()); + }); +} + +/** + * Login button + */ +var loginButton = document.getElementById('login-button'); +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'; +}); 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 @@
- + + +
{/if} @@ -68,7 +70,10 @@ -
{$value.url|thumbnail}
+ {$thumb=thumbnail($value.url)} + {if="$thumb!=false"} +
{$thumb}
+ {/if} {if="$value.description"}
@@ -76,7 +81,7 @@
{/if} -
+
{if="$value.tags"}
@@ -89,7 +94,7 @@ {/if}
-
+
{if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"} @@ -106,7 +111,7 @@ {if="$link_plugin_counter - 1 != $counter"}·{/if} {/loop}
-
+
{$value.url} 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 @@
-
-
- {if="isLoggedIn() or !empty($action_plugin)"} - - Filters - - {if="isLoggedIn()"} - - {/if} - {loop="$action_plugin"} - - +
+
+
+
+ {if="isLoggedIn() or !empty($action_plugin)"} + + Filters + + {if="isLoggedIn()"} + {/if} - >{$value.url} - {/loop} - {/if} -
+ {loop="$action_plugin"} + + {$value.url} + {/loop} + {/if} +
-
- {if="$next_page_url"} - - - - {/if} - {if="$page_max>1"}{$page_current} / {$page_max}{/if} - {if="$previous_page_url"} - - - - {/if} +
+ {if="$next_page_url"} + + + + {/if} + {if="$page_max>1"}{$page_current} / {$page_max}{/if} + {if="$previous_page_url"} + + + + {/if} -
+
-
- Links per page - 20 - 50 - 100 -
- -
+
+
Links per page
+ 20 + 50 + 100 +
+ +
+
+
\ 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 @@ - @@ -106,6 +116,31 @@
+
+ + + +
+ +{if="!empty($newVersion) || !empty($versionError)"} +
+
+ {if="$newVersion"} +
+ Shaarli {$newVersion} is + available. +
+ {/if} + {if="$versionError"} +
+ Error: {$versionError} +
+ {/if} +
+ +
+
+{/if} {if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}