source: bookmarks/trunk/lib/Bookmarks/list.tt @ 106

Last change on this file since 106 was 106, checked in by peter, 9 years ago

#6: Added basic pagination to the bookmarks HTML list view.
File size: 4.6 KB
Line 
1<html>
2  <head>
3    <title>[% title %]</title>
4    <base href="[% base_url %]"/>
5    <style type="text/css">
6a:hover {
7    text-decoration: none;
8}
9.edit {
10    font-size: .85em;
11}
12input, select {
13    font-size: .875em;
14    font-family: 'DejaVu Sans', sans-serif;
15}
16body, th, td {
17    margin: 0;
18    font-size: .75em;
19    font-family: 'DejaVu Sans', sans-serif;
20}
21ul {
22    margin: 0;
23    padding: 0;
24}
25ul.main {
26    height: 60%;
27    border-top: 6px solid #eee;
28    border-bottom: 6px solid #eee;
29}
30.alternate-links {
31    margin: .5em .25em;
32}
33.alternate-links li {
34    display: inline;
35}
36.alternate-links li+li:before {
37    content: ' | ';
38    color: #ccc;
39}
40.refine {
41    height: 15%;
42}
43.refine form {
44    margin: 0;
45}
46.buttons {
47    margin: .5em;
48}
49.cotags {
50    height: 75%;
51    border-top: 1px dotted #999;
52    border-bottom: 1px dotted #999;
53}
54ul.main, ul.cotags {
55    overflow-y: scroll !important;
56}
57li {
58    padding: .25em 0 0 .25em;
59    color: #999;
60    white-space: nowrap;
61    list-style-type: none;
62}
63th {
64    text-align: right;
65    font-weight: normal;
66}
67form {
68    margin: .5em;
69}
70p {
71    margin: .5em;
72}
73.tags a {
74    color: #999;
75    text-decoration: none;
76}
77.tags a:hover {
78    text-decoration: underline;
79}
80.tags {
81    color: #999;
82    margin-top: .125em;
83    margin-left: 3em;
84    font-size: .875em;
85}
86.pagination {
87    margin: .5em;
88}
89    </style>
90  </head>
91  <body>
92    <form method="get" action="">
93      <select name="tag" onchange="document.forms[0].submit()">
94        <option value="">All bookmarks</option>
95        [% FOREACH tag IN all_tags %]
96          <option value="[% tag.tag %]" [% IF tag.selected %]selected="selected"[% END %]>[% tag.tag %] ([% tag.count %])</option>
97        [% END %]
98      </select>
99      <input type="submit" value="Go"/>
100    </form>
101    <div class="pagination">
102      [% IF pages %]
103        <a href="?page=[% pages.first_page %]">«</a>
104        [% IF pages.previous_set %]
105          <a href="?page=[% pages.previous_set %]">‹</a>
106        [% END %]
107        [% FOREACH page IN pages.pages_in_set %]
108          [% IF page == pages.current_page %]
109            <strong>[% page %]</strong>
110          [% ELSE %]
111            <a href="?page=[% page %]">[% page %]</a>
112          [% END %]
113        [% END %]
114        [% IF pages.next_set %]
115          <a href="?page=[% pages.next_set %]">›</a>
116        [% END %]
117        <a href="?page=[% pages.last_page %]">»</a>
118      [% END %]
119    </div>
120    <ul class="main">
121      [%  FOREACH resource IN resources %]
122        <li>
123          <span class="edit">
124            (<a href="[% resource.id %]" onclick="window.open(this.href, 'edit_bookmark', 'width=800,height=250').focus(); return false;">Edit</a>)
125          </span>
126          <a href="[% resource.uri | html %]" title="[% resource.title | html %] ([% resource.tags.join(', ') %])">[% resource.title or resource.uri %]</a>
127          <div class="tags">
128            [% FOREACH tag IN resource.tags %]
129              [% IF loop.first %]([% END %]<a target="_self" href="?tag=[% tag %]">[% tag %]</a>[% IF loop.last %])[% ELSE %], [% END %]
130            [% END %]
131          </div>
132        </li>
133      [%  END %]
134    </ul>
135    <ul class="alternate-links">
136      [% FOREACH link IN links %]
137        <li>
138          <a href="[% link.href.canonical | html %]" type="[% link.type %]" rel="[% link.rel %]">[% link.text %]</a>
139        </li>
140      [% END %]
141    </ul>
142    <div class="refine">
143      <form method="get" action="">
144        <label>Search: <input type="text" name="q" value="[% query | html %]" size="30"/></label>
145        <div class="taglists">
146          <ul class="searchtags">
147            [% FOREACH tag IN search_tags %]
148              <li>
149                <label>
150                  <input type="checkbox" name="tag" value="[% tag %]" checked="checked"/>
151                  [% tag %]
152                </label>
153              </li>
154            [% END %]
155          </ul>
156          [% IF cotags.size %]
157            <ul class="cotags">
158              [% FOREACH tag IN cotags %]
159                <li>
160                  <label>
161                    <input type="checkbox" name="tag" value="[% tag.tag %]"/>
162                    [% tag.tag %] ([% tag.count %])
163                  </label>
164                </li>
165              [% END %]
166            </ul>
167          [% END %]
168        </div>
169        <div class="buttons">
170          <input type="submit" value="Refine"/>
171        </div>
172      </form>
173      <p>
174        <a class="bookmarklet" href="javascript:(function(){window.open(%22[% base_url %]?uri=%22+encodeURIComponent(document.location)+%22&title=%22+encodeURIComponent(document.title),%22edit_bookmark%22,%22width=800,height=250%22)})()" title="Javascript Bookmarklet">Make Bookmark</a>
175      </p>
176    </div>
177  </body>
178</html>
179
180<!--
181vim:syntax=html
182-->
Note: See TracBrowser for help on using the repository browser.