aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2016-02-27 21:59:27 +0100
committerArthurHoaro <arthur@hoa.ro>2016-08-07 12:17:36 +0200
commitd63f7cf5b8a25bba0de8ee11202edda3ca062eb4 (patch)
tree62a0ba8e7df90f9ee110d57e57f6deca200e1dc6 /tpl/default
parentdfb058c616a29cc712832e7e00a25e2f96eb44ce (diff)
downloadShaarli-d63f7cf5b8a25bba0de8ee11202edda3ca062eb4.tar.gz
Shaarli-d63f7cf5b8a25bba0de8ee11202edda3ca062eb4.tar.zst
Shaarli-d63f7cf5b8a25bba0de8ee11202edda3ca062eb4.zip
Desktop search fields
Diffstat (limited to 'tpl/default')
-rw-r--r--tpl/default/css/shaarli.css46
-rw-r--r--tpl/default/img/logo2.pngbin0 -> 6252 bytes
-rw-r--r--tpl/default/includes.html1
-rw-r--r--tpl/default/js/shaarli.js12
-rw-r--r--tpl/default/linklist.html7
-rw-r--r--tpl/default/page.footer.html4
-rw-r--r--tpl/default/page.header.html6
7 files changed, 56 insertions, 20 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 8deb008e..4ec976b1 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -119,16 +119,15 @@ body {
119#header { 119#header {
120 width: 100%; 120 width: 100%;
121 height: 150px; 121 height: 150px;
122 background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed center 2.5em; 122 background: url(../img/noise.png), #1fa67a url(../img/logo2.png) no-repeat fixed 10px 2.5em;
123} 123}
124 124
125#header h1 { 125#header h1 {
126 position: fixed; 126 position: fixed;
127 float: left; 127 float: left;
128 margin: 45px 0 0 0; 128 margin: 45px 0 0 125px;
129 width: 44%; 129 width: 55%;
130 height: 100px; 130 height: 100px;
131 text-align: right;
132} 131}
133 132
134#header h1 a, #header h1 a:visited { 133#header h1 a, #header h1 a:visited {
@@ -152,7 +151,8 @@ body {
152} 151}
153 152
154#linkcount { 153#linkcount {
155 position: fixed; 154 /* position: fixed; */
155 position: absolute;
156 top: 40px; 156 top: 40px;
157 right: 10px; 157 right: 10px;
158 color: #b0ddce; 158 color: #b0ddce;
@@ -160,13 +160,43 @@ body {
160} 160}
161 161
162#search { 162#search {
163 position: fixed; 163 /**
164 top: 55px; 164 * Can't make it work with awesomplete list z-index. Any idea?
165 * position: fixed;
166 */
167 position: absolute;
168 top: 60px;
165 right: 10px; 169 right: 10px;
166 width: 44%; 170 width: 30%;
167 text-align: right; 171 text-align: right;
168} 172}
169 173
174#search input[type="text"] {
175 margin: 0 0 5px 0;
176 padding: 5px 5px 3px 15px;
177 height: 20px;
178 width: 140px;
179 transition: width .5s ease;
180 background: #1b926c;
181 border: medium none currentColor;
182 border-radius: 25px;
183 box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
184 color: #b0ddce;
185}
186
187#search button {
188 background: transparent;
189 border: none;
190 color: #b0ddce;
191}
192
193#search button:hover {
194 color: #fff;
195}
196
197/**
198 * CONTENT
199 */
170#content { 200#content {
171 position: relative; 201 position: relative;
172 box-shadow: 0 -2px 1em #797979; 202 box-shadow: 0 -2px 1em #797979;
diff --git a/tpl/default/img/logo2.png b/tpl/default/img/logo2.png
new file mode 100644
index 00000000..ef0e09ac
--- /dev/null
+++ b/tpl/default/img/logo2.png
Binary files differ
diff --git a/tpl/default/includes.html b/tpl/default/includes.html
index c5b7ee13..03cc3d2a 100644
--- a/tpl/default/includes.html
+++ b/tpl/default/includes.html
@@ -9,6 +9,7 @@
9<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css"> 9<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css">
10<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" /> 10<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
11<link type="text/css" rel="stylesheet" href="css/shaarli.css" /> 11<link type="text/css" rel="stylesheet" href="css/shaarli.css" />
12<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
12{if="is_file('inc/user.css')"} 13{if="is_file('inc/user.css')"}
13 <link type="text/css" rel="stylesheet" href="inc/user.css#" /> 14 <link type="text/css" rel="stylesheet" href="inc/user.css#" />
14{/if} 15{/if}
diff --git a/tpl/default/js/shaarli.js b/tpl/default/js/shaarli.js
index c401af1d..cbce0617 100644
--- a/tpl/default/js/shaarli.js
+++ b/tpl/default/js/shaarli.js
@@ -39,4 +39,14 @@
39 }); 39 });
40 40
41 window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); 41 window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
42})(this, this.document); \ No newline at end of file 42})(this, this.document);
43
44var searchInputs = document.querySelectorAll('#search input[type="text"]');
45[].forEach.call(searchInputs, function(searchInput) {
46 searchInput.addEventListener('focus', function(event) {
47 event.target.style.width = '250px';
48 });
49 searchInput.addEventListener('blur', function(event) {
50 event.target.style.width = '140px';
51 });
52}); \ No newline at end of file
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index 90932524..48de2e54 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -1,7 +1,6 @@
1<!DOCTYPE html> 1<!DOCTYPE html>
2<html> 2<html>
3<head> 3<head>
4 <link type="text/css" rel="stylesheet" href="../inc/awesomplete.css" />
5 {include="includes"} 4 {include="includes"}
6</head> 5</head>
7<body> 6<body>
@@ -99,11 +98,5 @@
99</div> 98</div>
100 99
101 {include="page.footer"} 100 {include="page.footer"}
102
103<script src="inc/awesomplete.min.js#"></script>
104<script src="inc/awesomplete-multiple-tags.js#"></script>
105<script>
106 awesompleteUniqueTag('#tagfilter_value');
107</script>
108</body> 101</body>
109</html> 102</html>
diff --git a/tpl/default/page.footer.html b/tpl/default/page.footer.html
index 8e380087..5e4ff9ee 100644
--- a/tpl/default/page.footer.html
+++ b/tpl/default/page.footer.html
@@ -28,4 +28,6 @@
28 <script src="{$value}#"></script> 28 <script src="{$value}#"></script>
29{/loop} 29{/loop}
30 30
31<script src="js/shaarli.js"></script> \ No newline at end of file 31<script src="js/shaarli.js"></script>
32<script src="inc/awesomplete.js#"></script>
33<script src="inc/awesomplete-multiple-tags.js#"></script>
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index f67f6e1f..3f2075c1 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -92,17 +92,17 @@
92 value="{$search_crits}" 92 value="{$search_crits}"
93 {/if} 93 {/if}
94 > 94 >
95 <input type="submit" value="Search" class="bigbutton"> 95 <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
96 </form> 96 </form>
97 <form method="GET" class="tagfilter" name="tagfilter"> 97 <form method="GET" class="tagfilter" name="tagfilter">
98 <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag" 98 <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag"
99 {if="!empty($search_crits) && $search_type=='tags'"} 99 {if="!empty($search_crits) && $search_type=='tags'"}
100 value="{function="implode(' ', $search_crits)"}" 100 value="{function="implode(' ', $search_crits)"}"
101 {/if} 101 {/if}
102 autocomplete="off" class="awesomplete" data-multiple data-minChars="1" 102 autocomplete="off" data-multiple data-minChars="1"
103 data-list="{loop="$tags"}{$key}, {/loop}" 103 data-list="{loop="$tags"}{$key}, {/loop}"
104 > 104 >
105 <input type="submit" value="Search" class="bigbutton"> 105 <button type="submit" class="search-button"><i class="fa fa-search"></i></button>
106 </form> 106 </form>
107 </div> 107 </div>
108</div> 108</div>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-05 20:29:45 +0000