aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static/themes/material
diff options
context:
space:
mode:
authorThomas Citharel <tcit@tcit.fr>2016-03-08 17:02:34 +0100
committerThomas Citharel <tcit@tcit.fr>2016-06-09 17:12:51 +0200
commit5ecdfcd041767c9e3244a92bb0a6cc3c3f80fea3 (patch)
tree03ee1eab0d89d1857daca9e273fd8c9ca47e33c2 /app/Resources/static/themes/material
parent9f95b14dec88cf083cefa38d5fbd84189e07acac (diff)
downloadwallabag-5ecdfcd041767c9e3244a92bb0a6cc3c3f80fea3.tar.gz
wallabag-5ecdfcd041767c9e3244a92bb0a6cc3c3f80fea3.tar.zst
wallabag-5ecdfcd041767c9e3244a92bb0a6cc3c3f80fea3.zip
manage assets through npm
first draft remote assetic totally work nearly there use at least nodejs > 0.12 use proper version of grunt bump nodejs version for travis update npm workaround for materialize install node 5.0 add grunt-cli baggy theme & cache node modules cache bower & npm make travis build assets on php7 only exclude installing node & npm if not needed & use bash clean & try to make icomoon work on baggy ready config for travis rebase make travis work more travis work impove travis & update deps add missing pixrem deps add module through oddly lost ui updates install latest nodejs add install_dev.sh, link local binaries for npm/bower/grunt ui improvements (mostly baggy) fix travis build no need to install on travis Add unread filter to entries pages Add the ability to filter for unread pages in the filters menu. Add unread filter test to EntryControllerTest Add a new test to the EntryControllerTest collection which checks that only entries which have not been archived (and are treated as "unread") are retrieved. Improve English translation Update FAQ -Fix grammar -Add notes about MTA, firewall, and SELinux Update installation instructions -Fix grammar -Add SELinux section add screenshots of android docu in English Fix the deletion of Tags/Entries relation when delete an entry Fix #2121 Move fixtures to the right place Display a message when saving an entry failed When saving an entry fail because of database error we previously just returned `false`. Now we got an error in the log and the displayed notice to the user is updated too. Change ManyToMany between entry & tag Following https://gist.github.com/Ocramius/3121916 Be sure to remove the related entity when removing an entity. Let say you have Entry -> EntryTag -> Tag. If you remove the entry: - before that commit, the EntryTag will stay (at least using SQLite). - with that commit, the related entity is removed Prepare wallabag 2.0.5 enforce older materialize version
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.js116
3 files changed, 791 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..33019d3d
--- /dev/null
+++ b/app/Resources/static/themes/material/js/init.js
@@ -0,0 +1,116 @@
1var $ = require("jquery"),
2materialize = require("materialize");
3var annotator = require('annotator');
4
5function init_filters() {
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 init_export() {
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 init_filters();
41 init_export();
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 d = $(document).height(),
79 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
91 app.include(annotator.ui.main, {
92 element: document.querySelector('article')
93 });
94
95 var x = JSON.parse($('#annotationroutes').html());
96 app.include(annotator.storage.http, x);
97
98 app.start().then(function () {
99 app.annotations.load({entry: x.entryId});
100 });
101
102 $(window).scroll(function(e){
103 var scrollTop = $(window).scrollTop();
104 var docHeight = $(document).height();
105 var scrollPercent = (scrollTop) / (docHeight);
106 var scrollPercentRounded = Math.round(scrollPercent*100)/100;
107 savePercent(x.entryId, scrollPercentRounded);
108 });
109
110 retrievePercent(x.entryId);
111
112 $(window).resize(function(){
113 retrievePercent(x.entryId);
114 });
115 }
116});