aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2016-02-21 20:30:36 +0100
committerArthurHoaro <arthur@hoa.ro>2016-08-07 12:17:36 +0200
commitdfb058c616a29cc712832e7e00a25e2f96eb44ce (patch)
treedce483cabe2d2ee886cf2187bac5079fb09ba271 /tpl
parent9fe38139b9bc9e9fb6736d8e539c217fb4e5b6f3 (diff)
downloadShaarli-dfb058c616a29cc712832e7e00a25e2f96eb44ce.tar.gz
Shaarli-dfb058c616a29cc712832e7e00a25e2f96eb44ce.tar.zst
Shaarli-dfb058c616a29cc712832e7e00a25e2f96eb44ce.zip
Shaarli header template
Diffstat (limited to 'tpl')
-rw-r--r--tpl/default/css/shaarli.css141
-rw-r--r--tpl/default/linklist.html31
-rw-r--r--tpl/default/page.header.html68
3 files changed, 144 insertions, 96 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 7213c4a4..8deb008e 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -1,21 +1,64 @@
1/**
2 * General
3 */
1body { 4body {
2 background: url(../img/noise.png) #979797; 5
3} 6}
4 7
5header { 8.strong {
9 font-weight: bold;
10}
6 11
12.clear {
13 clear: both;
14}
15
16/**
17 * Extends Pure grids responsive to hide items.
18 * Use xx-0 to hide an item on xx screen.
19 * Display it at any level with xx-visible.
20 */
21.pure-u-0 { display: none !important; }
22@media screen and (min-width: 35.5em) {
23 .pure-u-sm-0 { display: none !important; }
24 .pure-u-sm-visible { display: inherit !important; }
25}
26@media screen and (min-width: 48em) {
27 .pure-u-md-0 { display: none !important; }
28 .pure-u-md-visible { display: inherit !important; }
29}
30@media screen and (min-width: 64em) {
31 .pure-u-lg-0 { display: none !important; }
32 .pure-u-lg-visible { display: inherit !important; }
33}
34@media screen and (min-width: 80em) {
35 .pure-u-xl-0 { display: none !important; }
36 .pure-u-xl-visible { display: inherit !important; }
7} 37}
8 38
9/** 39/**
10 * MENU 40 * MENU
11 **/ 41 **/
12.pure-menu { 42.shaarli-menu {
13 /*position: fixed;*/ 43 position: fixed;
14 background: #16a085; 44 top: 0;
45 width: 100%;
46 background: #1b926c;
47 -webkit-font-smoothing: antialiased;
48 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
49 max-height: 2.1em;
50 transition: max-height 0.5s;
51 overflow: hidden;
52 z-index: 999;
53}
54
55.shaarli-menu.open {
56 max-height: 500px;
57 transition: max-height 0.75s;
15} 58}
16 59
17.pure-menu-selected { 60.pure-menu-selected {
18 background: #049372; 61 background: #1A694C;
19} 62}
20 63
21.pure-menu-link, 64.pure-menu-link,
@@ -27,24 +70,10 @@ header {
27 70
28.pure-menu-link:hover, 71.pure-menu-link:hover,
29.pure-menu-selected .pure-menu-link:hover { 72.pure-menu-selected .pure-menu-link:hover {
30 color: #fff; 73 color: #d1fff0;
31 background: transparent; 74 background: transparent;
32} 75}
33 76
34.shaarli-menu {
35 margin-bottom: 1em;
36 -webkit-font-smoothing: antialiased;
37 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
38 max-height: 2.1em;
39 transition: max-height 0.5s;
40 overflow: hidden;
41}
42
43.shaarli-menu.open {
44 max-height: 500px;
45 transition: max-height 0.75s;
46}
47
48.menu-toggle { 77.menu-toggle {
49 width: 34px; 78 width: 34px;
50 height: 34px; 79 height: 34px;
@@ -85,24 +114,62 @@ header {
85} 114}
86 115
87/** 116/**
88 * Extends Pure grids responsive to hide items. 117 * Header
89 * Use xx-0 to hide an item on xx screen.
90 * Display it at any level with xx-visible.
91 */ 118 */
92.pure-u-0 { display: none !important; } 119#header {
93@media screen and (min-width: 35.5em) { 120 width: 100%;
94 .pure-u-sm-0 { display: none !important; } 121 height: 150px;
95 .pure-u-sm-visible { display: inherit !important; } 122 background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed center 2.5em;
96} 123}
97@media screen and (min-width: 48em) { 124
98 .pure-u-md-0 { display: none !important; } 125#header h1 {
99 .pure-u-md-visible { display: inherit !important; } 126 position: fixed;
127 float: left;
128 margin: 45px 0 0 0;
129 width: 44%;
130 height: 100px;
131 text-align: right;
100} 132}
101@media screen and (min-width: 64em) { 133
102 .pure-u-lg-0 { display: none !important; } 134#header h1 a, #header h1 a:visited {
103 .pure-u-lg-visible { display: inherit !important; } 135 /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
136 display: -ms-flexbox;
137 display: flex;
138 flex-direction: column;
139 justify-content: center;
140
141 overflow: hidden;
142 height: 100px;
143 color: #b0ddce;
144 text-decoration: none;
145 z-index: 1;
146
147 /* TODO: font? */
104} 148}
105@media screen and (min-width: 80em) { 149
106 .pure-u-xl-0 { display: none !important; } 150#header h1 a:hover {
107 .pure-u-xl-visible { display: inherit !important; } 151 color: #d1fff0;
152}
153
154#linkcount {
155 position: fixed;
156 top: 40px;
157 right: 10px;
158 color: #b0ddce;
159 font-size: 0.8em;
160}
161
162#search {
163 position: fixed;
164 top: 55px;
165 right: 10px;
166 width: 44%;
167 text-align: right;
168}
169
170#content {
171 position: relative;
172 box-shadow: 0 -2px 1em #797979;
173 z-index: 2;
174 background: url(../img/noise.png) #979797;
108} \ No newline at end of file 175} \ No newline at end of file
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html
index ca91699e..90932524 100644
--- a/tpl/default/linklist.html
+++ b/tpl/default/linklist.html
@@ -5,32 +5,13 @@
5 {include="includes"} 5 {include="includes"}
6</head> 6</head>
7<body> 7<body>
8<div id="pageheader"> 8{include="page.header"}
9 {include="page.header"}
10 9
11 <div id="headerform" class="search"> 10<div id="headerform" class="search">
12 <form method="GET" class="searchform" name="searchform"> 11
13 <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text" 12 <!--{loop="$plugins_header.fields_toolbar"}
14 {if="!empty($search_crits) && $search_type=='fulltext'"} 13 {$value}
15 value="{$search_crits}" 14 {/loop}-->
16 {/if}
17 >
18 <input type="submit" value="Search" class="bigbutton">
19 </form>
20 <form method="GET" class="tagfilter" name="tagfilter">
21 <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag"
22 {if="!empty($search_crits) && $search_type=='tags'"}
23 value="{function="implode(' ', $search_crits)"}"
24 {/if}
25 autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
26 data-list="{loop="$tags"}{$key}, {/loop}"
27 >
28 <input type="submit" value="Search" class="bigbutton">
29 </form>
30 {loop="$plugins_header.fields_toolbar"}
31 {$value}
32 {/loop}
33 </div>
34</div> 15</div>
35 16
36<div id="linklist"> 17<div id="linklist">
diff --git a/tpl/default/page.header.html b/tpl/default/page.header.html
index 9a4ecd85..f67f6e1f 100644
--- a/tpl/default/page.header.html
+++ b/tpl/default/page.header.html
@@ -1,6 +1,7 @@
1<div class="shaarli-menu pure-g" id="shaarli-menu"> 1<div class="shaarli-menu pure-g" id="shaarli-menu">
2 <div class="pure-u-lg-0 pure-u-1"> 2 <div class="pure-u-lg-0 pure-u-1">
3 <div class="pure-menu"> 3 <div class="pure-menu">
4 <!-- FIXME! default value in PHP -->
4 <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}" 5 <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}"
5 class="pure-menu-link"> 6 class="pure-menu-link">
6 <i class="fa fa-home"></i> 7 <i class="fa fa-home"></i>
@@ -74,46 +75,47 @@
74 </div> 75 </div>
75</div> 76</div>
76 77
77<div id="logo" title="Share your links !" onclick="document.location='?';"></div> 78<div id="header" class="pure-u-0 pure-u-lg-visible">
79 <h1 id="header-title">
80 <a href="{if="!empty($GLOBALS['titleLink'])"}{$GLOBALS['titleLink']}{else}?{/if}">
81 {$GLOBALS['title']}
82 </a>
83 </h1>
84 <div id="linkcount">
85 {if="!empty($linkcount)"}<span class="strong">{$linkcount}</span> shaares{/if}
86 </div>
78 87
79<div id="linkcount" class="nomobile"> 88 <div id="search">
80 {if="!empty($linkcount)"}{$linkcount} links{/if} 89 <form method="GET" class="searchform" name="searchform">
90 <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text"
91 {if="!empty($search_crits) && $search_type=='fulltext'"}
92 value="{$search_crits}"
93 {/if}
94 >
95 <input type="submit" value="Search" class="bigbutton">
96 </form>
97 <form method="GET" class="tagfilter" name="tagfilter">
98 <input type="text" tabindex="2" name="searchtags" id="tagfilter_value" placeholder="Filter by tag"
99 {if="!empty($search_crits) && $search_type=='tags'"}
100 value="{function="implode(' ', $search_crits)"}"
101 {/if}
102 autocomplete="off" class="awesomplete" data-multiple data-minChars="1"
103 data-list="{loop="$tags"}{$key}, {/loop}"
104 >
105 <input type="submit" value="Search" class="bigbutton">
106 </form>
107 </div>
81</div> 108</div>
82 109
83<div id="menu"> 110<div id="content">
84 <ul> 111
85 <li><span id="shaarli_title">
86 <a href="{$titleLink}">{$shaarlititle}</a>
87 </span>
88 </li>
89 112
90{if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"} 113{if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}
91 {ignore} When called as a popup from bookmarklet, do not display menu. {/ignore} 114 {ignore} When called as a popup from bookmarklet, do not display menu. {/ignore}
92{else} 115{else}
93<li><a href="?" class="nomobile">Home</a></li> 116
94 {if="isLoggedIn()"}
95 <li><a href="?do=logout">Logout</a></li>
96 <li><a href="?do=tools">Tools</a></li>
97 <li><a href="?do=addlink">Add link</a></li>
98 {elseif="$GLOBALS['config']['OPEN_SHAARLI']"}
99 <li><a href="?do=tools">Tools</a></li>
100 <li><a href="?do=addlink">Add link</a></li>
101 {else}
102 <li><a href="?do=login">Login</a></li>
103 {/if}
104 <li><a href="{$feedurl}?do=rss{$searchcrits}" class="nomobile">RSS Feed</a></li>
105 {if="$GLOBALS['config']['SHOW_ATOM']"}
106 <li><a href="{$feedurl}?do=atom{$searchcrits}" class="nomobile">ATOM Feed</a></li>
107 {/if}
108 <li><a href="?do=tagcloud">Tag cloud</a></li>
109 <li><a href="?do=picwall{$searchcrits}">Picture wall</a></li>
110 <li><a href="?do=daily">Daily</a></li>
111 {loop="$plugins_header.buttons_toolbar"}
112 {$value}
113 {/loop}
114{/if} 117{/if}
115 </ul> 118
116</div>
117 119
118{if="!empty($plugin_errors) && isLoggedIn()"} 120{if="!empty($plugin_errors) && isLoggedIn()"}
119 <ul class="errors"> 121 <ul class="errors">
@@ -124,5 +126,3 @@
124{/if} 126{/if}
125 127
126<div class="clear"></div> 128<div class="clear"></div>
127
128