#header {
width: 100%;
height: 150px;
- background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed 10px 2.5em;
+ background: url(../img/noise.png), #979797 url(../img/logo.png) no-repeat 10px 2.5em;
}
#header h1 {
- position: fixed;
float: left;
margin: 45px 0 0 125px;
width: 55%;
overflow: hidden;
height: 100px;
- color: #b0ddce;
+ color: #252525;
text-decoration: none;
z-index: 1;
}
#header h1 a:hover {
- color: #d1fff0;
+ color: #fff;
}
.header-buttons {
}
#linkcount {
- /* position: fixed; */
- position: absolute;
- top: 40px;
- right: 10px;
- color: #b0ddce;
+ color: #252525;
font-size: 0.8em;
}
#search {
- /**
- * Can't make it work with awesomplete list z-index. Any idea?
- * position: fixed;
- */
- position: absolute;
- top: 60px;
- right: 10px;
- width: 30%;
- text-align: right;
+ margin-top: 5px;
}
#search input[type="text"] {
- margin: 0 0 5px 0;
- padding: 5px 5px 3px 15px;
- height: 20px;
- width: 140px;
- transition: width .5s ease;
- 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;
+ width: 250px;
color: #b0ddce;
}
color: #fff;
}
+@media screen and (min-width: 64em) {
+ #search .searchform {
+ margin-right: 25px;
+ text-align: right;
+ }
+
+ #search .tagfilter {
+ margin-left: 25px;
+ text-align: left;
+ }
+}
+
+
+
#header-login-form {
height: 0;
transition: 0.3s;
text-align: center;
background: #1b926c;
display: block;
+ //transition: 0.3s;
}
-.subheader-form.open {
- height: 30px;
- padding: 5px 0;
+@media screen and (min-width: 64em) {
+
+ .subheader-form.closed {
+ height: 0;
+ }
+
+ .subheader-form.open {
+ height: 30px;
+ padding: 5px 0;
+ }
+
+ .subheader-form * {
+ --transition: visibility 1s, opacity 1s;
+ }
+
+ .subheader-form.open * {
+ visibility: visible;
+ opacity: 1;
+ }
+
+ .subheader-form.closed * {
+ visibility: hidden;
+ opacity: 0;
+ }
}
.subheader-form input[type="text"], .subheader-form input[type="password"], .subheader-form .remember-me {
*/
#content {
position: relative;
- /* 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;
}
@media screen and (min-width: 64em) {
#content {
- /* https://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
- margin-top: -4px;
+ margin-top: 34px;
}
}
* CONTENT - LINKLIST PAGING
* 64em -> lg
*/
-
-
.linklist-filters {
margin: 10px 0;
color: #252525;
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
})(this, this.document);
-
-/**
- * Expend search fields on focus.
- */
-var searchInputs = document.querySelectorAll('#search input[type="text"]');
-[].forEach.call(searchInputs, function(searchInput) {
- searchInput.addEventListener('focus', function(event) {
- event.target.style.width = '250px';
- });
- searchInput.addEventListener('blur', function(event) {
- event.target.style.width = '140px';
- });
-});
-
/**
* Fold/Expand shaares description and thumbnail.
*/
var autofocusElements = document.querySelector('.autofocus');
if (autofocusElements != null) {
autofocusElements.focus();
-}
\ No newline at end of file
+}
+
+/**
+ * Hide search bar, and display it on search click.
+ */
+var searchBar = document.getElementById('search');
+var searchButton = document.getElementById('search-button');
+if (searchBar != null && searchButton != null) {
+ searchBar.classList.toggle('closed');
+ searchButton.addEventListener('click', function(event) {
+ event.preventDefault();
+ searchBar.classList.toggle('closed');
+ searchBar.classList.toggle('open');
+ });
+}
</div>
<div class="pure-u-1">
<div class="pure-menu menu-transform pure-menu-horizontal pure-g">
- <ul class="pure-menu-list pure-u-lg-11-12 pure-u-1">
+ <ul class="pure-menu-list pure-u-lg-5-6 pure-u-1">
<li class="pure-menu-item pure-u-0 pure-u-lg-visible">
<a href="{$titleLink}" class="pure-menu-link">
- <i class="fa fa-home"></i>
+ <i class="fa fa-home"></i> {$shaarlititle}
</a>
</li>
{if="isLoggedIn() || $openshaarli"}
<li class="pure-menu-item">
- <a href="?do=addlink" class="pure-menu-link">{'Shaare'|t}</a>
+ <a href="?do=addlink" class="pure-menu-link">
+ <i class="fa fa-plus" ></i> {'Shaare'|t}
+ </a>
</li>
<li class="pure-menu-item">
<a href="?do=tools" class="pure-menu-link">{'Tools'|t}</a>
<a href="?do=atom{$searchcrits}" class="pure-menu-link">{'RSS Feed'|t}</a>
</li>
</ul>
- <div class="header-buttons pure-u-lg-1-12 pure-u-0 pure-u-lg-visible">
+ <div class="header-buttons pure-u-lg-1-6 pure-u-0 pure-u-lg-visible">
<ul class="pure-menu-list">
+ <li class="pure-menu-item">
+ <a href="#" class="pure-menu-link" id="search-button" title="{'Search'|t}">
+ <i class="fa fa-search"></i>
+ </a>
+ </li>
{if="!isLoggedIn()"}
<li class="pure-menu-item">
<a href="?do=login" class="pure-menu-link" id="login-button" title="{'Login'|t}">
</div>
</div>
-<div id="header" class="pure-u-0 pure-u-lg-visible">
- <h1 id="header-title">
- <a href="{$titleLink}">
- {$shaarlititle}
- </a>
- </h1>
- <div id="linkcount">
- {if="!empty($linkcount)"}
- <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
- {if="$privateLinkcount>0"}
- - <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
- {/if}
- {/if}
- </div>
-
- <div id="search">
- <form method="GET" class="searchform" name="searchform">
- <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="{'Search text'|t}"
- {if="!empty($search_term)"}
- value="{$search_term}"
- {/if}
- >
- <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
- </form>
- <form method="GET" class="tagfilter" name="tagfilter">
- <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="{'Filter by tag'|t}"
- {if="!empty($search_tags)"}
- value="{$search_tags}"
- {/if}
- autocomplete="off" data-multiple data-minChars="1"
- data-list="{loop="$tags"}{$key}, {/loop}"
- >
- <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
- </form>
- </div>
-</div>
-
<div id="content">
+ <div id="search" class="subheader-form">
+ <div class="pure-g">
+ <div class="pure-u-1 pure-u-lg-1-2">
+ <form method="GET" class="searchform" name="searchform">
+ <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="{'Search text'|t}"
+ {if="!empty($search_term)"}
+ value="{$search_term}"
+ {/if}
+ >
+ <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+ </form>
+ </div>
+ <div class="pure-u-1 pure-u-lg-1-2">
+ <form method="GET" class="tagfilter" name="tagfilter">
+ <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="{'Filter by tag'|t}"
+ {if="!empty($search_tags)"}
+ value="{$search_tags}"
+ {/if}
+ autocomplete="off" data-multiple data-minChars="1"
+ data-list="{loop="$tags"}{$key}, {/loop}"
+ >
+ <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
+ </form>
+ </div>
+ </div>
+ </div>
{loop="$plugins_header.fields_toolbar"}
<form
{loop="$value"}
</div>
{/if}
-<div class="clear"></div>
+ <div class="clear"></div>
+ <div id="linkcount" class="center">
+ {if="!empty($linkcount)"}
+ <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
+ {if="$privateLinkcount>0"}
+ · <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"}
+ {/if}
+ {/if}
+ </div>
projects / github / shaarli / Shaarli.git / commitdiff
