div.awesomplete {
display: inline-block;
position: relative;
- width: 100%;
-}
-
-div.awesomplete > input {
- display: block;
}
div.awesomplete > ul {
position: absolute;
left: 0;
- z-index: 1;
+ z-index: 9999;
min-width: 100%;
box-sizing: border-box;
list-style: none;
#header {
width: 100%;
height: 150px;
- background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed center 2.5em;
+ background: url(../img/noise.png), #1fa67a url(../img/logo2.png) no-repeat fixed 10px 2.5em;
}
#header h1 {
position: fixed;
float: left;
- margin: 45px 0 0 0;
- width: 44%;
+ margin: 45px 0 0 125px;
+ width: 55%;
height: 100px;
- text-align: right;
}
#header h1 a, #header h1 a:visited {
}
#linkcount {
- position: fixed;
+ /* position: fixed; */
+ position: absolute;
top: 40px;
right: 10px;
color: #b0ddce;
}
#search {
- position: fixed;
- top: 55px;
+ /**
+ * Can't make it work with awesomplete list z-index. Any idea?
+ * position: fixed;
+ */
+ position: absolute;
+ top: 60px;
right: 10px;
- width: 44%;
+ width: 30%;
text-align: right;
}
+#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;
+ color: #b0ddce;
+}
+
+#search button {
+ background: transparent;
+ border: none;
+ color: #b0ddce;
+}
+
+#search button:hover {
+ color: #fff;
+}
+
+/**
+ * CONTENT
+ */
#content {
position: relative;
box-shadow: 0 -2px 1em #797979;
<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css">
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="css/shaarli.css" />
+<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
{if="is_file('inc/user.css')"}
<link type="text/css" rel="stylesheet" href="inc/user.css#" />
{/if}
});
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
-})(this, this.document);
\ No newline at end of file
+})(this, this.document);
+
+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';
+ });
+});
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
- <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
{include="includes"}
</head>
<body>
</div>
{include="page.footer"}
-
-<script src="inc/awesomplete.min.js#"></script>
-<script src="inc/awesomplete-multiple-tags.js#"></script>
-<script>
- awesompleteUniqueTag('#tagfilter_value');
-</script>
</body>
</html>
<script src="{$value}#"></script>
{/loop}
-<script src="js/shaarli.js"></script>
\ No newline at end of file
+<script src="js/shaarli.js"></script>
+<script src="inc/awesomplete.js#"></script>
+<script src="inc/awesomplete-multiple-tags.js#"></script>
value="{$search_crits}"
{/if}
>
- <input type="submit" value="Search" class="bigbutton">
+ <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"
{if="!empty($search_crits) && $search_type=='tags'"}
value="{function="implode(' ', $search_crits)"}"
{/if}
- autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
+ autocomplete="off" data-multiple data-minChars="1"
data-list="{loop="$tags"}{$key}, {/loop}"
>
- <input type="submit" value="Search" class="bigbutton">
+ <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
</form>
</div>
</div>