aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static/themes/material
diff options
context:
space:
mode:
authorThomas Citharel <tcit@tcit.fr>2016-09-28 10:30:18 +0200
committerThomas Citharel <tcit@tcit.fr>2016-09-28 10:30:18 +0200
commitc146f6940a176142084b4fc3c610d13aca60d90e (patch)
tree7bc4683febcf15a4fd6053bddd49e36c202adeda /app/Resources/static/themes/material
parent55345331c47ca6f389e38a842584c3062476601d (diff)
downloadwallabag-c146f6940a176142084b4fc3c610d13aca60d90e.tar.gz
wallabag-c146f6940a176142084b4fc3c610d13aca60d90e.tar.zst
wallabag-c146f6940a176142084b4fc3c610d13aca60d90e.zip
Assets work
* ES6 all the things ! * ESLint checks everything * CSS fixes (use stylelint) * Fix #2231
Diffstat (limited to 'app/Resources/static/themes/material')
-rwxr-xr-xapp/Resources/static/themes/material/css/main.css33
-rwxr-xr-xapp/Resources/static/themes/material/css/print.css6
-rwxr-xr-xapp/Resources/static/themes/material/js/init.js70
3 files changed, 54 insertions, 55 deletions
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css
index 65b708c7..1d14448f 100755
--- a/app/Resources/static/themes/material/css/main.css
+++ b/app/Resources/static/themes/material/css/main.css
@@ -174,7 +174,7 @@ div.pagination ul .next.disabled {
174 174
175footer.page-footer { 175footer.page-footer {
176 margin-top: 10px; 176 margin-top: 10px;
177 padding-top: 0px; 177 padding-top: 0;
178} 178}
179 179
180footer .row { 180footer .row {
@@ -257,8 +257,9 @@ nav input {
257 display: none; 257 display: none;
258} 258}
259 259
260.input-field.nav-panel-add, .input-field.nav-panel-add form { 260.input-field.nav-panel-add,
261 height: 100%; 261.input-field.nav-panel-add form {
262 height: 100%;
262} 263}
263 264
264/* ========================================================================== 265/* ==========================================================================
@@ -355,8 +356,9 @@ main ul.row {
355 display: block; 356 display: block;
356} 357}
357 358
358.card .card-content i.right, .card .card-reveal i.right { 359.card .card-content i.right,
359 margin-left: 0; 360.card .card-reveal i.right {
361 margin-left: 0;
360} 362}
361 363
362.card .card-entry-labels { 364.card .card-entry-labels {
@@ -528,30 +530,38 @@ main ul.row {
528 footer { 530 footer {
529 padding-left: 0; 531 padding-left: 0;
530 } 532 }
533
531 nav, 534 nav,
532 main, 535 main,
533 footer { 536 footer {
534 padding-left: 0; 537 padding-left: 0;
535 } 538 }
539
536 .pagination { 540 .pagination {
537 width: auto; 541 width: auto;
538 } 542 }
543
539 .reader-mode { 544 .reader-mode {
540 width: 240px !important; 545 width: 240px !important;
541 } 546 }
547
542 .reader-mode span { 548 .reader-mode span {
543 opacity: 1; 549 opacity: 1;
544 } 550 }
551
545 .tabs { 552 .tabs {
546 display: inline-block; 553 display: inline-block;
547 height: auto; 554 height: auto;
548 } 555 }
556
549 .tab { 557 .tab {
550 min-width: 100%; 558 min-width: 100%;
551 } 559 }
560
552 .indicator { 561 .indicator {
553 display: none; 562 display: none;
554 } 563 }
564
555 .pagination li.prev, 565 .pagination li.prev,
556 .pagination li.next { 566 .pagination li.next {
557 width: auto; 567 width: auto;
@@ -569,38 +579,47 @@ main ul.row {
569 width: 25%; 579 width: 25%;
570 margin-left: 0; 580 margin-left: 0;
571 } 581 }
582
572 .row .col.l2 { 583 .row .col.l2 {
573 width: 33.33333%; 584 width: 33.33333%;
574 margin-left: 0; 585 margin-left: 0;
575 } 586 }
587
576 .row .col.l3 { 588 .row .col.l3 {
577 width: 41.66667%; 589 width: 41.66667%;
578 margin-left: 0; 590 margin-left: 0;
579 } 591 }
592
580 .row .col.l4 { 593 .row .col.l4 {
581 width: 50%; 594 width: 50%;
582 margin-left: 0; 595 margin-left: 0;
583 } 596 }
597
584 .row .col.l5 { 598 .row .col.l5 {
585 width: 58.33333%; 599 width: 58.33333%;
586 margin-left: 0; 600 margin-left: 0;
587 } 601 }
602
588 .row .col.l6 { 603 .row .col.l6 {
589 width: 66.66667%; 604 width: 66.66667%;
590 margin-left: 0; 605 margin-left: 0;
591 } 606 }
607
592 .row .col.l7 { 608 .row .col.l7 {
593 width: 75%; 609 width: 75%;
594 margin-left: 0; 610 margin-left: 0;
595 } 611 }
612
596 .row .col.l8 { 613 .row .col.l8 {
597 width: 83.33333%; 614 width: 83.33333%;
598 margin-left: 0; 615 margin-left: 0;
599 } 616 }
617
600 .row .col.l9 { 618 .row .col.l9 {
601 width: 91.66667%; 619 width: 91.66667%;
602 margin-left: 0; 620 margin-left: 0;
603 } 621 }
622
604 .row .col.l10 { 623 .row .col.l10 {
605 width: 100%; 624 width: 100%;
606 margin-left: 0; 625 margin-left: 0;
@@ -646,7 +665,7 @@ main ul.row {
646} 665}
647 666
648.icon-link::before { 667.icon-link::before {
649 content: "\e9cb"; 668 content: "\e9cb";
650} 669}
651 670
652footer [class^="icon-"], 671footer [class^="icon-"],
@@ -677,5 +696,5 @@ div.settings div.file-field div {
677} 696}
678 697
679.input-field label.active { 698.input-field label.active {
680 font-size: 1rem; 699 font-size: 1rem;
681} 700}
diff --git a/app/Resources/static/themes/material/css/print.css b/app/Resources/static/themes/material/css/print.css
index 1eb96735..98505aae 100755
--- a/app/Resources/static/themes/material/css/print.css
+++ b/app/Resources/static/themes/material/css/print.css
@@ -28,10 +28,10 @@
28 .messages, 28 .messages,
29 .entry + .results, 29 .entry + .results,
30 #slide-out, 30 #slide-out,
31 .progress, .hide-on-large-only, 31 .progress,
32 .hide-on-large-only,
32 #article > aside, 33 #article > aside,
33 #article .mbm a 34 #article .mbm a {
34 {
35 display: none !important; 35 display: none !important;
36 } 36 }
37 37
diff --git a/app/Resources/static/themes/material/js/init.js b/app/Resources/static/themes/material/js/init.js
index d6a87941..18f7b40a 100755
--- a/app/Resources/static/themes/material/js/init.js
+++ b/app/Resources/static/themes/material/js/init.js
@@ -1,29 +1,10 @@
1var $ = require('jquery'); 1const $ = require('jquery');
2require('materialize'); 2global.jQuery = $;
3var annotator = require('annotator'); 3require('materialize'); // eslint-disable-line
4const annotator = require('annotator');
5import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools.js';
4 6
5function initFilters() { 7$(document).ready(() => {
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
18function 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 8 // sideNav
28 $('.button-collapse').sideNav(); 9 $('.button-collapse').sideNav();
29 $('select').material_select(); 10 $('select').material_select();
@@ -40,13 +21,13 @@ $(document).ready(function () {
40 initFilters(); 21 initFilters();
41 initExport(); 22 initExport();
42 23
43 $('#nav-btn-add-tag').on('click', function () { 24 $('#nav-btn-add-tag').on('click', () => {
44 $('.nav-panel-add-tag').toggle(100); 25 $('.nav-panel-add-tag').toggle(100);
45 $('.nav-panel-menu').addClass('hidden'); 26 $('.nav-panel-menu').addClass('hidden');
46 $('#tag_label').focus(); 27 $('#tag_label').focus();
47 return false; 28 return false;
48 }); 29 });
49 $('#nav-btn-add').on('click', function () { 30 $('#nav-btn-add').on('click', () => {
50 $('.nav-panel-buttom').hide(100); 31 $('.nav-panel-buttom').hide(100);
51 $('.nav-panel-add').show(100); 32 $('.nav-panel-add').show(100);
52 $('.nav-panels .action').hide(100); 33 $('.nav-panels .action').hide(100);
@@ -55,7 +36,7 @@ $(document).ready(function () {
55 $('#entry_url').focus(); 36 $('#entry_url').focus();
56 return false; 37 return false;
57 }); 38 });
58 $('#nav-btn-search').on('click', function () { 39 $('#nav-btn-search').on('click', () => {
59 $('.nav-panel-buttom').hide(100); 40 $('.nav-panel-buttom').hide(100);
60 $('.nav-panel-search').show(100); 41 $('.nav-panel-search').show(100);
61 $('.nav-panels .action').hide(100); 42 $('.nav-panels .action').hide(100);
@@ -64,7 +45,7 @@ $(document).ready(function () {
64 $('#searchfield').focus(); 45 $('#searchfield').focus();
65 return false; 46 return false;
66 }); 47 });
67 $('.close').on('click', function () { 48 $('.close').on('click', () => {
68 $('.nav-panel-add').hide(100); 49 $('.nav-panel-add').hide(100);
69 $('.nav-panel-search').hide(100); 50 $('.nav-panel-search').hide(100);
70 $('.nav-panel-buttom').show(100); 51 $('.nav-panel-buttom').show(100);
@@ -73,12 +54,12 @@ $(document).ready(function () {
73 $('.nav-panels').css('background', 'transparent'); 54 $('.nav-panels').css('background', 'transparent');
74 return false; 55 return false;
75 }); 56 });
76 $(window).scroll(function () { 57 $(window).scroll(() => {
77 var s = $(window).scrollTop(); 58 const s = $(window).scrollTop();
78 var d = $(document).height(); 59 const d = $(document).height();
79 var c = $(window).height(); 60 const c = $(window).height();
80 var scrollPercent = (s / (d - c)) * 100; 61 const scrollPercent = (s / (d - c)) * 100;
81 $('.progress .determinate').css('width', scrollPercent + '%'); 62 $('.progress .determinate').css('width', `${scrollPercent}%`);
82 }); 63 });
83 64
84/* ========================================================================== 65/* ==========================================================================
@@ -86,9 +67,8 @@ $(document).ready(function () {
86 ========================================================================== */ 67 ========================================================================== */
87 68
88 if ($('article').length) { 69 if ($('article').length) {
89 var app = new annotator.App(); 70 const app = new annotator.App();
90 var x = JSON.parse($('#annotationroutes').html()); 71 const x = JSON.parse($('#annotationroutes').html());
91
92 72
93 app.include(annotator.ui.main, { 73 app.include(annotator.ui.main, {
94 element: document.querySelector('article'), 74 element: document.querySelector('article'),
@@ -96,21 +76,21 @@ $(document).ready(function () {
96 76
97 app.include(annotator.storage.http, x); 77 app.include(annotator.storage.http, x);
98 78
99 app.start().then(function () { 79 app.start().then(() => {
100 app.annotations.load({ entry: x.entryId }); 80 app.annotations.load({ entry: x.entryId });
101 }); 81 });
102 82
103 $(window).scroll(function (e) { 83 $(window).scroll(() => {
104 var scrollTop = $(window).scrollTop(); 84 const scrollTop = $(window).scrollTop();
105 var docHeight = $(document).height(); 85 const docHeight = $(document).height();
106 var scrollPercent = (scrollTop) / (docHeight); 86 const scrollPercent = (scrollTop) / (docHeight);
107 var scrollPercentRounded = Math.round(scrollPercent * 100) / 100; 87 const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
108 savePercent(x.entryId, scrollPercentRounded); 88 savePercent(x.entryId, scrollPercentRounded);
109 }); 89 });
110 90
111 retrievePercent(x.entryId); 91 retrievePercent(x.entryId);
112 92
113 $(window).resize(function () { 93 $(window).resize(() => {
114 retrievePercent(x.entryId); 94 retrievePercent(x.entryId);
115 }); 95 });
116 } 96 }