diff options
author | ArthurHoaro <arthur@hoa.ro> | 2017-02-27 20:24:28 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-02-27 20:24:28 +0100 |
commit | 5978588578ca103152598ccfbe41019b12e00a4f (patch) | |
tree | eedbb83c420f6af103440bcafbe6b79738ce7521 /tpl/default/linklist.html | |
parent | 9e5a37cc7f4eb1c83222a94eb83d4e99ce4460a4 (diff) | |
parent | 7dcbfde5ffbc057a44f710e3be7e4856d235e90b (diff) | |
download | Shaarli-5978588578ca103152598ccfbe41019b12e00a4f.tar.gz Shaarli-5978588578ca103152598ccfbe41019b12e00a4f.tar.zst Shaarli-5978588578ca103152598ccfbe41019b12e00a4f.zip |
Merge pull request #754 from ArthurHoaro/webdesign2
New default template
Diffstat (limited to 'tpl/default/linklist.html')
-rw-r--r-- | tpl/default/linklist.html | 331 |
1 files changed, 213 insertions, 118 deletions
diff --git a/tpl/default/linklist.html b/tpl/default/linklist.html index 5accc92f..a9712704 100644 --- a/tpl/default/linklist.html +++ b/tpl/default/linklist.html | |||
@@ -1,151 +1,246 @@ | |||
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#" /> | 4 | {include="includes"} |
5 | {include="includes"} | ||
6 | </head> | 5 | </head> |
7 | <body> | 6 | <body> |
8 | <div id="pageheader"> | 7 | {include="page.header"} |
9 | {include="page.header"} | ||
10 | 8 | ||
11 | <div id="headerform" class="search"> | 9 | <div class="linkcount pure-u-0 pure-u-lg-visible"> |
12 | <form method="GET" class="searchform" name="searchform"> | 10 | {if="!empty($linkcount)"} |
13 | <input type="text" tabindex="1" id="searchform_value" name="searchterm" placeholder="Search text" | 11 | <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"} |
12 | {if="$privateLinkcount>0"} | ||
13 | <br><span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"} | ||
14 | {/if} | ||
15 | {/if} | ||
16 | </div> | ||
17 | |||
18 | <div id="search-linklist"> | ||
19 | |||
20 | <div class="pure-g"> | ||
21 | <div class="pure-u-1 pure-u-lg-1-2"> | ||
22 | <form method="GET" class="searchform" name="searchform"> | ||
23 | <input type="text" tabindex="1" name="searchterm" placeholder="{'Search text'|t}" | ||
14 | {if="!empty($search_term)"} | 24 | {if="!empty($search_term)"} |
15 | value="{$search_term}" | 25 | value="{$search_term}" |
16 | {/if} | 26 | {/if} |
17 | > | 27 | > |
18 | <input type="submit" value="Search" class="bigbutton"> | 28 | <button type="submit" class="search-button"><i class="fa fa-search"></i></button> |
19 | </form> | 29 | </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_tags)"} | ||
23 | value="{$search_tags}" | ||
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 | <form | ||
32 | {loop="$value.attr"} | ||
33 | {$key}="{$value}" | ||
34 | {/loop}> | ||
35 | {loop="$value.inputs"} | ||
36 | <input | ||
37 | {loop="$value"} | ||
38 | {$key}="{$value}" | ||
39 | {/loop}> | ||
40 | {/loop} | ||
41 | </form> | ||
42 | {/loop} | ||
43 | </div> | 30 | </div> |
31 | <div class="pure-u-1 pure-u-lg-1-2"> | ||
32 | <form method="GET" class="tagfilter" name="tagfilter"> | ||
33 | <input type="text" tabindex="2" name="searchtags" placeholder="{'Filter by tag'|t}" | ||
34 | {if="!empty($search_tags)"} | ||
35 | value="{$search_tags}" | ||
36 | {/if} | ||
37 | autocomplete="off" data-multiple data-minChars="1" | ||
38 | data-list="{loop="$tags"}{$key}, {/loop}" | ||
39 | > | ||
40 | <button type="submit" class="search-button"><i class="fa fa-search"></i></button> | ||
41 | </form> | ||
42 | </div> | ||
43 | </div> | ||
44 | </div> | 44 | </div> |
45 | 45 | ||
46 | {loop="$plugins_header.fields_toolbar"} | ||
47 | <form | ||
48 | {loop="$value.attr"} | ||
49 | {$key}="{$value}" | ||
50 | {/loop}> | ||
51 | <div class="toolbar-plugin pure-u-lg-1"> | ||
52 | {loop="$value.inputs"} | ||
53 | <input | ||
54 | {loop="$value"} | ||
55 | {$key}="{$value}" | ||
56 | {/loop}> | ||
57 | {/loop} | ||
58 | </div> | ||
59 | </form> | ||
60 | {/loop} | ||
61 | |||
46 | <div id="linklist"> | 62 | <div id="linklist"> |
63 | <div class="pure-g"> | ||
64 | <div class="pure-u-lg-2-24 pure-u-1-24"></div> | ||
65 | <div class="pure-u-lg-20-24 pure-u-22-24"> | ||
66 | <div class="linkcount pure-u-lg-0 center"> | ||
67 | {if="!empty($linkcount)"} | ||
68 | <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"} | ||
69 | {if="$privateLinkcount>0"} | ||
70 | · <span class="strong">{$privateLinkcount}</span> {function="t('private link', 'private links', $privateLinkcount)"} | ||
71 | {/if} | ||
72 | {/if} | ||
73 | </div> | ||
47 | 74 | ||
48 | {include="linklist.paging"} | 75 | {include="linklist.paging"} |
49 | 76 | ||
50 | <div id="plugin_zone_start_linklist" class="plugin_zone"> | 77 | <div id="plugin_zone_start_linklist" class="plugin_zone"> |
51 | {loop="$plugin_start_zone"} | 78 | {loop="$plugin_start_zone"} |
52 | {$value} | 79 | {$value} |
53 | {/loop} | 80 | {/loop} |
81 | </div> | ||
54 | </div> | 82 | </div> |
83 | </div> | ||
55 | 84 | ||
56 | {if="count($links)==0"} | 85 | {if="count($links)==0"} |
57 | <div id="searchcriteria">Nothing found.</div> | 86 | <div class="pure-g pure-alert pure-alert-error search-result"> |
58 | {elseif="!empty($search_term) or !empty($search_tags)"} | 87 | <div class="pure-u-2-24"></div> |
59 | <div id="searchcriteria"> | 88 | <div class="pure-u-20-24"> |
60 | {$result_count} results | 89 | <div id="searchcriteria">{'Nothing found.'|t}</div> |
61 | {if="!empty($search_term)"} | 90 | </div> |
62 | for <em>{$search_term}</em> | 91 | </div> |
63 | {/if} | 92 | {elseif="!empty($search_term) or !empty($search_tags)"} |
64 | {if="!empty($search_tags)"} | 93 | <div class="pure-g pure-alert pure-alert-success search-result"> |
65 | {$exploded_tags=explode(' ', $search_tags)} | 94 | <div class="pure-u-2-24"></div> |
66 | tagged | 95 | <div class="pure-u-20-24"> |
67 | {loop="$exploded_tags"} | 96 | {function="t('%s result', '%s results', $result_count)"} |
68 | <span class="linktag" title="Remove tag"> | 97 | {if="!empty($search_term)"} |
69 | <a href="?removetag={function="urlencode($value)"}">{$value} <span class="remove">x</span></a> | 98 | {'for'|t} <em><strong>{$search_term}</strong></em> |
70 | </span> | 99 | {/if} |
71 | {/loop} | 100 | {if="!empty($search_tags)"} |
72 | {/if} | 101 | {$exploded_tags=explode(' ', $search_tags)} |
73 | </div> | 102 | {'tagged'|t} |
74 | {/if} | 103 | {loop="$exploded_tags"} |
75 | <ul> | 104 | <span class="label label-tag" title="{'Remove tag'|t}"> |
76 | {loop="$links"} | 105 | <a href="?removetag={function="urlencode($value)"}">{$value}<span class="remove"><i class="fa fa-times"></i></span></a> |
77 | <li{if="$value.class"} class="{$value.class}"{/if}> | 106 | </span> |
78 | <a id="{$value.shorturl}"></a> | 107 | {/loop} |
79 | <div class="thumbnail">{$value.url|thumbnail}</div> | 108 | {/if} |
80 | <div class="linkcontainer"> | 109 | </div> |
81 | {if="isLoggedIn()"} | 110 | </div> |
82 | <div class="linkeditbuttons"> | 111 | {/if} |
83 | <form method="GET" class="buttoneditform"> | 112 | |
84 | <input type="hidden" name="edit_link" value="{$value.id}"> | 113 | <div class="pure-g"> |
85 | <input type="image" alt="Edit" src="images/edit_icon.png#" title="Edit" class="button_edit"> | 114 | <div class="pure-u-lg-2-24 pure-u-1-24"></div> |
86 | </form><br> | 115 | <div class="pure-u-lg-20-24 pure-u-22-24"> |
87 | <form method="GET" class="buttoneditform"> | 116 | {loop="links"} |
88 | <input type="hidden" name="lf_linkdate" value="{$value.id}"> | 117 | <div class="anchor" id="{$value.shorturl}"></div> |
89 | <input type="hidden" name="token" value="{$token}"> | 118 | <div class="linklist-item{if="$value.class"} {$value.class}{/if}"> |
90 | <input type="hidden" name="delete_link"> | 119 | |
91 | <input type="image" alt="Delete" src="images/delete_icon.png#" title="Delete" | 120 | <div class="linklist-item-title"> |
92 | class="button_delete" onClick="return confirmDeleteLink();"> | 121 | {if="isLoggedIn()"} |
93 | </form> | 122 | <div class="linklist-item-editbuttons"> |
94 | </div> | 123 | {if="$value.private"} |
124 | <span class="label label-private">{'Private'|t}</span> | ||
95 | {/if} | 125 | {/if} |
96 | <span class="linktitle"> | 126 | <!-- FIXME! JS translation --> |
97 | <a href="{$value.real_url}">{$value.title}</a> | 127 | <a href="?edit_link={$value.id}" title="{'Edit'|t}"><i class="fa fa-pencil-square-o edit-link"></i></a> |
98 | </span> | 128 | <a href="#" title="{'Fold'|t}" class="fold-button"><i class="fa fa-chevron-up"></i></a> |
99 | <br> | 129 | </div> |
100 | {if="$value.description"}<div class="linkdescription">{$value.description}</div>{/if} | 130 | {/if} |
101 | {if="!$hide_timestamps || isLoggedIn()"} | 131 | |
102 | {$updated=$value.updated_timestamp ? 'Edited: '. strftime('%c', $value.updated_timestamp) : 'Permalink'} | 132 | <h2> |
103 | <span class="linkdate" title="Permalink"> | 133 | <a href="{$value.real_url}"> |
104 | <a href="?{$value.shorturl}"> | 134 | {if="strpos($value.url, $value.shorturl) === false"} |
105 | <span title="{$updated}"> | 135 | <i class="fa fa-external-link"></i> |
106 | {function="strftime('%c', $value.timestamp)"} | ||
107 | {if="$value.updated_timestamp"}*{/if} | ||
108 | </span> | ||
109 | - permalink | ||
110 | </a> - | ||
111 | </span> | ||
112 | {else} | 136 | {else} |
113 | <span class="linkdate" title="Short link here"><a href="?{$value.shorturl}">permalink</a> - </span> | 137 | <i class="fa fa-sticky-note"></i> |
114 | {/if} | 138 | {/if} |
115 | 139 | ||
116 | {loop="$value.link_plugin"} | 140 | <span class="linklist-link">{$value.title}</span> |
117 | <span>{$value}</span> - | 141 | </a> |
118 | {/loop} | 142 | </h2> |
119 | 143 | </div> | |
120 | <a href="{$value.real_url}"><span class="linkurl" title="Short link">{$value.url}</span></a><br> | ||
121 | {if="$value.tags"} | ||
122 | <div class="linktaglist"> | ||
123 | {loop="$value.taglist"}<span class="linktag" title="Add tag"><a href="?addtag={$value|urlencode}">{$value}</a></span> {/loop} | ||
124 | </div> | ||
125 | {/if} | ||
126 | 144 | ||
145 | {$thumb=thumbnail($value.url)} | ||
146 | {if="$thumb!=false"} | ||
147 | <div class="linklist-item-thumbnail">{$thumb}</div> | ||
148 | {/if} | ||
127 | 149 | ||
150 | {if="$value.description"} | ||
151 | <div class="linklist-item-description"> | ||
152 | {$value.description} | ||
128 | </div> | 153 | </div> |
129 | </li> | 154 | {/if} |
130 | {/loop} | ||
131 | </ul> | ||
132 | 155 | ||
133 | <div id="plugin_zone_end_linklist" class="plugin_zone"> | 156 | <div class="linklist-item-infos clear"> |
134 | {loop="$plugin_end_zone"} | 157 | {if="$value.tags"} |
135 | {$value} | 158 | <div class="linklist-item-tags"> |
136 | {/loop} | 159 | <i class="fa fa-tags"></i> |
137 | </div> | 160 | {$tag_counter=count($value.taglist)} |
161 | {loop="value.taglist"} | ||
162 | <span class="label label-tag" title="Add tag"> | ||
163 | <a href="?addtag={$value|urlencode}">{$value}</a> | ||
164 | </span> | ||
165 | {if="$tag_counter - 1 != $counter"}·{/if} | ||
166 | {/loop} | ||
167 | </div> | ||
168 | {/if} | ||
138 | 169 | ||
139 | {include="linklist.paging"} | 170 | <div class="pure-g"> |
171 | <div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-1"> | ||
172 | <a href="?{$value.shorturl}" title="{'Permalink'|t}"> | ||
173 | {if="!$hide_timestamps || isLoggedIn()"} | ||
174 | {$updated=$value.updated_timestamp ? 'Edited: '. strftime('%c', $value.updated_timestamp) : 'Permalink'} | ||
175 | <span class="linkdate" title="{$updated}"> | ||
176 | <i class="fa fa-clock-o"></i> | ||
177 | {function="strftime('%c', $value.timestamp)"}{if="$value.updated_timestamp"}*{/if} | ||
178 | · | ||
179 | </span> | ||
180 | {/if} | ||
181 | {'permalink'|t} | ||
182 | </a> | ||
140 | 183 | ||
184 | <div class="pure-u-0 pure-u-lg-visible"> | ||
185 | {if="isset($value.link_plugin)"} | ||
186 | · | ||
187 | {$link_plugin_counter=count($value.link_plugin)} | ||
188 | {loop="$value.link_plugin"} | ||
189 | {$value} | ||
190 | {if="$link_plugin_counter - 1 != $counter"}·{/if} | ||
191 | {/loop} | ||
192 | {/if} | ||
193 | </div> | ||
194 | </div><div | ||
195 | {ignore}do not add space or line break between these div - Firefox issue{/ignore} | ||
196 | class="linklist-item-infos-url pure-u-lg-5-8 pure-u-1"> | ||
197 | <a href="{$value.real_url}" title="{$value.title}"> | ||
198 | <i class="fa fa-link"></i> {$value.url} | ||
199 | </a> | ||
200 | {if="isLoggedIn()"} | ||
201 | <a href="?delete_link&lf_linkdate={$value.id}&token={$token}" | ||
202 | title="{'Delete'|t}" class="delete-link pure-u-0 pure-u-lg-visible confirm-delete"> | ||
203 | <i class="fa fa-trash"></i> | ||
204 | </a> | ||
205 | {/if} | ||
206 | </div> | ||
207 | <div class="mobile-buttons pure-u-1 pure-u-lg-0"> | ||
208 | {if="isset($value.link_plugin)"} | ||
209 | {$link_plugin_counter=count($value.link_plugin)} | ||
210 | {loop="$value.link_plugin"} | ||
211 | {$value} | ||
212 | {if="$link_plugin_counter - 1 != $counter"}·{/if} | ||
213 | {/loop} | ||
214 | {/if} | ||
215 | {if="isLoggedIn()"} | ||
216 | · | ||
217 | <a href="?delete_link&lf_linkdate={$value.id}&token={$token}" | ||
218 | title="{'Delete'|t}" class="delete-link confirm-delete"> | ||
219 | <i class="fa fa-trash"></i> | ||
220 | </a> | ||
221 | {/if} | ||
222 | </div> | ||
223 | </div> | ||
224 | </div> | ||
225 | </div> | ||
226 | {/loop} | ||
227 | </div> | ||
228 | </div> | ||
141 | </div> | 229 | </div> |
142 | 230 | ||
143 | {include="page.footer"} | 231 | <div id="plugin_zone_end_linklist" class="plugin_zone"> |
232 | {loop="$plugin_end_zone"} | ||
233 | {$value} | ||
234 | {/loop} | ||
235 | </div> | ||
236 | |||
237 | <div class="pure-g"> | ||
238 | <div class="pure-u-lg-2-24 pure-u-1-24"></div> | ||
239 | <div class="pure-u-lg-20-24 pure-u-22-24"> | ||
240 | {include="linklist.paging"} | ||
241 | </div> | ||
242 | </div> | ||
144 | 243 | ||
145 | <script src="inc/awesomplete.min.js#"></script> | 244 | {include="page.footer"} |
146 | <script src="inc/awesomplete-multiple-tags.js#"></script> | ||
147 | <script> | ||
148 | awesompleteUniqueTag('#tagfilter_value'); | ||
149 | </script> | ||
150 | </body> | 245 | </body> |
151 | </html> | 246 | </html> |