diff options
author | Nicolas LÅ“uillet <nicolas@loeuillet.org> | 2016-06-23 09:25:01 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2016-06-23 09:25:01 +0200 |
commit | 49e2854d5c15bbce3f24f91da34450e8f209295b (patch) | |
tree | f5aa95445549cc151e86f144b40464eecee28cf7 /app/Resources/static/themes/material | |
parent | 4eaaa27bb5b9a5725b26471a39548d764fc9cd0a (diff) | |
parent | 496cfdc0172fd55cb555f74b64704c8f50c71b77 (diff) | |
download | wallabag-49e2854d5c15bbce3f24f91da34450e8f209295b.tar.gz wallabag-49e2854d5c15bbce3f24f91da34450e8f209295b.tar.zst wallabag-49e2854d5c15bbce3f24f91da34450e8f209295b.zip |
Merge pull request #2142 from wallabag/v2-use-npm
Manage assets through npm
Diffstat (limited to 'app/Resources/static/themes/material')
-rwxr-xr-x | app/Resources/static/themes/material/css/main.css | 611 | ||||
-rwxr-xr-x | app/Resources/static/themes/material/css/print.css | 64 | ||||
-rwxr-xr-x | app/Resources/static/themes/material/js/init.js | 117 |
3 files changed, 792 insertions, 0 deletions
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css new file mode 100755 index 00000000..473b0308 --- /dev/null +++ b/app/Resources/static/themes/material/css/main.css | |||
@@ -0,0 +1,611 @@ | |||
1 | /* ========================================================================== | ||
2 | Sommaire | ||
3 | |||
4 | 0 = Common | ||
5 | 1 = Nav | ||
6 | 2 = Side-nav | ||
7 | 3 = Filters slider | ||
8 | 4 = Cards | ||
9 | 5 = Article | ||
10 | 6 = Media queries | ||
11 | 7 = Font | ||
12 | 8 = Others | ||
13 | |||
14 | ========================================================================== */ | ||
15 | |||
16 | /* ========================================================================== | ||
17 | 0 = Common | ||
18 | ========================================================================== */ | ||
19 | |||
20 | @font-face { | ||
21 | font-family: icomoon; | ||
22 | src: url("../fonts/icomoon.eot"); | ||
23 | src: | ||
24 | url("../fonts/icomoon.eot#iefix") format("embedded-opentype"), | ||
25 | url("../fonts/icomoon.ttf") format("truetype"), | ||
26 | url("../fonts/icomoon.woff") format("woff"), | ||
27 | url("../fonts/icomoon.svg#icomoon") format("svg"); | ||
28 | font-weight: normal; | ||
29 | font-style: normal; | ||
30 | } | ||
31 | |||
32 | @font-face { | ||
33 | font-family: 'Material Icons'; | ||
34 | font-style: normal; | ||
35 | font-weight: 400; | ||
36 | src: url(../fonts/MaterialIcons-Regular.eot); | ||
37 | /* For IE6-8 */ | ||
38 | src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype"); | ||
39 | } | ||
40 | |||
41 | .material-icons { | ||
42 | font-family: 'Material Icons'; | ||
43 | font-weight: normal; | ||
44 | font-style: normal; | ||
45 | font-size: 24px; /* Preferred icon size */ | ||
46 | width: 1em; | ||
47 | height: 1em; | ||
48 | display: inline-block; | ||
49 | line-height: 1; | ||
50 | text-transform: none; | ||
51 | letter-spacing: normal; | ||
52 | word-wrap: normal; | ||
53 | white-space: nowrap; | ||
54 | direction: ltr; | ||
55 | |||
56 | /* Support for all WebKit browsers. */ | ||
57 | -webkit-font-smoothing: antialiased; | ||
58 | /* Support for Safari and Chrome. */ | ||
59 | text-rendering: optimizeLegibility; | ||
60 | |||
61 | /* Support for Firefox. */ | ||
62 | -moz-osx-font-smoothing: grayscale; | ||
63 | |||
64 | /* Support for IE. */ | ||
65 | font-feature-settings: 'liga'; | ||
66 | } | ||
67 | |||
68 | [class^="icon-"], | ||
69 | [class*=" icon-"] { | ||
70 | font-family: icomoon; | ||
71 | speak: none; | ||
72 | font-style: normal; | ||
73 | font-weight: normal; | ||
74 | font-variant: normal; | ||
75 | text-transform: none; | ||
76 | line-height: 1; | ||
77 | |||
78 | /* Better Font Rendering =========== */ | ||
79 | -webkit-font-smoothing: antialiased; | ||
80 | -moz-osx-font-smoothing: grayscale; | ||
81 | } | ||
82 | |||
83 | body { | ||
84 | display: flex; | ||
85 | min-height: 100vh; | ||
86 | flex-direction: column; | ||
87 | background: #f0f0f0; | ||
88 | } | ||
89 | |||
90 | body.login main { | ||
91 | padding: 0; | ||
92 | } | ||
93 | |||
94 | .border-bottom { | ||
95 | border-bottom: 1px solid #ddd; | ||
96 | } | ||
97 | |||
98 | nav, | ||
99 | main, | ||
100 | footer { | ||
101 | padding-left: 240px; | ||
102 | } | ||
103 | |||
104 | main, | ||
105 | #content, | ||
106 | .valign-wrapper { | ||
107 | height: 100%; | ||
108 | } | ||
109 | |||
110 | #main { | ||
111 | flex: 1 0 auto; | ||
112 | } | ||
113 | |||
114 | .results { | ||
115 | height: 1em; | ||
116 | line-height: 30px; | ||
117 | } | ||
118 | |||
119 | .results .nb-results, | ||
120 | .results .pagination { | ||
121 | margin: 15px; | ||
122 | margin-bottom: 0; | ||
123 | } | ||
124 | |||
125 | .pagination { | ||
126 | float: right; | ||
127 | } | ||
128 | |||
129 | .pagination ul { | ||
130 | margin: 0 !important; | ||
131 | } | ||
132 | |||
133 | .pagination li { | ||
134 | padding: 0; | ||
135 | } | ||
136 | |||
137 | .pagination a { | ||
138 | padding: 0 10px; | ||
139 | height: 30px; | ||
140 | display: block; | ||
141 | } | ||
142 | |||
143 | .pagination .disabled { | ||
144 | margin-right: 10px; | ||
145 | margin-left: 10px; | ||
146 | } | ||
147 | |||
148 | div.pagination ul .prev.disabled, | ||
149 | div.pagination ul .next.disabled { | ||
150 | display: none; | ||
151 | } | ||
152 | |||
153 | .pagination li.active span { | ||
154 | padding: 0px 10px; | ||
155 | height: 30px; | ||
156 | display: block; | ||
157 | color: #fff; | ||
158 | } | ||
159 | |||
160 | .page-footer .footer-copyright p { | ||
161 | display: inline; | ||
162 | } | ||
163 | |||
164 | .hidden { | ||
165 | display: none; | ||
166 | } | ||
167 | |||
168 | .picker__date-display { | ||
169 | display: none; | ||
170 | } | ||
171 | |||
172 | footer.page-footer { | ||
173 | margin-top: 10px; | ||
174 | padding-top: 10px; | ||
175 | } | ||
176 | |||
177 | footer .row { | ||
178 | margin-bottom: 10px; | ||
179 | } | ||
180 | |||
181 | /* ========================================================================== | ||
182 | 1 = Nav | ||
183 | ========================================================================== */ | ||
184 | |||
185 | nav input { | ||
186 | color: #aaa; | ||
187 | } | ||
188 | |||
189 | .nav-wrapper .button-collapse { | ||
190 | padding: 0 15px; | ||
191 | } | ||
192 | |||
193 | .nav-input { | ||
194 | display: none; | ||
195 | } | ||
196 | |||
197 | .nav-panels { | ||
198 | overflow: hidden; | ||
199 | } | ||
200 | |||
201 | .nav-panel-buttom li { | ||
202 | max-height: 64px; | ||
203 | } | ||
204 | |||
205 | .nav-panels { | ||
206 | transition: background 0.2s ease; | ||
207 | } | ||
208 | |||
209 | .nav-panel-add .add, | ||
210 | .nav-panel-search .search, | ||
211 | .nav-panels .close { | ||
212 | color: #444 !important; | ||
213 | } | ||
214 | |||
215 | .nav-panels .action { | ||
216 | padding-left: 0.75rem; | ||
217 | font-size: 2.1rem; | ||
218 | white-space: nowrap; | ||
219 | } | ||
220 | |||
221 | .nav-panels .input-field input { | ||
222 | display: block; | ||
223 | line-height: inherit; | ||
224 | padding-left: 4rem !important; | ||
225 | width: calc(100% - 8rem); | ||
226 | } | ||
227 | |||
228 | .nav-panels .input-field input:focus { | ||
229 | background-color: #fff; | ||
230 | border: 0; | ||
231 | box-shadow: none; | ||
232 | color: #444; | ||
233 | } | ||
234 | |||
235 | .input-field.nav-panel-add label { | ||
236 | left: 1rem; | ||
237 | } | ||
238 | |||
239 | .input-field.nav-panel-add .close { | ||
240 | position: absolute; | ||
241 | top: 0; | ||
242 | right: 1rem; | ||
243 | color: transparent; | ||
244 | cursor: pointer; | ||
245 | font-size: 2rem; | ||
246 | transition: 0.3s color; | ||
247 | } | ||
248 | |||
249 | #button_filters { | ||
250 | display: none; | ||
251 | } | ||
252 | |||
253 | #button_export { | ||
254 | display: none; | ||
255 | } | ||
256 | |||
257 | /* ========================================================================== | ||
258 | 2 = Side-nav | ||
259 | ========================================================================== */ | ||
260 | |||
261 | .side-nav.fixed a { | ||
262 | font-size: 13px; | ||
263 | line-height: 44px; | ||
264 | height: 44px; | ||
265 | } | ||
266 | |||
267 | .side-nav .collapsible-header, | ||
268 | .side-nav.fixed .collapsible-header { | ||
269 | height: 45px; | ||
270 | line-height: 44px; | ||
271 | padding: 0 20px; | ||
272 | } | ||
273 | |||
274 | .bold > a { | ||
275 | font-weight: bold; | ||
276 | } | ||
277 | |||
278 | .side-nav > li.logo { | ||
279 | line-height: 0; | ||
280 | text-align: center; | ||
281 | } | ||
282 | |||
283 | #main .logo a { | ||
284 | height: 100pt; | ||
285 | } | ||
286 | |||
287 | #main .logo img { | ||
288 | height: 100pt; | ||
289 | width: 100pt; | ||
290 | } | ||
291 | |||
292 | #main .logo:hover { | ||
293 | background: transparent; | ||
294 | } | ||
295 | |||
296 | .side-nav li { | ||
297 | padding: 0; | ||
298 | } | ||
299 | |||
300 | .side-nav a { | ||
301 | margin: 0 1rem; | ||
302 | } | ||
303 | |||
304 | /* ========================================================================== | ||
305 | * 3 = Filters slider | ||
306 | * ========================================================================== */ | ||
307 | |||
308 | #filters button { | ||
309 | padding: 0; | ||
310 | width: 100%; | ||
311 | } | ||
312 | |||
313 | .side-nav.fixed.right-aligned { | ||
314 | right: -250px; | ||
315 | left: auto !important; | ||
316 | overflow-y: visible; | ||
317 | } | ||
318 | |||
319 | #filters div.with-checkbox { | ||
320 | height: 3rem; | ||
321 | margin-top: 0; | ||
322 | } | ||
323 | |||
324 | /* ========================================================================== | ||
325 | 4 = Cards | ||
326 | ========================================================================== */ | ||
327 | |||
328 | main #content { | ||
329 | padding: 0 0.5rem; | ||
330 | } | ||
331 | |||
332 | main ul.row { | ||
333 | padding: 0 0.75rem; | ||
334 | } | ||
335 | |||
336 | .data .card .card-body { | ||
337 | height: 22em; | ||
338 | overflow: hidden; | ||
339 | } | ||
340 | |||
341 | .card .card-content .card-title { | ||
342 | line-height: 32px; | ||
343 | } | ||
344 | |||
345 | .card .card-content .estimatedTime { | ||
346 | margin-bottom: 10px; | ||
347 | } | ||
348 | |||
349 | .card .card-action .original { | ||
350 | line-height: 24px; | ||
351 | } | ||
352 | |||
353 | .card .card-action ul.links { | ||
354 | margin: 0; | ||
355 | font-size: 24px; | ||
356 | line-height: 24px; | ||
357 | } | ||
358 | |||
359 | .card .card-action a { | ||
360 | color: #fff; | ||
361 | margin: 0; | ||
362 | } | ||
363 | |||
364 | .card .card-action a:hover { | ||
365 | color: #fff; | ||
366 | } | ||
367 | |||
368 | .settings .div_tabs { | ||
369 | padding-bottom: 15px; | ||
370 | } | ||
371 | |||
372 | .card.sw { | ||
373 | max-width: 370px; | ||
374 | margin-left: auto; | ||
375 | margin-right: auto; | ||
376 | } | ||
377 | |||
378 | .card .card-image { | ||
379 | height: 14em; | ||
380 | } | ||
381 | |||
382 | .card .card-image .preview { | ||
383 | height: 14em; | ||
384 | background-size: cover; | ||
385 | background-repeat: no-repeat; | ||
386 | background-position: 50%; | ||
387 | } | ||
388 | |||
389 | /* ========================================================================== | ||
390 | 5 = Article | ||
391 | ========================================================================== */ | ||
392 | |||
393 | #article { | ||
394 | font-size: 20px; | ||
395 | margin: 0 auto; | ||
396 | max-width: 40em; | ||
397 | } | ||
398 | |||
399 | #article img { | ||
400 | max-width: 100%; | ||
401 | height: auto; | ||
402 | } | ||
403 | |||
404 | .reader-mode { | ||
405 | width: 95px !important; | ||
406 | transition: width 0.2s ease; | ||
407 | } | ||
408 | |||
409 | .reader-mode:hover { | ||
410 | width: 240px !important; | ||
411 | } | ||
412 | |||
413 | .reader-mode .collapsible-body { | ||
414 | height: 0; | ||
415 | overflow: hidden; | ||
416 | } | ||
417 | |||
418 | .reader-mode:hover .collapsible-body { | ||
419 | height: auto; | ||
420 | } | ||
421 | |||
422 | .reader-mode span { | ||
423 | opacity: 0; | ||
424 | transition: opacity 0.2s ease; | ||
425 | } | ||
426 | |||
427 | .reader-mode:hover span { | ||
428 | opacity: 1; | ||
429 | } | ||
430 | |||
431 | .progress { | ||
432 | position: fixed; | ||
433 | top: 0; | ||
434 | width: 100%; | ||
435 | height: 3px; | ||
436 | margin: 0; | ||
437 | z-index: 9999; | ||
438 | } | ||
439 | |||
440 | #article aside .link { | ||
441 | color: #000; | ||
442 | font-size: 0.8em; | ||
443 | text-decoration: none; | ||
444 | } | ||
445 | |||
446 | #article aside #list { | ||
447 | float: right; | ||
448 | margin-right: 15px; | ||
449 | } | ||
450 | |||
451 | #article aside .chip { | ||
452 | background-color: #039be5; | ||
453 | color: #fff; | ||
454 | } | ||
455 | |||
456 | #article aside .chip i { | ||
457 | color: #fff; | ||
458 | } | ||
459 | |||
460 | /* ========================================================================== | ||
461 | 6 = Media queries | ||
462 | ========================================================================== */ | ||
463 | |||
464 | @media only screen and (max-width: 992px) { | ||
465 | header, | ||
466 | main, | ||
467 | footer { | ||
468 | padding-left: 0; | ||
469 | } | ||
470 | nav, | ||
471 | main, | ||
472 | footer { | ||
473 | padding-left: 0; | ||
474 | } | ||
475 | .pagination { | ||
476 | width: auto; | ||
477 | } | ||
478 | .reader-mode { | ||
479 | width: 240px !important; | ||
480 | } | ||
481 | .reader-mode span { | ||
482 | opacity: 1; | ||
483 | } | ||
484 | .tabs { | ||
485 | display: inline-block; | ||
486 | height: auto; | ||
487 | } | ||
488 | .tab { | ||
489 | min-width: 100%; | ||
490 | } | ||
491 | .indicator { | ||
492 | display: none; | ||
493 | } | ||
494 | .pagination li.prev, .pagination li.next { | ||
495 | width: auto; | ||
496 | } | ||
497 | } | ||
498 | |||
499 | @media only screen and (min-width: 400px) { | ||
500 | .nav-panel-buttom { | ||
501 | float: right; | ||
502 | } | ||
503 | } | ||
504 | |||
505 | @media only screen and (min-width: 993px) and (max-width: 1180px) { | ||
506 | .row .col.l1 { | ||
507 | width: 25%; | ||
508 | margin-left: 0; | ||
509 | } | ||
510 | .row .col.l2 { | ||
511 | width: 33.33333%; | ||
512 | margin-left: 0; | ||
513 | } | ||
514 | .row .col.l3 { | ||
515 | width: 41.66667%; | ||
516 | margin-left: 0; | ||
517 | } | ||
518 | .row .col.l4 { | ||
519 | width: 50%; | ||
520 | margin-left: 0; | ||
521 | } | ||
522 | .row .col.l5 { | ||
523 | width: 58.33333%; | ||
524 | margin-left: 0; | ||
525 | } | ||
526 | .row .col.l6 { | ||
527 | width: 66.66667%; | ||
528 | margin-left: 0; | ||
529 | } | ||
530 | .row .col.l7 { | ||
531 | width: 75%; | ||
532 | margin-left: 0; | ||
533 | } | ||
534 | .row .col.l8 { | ||
535 | width: 83.33333%; | ||
536 | margin-left: 0; | ||
537 | } | ||
538 | .row .col.l9 { | ||
539 | width: 91.66667%; | ||
540 | margin-left: 0; | ||
541 | } | ||
542 | .row .col.l10 { | ||
543 | width: 100%; | ||
544 | margin-left: 0; | ||
545 | } | ||
546 | } | ||
547 | |||
548 | @media only screen and (max-width: 350px) { | ||
549 | .nb-results { | ||
550 | display: none; | ||
551 | } | ||
552 | } | ||
553 | |||
554 | /* ========================================================================== | ||
555 | 7 = Font | ||
556 | ========================================================================== */ | ||
557 | |||
558 | .icon-google-plus2::before { | ||
559 | content: "\ea89"; | ||
560 | } | ||
561 | |||
562 | .icon-facebook2::before { | ||
563 | content: "\ea8d"; | ||
564 | } | ||
565 | |||
566 | .icon-twitter::before { | ||
567 | content: "\ea91"; | ||
568 | } | ||
569 | |||
570 | .icon-apple::before { | ||
571 | content: "\eabf"; | ||
572 | } | ||
573 | |||
574 | .icon-android::before { | ||
575 | content: "\eac1"; | ||
576 | } | ||
577 | |||
578 | .icon-chrome::before { | ||
579 | content: "\eae5"; | ||
580 | } | ||
581 | |||
582 | .icon-firefox::before { | ||
583 | content: "\eae6"; | ||
584 | } | ||
585 | |||
586 | footer [class^="icon-"], | ||
587 | footer [class*=" icon-"] { | ||
588 | font-size: 2em; | ||
589 | transition: text-shadow 0.2s ease; | ||
590 | padding-right: 10px; | ||
591 | } | ||
592 | |||
593 | footer [class^="icon-"]::hover, | ||
594 | footer [class*=" icon-"]::hover { | ||
595 | text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); | ||
596 | } | ||
597 | |||
598 | /* ========================================================================== | ||
599 | 8 = Others | ||
600 | ========================================================================== */ | ||
601 | |||
602 | /* force height on non-input field in the settings page */ | ||
603 | div.settings div.input-field div, | ||
604 | div.settings div.input-field ul { | ||
605 | margin-top: 40px; | ||
606 | } | ||
607 | |||
608 | /* but avoid to kill all file input */ | ||
609 | div.settings div.file-field div { | ||
610 | margin-top: inherit; | ||
611 | } | ||
diff --git a/app/Resources/static/themes/material/css/print.css b/app/Resources/static/themes/material/css/print.css new file mode 100755 index 00000000..a16be71e --- /dev/null +++ b/app/Resources/static/themes/material/css/print.css | |||
@@ -0,0 +1,64 @@ | |||
1 | @media print { | ||
2 | /* ### Layout ### */ | ||
3 | |||
4 | body { | ||
5 | font-family: Serif; | ||
6 | background-color: #fff; | ||
7 | } | ||
8 | |||
9 | @page { | ||
10 | margin: 1cm; | ||
11 | } | ||
12 | |||
13 | img { | ||
14 | max-width: 100% !important; | ||
15 | } | ||
16 | |||
17 | /* ### Content ### */ | ||
18 | |||
19 | /* Hide useless blocks */ | ||
20 | body > header, | ||
21 | #article_toolbar, | ||
22 | #links, | ||
23 | #sort, | ||
24 | body > footer, | ||
25 | .top_link, | ||
26 | div.tools, | ||
27 | header div, | ||
28 | .messages, | ||
29 | .entry + .results { | ||
30 | display: none !important; | ||
31 | } | ||
32 | |||
33 | article { | ||
34 | border: none !important; | ||
35 | } | ||
36 | |||
37 | /* Add URL after links */ | ||
38 | .vieworiginal a::after { | ||
39 | content: " (" attr(href) ")"; | ||
40 | } | ||
41 | |||
42 | /* Add explanation after abbr */ | ||
43 | abbr[title]::after { | ||
44 | content: " (" attr(title) ")"; | ||
45 | } | ||
46 | |||
47 | /* Change border on current pager item */ | ||
48 | .pagination span.current { | ||
49 | border-style: dashed; | ||
50 | } | ||
51 | |||
52 | #main { | ||
53 | width: 100%; | ||
54 | padding: 0; | ||
55 | margin: 0; | ||
56 | margin-left: 0; | ||
57 | padding-right: 0; | ||
58 | padding-bottom: 0; | ||
59 | } | ||
60 | |||
61 | #article { | ||
62 | width: 100%; | ||
63 | } | ||
64 | } | ||
diff --git a/app/Resources/static/themes/material/js/init.js b/app/Resources/static/themes/material/js/init.js new file mode 100755 index 00000000..d6a87941 --- /dev/null +++ b/app/Resources/static/themes/material/js/init.js | |||
@@ -0,0 +1,117 @@ | |||
1 | var $ = require('jquery'); | ||
2 | require('materialize'); | ||
3 | var annotator = require('annotator'); | ||
4 | |||
5 | function initFilters() { | ||
6 | // no display if filters not aviable | ||
7 | if ($('div').is('#filters')) { | ||
8 | $('#button_filters').show(); | ||
9 | $('.button-collapse-right').sideNav({ edge: 'right' }); | ||
10 | $('#clear_form_filters').on('click', function () { | ||
11 | $('#filters input').val(''); | ||
12 | $('#filters :checked').removeAttr('checked'); | ||
13 | return false; | ||
14 | }); | ||
15 | } | ||
16 | } | ||
17 | |||
18 | function initExport() { | ||
19 | // no display if export not aviable | ||
20 | if ($('div').is('#export')) { | ||
21 | $('#button_export').show(); | ||
22 | $('.button-collapse-right').sideNav({ edge: 'right' }); | ||
23 | } | ||
24 | } | ||
25 | |||
26 | $(document).ready(function () { | ||
27 | // sideNav | ||
28 | $('.button-collapse').sideNav(); | ||
29 | $('select').material_select(); | ||
30 | $('.collapsible').collapsible({ | ||
31 | accordion: false, | ||
32 | }); | ||
33 | $('.datepicker').pickadate({ | ||
34 | selectMonths: true, | ||
35 | selectYears: 15, | ||
36 | formatSubmit: 'dd/mm/yyyy', | ||
37 | hiddenName: true, | ||
38 | format: 'dd/mm/yyyy', | ||
39 | }); | ||
40 | initFilters(); | ||
41 | initExport(); | ||
42 | |||
43 | $('#nav-btn-add-tag').on('click', function () { | ||
44 | $('.nav-panel-add-tag').toggle(100); | ||
45 | $('.nav-panel-menu').addClass('hidden'); | ||
46 | $('#tag_label').focus(); | ||
47 | return false; | ||
48 | }); | ||
49 | $('#nav-btn-add').on('click', function () { | ||
50 | $('.nav-panel-buttom').hide(100); | ||
51 | $('.nav-panel-add').show(100); | ||
52 | $('.nav-panels .action').hide(100); | ||
53 | $('.nav-panel-menu').addClass('hidden'); | ||
54 | $('.nav-panels').css('background', 'white'); | ||
55 | $('#entry_url').focus(); | ||
56 | return false; | ||
57 | }); | ||
58 | $('#nav-btn-search').on('click', function () { | ||
59 | $('.nav-panel-buttom').hide(100); | ||
60 | $('.nav-panel-search').show(100); | ||
61 | $('.nav-panels .action').hide(100); | ||
62 | $('.nav-panel-menu').addClass('hidden'); | ||
63 | $('.nav-panels').css('background', 'white'); | ||
64 | $('#searchfield').focus(); | ||
65 | return false; | ||
66 | }); | ||
67 | $('.close').on('click', function () { | ||
68 | $('.nav-panel-add').hide(100); | ||
69 | $('.nav-panel-search').hide(100); | ||
70 | $('.nav-panel-buttom').show(100); | ||
71 | $('.nav-panels .action').show(100); | ||
72 | $('.nav-panel-menu').removeClass('hidden'); | ||
73 | $('.nav-panels').css('background', 'transparent'); | ||
74 | return false; | ||
75 | }); | ||
76 | $(window).scroll(function () { | ||
77 | var s = $(window).scrollTop(); | ||
78 | var d = $(document).height(); | ||
79 | var c = $(window).height(); | ||
80 | var scrollPercent = (s / (d - c)) * 100; | ||
81 | $('.progress .determinate').css('width', scrollPercent + '%'); | ||
82 | }); | ||
83 | |||
84 | /* ========================================================================== | ||
85 | Annotations & Remember position | ||
86 | ========================================================================== */ | ||
87 | |||
88 | if ($('article').length) { | ||
89 | var app = new annotator.App(); | ||
90 | var x = JSON.parse($('#annotationroutes').html()); | ||
91 | |||
92 | |||
93 | app.include(annotator.ui.main, { | ||
94 | element: document.querySelector('article'), | ||
95 | }); | ||
96 | |||
97 | app.include(annotator.storage.http, x); | ||
98 | |||
99 | app.start().then(function () { | ||
100 | app.annotations.load({ entry: x.entryId }); | ||
101 | }); | ||
102 | |||
103 | $(window).scroll(function (e) { | ||
104 | var scrollTop = $(window).scrollTop(); | ||
105 | var docHeight = $(document).height(); | ||
106 | var scrollPercent = (scrollTop) / (docHeight); | ||
107 | var scrollPercentRounded = Math.round(scrollPercent * 100) / 100; | ||
108 | savePercent(x.entryId, scrollPercentRounded); | ||
109 | }); | ||
110 | |||
111 | retrievePercent(x.entryId); | ||
112 | |||
113 | $(window).resize(function () { | ||
114 | retrievePercent(x.entryId); | ||
115 | }); | ||
116 | } | ||
117 | }); | ||