aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static/themes/material
diff options
context:
space:
mode:
authorNicolas LÅ“uillet <nicolas@loeuillet.org>2016-06-23 09:25:01 +0200
committerGitHub <noreply@github.com>2016-06-23 09:25:01 +0200
commit49e2854d5c15bbce3f24f91da34450e8f209295b (patch)
treef5aa95445549cc151e86f144b40464eecee28cf7 /app/Resources/static/themes/material
parent4eaaa27bb5b9a5725b26471a39548d764fc9cd0a (diff)
parent496cfdc0172fd55cb555f74b64704c8f50c71b77 (diff)
downloadwallabag-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-xapp/Resources/static/themes/material/css/main.css611
-rwxr-xr-xapp/Resources/static/themes/material/css/print.css64
-rwxr-xr-xapp/Resources/static/themes/material/js/init.js117
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
83body {
84 display: flex;
85 min-height: 100vh;
86 flex-direction: column;
87 background: #f0f0f0;
88}
89
90body.login main {
91 padding: 0;
92}
93
94.border-bottom {
95 border-bottom: 1px solid #ddd;
96}
97
98nav,
99main,
100footer {
101 padding-left: 240px;
102}
103
104main,
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
148div.pagination ul .prev.disabled,
149div.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
172footer.page-footer {
173 margin-top: 10px;
174 padding-top: 10px;
175}
176
177footer .row {
178 margin-bottom: 10px;
179}
180
181/* ==========================================================================
182 1 = Nav
183 ========================================================================== */
184
185nav 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
328main #content {
329 padding: 0 0.5rem;
330}
331
332main 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
586footer [class^="icon-"],
587footer [class*=" icon-"] {
588 font-size: 2em;
589 transition: text-shadow 0.2s ease;
590 padding-right: 10px;
591}
592
593footer [class^="icon-"]::hover,
594footer [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 */
603div.settings div.input-field div,
604div.settings div.input-field ul {
605 margin-top: 40px;
606}
607
608/* but avoid to kill all file input */
609div.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 @@
1var $ = require('jquery');
2require('materialize');
3var annotator = require('annotator');
4
5function 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
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
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});