From b057607f1b8a242c5c0325ceaf7c963632b960aa Mon Sep 17 00:00:00 2001 From: ArthurHoaro Date: Fri, 6 Jan 2017 14:50:09 +0100 Subject: A lot of minor improvements, cleanup, narrow mobile side blank spaces --- tpl/default/404.html | 1 - tpl/default/addlink.html | 4 +- tpl/default/changepassword.html | 4 +- tpl/default/changetag.html | 7 +- tpl/default/configure.html | 4 +- tpl/default/css/shaarli.css | 209 ++++++++++++++++++++++++++++++--------- tpl/default/daily.html | 4 +- tpl/default/editlink.html | 6 +- tpl/default/export.html | 9 +- tpl/default/import.html | 16 ++- tpl/default/install.html | 19 ++-- tpl/default/js/shaarli.js | 9 -- tpl/default/linklist.html | 86 ++++++++++++++-- tpl/default/linklist.paging.html | 4 +- tpl/default/loginform.html | 4 +- tpl/default/page.header.html | 17 +--- tpl/default/picwall.html | 4 +- tpl/default/pluginsadmin.html | 12 +-- tpl/default/tagcloud.html | 4 +- tpl/default/tools.html | 20 ++-- 20 files changed, 291 insertions(+), 152 deletions(-) (limited to 'tpl/default') diff --git a/tpl/default/404.html b/tpl/default/404.html index edc5ac4b..2de6b6da 100644 --- a/tpl/default/404.html +++ b/tpl/default/404.html @@ -6,7 +6,6 @@

{'Sorry, nothing to see here.'|t}

diff --git a/tpl/default/addlink.html b/tpl/default/addlink.html index 2d66c381..2f956e06 100644 --- a/tpl/default/addlink.html +++ b/tpl/default/addlink.html @@ -6,8 +6,8 @@ {include="page.header"}
-
-
+
+

{"Shaare a new link"|t}

diff --git a/tpl/default/changepassword.html b/tpl/default/changepassword.html index 7196cccd..2d15c92a 100644 --- a/tpl/default/changepassword.html +++ b/tpl/default/changepassword.html @@ -6,8 +6,8 @@ {include="page.header"}
-
-
+
+

{"Change password"|t}

diff --git a/tpl/default/changetag.html b/tpl/default/changetag.html index 5d5d8c96..4f98baec 100644 --- a/tpl/default/changetag.html +++ b/tpl/default/changetag.html @@ -6,8 +6,8 @@ {include="page.header"}
-
-
+
+

{"Manage tags"|t}

@@ -28,8 +28,7 @@
- or - +
diff --git a/tpl/default/configure.html b/tpl/default/configure.html index e872a4d2..b959a91b 100644 --- a/tpl/default/configure.html +++ b/tpl/default/configure.html @@ -13,8 +13,8 @@
-
-
+
+

{'Configure'|t}

diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css index ae0d5807..fafe7351 100644 --- a/tpl/default/css/shaarli.css +++ b/tpl/default/css/shaarli.css @@ -175,46 +175,70 @@ pre { font-size: 0.8em; } -#search { - position: fixed; +#search, #search-linklist { + text-align: center; width: 100%; } -#search input[type="text"] { - width: 250px; +#search input[type="text"], #search-linklist input[type="text"] { + padding: 0 5px; + height: 30px; + width: 260px; + background: #f5f5f5; + border: medium none currentColor; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset; + border-radius: 2px; color: #252525; } /* because chrome */ -#search input[type="text"]::-webkit-input-placeholder { - color: #252525; +#search input[type="text"]::-webkit-input-placeholder, +#search-linklist input[type="text"]::-webkit-input-placeholder { + color: #777777; } -#search button { +#search button, +#search-linklist button { background: transparent; border: none; +} + +#search button { color: #f5f5f5; } +#search-linklist button { + color: #252525; +} + #search button:hover { color: #fff; } +#search-linklist button:hover { + color: #000; +} + +#search-linklist { + padding: 5px 0; +} + @media screen and (min-width: 64em) { - #search .searchform { + #search .searchform, + #search-linklist .searchform { margin-right: 25px; text-align: right; } - #search .tagfilter { + #search .tagfilter, + #search-linklist .tagfilter { margin-left: 25px; text-align: left; } } @media screen and (max-width: 64em) { - #search { - position: relative; - height: 60px; + #search, #search * { + visibility: hidden; } } @@ -239,11 +263,6 @@ pre { visibility: visible; } } -@media screen and (max-width: 64em) { - #search.subheader-form, .subheader-form.open * { - visibility: visible; - } -} .subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me { margin: 0 0 5px 0; @@ -252,7 +271,7 @@ pre { width: 20%; background: #f5f5f5; border: medium none currentColor; - border-radius: 5px; + border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; color: #252525; } @@ -315,6 +334,46 @@ pre { } } +/** + * Plugins additional forms + */ +.toolbar-plugin { + margin: 5px 0; + text-align: center; +} + +.toolbar-plugin input[type="text"] { + padding: 0 5px; + height: 30px; + width: 300px; + background: #f5f5f5; + border: medium none currentColor; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 1px rgba(0, 0, 0, 0.298) inset; + border-radius: 2px; + color: #252525; +} + +/* because chrome */ +.toolbar-plugin input[type="text"]::-webkit-input-placeholder { + color: #777777; +} + +.toolbar-plugin input[type="submit"] { + padding: 0 10px; + height: 30px; + background: #f5f5f5; + border: medium none currentColor; + border-radius: 2px; + color: #252525; +} + +@media screen and (max-width: 64em) { + .toolbar-plugin input[type="text"] { + width: 70%; + + } +} + /** * CONTENT - LINKLIST PAGING * 64em -> lg @@ -369,14 +428,18 @@ pre { background: #f5f5f5; } +.linksperpage a, .linksperpage input[type="text"] { + display: inline-block; + width: 20px; + text-align: center; +} + .linksperpage form { display: inline; - margin: 0 10px 0 0; } .linksperpage input[type="text"] { - width: 28px; - height: 12px; + height: 15px; margin: 0; padding: 3px 5px 3px 8px; background: #f5f5f5; @@ -400,9 +463,22 @@ pre { } .linklist-item-title { + position: relative; background: #f5f5f5; } +.linklist-item.private .linklist-item-title::before { + position: absolute; + left: 3px; + top: 0; + display: block; + content:""; + background: #F89406; + height: 95%; + width: 3px; + margin-top: 3px; +} + .linklist-item-title h2 { padding: 3px 10px 0 10px; line-height: 25px; @@ -417,6 +493,7 @@ pre { } .linklist-item-title .linklist-link { + font-size: 1.1em; color: #1b926c; } @@ -454,6 +531,12 @@ pre { padding: 5px; } +.linklist-item-editbuttons * { + display: block; + float: left; + margin: 0 1px; +} + .linklist-item-editbuttons a { font-size: 1em; } @@ -469,6 +552,7 @@ pre { } .linklist-item-description { + position: relative; padding: 10px; background: #f5f5f5; font-family: Roboto Slab, Arial, sans-serif; @@ -476,6 +560,19 @@ pre { color: #252525; } +.linklist-item.private .linklist-item-description::before { + position: absolute; + left: 3px; + top: 0; + display: block; + content:""; + background: #F89406; + height: 95%; + width: 3px; + z-index: 9999; + #margin: 0; +} + .linklist-item-description a { text-decoration: none; color: #1b926c; @@ -496,13 +593,13 @@ pre { } .linklist-item-infos { - padding: 5px 5px 0 5px; + padding: 8px 8px 5px 8px; background: #ddd; color: #252525; } .linklist-item-infos a { - color: #505050; + color: #252525; text-decoration: none; } @@ -511,17 +608,14 @@ pre { } .linklist-item-infos .linklist-item-tags { - margin: 0 0 5px 0; font-size: 0.8em; } .linklist-item-infos .label-tag { - border: 1px solid #505050; font-size: 0.9em; } .linklist-item-infos .label-tag:hover { - border: 1px solid #000; } .linklist-item-infos-dateblock { @@ -541,6 +635,17 @@ pre { font-size: 0.8em; } +.linklist-item-infos .mobile-buttons { + text-align: right; +} + +.linklist-item-infos .linklist-plugin-icon { + display: inline-block; + margin: 0 2px; + width: 16px; + height: 16px; +} + /** 64em -> lg **/ @media screen and (max-width: 64em) { .linklist-item-infos-url { @@ -576,10 +681,10 @@ pre { */ .page-form { margin: 20px 0 0 0; - padding: 0 10px 0 10px; background: #f5f5f5; box-shadow: 1px 1px 2px #797979; color: #252525; + overflow: hidden; } .page-form .window-title { @@ -609,16 +714,22 @@ pre { font-weight: bold; } +.page-form p { + padding: 0 10px; + margin: 0; +} + .page-form input[type="text"], .page-form input[type="password"], .page-form textarea { + box-sizing: border-box; margin: 10px 0; padding: 5px 5px 3px 15px; - height: 30px; - width: 80%; - background: #f5f5f5; + height: 35px; + width: 90%; + background: #ebebeb; border: medium none currentColor; - border-radius: 5px; + border-radius: 2px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset; color: #252525; } @@ -634,7 +745,7 @@ pre { /* because chrome */ .page-form input[type="text"]::-webkit-input-placeholder, .page-form input[type="password"]::-webkit-input-placeholder { - color: #252525; + color: #777777; } .page-form input[type="submit"] { @@ -648,6 +759,11 @@ pre { color: #f5f5f5; } + +.page-form input[type="submit"].button-red { + background: #ac2925; +} + .page-form select { color: #252525; } @@ -704,10 +820,9 @@ pre { } .page-form section { - margin-top: 20px; + margin: 10px 0 25px 0; } - .page-form table { margin: auto; width: 90%; @@ -715,12 +830,13 @@ pre { .page-form table .order { text-decoration: none; + color: #252525; } .page-form table, .page-form th, .page-form td { border-width: 1px 0; border-style: solid; - border-color: #b0ddce; + border-color: #aaaaaa; } .page-form th, .page-form td { @@ -730,7 +846,7 @@ pre { /* Awesomeplete fix */ .page-form .awesomplete { - width: 80%; + width: 90%; } .page-form .awesomplete input { @@ -852,7 +968,6 @@ pre { } } - /** * IMPORT */ @@ -882,13 +997,14 @@ pre { */ #picwall_container { margin: 0 10px 10px 10px; - color: #fff; - background-color: #000; + color: #252525; + background-color: #f5f5f5; clear: both; } .picwall_pictureframe { - background-color: #000; + margin: 2px; + background-color: #f5f5f5; z-index: 5; position: relative; display: table-cell; @@ -924,6 +1040,7 @@ pre { /* CSS to show title when hovering an image - no javascript required. */ .picwall_pictureframe span.info { display: none; + font-family: Arial, sans-serif; } .picwall_pictureframe:hover span.info { @@ -932,16 +1049,12 @@ pre { top: 0; left: 0; width: 90px; + height: 90px; font-weight: bold; - font-size: 8pt; - color: #fff; + font-size: 9pt; + color: #f5f5f5; text-align: left; - background-color: transparent; - background-color: rgba(0, 0, 0, 0.4); - /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */ - filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000); - /* IE6–IE9 */ - text-shadow: 2px 2px 1px #000000; + background-color: rgba(0, 0, 0, 0.8); } /** diff --git a/tpl/default/daily.html b/tpl/default/daily.html index d4c11f6f..d8c91078 100644 --- a/tpl/default/daily.html +++ b/tpl/default/daily.html @@ -7,8 +7,8 @@ {include="page.header"}
-
-
+
+

{'The Daily Shaarli'|t} diff --git a/tpl/default/editlink.html b/tpl/default/editlink.html index 1708bee1..6b480c29 100644 --- a/tpl/default/editlink.html +++ b/tpl/default/editlink.html @@ -10,8 +10,8 @@
Shaare to: {$shaarlititle}
{/if}
-
- +
+

{'Shaare'|t}

{if="isset($link.id)"} @@ -61,7 +61,7 @@
{if="!$link_is_new"} - + {/if}
diff --git a/tpl/default/export.html b/tpl/default/export.html index e93f98a9..af1d6e33 100644 --- a/tpl/default/export.html +++ b/tpl/default/export.html @@ -6,15 +6,10 @@ {include="page.header"} -{$ratioLabel='5-12'} -{$ratioLabelMobile='7-8'} -{$ratioInput='7-12'} -{$ratioInputMobile='1-8'} -
-
-
+
+

{"Export Database"|t}

diff --git a/tpl/default/import.html b/tpl/default/import.html index a524c3bc..e6e521e8 100644 --- a/tpl/default/import.html +++ b/tpl/default/import.html @@ -6,15 +6,10 @@ {include="page.header"} -{$ratioLabel='5-12'} -{$ratioLabelMobile='7-8'} -{$ratioInput='7-12'} -{$ratioInputMobile='1-8'} -
-
-
+
+

{"Import Database"|t}

@@ -52,7 +47,10 @@
- +
@@ -70,7 +68,7 @@
- +
diff --git a/tpl/default/install.html b/tpl/default/install.html index aa606e92..0bd8a635 100644 --- a/tpl/default/install.html +++ b/tpl/default/install.html @@ -4,21 +4,15 @@ {include="includes"} - -
{$ratioLabel='1-4'} {$ratioInput='3-4'}
-
-
-

{'Install'|t}

+
+
+

{'Install Shaarli'|t}

{'It looks like it\'s the first time you run Shaarli. Please configure it.'|t} @@ -87,7 +81,7 @@
-
+
-
+
-
- +
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js index 01e22022..287d157c 100644 --- a/tpl/default/js/shaarli.js +++ b/tpl/default/js/shaarli.js @@ -151,20 +151,11 @@ if (autofocusElements != null) { autofocusElements.focus(); } -/** - * Hide search bar - */ -var search = document.getElementById('search'); -if (search != null) { - removeClass(search, 'open'); -} - /** * Handle sub menus/forms */ var openers = document.getElementsByClassName('subheader-opener'); if (openers != null) { - console.log(openers); [].forEach.call(openers, function(opener) { opener.addEventListener('click', function(event) { event.preventDefault(); diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html index f1f67eea..459a7c33 100644 --- a/tpl/default/linklist.html +++ b/tpl/default/linklist.html @@ -6,6 +6,49 @@ {include="page.header"} + + +{loop="$plugins_header.fields_toolbar"} +
+
+ {loop="$value.inputs"} + + {/loop} +
+
+{/loop} +
diff --git a/tpl/default/linklist.paging.html b/tpl/default/linklist.paging.html index 4888267b..0b71c9d2 100644 --- a/tpl/default/linklist.paging.html +++ b/tpl/default/linklist.paging.html @@ -1,7 +1,7 @@
-
-
+
+
{if="isLoggedIn() or !empty($action_plugin)"} diff --git a/tpl/default/loginform.html b/tpl/default/loginform.html index dcc29676..2ad3fe9c 100644 --- a/tpl/default/loginform.html +++ b/tpl/default/loginform.html @@ -17,8 +17,8 @@
{else}
-
-
+
+

{'Login'|t}

diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html index fefa9258..ba643cac 100644 --- a/tpl/default/page.header.html +++ b/tpl/default/page.header.html @@ -95,7 +95,7 @@
-