aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources
diff options
context:
space:
mode:
Diffstat (limited to 'app/Resources')
-rw-r--r--app/Resources/static/themes/_global/index.js46
-rw-r--r--app/Resources/static/themes/baggy/css/article.scss6
-rw-r--r--app/Resources/static/themes/baggy/css/layout.scss11
-rwxr-xr-xapp/Resources/static/themes/baggy/css/media_queries.scss6
-rw-r--r--app/Resources/static/themes/baggy/css/pictos.scss2
-rw-r--r--app/Resources/static/themes/material/css/article.scss17
-rw-r--r--app/Resources/static/themes/material/css/cards.scss64
-rw-r--r--app/Resources/static/themes/material/css/media_queries.scss29
-rw-r--r--app/Resources/static/themes/material/css/nav.scss5
-rwxr-xr-xapp/Resources/static/themes/material/index.js47
-rw-r--r--app/Resources/static/themes/material/js/tools.js14
11 files changed, 210 insertions, 37 deletions
diff --git a/app/Resources/static/themes/_global/index.js b/app/Resources/static/themes/_global/index.js
index ae598e56..88365270 100644
--- a/app/Resources/static/themes/_global/index.js
+++ b/app/Resources/static/themes/_global/index.js
@@ -4,6 +4,9 @@ import $ from 'jquery';
4/* Annotations */ 4/* Annotations */
5import annotator from 'annotator'; 5import annotator from 'annotator';
6 6
7import ClipboardJS from 'clipboard';
8import 'mathjax/es5/tex-svg';
9
7/* Fonts */ 10/* Fonts */
8import 'material-design-icons-iconfont/dist/material-design-icons.css'; 11import 'material-design-icons-iconfont/dist/material-design-icons.css';
9import 'lato-font/css/lato-font.css'; 12import 'lato-font/css/lato-font.css';
@@ -70,4 +73,47 @@ $(document).ready(() => {
70 retrievePercent(x.entryId, true); 73 retrievePercent(x.entryId, true);
71 }); 74 });
72 } 75 }
76
77 document.querySelectorAll('[data-handler=tag-rename]').forEach((item) => {
78 const current = item;
79 current.wallabag_edit_mode = false;
80 current.onclick = (event) => {
81 const target = event.currentTarget;
82
83 if (target.wallabag_edit_mode === false) {
84 $(target.parentNode.querySelector('[data-handle=tag-link]')).addClass('hidden');
85 $(target.parentNode.querySelector('[data-handle=tag-rename-form]')).removeClass('hidden');
86 target.parentNode.querySelector('[data-handle=tag-rename-form] input').focus();
87 target.querySelector('.material-icons').innerHTML = 'done';
88
89 target.wallabag_edit_mode = true;
90 } else {
91 target.parentNode.querySelector('[data-handle=tag-rename-form]').submit();
92 }
93 };
94 });
95
96 // mimic radio button because emailTwoFactor is a boolean
97 $('#update_user_googleTwoFactor').on('change', () => {
98 $('#update_user_emailTwoFactor').prop('checked', false);
99 });
100
101 $('#update_user_emailTwoFactor').on('change', () => {
102 $('#update_user_googleTwoFactor').prop('checked', false);
103 });
104
105 // same mimic for super admin
106 $('#user_googleTwoFactor').on('change', () => {
107 $('#user_emailTwoFactor').prop('checked', false);
108 });
109
110 $('#user_emailTwoFactor').on('change', () => {
111 $('#user_googleTwoFactor').prop('checked', false);
112 });
113
114 // handle copy to clipboard for developer stuff
115 const clipboard = new ClipboardJS('.btn');
116 clipboard.on('success', (e) => {
117 e.clearSelection();
118 });
73}); 119});
diff --git a/app/Resources/static/themes/baggy/css/article.scss b/app/Resources/static/themes/baggy/css/article.scss
index 9094ad55..d203ce31 100644
--- a/app/Resources/static/themes/baggy/css/article.scss
+++ b/app/Resources/static/themes/baggy/css/article.scss
@@ -85,7 +85,7 @@ blockquote {
85 color: #999; 85 color: #999;
86} 86}
87 87
88.icon-rss { 88.icon-feed {
89 background-color: #000; 89 background-color: #000;
90 color: #fff; 90 color: #fff;
91 padding: 0.2em 0.5em; 91 padding: 0.2em 0.5em;
@@ -101,8 +101,8 @@ blockquote {
101 margin-bottom: 0.5em; 101 margin-bottom: 0.5em;
102 } 102 }
103 103
104 .icon-rss:hover, 104 .icon-feed:hover,
105 .icon-rss:focus { 105 .icon-feed:focus {
106 background-color: #fff; 106 background-color: #fff;
107 color: #000; 107 color: #000;
108 text-decoration: none; 108 text-decoration: none;
diff --git a/app/Resources/static/themes/baggy/css/layout.scss b/app/Resources/static/themes/baggy/css/layout.scss
index cb14e62d..0293ebe5 100644
--- a/app/Resources/static/themes/baggy/css/layout.scss
+++ b/app/Resources/static/themes/baggy/css/layout.scss
@@ -295,6 +295,15 @@ div.pagination ul {
295 } 295 }
296} 296}
297 297
298.hide { 298.card-tag-form {
299 display: inline-block;
300}
301
302.card-tag-form input[type="text"] {
303 min-width: 20em;
304}
305
306.hide,
307.hidden {
299 display: none; 308 display: none;
300} 309}
diff --git a/app/Resources/static/themes/baggy/css/media_queries.scss b/app/Resources/static/themes/baggy/css/media_queries.scss
index c33db0b3..a08f369f 100755
--- a/app/Resources/static/themes/baggy/css/media_queries.scss
+++ b/app/Resources/static/themes/baggy/css/media_queries.scss
@@ -170,3 +170,9 @@
170 width: 100%; 170 width: 100%;
171 } 171 }
172} 172}
173
174@media only print {
175 header h1.logo {
176 display: none;
177 }
178}
diff --git a/app/Resources/static/themes/baggy/css/pictos.scss b/app/Resources/static/themes/baggy/css/pictos.scss
index 2ff01937..b6ebf311 100644
--- a/app/Resources/static/themes/baggy/css/pictos.scss
+++ b/app/Resources/static/themes/baggy/css/pictos.scss
@@ -136,7 +136,7 @@
136 content: "\ea3a"; 136 content: "\ea3a";
137} 137}
138 138
139.icon-rss::before { 139.icon-feed::before {
140 content: "\e808"; 140 content: "\e808";
141} 141}
142 142
diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss
index 75658a58..755372c9 100644
--- a/app/Resources/static/themes/material/css/article.scss
+++ b/app/Resources/static/themes/material/css/article.scss
@@ -5,6 +5,7 @@
5#article { 5#article {
6 font-size: 20px; 6 font-size: 20px;
7 margin: 0 auto; 7 margin: 0 auto;
8 padding-bottom: 80px;
8 max-width: 45em; 9 max-width: 45em;
9 10
10 article { 11 article {
@@ -172,18 +173,18 @@
172 &:hover { 173 &:hover {
173 width: 260px !important; 174 width: 260px !important;
174 175
175 .collapsible-body {
176 height: auto;
177
178 li a i.material-icons {
179 margin: auto 5px auto -8px;
180 }
181 }
182
183 span { 176 span {
184 opacity: 1; 177 opacity: 1;
185 } 178 }
186 } 179 }
180
181 .collapsible-body {
182 height: auto;
183
184 li a i.material-icons {
185 margin: auto 5px auto -8px;
186 }
187 }
187} 188}
188 189
189.progress { 190.progress {
diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss
index 4f67e038..9ae1be82 100644
--- a/app/Resources/static/themes/material/css/cards.scss
+++ b/app/Resources/static/themes/material/css/cards.scss
@@ -18,6 +18,24 @@ main {
18 overflow: hidden; 18 overflow: hidden;
19} 19}
20 20
21@mixin mixin-reading-time {
22 .reading-time {
23 display: inline-flex;
24 vertical-align: middle;
25
26 .card-reading-time,
27 .card-created-at {
28 display: inline-flex;
29 }
30
31 span {
32 margin-right: 5px;
33 }
34
35 @content;
36 }
37}
38
21.card { 39.card {
22 .card-content .card-title, 40 .card-content .card-title,
23 .card-reveal .card-title { 41 .card-reveal .card-title {
@@ -98,14 +116,7 @@ main {
98 margin-right: 5px !important; 116 margin-right: 5px !important;
99 } 117 }
100 118
101 .reading-time { 119 @include mixin-reading-time;
102 display: inline-flex;
103 vertical-align: middle;
104
105 span {
106 margin-right: 5px;
107 }
108 }
109 } 120 }
110 121
111 .card-image { 122 .card-image {
@@ -186,6 +197,17 @@ a.original:not(.waves-effect) {
186 flex-grow: 1; 197 flex-grow: 1;
187} 198}
188 199
200.card-tag-form {
201 display: flex;
202 min-width: 100px;
203 flex-grow: 1;
204}
205
206.card-tag-form input {
207 margin-bottom: 0;
208 height: 2rem;
209}
210
189.card-tag-rss { 211.card-tag-rss {
190 display: flex; 212 display: flex;
191} 213}
@@ -219,10 +241,18 @@ a.original:not(.waves-effect) {
219 } 241 }
220 242
221 div.metadata { 243 div.metadata {
244 overflow: hidden;
245 height: 1.5em;
246 display: flex;
247
248 ul.tags {
249 margin-left: 4px;
250 }
251
222 .chip { 252 .chip {
223 background-color: $blueAccentColor; 253 background-color: $blueAccentColor;
224 padding: 0 7px; 254 padding: 0 7px;
225 margin: auto 2px; 255 margin: auto 1px;
226 border-radius: 6px; 256 border-radius: 6px;
227 line-height: 22px; 257 line-height: 22px;
228 height: 22px; 258 height: 22px;
@@ -239,6 +269,16 @@ a.original:not(.waves-effect) {
239 padding-left: 8px; 269 padding-left: 8px;
240 } 270 }
241 } 271 }
272
273 @include mixin-reading-time {
274 padding: 0 5px;
275 flex-wrap: wrap;
276 margin-left: auto;
277
278 i.material-icons {
279 font-size: 20px;
280 }
281 }
242 } 282 }
243 283
244 div.card-content { 284 div.card-content {
@@ -272,9 +312,3 @@ a.original:not(.waves-effect) {
272.settings .div_tabs { 312.settings .div_tabs {
273 padding-bottom: 15px; 313 padding-bottom: 15px;
274} 314}
275
276@media only screen and (min-width: 992px) {
277 .card-tag-labels li {
278 max-width: 50%;
279 }
280}
diff --git a/app/Resources/static/themes/material/css/media_queries.scss b/app/Resources/static/themes/material/css/media_queries.scss
index 72584426..4242ead2 100644
--- a/app/Resources/static/themes/material/css/media_queries.scss
+++ b/app/Resources/static/themes/material/css/media_queries.scss
@@ -12,6 +12,16 @@
12 .pagination { 12 .pagination {
13 margin-left: auto; 13 margin-left: auto;
14 } 14 }
15
16 .card-tag-labels li {
17 max-width: 50%;
18 }
19}
20
21@media screen and (min-width: 993px) {
22 body.entry main #content {
23 padding-left: 70px;
24 }
15} 25}
16 26
17@media only screen and (max-width: 992px) { 27@media only screen and (max-width: 992px) {
@@ -163,4 +173,23 @@
163 .row .col { 173 .row .col {
164 padding: 0; 174 padding: 0;
165 } 175 }
176
177 .card-stacked div.metadata .reading-time {
178 display: none;
179 }
180}
181
182@media screen and (max-width: 310px),
183 screen and (min-width: 601px) and (max-width: 660px),
184 screen and (min-width: 993px) and (max-width: 1050px),
185 screen and (min-width: 1201px) and (max-width: 1250px) {
186 .card .card-action .reading-time .card-created-at {
187 display: none;
188 }
189}
190
191@media only print {
192 body {
193 display: block;
194 }
166} 195}
diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss
index 147f163f..b7288278 100644
--- a/app/Resources/static/themes/material/css/nav.scss
+++ b/app/Resources/static/themes/material/css/nav.scss
@@ -131,6 +131,11 @@ nav {
131 display: none; 131 display: none;
132} 132}
133 133
134.entry-nav-top--sticky {
135 position: sticky;
136 top: 0;
137}
138
134@media (min-width: 993px) { 139@media (min-width: 993px) {
135 .button-collapse { 140 .button-collapse {
136 display: none; 141 display: none;
diff --git a/app/Resources/static/themes/material/index.js b/app/Resources/static/themes/material/index.js
index 96310d81..e808d75c 100755
--- a/app/Resources/static/themes/material/index.js
+++ b/app/Resources/static/themes/material/index.js
@@ -8,7 +8,7 @@ import 'materialize-css/dist/js/materialize';
8import '../_global/index'; 8import '../_global/index';
9 9
10/* Tools */ 10/* Tools */
11import { initExport, initFilters } from './js/tools'; 11import { initExport, initFilters, initRandom } from './js/tools';
12 12
13/* Import shortcuts */ 13/* Import shortcuts */
14import './js/shortcuts/main'; 14import './js/shortcuts/main';
@@ -17,6 +17,36 @@ import './js/shortcuts/entry';
17/* Theme style */ 17/* Theme style */
18import './css/index.scss'; 18import './css/index.scss';
19 19
20const stickyNav = () => {
21 const nav = $('.js-entry-nav-top');
22 $('[data-toggle="actions"]').click(() => {
23 nav.toggleClass('entry-nav-top--sticky');
24 });
25};
26
27const articleScroll = () => {
28 const articleEl = $('#article');
29 if (articleEl.length > 0) {
30 $(window).scroll(() => {
31 const s = $(window).scrollTop();
32 const d = $(document).height();
33 const c = $(window).height();
34 const articleElBottom = articleEl.offset().top + articleEl.height();
35 const scrollPercent = (s / (d - c)) * 100;
36 $('.progress .determinate').css('width', `${scrollPercent}%`);
37 const fixedActionBtn = $('.js-fixed-action-btn');
38 const toggleScrollDataName = 'toggle-auto';
39 if ((s + c) > articleElBottom) {
40 fixedActionBtn.data(toggleScrollDataName, true);
41 fixedActionBtn.openFAB();
42 } else if (fixedActionBtn.data(toggleScrollDataName) === true) {
43 fixedActionBtn.data(toggleScrollDataName, false);
44 fixedActionBtn.closeFAB();
45 }
46 });
47 }
48};
49
20$(document).ready(() => { 50$(document).ready(() => {
21 // sideNav 51 // sideNav
22 $('.button-collapse').sideNav(); 52 $('.button-collapse').sideNav();
@@ -32,8 +62,12 @@ $(document).ready(() => {
32 format: 'dd/mm/yyyy', 62 format: 'dd/mm/yyyy',
33 container: 'body', 63 container: 'body',
34 }); 64 });
65
35 initFilters(); 66 initFilters();
36 initExport(); 67 initExport();
68 initRandom();
69 stickyNav();
70 articleScroll();
37 71
38 const toggleNav = (toShow, toFocus) => { 72 const toggleNav = (toShow, toFocus) => {
39 $('.nav-panel-actions').hide(100); 73 $('.nav-panel-actions').hide(100);
@@ -48,30 +82,27 @@ $(document).ready(() => {
48 $('#tag_label').focus(); 82 $('#tag_label').focus();
49 return false; 83 return false;
50 }); 84 });
85
51 $('#nav-btn-add').on('click', () => { 86 $('#nav-btn-add').on('click', () => {
52 toggleNav('.nav-panel-add', '#entry_url'); 87 toggleNav('.nav-panel-add', '#entry_url');
53 return false; 88 return false;
54 }); 89 });
90
55 const materialAddForm = $('.nav-panel-add'); 91 const materialAddForm = $('.nav-panel-add');
56 materialAddForm.on('submit', () => { 92 materialAddForm.on('submit', () => {
57 materialAddForm.addClass('disabled'); 93 materialAddForm.addClass('disabled');
58 $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur'); 94 $('input#entry_url', materialAddForm).prop('readonly', true).trigger('blur');
59 }); 95 });
96
60 $('#nav-btn-search').on('click', () => { 97 $('#nav-btn-search').on('click', () => {
61 toggleNav('.nav-panel-search', '#search_entry_term'); 98 toggleNav('.nav-panel-search', '#search_entry_term');
62 return false; 99 return false;
63 }); 100 });
101
64 $('.close').on('click', (e) => { 102 $('.close').on('click', (e) => {
65 $(e.target).parent('.nav-panel-item').hide(100); 103 $(e.target).parent('.nav-panel-item').hide(100);
66 $('.nav-panel-actions').show(100); 104 $('.nav-panel-actions').show(100);
67 $('.nav-panels').css('background', 'transparent'); 105 $('.nav-panels').css('background', 'transparent');
68 return false; 106 return false;
69 }); 107 });
70 $(window).scroll(() => {
71 const s = $(window).scrollTop();
72 const d = $(document).height();
73 const c = $(window).height();
74 const scrollPercent = (s / (d - c)) * 100;
75 $('.progress .determinate').css('width', `${scrollPercent}%`);
76 });
77}); 108});
diff --git a/app/Resources/static/themes/material/js/tools.js b/app/Resources/static/themes/material/js/tools.js
index 39398fd8..0b3d3038 100644
--- a/app/Resources/static/themes/material/js/tools.js
+++ b/app/Resources/static/themes/material/js/tools.js
@@ -8,6 +8,7 @@ function initFilters() {
8 $('#clear_form_filters').on('click', () => { 8 $('#clear_form_filters').on('click', () => {
9 $('#filters input').val(''); 9 $('#filters input').val('');
10 $('#filters :checked').removeAttr('checked'); 10 $('#filters :checked').removeAttr('checked');
11
11 return false; 12 return false;
12 }); 13 });
13 } 14 }
@@ -21,4 +22,15 @@ function initExport() {
21 } 22 }
22} 23}
23 24
24export { initExport, initFilters }; 25function initRandom() {
26 // no display if export (ie: entries) not available
27 if ($('div').is('#export')) {
28 $('#button_random').show();
29 }
30}
31
32export {
33 initExport,
34 initFilters,
35 initRandom,
36};