diff options
author | Jeremy Benoist <j0k3r@users.noreply.github.com> | 2017-01-27 09:34:32 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-01-27 09:34:32 +0100 |
commit | 6fb06904ecde15b1b07d0a2af945338b416cf0e2 (patch) | |
tree | e76f3e8142399316ec5660fab8c646b2c34b8336 /app/Resources/static | |
parent | 05fa529bcfde01be5d320cb532900d72cf4b0830 (diff) | |
parent | 78295b99dd1721c613f1ce52e2debbe6f6db7753 (diff) | |
download | wallabag-6fb06904ecde15b1b07d0a2af945338b416cf0e2.tar.gz wallabag-6fb06904ecde15b1b07d0a2af945338b416cf0e2.tar.zst wallabag-6fb06904ecde15b1b07d0a2af945338b416cf0e2.zip |
Merge pull request #2416 from wallabag/2.2
wallabag 2.2.0
Diffstat (limited to 'app/Resources/static')
17 files changed, 362 insertions, 40 deletions
diff --git a/app/Resources/static/themes/_global/img/icons/unmark-icon--black.png b/app/Resources/static/themes/_global/img/icons/unmark-icon--black.png new file mode 100644 index 00000000..45f679ee --- /dev/null +++ b/app/Resources/static/themes/_global/img/icons/unmark-icon--black.png | |||
Binary files differ | |||
diff --git a/app/Resources/static/themes/_global/img/list.png b/app/Resources/static/themes/_global/img/list.png new file mode 100755 index 00000000..bd5aff5a --- /dev/null +++ b/app/Resources/static/themes/_global/img/list.png | |||
Binary files differ | |||
diff --git a/app/Resources/static/themes/_global/img/table.png b/app/Resources/static/themes/_global/img/table.png new file mode 100755 index 00000000..859c4cd8 --- /dev/null +++ b/app/Resources/static/themes/_global/img/table.png | |||
Binary files differ | |||
diff --git a/app/Resources/static/themes/_global/js/bookmarklet.js b/app/Resources/static/themes/_global/js/bookmarklet.js index 5174ff47..a497628b 100644 --- a/app/Resources/static/themes/_global/js/bookmarklet.js +++ b/app/Resources/static/themes/_global/js/bookmarklet.js | |||
@@ -1,4 +1,3 @@ | |||
1 | |||
2 | top['bookmarklet-url@wallabag.org'] = | 1 | top['bookmarklet-url@wallabag.org'] = |
3 | '<!DOCTYPE html><html><head><title>bag it!</title>' + | 2 | '<!DOCTYPE html><html><head><title>bag it!</title>' + |
4 | '<link rel="icon" href="tpl/img/favicon.ico" />' + | 3 | '<link rel="icon" href="tpl/img/favicon.ico" />' + |
diff --git a/app/Resources/static/themes/_global/js/shortcuts/entry.js b/app/Resources/static/themes/_global/js/shortcuts/entry.js new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/app/Resources/static/themes/_global/js/shortcuts/entry.js | |||
diff --git a/app/Resources/static/themes/_global/js/shortcuts/main.js b/app/Resources/static/themes/_global/js/shortcuts/main.js new file mode 100644 index 00000000..c81bf869 --- /dev/null +++ b/app/Resources/static/themes/_global/js/shortcuts/main.js | |||
@@ -0,0 +1,15 @@ | |||
1 | import Mousetrap from 'mousetrap'; | ||
2 | |||
3 | /** Shortcuts **/ | ||
4 | |||
5 | /* Go to */ | ||
6 | Mousetrap.bind('g u', () => { window.location.href = Routing.generate('homepage'); }); | ||
7 | Mousetrap.bind('g s', () => { window.location.href = Routing.generate('starred'); }); | ||
8 | Mousetrap.bind('g r', () => { window.location.href = Routing.generate('archive'); }); | ||
9 | Mousetrap.bind('g a', () => { window.location.href = Routing.generate('all'); }); | ||
10 | Mousetrap.bind('g t', () => { window.location.href = Routing.generate('tag'); }); | ||
11 | Mousetrap.bind('g c', () => { window.location.href = Routing.generate('config'); }); | ||
12 | Mousetrap.bind('g i', () => { window.location.href = Routing.generate('import'); }); | ||
13 | Mousetrap.bind('g d', () => { window.location.href = Routing.generate('developer'); }); | ||
14 | Mousetrap.bind('?', () => { window.location.href = Routing.generate('howto'); }); | ||
15 | Mousetrap.bind('g l', () => { window.location.href = Routing.generate('fos_user_security_logout'); }); | ||
diff --git a/app/Resources/static/themes/_global/js/tools.js b/app/Resources/static/themes/_global/js/tools.js index ab30deb1..cee84fa8 100644 --- a/app/Resources/static/themes/_global/js/tools.js +++ b/app/Resources/static/themes/_global/js/tools.js | |||
@@ -1,4 +1,9 @@ | |||
1 | const $ = require('jquery'); | 1 | import $ from 'jquery'; |
2 | import './shortcuts/main'; | ||
3 | import './shortcuts/entry'; | ||
4 | |||
5 | /* Allows inline call qr-code call */ | ||
6 | import jrQrcode from 'jr-qrcode'; // eslint-disable-line | ||
2 | 7 | ||
3 | function supportsLocalStorage() { | 8 | function supportsLocalStorage() { |
4 | try { | 9 | try { |
@@ -30,7 +35,7 @@ function initFilters() { | |||
30 | // no display if filters not available | 35 | // no display if filters not available |
31 | if ($('div').is('#filters')) { | 36 | if ($('div').is('#filters')) { |
32 | $('#button_filters').show(); | 37 | $('#button_filters').show(); |
33 | $('.button-collapse-right').sideNav({ edge: 'right' }); | 38 | $('.js-filters-action').sideNav({ edge: 'right' }); |
34 | $('#clear_form_filters').on('click', () => { | 39 | $('#clear_form_filters').on('click', () => { |
35 | $('#filters input').val(''); | 40 | $('#filters input').val(''); |
36 | $('#filters :checked').removeAttr('checked'); | 41 | $('#filters :checked').removeAttr('checked'); |
@@ -43,7 +48,7 @@ function initExport() { | |||
43 | // no display if export not available | 48 | // no display if export not available |
44 | if ($('div').is('#export')) { | 49 | if ($('div').is('#export')) { |
45 | $('#button_export').show(); | 50 | $('#button_export').show(); |
46 | $('.button-collapse-right').sideNav({ edge: 'right' }); | 51 | $('.js-export-action').sideNav({ edge: 'right' }); |
47 | } | 52 | } |
48 | } | 53 | } |
49 | 54 | ||
diff --git a/app/Resources/static/themes/baggy/css/main.css b/app/Resources/static/themes/baggy/css/main.css index 4dfa8790..e16846ea 100755 --- a/app/Resources/static/themes/baggy/css/main.css +++ b/app/Resources/static/themes/baggy/css/main.css | |||
@@ -297,18 +297,14 @@ h2::after { | |||
297 | text-decoration: none; | 297 | text-decoration: none; |
298 | } | 298 | } |
299 | 299 | ||
300 | #listmode a:hover { | ||
301 | opacity: 1; | ||
302 | } | ||
303 | |||
304 | #listmode.tablemode { | 300 | #listmode.tablemode { |
305 | background-image: url("../img/baggy/table.png"); | 301 | background-image: url("../../_global/img/table.png"); |
306 | background-repeat: no-repeat; | 302 | background-repeat: no-repeat; |
307 | background-position: bottom; | 303 | background-position: bottom; |
308 | } | 304 | } |
309 | 305 | ||
310 | #listmode.listmode { | 306 | #listmode.listmode { |
311 | background-image: url("../img/baggy/list.png"); | 307 | background-image: url("../../_global/img/list.png"); |
312 | background-repeat: no-repeat; | 308 | background-repeat: no-repeat; |
313 | background-position: bottom; | 309 | background-position: bottom; |
314 | } | 310 | } |
@@ -352,9 +348,9 @@ footer a { | |||
352 | letter-spacing: -5px; | 348 | letter-spacing: -5px; |
353 | } | 349 | } |
354 | 350 | ||
355 | .listmode .entry { | 351 | .listmode.entry { |
356 | width: 100% !important; | 352 | width: 100%; |
357 | margin-left: 0 !important; | 353 | height: inherit; |
358 | } | 354 | } |
359 | 355 | ||
360 | .card-entry-labels { | 356 | .card-entry-labels { |
@@ -588,6 +584,7 @@ div.pagination ul { | |||
588 | text-align: left; | 584 | text-align: left; |
589 | font-style: italic; | 585 | font-style: italic; |
590 | color: #999; | 586 | color: #999; |
587 | display: inline-flex; | ||
591 | } | 588 | } |
592 | 589 | ||
593 | div.pagination ul > * { | 590 | div.pagination ul > * { |
@@ -620,6 +617,10 @@ div.pagination ul .current { | |||
620 | background-color: #ccc; | 617 | background-color: #ccc; |
621 | } | 618 | } |
622 | 619 | ||
620 | .hide { | ||
621 | display: none; | ||
622 | } | ||
623 | |||
623 | /* ========================================================================== | 624 | /* ========================================================================== |
624 | 2.1 = "save a link" related styles | 625 | 2.1 = "save a link" related styles |
625 | ========================================================================== */ | 626 | ========================================================================== */ |
@@ -936,6 +937,11 @@ a.add-to-wallabag-link-after::after { | |||
936 | background-image: url("../../_global/img/icons/diaspora-icon--black.png"); | 937 | background-image: url("../../_global/img/icons/diaspora-icon--black.png"); |
937 | } | 938 | } |
938 | 939 | ||
940 | /* Unmark.it */ | ||
941 | .icon-image--unmark { | ||
942 | background-image: url("../../_global/img/icons/unmark-icon--black.png"); | ||
943 | } | ||
944 | |||
939 | /* shaarli */ | 945 | /* shaarli */ |
940 | .icon-image--shaarli { | 946 | .icon-image--shaarli { |
941 | background-image: url("../../_global/img/icons/shaarli.png"); | 947 | background-image: url("../../_global/img/icons/shaarli.png"); |
diff --git a/app/Resources/static/themes/baggy/js/autoCompleteTags.js b/app/Resources/static/themes/baggy/js/autoCompleteTags.js index f287ebfa..64fdaa92 100755 --- a/app/Resources/static/themes/baggy/js/autoCompleteTags.js +++ b/app/Resources/static/themes/baggy/js/autoCompleteTags.js | |||
@@ -5,4 +5,4 @@ function extractLast(term) { | |||
5 | return split(term).pop(); | 5 | return split(term).pop(); |
6 | } | 6 | } |
7 | 7 | ||
8 | export { split, extractLast }; | 8 | export default { split, extractLast }; |
diff --git a/app/Resources/static/themes/baggy/js/init.js b/app/Resources/static/themes/baggy/js/init.js index dc11043a..05360a28 100755 --- a/app/Resources/static/themes/baggy/js/init.js +++ b/app/Resources/static/themes/baggy/js/init.js | |||
@@ -1,11 +1,26 @@ | |||
1 | import { savePercent, retrievePercent } from '../../_global/js/tools'; | 1 | /* jQuery */ |
2 | import { toggleSaveLinkForm } from './uiTools'; | 2 | import $ from 'jquery'; |
3 | |||
4 | /* eslint-disable no-unused-vars */ | ||
5 | /* jquery has default scope */ | ||
6 | import cookie from 'jquery.cookie'; | ||
7 | import ui from 'jquery-ui-browserify'; | ||
8 | /* eslint-enable no-unused-vars */ | ||
9 | |||
10 | /* Annotations */ | ||
11 | import annotator from 'annotator'; | ||
3 | 12 | ||
4 | const $ = global.jquery = require('jquery'); | 13 | /* Shortcuts */ |
5 | require('jquery.cookie'); | 14 | import './shortcuts/main'; |
6 | require('jquery-ui-browserify'); | 15 | import './shortcuts/entry'; |
7 | const annotator = require('annotator'); | 16 | import '../../_global/js/shortcuts/main'; |
17 | import '../../_global/js/shortcuts/entry'; | ||
18 | |||
19 | /* Tools */ | ||
20 | import { savePercent, retrievePercent } from '../../_global/js/tools'; | ||
21 | import toggleSaveLinkForm from './uiTools'; | ||
8 | 22 | ||
23 | global.jquery = $; | ||
9 | 24 | ||
10 | $.fn.ready(() => { | 25 | $.fn.ready(() => { |
11 | const $listmode = $('#listmode'); | 26 | const $listmode = $('#listmode'); |
diff --git a/app/Resources/static/themes/baggy/js/shortcuts/entry.js b/app/Resources/static/themes/baggy/js/shortcuts/entry.js new file mode 100644 index 00000000..c87408b9 --- /dev/null +++ b/app/Resources/static/themes/baggy/js/shortcuts/entry.js | |||
@@ -0,0 +1,26 @@ | |||
1 | import Mousetrap from 'mousetrap'; | ||
2 | import $ from 'jquery'; | ||
3 | |||
4 | $(document).ready(() => { | ||
5 | if ($('#article').length > 0) { | ||
6 | /* Article view */ | ||
7 | Mousetrap.bind('o', () => { | ||
8 | $('div#article_toolbar ul.links a.original')[0].click(); | ||
9 | }); | ||
10 | |||
11 | /* mark as favorite */ | ||
12 | Mousetrap.bind('f', () => { | ||
13 | $('div#article_toolbar ul.links a.favorite')[0].click(); | ||
14 | }); | ||
15 | |||
16 | /* mark as read */ | ||
17 | Mousetrap.bind('a', () => { | ||
18 | $('div#article_toolbar ul.links a.markasread')[0].click(); | ||
19 | }); | ||
20 | |||
21 | /* delete */ | ||
22 | Mousetrap.bind('del', () => { | ||
23 | $('div#article_toolbar ul.links a.delete')[0].click(); | ||
24 | }); | ||
25 | } | ||
26 | }); | ||
diff --git a/app/Resources/static/themes/baggy/js/shortcuts/main.js b/app/Resources/static/themes/baggy/js/shortcuts/main.js new file mode 100644 index 00000000..aed09aee --- /dev/null +++ b/app/Resources/static/themes/baggy/js/shortcuts/main.js | |||
@@ -0,0 +1,7 @@ | |||
1 | $(document).ready(() => { | ||
2 | Mousetrap.bind('s', () => { | ||
3 | $('#search').trigger('click'); | ||
4 | $('#search_entry_term').focus(); | ||
5 | return false; | ||
6 | }); | ||
7 | }); | ||
diff --git a/app/Resources/static/themes/baggy/js/uiTools.js b/app/Resources/static/themes/baggy/js/uiTools.js index 900b2707..713c53f7 100644 --- a/app/Resources/static/themes/baggy/js/uiTools.js +++ b/app/Resources/static/themes/baggy/js/uiTools.js | |||
@@ -1,4 +1,4 @@ | |||
1 | const $ = require('jquery'); | 1 | import $ from 'jquery'; |
2 | 2 | ||
3 | function toggleSaveLinkForm(url, event) { | 3 | function toggleSaveLinkForm(url, event) { |
4 | $('#add-link-result').empty(); | 4 | $('#add-link-result').empty(); |
@@ -32,4 +32,4 @@ function toggleSaveLinkForm(url, event) { | |||
32 | plainUrl.focus(); | 32 | plainUrl.focus(); |
33 | } | 33 | } |
34 | 34 | ||
35 | export { toggleSaveLinkForm }; | 35 | export default toggleSaveLinkForm; |
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css index 408fe14c..f43e6042 100755 --- a/app/Resources/static/themes/material/css/main.css +++ b/app/Resources/static/themes/material/css/main.css | |||
@@ -150,6 +150,11 @@ | |||
150 | background-image: url("../../_global/img/icons/diaspora-icon--black.png"); | 150 | background-image: url("../../_global/img/icons/diaspora-icon--black.png"); |
151 | } | 151 | } |
152 | 152 | ||
153 | /* Unmark.it */ | ||
154 | .icon-image--unmark { | ||
155 | background-image: url("../../_global/img/icons/unmark-icon--black.png"); | ||
156 | } | ||
157 | |||
153 | /* Shaarli */ | 158 | /* Shaarli */ |
154 | .icon-image--shaarli { | 159 | .icon-image--shaarli { |
155 | background-image: url("../../_global/img/icons/shaarli.png"); | 160 | background-image: url("../../_global/img/icons/shaarli.png"); |
@@ -159,7 +164,7 @@ body { | |||
159 | display: flex; | 164 | display: flex; |
160 | min-height: 100vh; | 165 | min-height: 100vh; |
161 | flex-direction: column; | 166 | flex-direction: column; |
162 | background: #f0f0f0; | 167 | background: #fafafa; |
163 | } | 168 | } |
164 | 169 | ||
165 | body.login main { | 170 | body.login main { |
@@ -189,7 +194,6 @@ main, | |||
189 | 194 | ||
190 | .results { | 195 | .results { |
191 | height: 1em; | 196 | height: 1em; |
192 | line-height: 30px; | ||
193 | } | 197 | } |
194 | 198 | ||
195 | .results .nb-results, | 199 | .results .nb-results, |
@@ -198,6 +202,14 @@ main, | |||
198 | margin-bottom: 0; | 202 | margin-bottom: 0; |
199 | } | 203 | } |
200 | 204 | ||
205 | .results .nb-results { | ||
206 | display: inline-flex; | ||
207 | } | ||
208 | |||
209 | .results a { | ||
210 | color: #444; | ||
211 | } | ||
212 | |||
201 | .pagination { | 213 | .pagination { |
202 | float: right; | 214 | float: right; |
203 | } | 215 | } |
@@ -271,6 +283,16 @@ nav input { | |||
271 | color: #aaa; | 283 | color: #aaa; |
272 | } | 284 | } |
273 | 285 | ||
286 | nav { | ||
287 | height: auto; | ||
288 | } | ||
289 | |||
290 | .nav-wrapper { | ||
291 | display: flex; | ||
292 | flex-wrap: wrap; | ||
293 | justify-content: space-between; | ||
294 | } | ||
295 | |||
274 | .nav-wrapper .button-collapse { | 296 | .nav-wrapper .button-collapse { |
275 | padding: 0 15px; | 297 | padding: 0 15px; |
276 | } | 298 | } |
@@ -279,8 +301,10 @@ nav input { | |||
279 | display: none; | 301 | display: none; |
280 | } | 302 | } |
281 | 303 | ||
282 | .nav-panels { | 304 | .nav-panel-buttom { |
283 | overflow: hidden; | 305 | display: flex; |
306 | flex-grow: 1; | ||
307 | justify-content: flex-end; | ||
284 | } | 308 | } |
285 | 309 | ||
286 | .nav-panel-buttom li { | 310 | .nav-panel-buttom li { |
@@ -317,11 +341,13 @@ nav input { | |||
317 | color: #444; | 341 | color: #444; |
318 | } | 342 | } |
319 | 343 | ||
320 | .input-field.nav-panel-add label { | 344 | .input-field.nav-panel-add label, |
345 | .input-field.nav-panel-search label { | ||
321 | left: 1rem; | 346 | left: 1rem; |
322 | } | 347 | } |
323 | 348 | ||
324 | .input-field.nav-panel-add .close { | 349 | .input-field.nav-panel-add .close, |
350 | .input-field.nav-panel-search .close { | ||
325 | position: absolute; | 351 | position: absolute; |
326 | top: 0; | 352 | top: 0; |
327 | right: 1rem; | 353 | right: 1rem; |
@@ -340,8 +366,10 @@ nav input { | |||
340 | } | 366 | } |
341 | 367 | ||
342 | .input-field.nav-panel-add, | 368 | .input-field.nav-panel-add, |
343 | .input-field.nav-panel-add form { | 369 | .input-field.nav-panel-add form, |
344 | height: 100%; | 370 | .input-field.nav-panel-search, |
371 | .input-field.nav-panel-search form { | ||
372 | flex-grow: 1; | ||
345 | } | 373 | } |
346 | 374 | ||
347 | /* ========================================================================== | 375 | /* ========================================================================== |
@@ -411,7 +439,6 @@ nav ul a:hover { | |||
411 | .side-nav.fixed.right-aligned { | 439 | .side-nav.fixed.right-aligned { |
412 | right: -250px; | 440 | right: -250px; |
413 | left: auto !important; | 441 | left: auto !important; |
414 | overflow-y: visible; | ||
415 | } | 442 | } |
416 | 443 | ||
417 | #filters div.with-checkbox { | 444 | #filters div.with-checkbox { |
@@ -535,6 +562,18 @@ a.original { | |||
535 | line-height: 24px; | 562 | line-height: 24px; |
536 | } | 563 | } |
537 | 564 | ||
565 | .card .card-action ul.tools li a.tool { | ||
566 | margin-right: 5px !important; | ||
567 | } | ||
568 | |||
569 | .card-stacked:hover ul.tools-list { | ||
570 | display: block; | ||
571 | } | ||
572 | |||
573 | .card-stacked ul.tools-list { | ||
574 | display: none; | ||
575 | } | ||
576 | |||
538 | .card .card-action a { | 577 | .card .card-action a { |
539 | color: #fff; | 578 | color: #fff; |
540 | margin: 0; | 579 | margin: 0; |
@@ -587,7 +626,55 @@ a.original { | |||
587 | #article { | 626 | #article { |
588 | font-size: 20px; | 627 | font-size: 20px; |
589 | margin: 0 auto; | 628 | margin: 0 auto; |
590 | max-width: 40em; | 629 | max-width: 45em; |
630 | } | ||
631 | |||
632 | #article article { | ||
633 | color: #424242; | ||
634 | font-size: 18px; | ||
635 | line-height: 1.7em; | ||
636 | } | ||
637 | |||
638 | #article article h1, | ||
639 | #article article h2, | ||
640 | #article article h3, | ||
641 | #article article h4, | ||
642 | #article article h5, | ||
643 | #article article h6 { | ||
644 | color: #212121; | ||
645 | } | ||
646 | |||
647 | #article article h1 strong, | ||
648 | #article article h2 strong, | ||
649 | #article article h3 strong, | ||
650 | #article article h4 strong, | ||
651 | #article article h5 strong, | ||
652 | #article article h6 strong { | ||
653 | font-weight: 500; | ||
654 | } | ||
655 | |||
656 | #article article h6 { | ||
657 | font-size: 1.2rem; | ||
658 | } | ||
659 | |||
660 | #article article h5 { | ||
661 | font-size: 1.6rem; | ||
662 | } | ||
663 | |||
664 | #article article h4 { | ||
665 | font-size: 1.9rem; | ||
666 | } | ||
667 | |||
668 | #article article h3 { | ||
669 | font-size: 2.2rem; | ||
670 | } | ||
671 | |||
672 | #article article h2 { | ||
673 | font-size: 2.5rem; | ||
674 | } | ||
675 | |||
676 | #article article h1 { | ||
677 | font-size: 2.7rem; | ||
591 | } | 678 | } |
592 | 679 | ||
593 | #article img, | 680 | #article img, |
@@ -596,6 +683,46 @@ a.original { | |||
596 | height: auto; | 683 | height: auto; |
597 | } | 684 | } |
598 | 685 | ||
686 | #article article a { | ||
687 | border-bottom: 1px dotted #03a9f4; | ||
688 | text-decoration: none; | ||
689 | } | ||
690 | |||
691 | #article article a:hover { | ||
692 | border-bottom-style: solid; | ||
693 | } | ||
694 | |||
695 | #article article ul { | ||
696 | padding-left: 30px; | ||
697 | } | ||
698 | |||
699 | #article article ul, | ||
700 | #article article ul li { | ||
701 | list-style-type: disc; | ||
702 | } | ||
703 | |||
704 | #article article blockquote { | ||
705 | font-style: italic; | ||
706 | } | ||
707 | |||
708 | #article article strong { | ||
709 | font-weight: bold; | ||
710 | } | ||
711 | |||
712 | #article article pre { | ||
713 | box-sizing: border-box; | ||
714 | margin: 0 0 1.75em; | ||
715 | border: #e3f2fd 1px solid; | ||
716 | width: 100%; | ||
717 | padding: 10px; | ||
718 | font-family: monospace; | ||
719 | font-size: 0.8em; | ||
720 | white-space: pre; | ||
721 | overflow: auto; | ||
722 | background: #f5f5f5; | ||
723 | border-radius: 3px; | ||
724 | } | ||
725 | |||
599 | #article > header > h1 { | 726 | #article > header > h1 { |
600 | font-size: 2em; | 727 | font-size: 2em; |
601 | margin: 2.1rem 0 0.68rem; | 728 | margin: 2.1rem 0 0.68rem; |
@@ -691,6 +818,14 @@ article aside .tools li { | |||
691 | width: auto; | 818 | width: auto; |
692 | } | 819 | } |
693 | 820 | ||
821 | .nav-panels .action { | ||
822 | padding-right: 0.75rem; | ||
823 | } | ||
824 | |||
825 | .nav-panel-buttom { | ||
826 | justify-content: space-around; | ||
827 | } | ||
828 | |||
694 | #article { | 829 | #article { |
695 | max-width: 35em; | 830 | max-width: 35em; |
696 | margin-left: auto; | 831 | margin-left: auto; |
@@ -727,11 +862,13 @@ article aside .tools li { | |||
727 | .pagination li.next { | 862 | .pagination li.next { |
728 | width: auto; | 863 | width: auto; |
729 | } | 864 | } |
730 | } | ||
731 | 865 | ||
732 | @media only screen and (min-width: 400px) { | 866 | .drag-target + .drag-target { |
733 | .nav-panel-buttom { | 867 | height: 50%; |
734 | float: right; | 868 | } |
869 | |||
870 | .drag-target + .drag-target + .drag-target { | ||
871 | top: 50%; | ||
735 | } | 872 | } |
736 | } | 873 | } |
737 | 874 | ||
diff --git a/app/Resources/static/themes/material/js/init.js b/app/Resources/static/themes/material/js/init.js index a68269e0..0b2832c0 100755 --- a/app/Resources/static/themes/material/js/init.js +++ b/app/Resources/static/themes/material/js/init.js | |||
@@ -1,10 +1,21 @@ | |||
1 | /* jQuery */ | ||
2 | import $ from 'jquery'; | ||
3 | |||
4 | /* Annotations */ | ||
5 | import annotator from 'annotator'; | ||
6 | |||
7 | /* Tools */ | ||
1 | import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools'; | 8 | import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools'; |
2 | 9 | ||
3 | const $ = require('jquery'); | 10 | /* Import shortcuts */ |
11 | import './shortcuts/main'; | ||
12 | import './shortcuts/entry'; | ||
13 | import '../../_global/js/shortcuts/main'; | ||
14 | import '../../_global/js/shortcuts/entry'; | ||
4 | 15 | ||
5 | global.jQuery = $; | ||
6 | require('materialize'); // eslint-disable-line | 16 | require('materialize'); // eslint-disable-line |
7 | const annotator = require('annotator'); | 17 | |
18 | global.jQuery = $; | ||
8 | 19 | ||
9 | $(document).ready(() => { | 20 | $(document).ready(() => { |
10 | // sideNav | 21 | // sideNav |
@@ -44,7 +55,7 @@ $(document).ready(() => { | |||
44 | $('.nav-panels .action').hide(100); | 55 | $('.nav-panels .action').hide(100); |
45 | $('.nav-panel-menu').addClass('hidden'); | 56 | $('.nav-panel-menu').addClass('hidden'); |
46 | $('.nav-panels').css('background', 'white'); | 57 | $('.nav-panels').css('background', 'white'); |
47 | $('#searchfield').focus(); | 58 | $('#search_entry_term').focus(); |
48 | return false; | 59 | return false; |
49 | }); | 60 | }); |
50 | $('.close').on('click', () => { | 61 | $('.close').on('click', () => { |
diff --git a/app/Resources/static/themes/material/js/shortcuts/entry.js b/app/Resources/static/themes/material/js/shortcuts/entry.js new file mode 100644 index 00000000..e19800bd --- /dev/null +++ b/app/Resources/static/themes/material/js/shortcuts/entry.js | |||
@@ -0,0 +1,26 @@ | |||
1 | import Mousetrap from 'mousetrap'; | ||
2 | import $ from 'jquery'; | ||
3 | |||
4 | $(document).ready(() => { | ||
5 | if ($('#article').length > 0) { | ||
6 | /* open original article */ | ||
7 | Mousetrap.bind('o', () => { | ||
8 | $('ul.side-nav a.original i')[0].click(); | ||
9 | }); | ||
10 | |||
11 | /* mark as favorite */ | ||
12 | Mousetrap.bind('f', () => { | ||
13 | $('ul.side-nav a.favorite i')[0].click(); | ||
14 | }); | ||
15 | |||
16 | /* mark as read */ | ||
17 | Mousetrap.bind('a', () => { | ||
18 | $('ul.side-nav a.markasread i')[0].click(); | ||
19 | }); | ||
20 | |||
21 | /* delete */ | ||
22 | Mousetrap.bind('del', () => { | ||
23 | $('ul.side-nav a.delete i')[0].click(); | ||
24 | }); | ||
25 | } | ||
26 | }); | ||
diff --git a/app/Resources/static/themes/material/js/shortcuts/main.js b/app/Resources/static/themes/material/js/shortcuts/main.js new file mode 100644 index 00000000..0a2d2a69 --- /dev/null +++ b/app/Resources/static/themes/material/js/shortcuts/main.js | |||
@@ -0,0 +1,75 @@ | |||
1 | import Mousetrap from 'mousetrap'; | ||
2 | import $ from 'jquery'; | ||
3 | |||
4 | function toggleFocus(cardToToogleFocus) { | ||
5 | if (cardToToogleFocus) { | ||
6 | $(cardToToogleFocus).toggleClass('z-depth-4'); | ||
7 | } | ||
8 | } | ||
9 | |||
10 | $(document).ready(() => { | ||
11 | const cards = $('#content').find('.card'); | ||
12 | const cardNumber = cards.length; | ||
13 | let cardIndex = 0; | ||
14 | /* If we come from next page */ | ||
15 | if (window.location.hash === '#prev') { | ||
16 | cardIndex = cardNumber - 1; | ||
17 | } | ||
18 | let card = cards[cardIndex]; | ||
19 | const pagination = $('.pagination'); | ||
20 | |||
21 | /* Show nothing on quickstart */ | ||
22 | if ($('#content > div.quickstart').length > 0) { | ||
23 | return; | ||
24 | } | ||
25 | |||
26 | /* Focus current card */ | ||
27 | toggleFocus(card); | ||
28 | |||
29 | /* Actions */ | ||
30 | Mousetrap.bind('g n', () => { | ||
31 | $('#nav-btn-add').trigger('click'); | ||
32 | return false; | ||
33 | }); | ||
34 | |||
35 | Mousetrap.bind('s', () => { | ||
36 | $('#nav-btn-search').trigger('click'); | ||
37 | return false; | ||
38 | }); | ||
39 | |||
40 | Mousetrap.bind('esc', () => { | ||
41 | $('.close').trigger('click'); | ||
42 | }); | ||
43 | |||
44 | /* Select right card. If there's a next page, go to next page */ | ||
45 | Mousetrap.bind('right', () => { | ||
46 | if (cardIndex >= 0 && cardIndex < cardNumber - 1) { | ||
47 | toggleFocus(card); | ||
48 | cardIndex += 1; | ||
49 | card = cards[cardIndex]; | ||
50 | toggleFocus(card); | ||
51 | return; | ||
52 | } | ||
53 | if (pagination.length > 0 && pagination.find('li.next:not(.disabled)').length > 0 && cardIndex === cardNumber - 1) { | ||
54 | window.location.href = window.location.origin + $(pagination).find('li.next a').attr('href'); | ||
55 | } | ||
56 | }); | ||
57 | |||
58 | /* Select previous card. If there's a previous page, go to next page */ | ||
59 | Mousetrap.bind('left', () => { | ||
60 | if (cardIndex > 0 && cardIndex < cardNumber) { | ||
61 | toggleFocus(card); | ||
62 | cardIndex -= 1; | ||
63 | card = cards[cardIndex]; | ||
64 | toggleFocus(card); | ||
65 | return; | ||
66 | } | ||
67 | if (pagination.length > 0 && $(pagination).find('li.prev:not(.disabled)').length > 0 && cardIndex === 0) { | ||
68 | window.location.href = `${window.location.origin + $(pagination).find('li.prev a').attr('href')}#prev`; | ||
69 | } | ||
70 | }); | ||
71 | |||
72 | Mousetrap.bind('enter', () => { | ||
73 | window.location.href = window.location.origin + $(card).find('span.card-title a').attr('href'); | ||
74 | }); | ||
75 | }); | ||