aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2016-12-12 05:56:49 +0100
committerArthurHoaro <arthur@hoa.ro>2016-12-12 05:56:49 +0100
commit0d46b90b44b52bb9c511b18d51752dc16eb5e61b (patch)
treed2c93497f83ea006f5b1848161183a4ce8b6ea16
parente722fde6e3ab4145e7d48bfc8b78627dd424833f (diff)
downloadShaarli-0d46b90b44b52bb9c511b18d51752dc16eb5e61b.tar.gz
Shaarli-0d46b90b44b52bb9c511b18d51752dc16eb5e61b.tar.zst
Shaarli-0d46b90b44b52bb9c511b18d51752dc16eb5e61b.zip
Remove the green header
-rw-r--r--tpl/default/css/shaarli.css82
-rw-r--r--tpl/default/js/shaarli.js30
-rw-r--r--tpl/default/page.header.html88
3 files changed, 107 insertions, 93 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 0367534b..fd0a144f 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -170,11 +170,10 @@ pre {
170#header { 170#header {
171 width: 100%; 171 width: 100%;
172 height: 150px; 172 height: 150px;
173 background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed 10px 2.5em; 173 background: url(../img/noise.png), #979797 url(../img/logo.png) no-repeat 10px 2.5em;
174} 174}
175 175
176#header h1 { 176#header h1 {
177 position: fixed;
178 float: left; 177 float: left;
179 margin: 45px 0 0 125px; 178 margin: 45px 0 0 125px;
180 width: 55%; 179 width: 55%;
@@ -190,7 +189,7 @@ pre {
190 189
191 overflow: hidden; 190 overflow: hidden;
192 height: 100px; 191 height: 100px;
193 color: #b0ddce; 192 color: #252525;
194 text-decoration: none; 193 text-decoration: none;
195 z-index: 1; 194 z-index: 1;
196 195
@@ -199,7 +198,7 @@ pre {
199} 198}
200 199
201#header h1 a:hover { 200#header h1 a:hover {
202 color: #d1fff0; 201 color: #fff;
203} 202}
204 203
205.header-buttons { 204.header-buttons {
@@ -207,36 +206,16 @@ pre {
207} 206}
208 207
209#linkcount { 208#linkcount {
210 /* position: fixed; */ 209 color: #252525;
211 position: absolute;
212 top: 40px;
213 right: 10px;
214 color: #b0ddce;
215 font-size: 0.8em; 210 font-size: 0.8em;
216} 211}
217 212
218#search { 213#search {
219 /** 214 margin-top: 5px;
220 * Can't make it work with awesomplete list z-index. Any idea?
221 * position: fixed;
222 */
223 position: absolute;
224 top: 60px;
225 right: 10px;
226 width: 30%;
227 text-align: right;
228} 215}
229 216
230#search input[type="text"] { 217#search input[type="text"] {
231 margin: 0 0 5px 0; 218 width: 250px;
232 padding: 5px 5px 3px 15px;
233 height: 20px;
234 width: 140px;
235 transition: width .5s ease;
236 background: #1b926c;
237 border: medium none currentColor;
238 border-radius: 25px;
239 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
240 color: #b0ddce; 219 color: #b0ddce;
241} 220}
242 221
@@ -255,6 +234,20 @@ pre {
255 color: #fff; 234 color: #fff;
256} 235}
257 236
237@media screen and (min-width: 64em) {
238 #search .searchform {
239 margin-right: 25px;
240 text-align: right;
241 }
242
243 #search .tagfilter {
244 margin-left: 25px;
245 text-align: left;
246 }
247}
248
249
250
258#header-login-form { 251#header-login-form {
259 height: 0; 252 height: 0;
260 transition: 0.3s; 253 transition: 0.3s;
@@ -285,11 +278,33 @@ pre {
285 text-align: center; 278 text-align: center;
286 background: #1b926c; 279 background: #1b926c;
287 display: block; 280 display: block;
281 //transition: 0.3s;
288} 282}
289 283
290.subheader-form.open { 284@media screen and (min-width: 64em) {
291 height: 30px; 285
292 padding: 5px 0; 286 .subheader-form.closed {
287 height: 0;
288 }
289
290 .subheader-form.open {
291 height: 30px;
292 padding: 5px 0;
293 }
294
295 .subheader-form * {
296 --transition: visibility 1s, opacity 1s;
297 }
298
299 .subheader-form.open * {
300 visibility: visible;
301 opacity: 1;
302 }
303
304 .subheader-form.closed * {
305 visibility: hidden;
306 opacity: 0;
307 }
293} 308}
294 309
295.subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me { 310.subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
@@ -348,8 +363,6 @@ pre {
348 */ 363 */
349#content { 364#content {
350 position: relative; 365 position: relative;
351 /* Hack-ish way to only shadow the top part. */
352 box-shadow: 0 -20px 20px -20px #797979;
353 z-index: 2; 366 z-index: 2;
354 background: url(../img/noise.png) #979797; 367 background: url(../img/noise.png) #979797;
355} 368}
@@ -362,8 +375,7 @@ pre {
362 375
363@media screen and (min-width: 64em) { 376@media screen and (min-width: 64em) {
364 #content { 377 #content {
365 /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */ 378 margin-top: 34px;
366 margin-top: -4px;
367 } 379 }
368} 380}
369 381
@@ -371,8 +383,6 @@ pre {
371 * CONTENT - LINKLIST PAGING 383 * CONTENT - LINKLIST PAGING
372 * 64em -> lg 384 * 64em -> lg
373 */ 385 */
374
375
376.linklist-filters { 386.linklist-filters {
377 margin: 10px 0; 387 margin: 10px 0;
378 color: #252525; 388 color: #252525;
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index 3afec7f3..24d11cdb 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -53,20 +53,6 @@ function getParentByClass(el, className) {
53 window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); 53 window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
54})(this, this.document); 54})(this, this.document);
55 55
56
57/**
58 * Expend search fields on focus.
59 */
60var searchInputs = document.querySelectorAll('#search input[type="text"]');
61[].forEach.call(searchInputs, function(searchInput) {
62 searchInput.addEventListener('focus', function(event) {
63 event.target.style.width = '250px';
64 });
65 searchInput.addEventListener('blur', function(event) {
66 event.target.style.width = '140px';
67 });
68});
69
70/** 56/**
71 * Fold/Expand shaares description and thumbnail. 57 * Fold/Expand shaares description and thumbnail.
72 */ 58 */
@@ -184,4 +170,18 @@ if (hiddenReturnurl != null) {
184var autofocusElements = document.querySelector('.autofocus'); 170var autofocusElements = document.querySelector('.autofocus');
185if (autofocusElements != null) { 171if (autofocusElements != null) {
186 autofocusElements.focus(); 172 autofocusElements.focus();
187} \ No newline at end of file 173}
174
175/**
176 * Hide search bar, and display it on search click.
177 */
178var searchBar = document.getElementById('search');
179var searchButton = document.getElementById('search-button');
180if (searchBar != null && searchButton != null) {
181 searchBar.classList.toggle('closed');
182 searchButton.addEventListener('click', function(event) {
183 event.preventDefault();
184 searchBar.classList.toggle('closed');
185 searchBar.classList.toggle('open');
186 });
187}
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 67d0d0c4..36410345 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -10,15 +10,17 @@
10 </div> 10 </div>
11 <div class="pure-u-1"> 11 <div class="pure-u-1">
12 <div class="pure-menu menu-transform pure-menu-horizontal pure-g"> 12 <div class="pure-menu menu-transform pure-menu-horizontal pure-g">
13 <ul class="pure-menu-list pure-u-lg-11-12 pure-u-1"> 13 <ul class="pure-menu-list pure-u-lg-5-6 pure-u-1">
14 <li class="pure-menu-item pure-u-0 pure-u-lg-visible"> 14 <li class="pure-menu-item pure-u-0 pure-u-lg-visible">
15 <a href="{$titleLink}" class="pure-menu-link"> 15 <a href="{$titleLink}" class="pure-menu-link">
16 <i class="fa fa-home"></i> 16 <i class="fa fa-home"></i> {$shaarlititle}
17 </a> 17 </a>
18 </li> 18 </li>
19 {if="isLoggedIn() || $openshaarli"} 19 {if="isLoggedIn() || $openshaarli"}
20 <li class="pure-menu-item"> 20 <li class="pure-menu-item">
21 <a href="?do=addlink" class="pure-menu-link">{'Shaare'|t}</a> 21 <a href="?do=addlink" class="pure-menu-link">
22 <i class="fa fa-plus" ></i> {'Shaare'|t}
23 </a>
22 </li> 24 </li>
23 <li class="pure-menu-item"> 25 <li class="pure-menu-item">
24 <a href="?do=tools" class="pure-menu-link">{'Tools'|t}</a> 26 <a href="?do=tools" class="pure-menu-link">{'Tools'|t}</a>
@@ -59,8 +61,13 @@
59 <a href="?do=atom{$searchcrits}" class="pure-menu-link">{'RSS Feed'|t}</a> 61 <a href="?do=atom{$searchcrits}" class="pure-menu-link">{'RSS Feed'|t}</a>
60 </li> 62 </li>
61 </ul> 63 </ul>
62 <div class="header-buttons pure-u-lg-1-12 pure-u-0 pure-u-lg-visible"> 64 <div class="header-buttons pure-u-lg-1-6 pure-u-0 pure-u-lg-visible">
63 <ul class="pure-menu-list"> 65 <ul class="pure-menu-list">
66 <li class="pure-menu-item">
67 <a href="#" class="pure-menu-link" id="search-button" title="{'Search'|t}">
68 <i class="fa fa-search"></i>
69 </a>
70 </li>
64 {if="!isLoggedIn()"} 71 {if="!isLoggedIn()"}
65 <li class="pure-menu-item"> 72 <li class="pure-menu-item">
66 <a href="?do=login" class="pure-menu-link" id="login-button" title="{'Login'|t}"> 73 <a href="?do=login" class="pure-menu-link" id="login-button" title="{'Login'|t}">
@@ -85,44 +92,33 @@
85 </div> 92 </div>
86</div> 93</div>
87 94
88<div id="header" class="pure-u-0 pure-u-lg-visible">
89 <h1 id="header-title">
90 <a href="{$titleLink}">
91 {$shaarlititle}
92 </a>
93 </h1>
94 <div id="linkcount">
95 {if="!empty($linkcount)"}
96 <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
97 {if="$privateLinkcount>0"}
98 - <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
99 {/if}
100 {/if}
101 </div>
102
103 <div id="search">
104 <form method="GET" class="searchform" name="searchform">
105 <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="{'Search text'|t}"
106 {if="!empty($search_term)"}
107 value="{$search_term}"
108 {/if}
109 >
110 <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
111 </form>
112 <form method="GET" class="tagfilter" name="tagfilter">
113 <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="{'Filter by tag'|t}"
114 {if="!empty($search_tags)"}
115 value="{$search_tags}"
116 {/if}
117 autocomplete="off" data-multiple data-minChars="1"
118 data-list="{loop="$tags"}{$key}, {/loop}"
119 >
120 <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
121 </form>
122 </div>
123</div>
124
125<div id="content"> 95<div id="content">
96 <div id="search" class="subheader-form">
97 <div class="pure-g">
98 <div class="pure-u-1 pure-u-lg-1-2">
99 <form method="GET" class="searchform" name="searchform">
100 <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="{'Search text'|t}"
101 {if="!empty($search_term)"}
102 value="{$search_term}"
103 {/if}
104 >
105 <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
106 </form>
107 </div>
108 <div class="pure-u-1 pure-u-lg-1-2">
109 <form method="GET" class="tagfilter" name="tagfilter">
110 <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="{'Filter by tag'|t}"
111 {if="!empty($search_tags)"}
112 value="{$search_tags}"
113 {/if}
114 autocomplete="off" data-multiple data-minChars="1"
115 data-list="{loop="$tags"}{$key}, {/loop}"
116 >
117 <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
118 </form>
119 </div>
120 </div>
121 </div>
126 {loop="$plugins_header.fields_toolbar"} 122 {loop="$plugins_header.fields_toolbar"}
127 <form 123 <form
128 {loop="$value"} 124 {loop="$value"}
@@ -189,4 +185,12 @@
189 </div> 185 </div>
190{/if} 186{/if}
191 187
192<div class="clear"></div> 188 <div class="clear"></div>
189 <div id="linkcount" class="center">
190 {if="!empty($linkcount)"}
191 <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
192 {if="$privateLinkcount>0"}
193 &middot; <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
194 {/if}
195 {/if}
196 </div>