aboutsummaryrefslogtreecommitdiffhomepage
path: root/app/Resources/static/themes/material
diff options
context:
space:
mode:
Diffstat (limited to 'app/Resources/static/themes/material')
-rw-r--r--app/Resources/static/themes/material/css/article.scss190
-rw-r--r--app/Resources/static/themes/material/css/cards.scss245
-rw-r--r--app/Resources/static/themes/material/css/entries.scss96
-rw-r--r--app/Resources/static/themes/material/css/filters.scss15
-rw-r--r--app/Resources/static/themes/material/css/fonts.scss13
-rw-r--r--app/Resources/static/themes/material/css/icons.scss189
-rw-r--r--app/Resources/static/themes/material/css/index.scss17
-rwxr-xr-xapp/Resources/static/themes/material/css/layout.scss44
-rwxr-xr-xapp/Resources/static/themes/material/css/main.css1019
-rw-r--r--app/Resources/static/themes/material/css/media_queries.scss152
-rw-r--r--app/Resources/static/themes/material/css/nav.scss106
-rwxr-xr-xapp/Resources/static/themes/material/css/print.scss (renamed from app/Resources/static/themes/material/css/print.css)5
-rw-r--r--app/Resources/static/themes/material/css/sidenav.scss45
-rw-r--r--app/Resources/static/themes/material/css/variables.scss5
-rw-r--r--app/Resources/static/themes/material/css/various.scss32
-rwxr-xr-xapp/Resources/static/themes/material/index.js (renamed from app/Resources/static/themes/material/js/init.js)56
-rw-r--r--app/Resources/static/themes/material/js/shortcuts/main.js10
-rw-r--r--app/Resources/static/themes/material/js/tools.js24
18 files changed, 1196 insertions, 1067 deletions
diff --git a/app/Resources/static/themes/material/css/article.scss b/app/Resources/static/themes/material/css/article.scss
new file mode 100644
index 00000000..27ff5221
--- /dev/null
+++ b/app/Resources/static/themes/material/css/article.scss
@@ -0,0 +1,190 @@
1/* ==========================================================================
2 Article
3 ========================================================================== */
4
5#article {
6 font-size: 20px;
7 margin: 0 auto;
8 max-width: 45em;
9
10 article {
11 color: #424242;
12 font-size: 18px;
13 line-height: 1.7em;
14
15 h1,
16 h2,
17 h3,
18 h4,
19 h5,
20 h6 {
21 color: #212121;
22
23 strong {
24 font-weight: 500;
25 }
26 }
27
28 h6 {
29 font-size: 1.2rem;
30 }
31
32 h5 {
33 font-size: 1.6rem;
34 }
35
36 h4 {
37 font-size: 1.9rem;
38 }
39
40 h3 {
41 font-size: 2.2rem;
42 }
43
44 h2 {
45 font-size: 2.5rem;
46 }
47
48 h1 {
49 font-size: 2.7rem;
50 }
51
52 a {
53 border-bottom: 1px dotted #03a9f4;
54 text-decoration: none;
55 }
56
57 a:hover {
58 border-bottom-style: solid;
59 }
60
61 ul {
62 padding-left: 30px;
63 }
64
65 ul,
66 ul li {
67 list-style-type: disc;
68 }
69
70 blockquote {
71 font-style: italic;
72 }
73
74 strong {
75 font-weight: bold;
76 }
77 }
78
79 img,
80 figure {
81 max-width: 100%;
82 height: auto;
83 }
84
85 pre {
86 box-sizing: border-box;
87 margin: 0 0 1.75em;
88 border: #e3f2fd 1px solid;
89 width: 100%;
90 padding: 10px;
91 font-family: monospace;
92 font-size: 0.8em;
93 white-space: pre;
94 overflow: auto;
95 background: #f5f5f5;
96 border-radius: 3px;
97 }
98
99 > header > h1 {
100 font-size: 2em;
101 margin: 2.1rem 0 0.68rem;
102 }
103
104 aside {
105 .tools {
106 display: flex;
107 flex-flow: row wrap;
108
109 .stats {
110 font-size: 0.8em;
111 margin: 8px 15px 5px;
112
113 li {
114 display: inline-flex;
115 vertical-align: middle;
116 margin: 0 5px;
117 }
118
119 a {
120 color: #000;
121 text-decoration: none;
122 }
123 }
124
125 .tags {
126 float: right;
127 margin: 5px 15px 10px;
128 }
129 }
130
131 .chip {
132 background-color: $blueAccentColor;
133 padding: 0 15px 0 10px;
134 margin: auto 2px;
135 border-radius: 6px;
136
137 a,
138 i {
139 color: #fff;
140 }
141
142 i.material-icons {
143 float: right;
144 font-size: 20px;
145 line-height: 32px;
146 padding-left: 8px;
147 }
148 }
149 }
150}
151
152.reader-mode {
153 width: 70px !important;
154 transition: width 0.2s ease;
155
156 .collapsible-body {
157 height: 0;
158 overflow: hidden;
159 }
160
161 span {
162 opacity: 0;
163 transition: opacity 0.2s ease;
164 }
165
166 &:hover {
167 width: 260px !important;
168
169 .collapsible-body {
170 height: auto;
171
172 li a i.material-icons {
173 margin: auto 5px auto -8px;
174 }
175 }
176
177 span {
178 opacity: 1;
179 }
180 }
181}
182
183.progress {
184 position: fixed;
185 top: 0;
186 width: 100%;
187 height: 3px;
188 margin: 0;
189 z-index: 9999;
190}
diff --git a/app/Resources/static/themes/material/css/cards.scss b/app/Resources/static/themes/material/css/cards.scss
new file mode 100644
index 00000000..3edbe673
--- /dev/null
+++ b/app/Resources/static/themes/material/css/cards.scss
@@ -0,0 +1,245 @@
1/* ==========================================================================
2 Cards
3 ========================================================================== */
4
5main {
6 #content {
7 padding: 0 0.5rem;
8 }
9
10 ul.row {
11 padding: 0 0.75rem;
12 }
13}
14
15.data .card .card-body {
16 height: 19em;
17 overflow: hidden;
18}
19
20.card {
21 .card-content .card-title,
22 .card-reveal .card-title {
23 line-height: 22.8px;
24 max-height: 80px;
25 font-size: 19px;
26 font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
27 color: #313131;
28 }
29
30 .card-stacked .card-content .card-title {
31 display: inline-block;
32 }
33
34 .card-content .activator,
35 .card-reveal .activator {
36 cursor: pointer;
37 font-family: "Material Icons";
38 }
39
40 .card-content i.right,
41 .card-reveal i.right {
42 margin-left: 0;
43 }
44
45 .card-content .original {
46 line-height: 24px;
47 font-size: 15px;
48 }
49
50 .card-entry-labels {
51 position: absolute;
52 top: 10px;
53 z-index: 90;
54 max-width: 50%;
55 }
56
57 .card-entry-labels-hidden {
58 margin: 2.5px auto;
59 }
60
61 .card-entry-labels-hidden li {
62 display: inline-block;
63 background-color: $blueAccentColor;
64 margin: 0 5px;
65 padding: 5px 12px;
66 border-radius: 3px;
67 color: #fff;
68 max-height: 2em;
69 max-width: calc(100% - 15px);
70 overflow: hidden;
71 text-overflow: ellipsis;
72 white-space: nowrap;
73 }
74
75 .card-entry-labels-hidden li {
76 display: inline-block;
77 background-color: $blueAccentColor;
78 margin: 0 5px;
79 padding: 5px 12px;
80 border-radius: 3px;
81 color: #fff;
82 max-height: 2em;
83 max-width: calc(100% - 15px);
84 overflow: hidden;
85 text-overflow: ellipsis;
86 white-space: nowrap;
87 }
88
89 .card-content .estimatedTime {
90 margin-bottom: 10px;
91 }
92
93 .card-action {
94 padding: 10px 5px 10px 15px;
95
96 ul.links {
97 margin: 0;
98 font-size: 24px;
99 line-height: 24px;
100 }
101
102 a {
103 color: #fff;
104 margin: 0;
105 }
106
107 a:hover {
108 color: #fff;
109 }
110
111 ul.tools li a.tool {
112 margin-right: 5px !important;
113 }
114
115 .reading-time {
116 display: inline-flex;
117 vertical-align: middle;
118
119 span {
120 margin-right: 5px;
121 }
122 }
123 }
124
125 .card-image {
126 height: 10em;
127 }
128
129 .card-fullimage {
130 height: 13.5em;
131 }
132
133 .card-image .preview,
134 .card-fullimage .preview {
135 height: 14em;
136 background: no-repeat 50%/cover;
137 }
138
139 &.sw {
140 max-width: 370px;
141 margin-left: auto;
142 margin-right: auto;
143 }
144}
145
146a.original:not(.waves-effect) {
147 text-overflow: ellipsis;
148 white-space: nowrap;
149 overflow: hidden;
150 display: block;
151}
152
153.card-entry-labels li,
154.card-tag-labels li {
155 margin: 10px 10px 10px auto;
156 padding: 5px 12px 5px 16px !important;
157 background-color: $blueAccentColor;
158 border-radius: 0 3px 3px 0;
159 color: #fff;
160 cursor: default;
161 max-height: 2em;
162 overflow: hidden;
163 text-overflow: ellipsis;
164 white-space: nowrap;
165}
166
167.card-entry-tags a,
168.card-entry-labels a,
169.card-tag-labels a,
170.card-entry-labels-hidden a,
171#list .chip a {
172 text-decoration: none;
173 font-weight: normal;
174 color: #fff;
175}
176
177.card-stacked {
178 display: flex;
179 flex-flow: row wrap;
180
181 &:hover ul.tools-list {
182 display: inline;
183 text-align: right;
184 }
185
186 .preview {
187 max-width: 100px;
188 height: auto;
189 margin-right: 10px;
190 flex: 1;
191
192 img {
193 max-width: 100%;
194 max-height: 100%;
195 }
196 }
197
198 div.metadata {
199 .chip {
200 background-color: $blueAccentColor;
201 padding: 0 15px 0 10px;
202 margin: auto 2px;
203 border-radius: 6px;
204
205 a,
206 i {
207 color: #fff;
208 }
209
210 i.material-icons {
211 float: right;
212 font-size: 20px;
213 line-height: 32px;
214 padding-left: 8px;
215 }
216 }
217 }
218
219 div.card-content {
220 flex: 4;
221 }
222
223 ul.tools-list {
224 flex: 1;
225 display: none;
226 flex-basis: 5em;
227 align-self: flex-end;
228 float: right;
229 max-width: 6em;
230 }
231}
232
233#content .collection .collection-item {
234 min-height: 65px;
235 height: auto;
236}
237
238.quickstart .card .card-action a,
239.quickstart .card .card-action a:hover {
240 color: #fff !important;
241}
242
243.settings .div_tabs {
244 padding-bottom: 15px;
245}
diff --git a/app/Resources/static/themes/material/css/entries.scss b/app/Resources/static/themes/material/css/entries.scss
new file mode 100644
index 00000000..c667be27
--- /dev/null
+++ b/app/Resources/static/themes/material/css/entries.scss
@@ -0,0 +1,96 @@
1/* ==========================================================================
2 * Entries
3 * ========================================================================== */
4
5.collection {
6 margin: 15px 15px 0;
7
8 .collection-item {
9 padding: 7px;
10 height: 65px;
11 }
12}
13
14.results {
15 height: 1em;
16
17 .nb-results,
18 .pagination {
19 margin: 15px 15px 0;
20 }
21
22 .nb-results {
23 display: inline-flex;
24 }
25
26 a {
27 color: #444;
28 }
29}
30
31.pagination {
32 float: right;
33
34 ul {
35 margin: 0 !important;
36
37 .prev.disabled,
38 .next.disabled {
39 display: none;
40 }
41 }
42
43 li {
44 padding: 0;
45 }
46
47 a {
48 padding: 0 10px;
49 height: 30px;
50 display: block;
51 }
52
53 .disabled {
54 margin-right: 10px;
55 margin-left: 10px;
56 }
57
58 li.active span {
59 padding: 0 10px;
60 height: 30px;
61 display: block;
62 color: #fff;
63 }
64}
65
66.page-footer .footer-copyright {
67 min-width: 50px;
68 height: auto !important;
69 line-height: 1em !important;
70
71 p {
72 text-overflow: ellipsis;
73 white-space: nowrap;
74 overflow: hidden;
75 display: block;
76 }
77}
78
79.hidden {
80 display: none;
81}
82
83.picker__date-display {
84 display: none;
85}
86
87footer {
88 &.page-footer {
89 margin-top: 10px;
90 padding-top: 0;
91 }
92
93 .row {
94 margin-bottom: 10px;
95 }
96}
diff --git a/app/Resources/static/themes/material/css/filters.scss b/app/Resources/static/themes/material/css/filters.scss
new file mode 100644
index 00000000..299dad3d
--- /dev/null
+++ b/app/Resources/static/themes/material/css/filters.scss
@@ -0,0 +1,15 @@
1/* ==========================================================================
2 * Filters slider
3 * ========================================================================== */
4
5#filters {
6 button {
7 padding: 0;
8 width: 100%;
9 }
10
11 div.with-checkbox {
12 height: 3rem;
13 margin-top: 0;
14 }
15}
diff --git a/app/Resources/static/themes/material/css/fonts.scss b/app/Resources/static/themes/material/css/fonts.scss
new file mode 100644
index 00000000..743f1a84
--- /dev/null
+++ b/app/Resources/static/themes/material/css/fonts.scss
@@ -0,0 +1,13 @@
1/* ==========================================================================
2 * Fonts
3 * ========================================================================== */
4
5/**
6 * Icomoon
7 */
8@font-face {
9 font-family: icomoon;
10 src: url("~icomoon-free-npm/Font/IcoMoon-Free.ttf");
11 font-weight: normal;
12 font-style: normal;
13}
diff --git a/app/Resources/static/themes/material/css/icons.scss b/app/Resources/static/themes/material/css/icons.scss
new file mode 100644
index 00000000..e7f215c0
--- /dev/null
+++ b/app/Resources/static/themes/material/css/icons.scss
@@ -0,0 +1,189 @@
1/* ==========================================================================
2 * Icons
3 * ========================================================================== */
4
5/**
6 *
7 * Material icons
8 *
9 */
10.material-icons {
11 font-family: 'Material Icons';
12 font-weight: normal;
13 font-style: normal;
14 font-size: 24px; /* Preferred icon size */
15 width: 1em;
16 height: 1em;
17 display: inline-block;
18 line-height: 1;
19 text-transform: none;
20 letter-spacing: normal;
21 word-wrap: normal;
22 white-space: nowrap;
23 direction: ltr;
24
25 /* Support for all WebKit browsers. */
26 -webkit-font-smoothing: antialiased;
27
28 /* Support for Safari and Chrome. */
29 text-rendering: optimizeLegibility;
30
31 /* Support for Firefox. */
32 -moz-osx-font-smoothing: grayscale;
33
34 /* Support for IE. */
35 font-feature-settings: 'liga';
36
37 .md-18 {
38 font-size: 18px;
39 }
40
41 .md-24 {
42 font-size: 24px;
43 }
44
45 .md-36 {
46 font-size: 36px;
47 }
48
49 .md-48 {
50 font-size: 48px;
51 }
52
53 .md-dark {
54 color: rgba(0, 0, 0, 0.54);
55
56 .md-inactive {
57 color: rgba(0, 0, 0, 0.26);
58 }
59 }
60
61 .md-light {
62 color: rgba(255, 255, 255, 1);
63
64 .md-inactive {
65 color: rgba(255, 255, 255, 0.3);
66 }
67 }
68}
69
70/**
71 *
72 * Icomoon icons
73 *
74 */
75[class^="icon-"]::before,
76[class*=" icon-"]::before {
77 font-family: icomoon;
78 speak: none;
79 font-style: normal;
80 font-weight: normal;
81 font-variant: normal;
82 text-transform: none;
83 line-height: 1;
84 background-size: 24px;
85
86 /* Enable Ligatures ================ */
87 letter-spacing: 0;
88 font-feature-settings: "liga";
89}
90
91.icon-eye::before {
92 content: "\e9ce";
93}
94
95.icon-no-eye::before {
96 content: "\e9d1";
97}
98
99.icon-calendar::before {
100 content: "\e953";
101}
102
103.icon-mail::before {
104 content: "\ea86";
105}
106
107.icon-time::before {
108 content: "\e952";
109}
110
111a.icon-image {
112 background-repeat: no-repeat;
113 padding-right: 0.4em !important;
114 padding-left: 0 !important;
115 margin-left: 25px;
116
117 &::before {
118 content: "";
119 display: block;
120 width: 24px;
121 height: 24px;
122 float: left;
123 margin: 7px 1.5px 0 0;
124 }
125
126 &.carrot::before {
127 background: url("../../_global/img/icons/carrot-icon--black.png") no-repeat center/90%;
128 }
129
130 &.diaspora::before {
131 background: url("../../_global/img/icons/diaspora-icon--black.png") no-repeat center/80%;
132 }
133
134 &.unmark::before {
135 background: url("../../_global/img/icons/unmark-icon--black.png") no-repeat center/80%;
136 }
137
138 &.shaarli::before {
139 background: url("../../_global/img/icons/shaarli.png") no-repeat center/80%;
140 }
141
142 &.scuttle::before {
143 background: url("../../_global/img/icons/scuttle.png") no-repeat center/80%;
144 }
145}
146
147.icon-google-plus2::before {
148 content: "\ea89";
149}
150
151.icon-facebook2::before {
152 content: "\ea8d";
153}
154
155.icon-twitter::before {
156 content: "\ea96";
157}
158
159.icon-apple::before {
160 content: "\eabf";
161}
162
163.icon-android::before {
164 content: "\eac1";
165}
166
167.icon-chrome::before {
168 content: "\eae5";
169}
170
171.icon-firefox::before {
172 content: "\eae6";
173}
174
175.icon-link::before {
176 content: "\e9cb";
177}
178
179footer [class^="icon-"],
180footer [class*=" icon-"] {
181 font-size: 2em;
182 transition: text-shadow 0.2s ease;
183 padding-right: 10px;
184}
185
186footer [class^="icon-"]:hover,
187footer [class*=" icon-"]:hover {
188 text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
189}
diff --git a/app/Resources/static/themes/material/css/index.scss b/app/Resources/static/themes/material/css/index.scss
new file mode 100644
index 00000000..285a6504
--- /dev/null
+++ b/app/Resources/static/themes/material/css/index.scss
@@ -0,0 +1,17 @@
1@import 'variables';
2
3/* Style */
4@import 'article';
5@import 'cards';
6@import 'entries';
7@import 'filters';
8@import 'layout';
9@import 'nav';
10@import 'sidenav';
11@import 'various';
12
13/* Tools */
14@import 'fonts';
15@import 'icons';
16@import 'print';
17@import 'media_queries';
diff --git a/app/Resources/static/themes/material/css/layout.scss b/app/Resources/static/themes/material/css/layout.scss
new file mode 100755
index 00000000..cfdbf2b3
--- /dev/null
+++ b/app/Resources/static/themes/material/css/layout.scss
@@ -0,0 +1,44 @@
1/* ==========================================================================
2 Layout
3 ========================================================================== */
4
5body {
6 display: flex;
7 min-height: 100vh;
8 flex-direction: column;
9 background: #fafafa;
10
11 &.login main {
12 padding: 0;
13 min-height: 100vh;
14 }
15}
16
17.border-bottom {
18 border-bottom: 1px solid #ddd;
19}
20
21main,
22#content,
23.valign-wrapper {
24 height: 100%;
25}
26
27#main {
28 flex: 1 0 auto;
29
30 .logo {
31 a {
32 height: 100pt;
33 }
34
35 img {
36 height: 100pt;
37 width: 100pt;
38 }
39
40 &:hover {
41 background: transparent;
42 }
43 }
44}
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css
deleted file mode 100755
index ee4ad4e0..00000000
--- a/app/Resources/static/themes/material/css/main.css
+++ /dev/null
@@ -1,1019 +0,0 @@
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/**
21 *
22 * Material icons
23 *
24 */
25
26@font-face {
27 font-family: 'Material Icons';
28 font-style: normal;
29 font-weight: 400;
30 src: url(../fonts/MaterialIcons-Regular.eot);
31
32 /* For IE6-8 */
33 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");
34}
35
36.material-icons {
37 font-family: 'Material Icons';
38 font-weight: normal;
39 font-style: normal;
40 font-size: 24px; /* Preferred icon size */
41 width: 1em;
42 height: 1em;
43 display: inline-block;
44 line-height: 1;
45 text-transform: none;
46 letter-spacing: normal;
47 word-wrap: normal;
48 white-space: nowrap;
49 direction: ltr;
50
51 /* Support for all WebKit browsers. */
52 -webkit-font-smoothing: antialiased;
53
54 /* Support for Safari and Chrome. */
55 text-rendering: optimizeLegibility;
56
57 /* Support for Firefox. */
58 -moz-osx-font-smoothing: grayscale;
59
60 /* Support for IE. */
61 font-feature-settings: 'liga';
62}
63
64/* Rules for sizing the icon. */
65.material-icons.md-18 { font-size: 18px; }
66.material-icons.md-24 { font-size: 24px; }
67.material-icons.md-36 { font-size: 36px; }
68.material-icons.md-48 { font-size: 48px; }
69
70/* Rules for using icons as black on a light background. */
71.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
72.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
73
74/* Rules for using icons as white on a dark background. */
75.material-icons.md-light { color: rgba(255, 255, 255, 1); }
76.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
77
78/**
79 *
80 * Icomoon icons
81 *
82 */
83
84@font-face {
85 font-family: icomoon;
86 src: url("../fonts/IcoMoon-Free.ttf");
87 font-weight: normal;
88 font-style: normal;
89}
90
91[class^="icon-"]::before,
92[class*=" icon-"]::before {
93 font-family: icomoon;
94 speak: none;
95 font-style: normal;
96 font-weight: normal;
97 font-variant: normal;
98 text-transform: none;
99 line-height: 1;
100 background-size: 24px;
101
102 /* Enable Ligatures ================ */
103 letter-spacing: 0;
104 -webkit-font-feature-settings: "liga";
105 -moz-font-feature-settings: "liga=1";
106 -moz-font-feature-settings: "liga";
107 -ms-font-feature-settings: "liga" 1;
108 -o-font-feature-settings: "liga";
109 font-feature-settings: "liga";
110
111 /* Better Font Rendering =========== */
112 -webkit-font-smoothing: antialiased;
113 -moz-osx-font-smoothing: grayscale;
114}
115
116.icon-image {
117 background-size: 16px;
118 background-repeat: no-repeat;
119 padding-right: 1em !important;
120 padding-left: 1em !important;
121}
122
123.icon-eye::before {
124 content: "\e9ce";
125}
126
127.icon-no-eye::before {
128 content: "\e9d1";
129}
130
131.icon-calendar::before {
132 content: "\e953";
133}
134
135.icon-mail::before {
136 content: "\ea86";
137}
138
139.icon-time::before {
140 content: "\e952";
141}
142
143/* Carrot (http://carrot.org) */
144.icon-image--carrot {
145 background-image: url("../../_global/img/icons/carrot-icon--black.png");
146}
147
148/* Diaspora */
149.icon-image--diaspora {
150 background-image: url("../../_global/img/icons/diaspora-icon--black.png");
151}
152
153/* Unmark.it */
154.icon-image--unmark {
155 background-image: url("../../_global/img/icons/unmark-icon--black.png");
156}
157
158/* Shaarli */
159.icon-image--shaarli {
160 background-image: url("../../_global/img/icons/shaarli.png");
161}
162
163body {
164 display: flex;
165 min-height: 100vh;
166 flex-direction: column;
167 background: #fafafa;
168}
169
170body.login main {
171 padding: 0;
172 min-height: 100vh;
173}
174
175.border-bottom {
176 border-bottom: 1px solid #ddd;
177}
178
179nav,
180main,
181footer {
182 padding-left: 240px;
183}
184
185main,
186#content,
187.valign-wrapper {
188 height: 100%;
189}
190
191#main {
192 flex: 1 0 auto;
193}
194
195.results {
196 height: 1em;
197}
198
199.results .nb-results,
200.results .pagination {
201 margin: 15px;
202 margin-bottom: 0;
203}
204
205.results .nb-results {
206 display: inline-flex;
207}
208
209.results a {
210 color: #444;
211}
212
213.pagination {
214 float: right;
215}
216
217.pagination ul {
218 margin: 0 !important;
219}
220
221.pagination li {
222 padding: 0;
223}
224
225.pagination a {
226 padding: 0 10px;
227 height: 30px;
228 display: block;
229}
230
231.pagination .disabled {
232 margin-right: 10px;
233 margin-left: 10px;
234}
235
236div.pagination ul .prev.disabled,
237div.pagination ul .next.disabled {
238 display: none;
239}
240
241.pagination li.active span {
242 padding: 0 10px;
243 height: 30px;
244 display: block;
245 color: #fff;
246}
247
248.page-footer .footer-copyright {
249 min-width: 50px;
250 height: auto !important;
251 line-height: 1em !important;
252}
253
254.page-footer .footer-copyright p {
255 text-overflow: ellipsis;
256 white-space: nowrap;
257 overflow: hidden;
258 display: block;
259}
260
261.hidden {
262 display: none;
263}
264
265.picker__date-display {
266 display: none;
267}
268
269footer.page-footer {
270 margin-top: 10px;
271 padding-top: 0;
272}
273
274footer .row {
275 margin-bottom: 10px;
276}
277
278/* ==========================================================================
279 1 = Nav
280 ========================================================================== */
281
282nav input {
283 color: #aaa;
284}
285
286nav {
287 height: auto;
288}
289
290.nav-wrapper {
291 display: flex;
292 flex-wrap: wrap;
293 justify-content: space-between;
294 min-height: 64px;
295}
296
297.nav-wrapper .button-collapse {
298 padding: 0 15px;
299}
300
301.nav-input {
302 display: none;
303}
304
305.nav-panel-buttom {
306 display: flex;
307 flex-grow: 1;
308 justify-content: flex-end;
309}
310
311.nav-panel-buttom li {
312 max-height: 64px;
313}
314
315.nav-panels {
316 transition: background 0.2s ease;
317}
318
319.nav-panel-add .add,
320.nav-panel-search .search,
321.nav-panels .close {
322 color: #444 !important;
323}
324
325.nav-panels .action {
326 padding-left: 0.75rem;
327 font-size: 2.1rem;
328 white-space: nowrap;
329}
330
331.nav-panels .input-field input {
332 display: block;
333 line-height: inherit;
334 padding-left: 4rem !important;
335 width: calc(100% - 8rem);
336}
337
338.nav-panels .input-field input:focus {
339 background-color: #fff;
340 border: 0;
341 box-shadow: none;
342 color: #444;
343}
344
345.input-field.nav-panel-add label,
346.input-field.nav-panel-search label {
347 left: 1rem;
348}
349
350.input-field.nav-panel-add .close,
351.input-field.nav-panel-search .close {
352 position: absolute;
353 top: 0;
354 right: 1rem;
355 color: transparent;
356 cursor: pointer;
357 font-size: 2rem;
358 transition: 0.3s color;
359}
360
361#button_filters {
362 display: none;
363}
364
365#button_export {
366 display: none;
367}
368
369.input-field.nav-panel-add,
370.input-field.nav-panel-add form,
371.input-field.nav-panel-search,
372.input-field.nav-panel-search form {
373 display: flex;
374 flex: 1;
375}
376
377/* ==========================================================================
378 2 = Side-nav
379 ========================================================================== */
380
381.side-nav.fixed a {
382 font-size: 13px;
383 line-height: 44px;
384 height: 44px;
385}
386
387.side-nav .collapsible-header,
388.side-nav.fixed .collapsible-header {
389 height: 45px;
390 line-height: 44px;
391 padding: 0 20px;
392}
393
394.bold > a {
395 font-weight: bold;
396}
397
398.side-nav > li.logo {
399 line-height: 0;
400 text-align: center;
401}
402
403#main .logo a {
404 height: 100pt;
405}
406
407#main .logo img {
408 height: 100pt;
409 width: 100pt;
410}
411
412#main .logo:hover {
413 background: transparent;
414}
415
416.side-nav li {
417 padding: 0;
418}
419
420.side-nav a {
421 margin: 0 1rem;
422}
423
424span.numberItems {
425 float: right;
426}
427
428nav ul a:hover {
429 background-color: initial;
430}
431
432/* ==========================================================================
433 * 3 = Filters slider
434 * ========================================================================== */
435
436#filters button {
437 padding: 0;
438 width: 100%;
439}
440
441.side-nav.fixed.right-aligned {
442 right: -250px;
443 left: auto !important;
444}
445
446#filters div.with-checkbox {
447 height: 3rem;
448 margin-top: 0;
449}
450
451/* ==========================================================================
452 4 = Cards
453 ========================================================================== */
454
455main #content {
456 padding: 0 0.5rem;
457}
458
459main ul.row {
460 padding: 0 0.75rem;
461}
462
463.data .card .card-body {
464 height: 19em;
465 overflow: hidden;
466}
467
468.card .card-content .card-title,
469.card .card-reveal .card-title {
470 line-height: 22.8px;
471 max-height: 80px;
472 font-size: 19px;
473 font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
474 color: #313131;
475}
476
477.card .card-content .activator,
478.card .card-reveal .activator {
479 cursor: pointer;
480 font-family: "Material Icons";
481}
482
483.card .card-content i.right,
484.card .card-reveal i.right {
485 margin-left: 0;
486}
487
488.card .card-content .original {
489 line-height: 24px;
490 font-size: 15px;
491}
492
493a.original {
494 text-overflow: ellipsis;
495 white-space: nowrap;
496 overflow: hidden;
497 display: block;
498}
499
500.card .card-entry-labels {
501 position: absolute;
502 top: 10px;
503 z-index: 90;
504 max-width: 50%;
505}
506
507.card .card-entry-labels li,
508.card-tag-labels li {
509 margin: 10px 10px 10px auto;
510 padding: 5px 12px 5px 16px !important;
511 background-color: rgba(0, 151, 167, 0.85);
512 border-radius: 0 3px 3px 0;
513 color: #fff;
514 cursor: default;
515 max-height: 2em;
516 overflow: hidden;
517 text-overflow: ellipsis;
518 white-space: nowrap;
519}
520
521.card .card-entry-labels-hidden {
522 margin: 2.5px auto;
523}
524
525.card .card-entry-labels-hidden li {
526 display: inline-block;
527 background-color: rgba(0, 151, 167, 0.85);
528 margin: 0 5px;
529 padding: 5px 12px;
530 border-radius: 3px;
531 color: #fff;
532 max-height: 2em;
533 max-width: calc(100% - 15px);
534 overflow: hidden;
535 text-overflow: ellipsis;
536 white-space: nowrap;
537}
538
539.card .card-entry-labels-hidden li:first-child {
540 margin-left: 0;
541}
542
543.card-entry-tags a,
544.card-entry-labels a,
545.card-tag-labels a,
546.card-entry-labels-hidden a,
547#list .chip a {
548 text-decoration: none;
549 font-weight: normal;
550 color: #fff;
551}
552
553.card .card-content .estimatedTime {
554 margin-bottom: 10px;
555}
556
557.card .card-action {
558 padding: 10px 5px 10px 15px;
559}
560
561.card .card-action ul.links {
562 margin: 0;
563 font-size: 24px;
564 line-height: 24px;
565}
566
567.card .card-action ul.tools li a.tool {
568 margin-right: 5px !important;
569}
570
571.card-stacked:hover ul.tools-list {
572 display: block;
573}
574
575.card-stacked ul.tools-list {
576 display: none;
577}
578
579.card .card-action a {
580 color: #fff;
581 margin: 0;
582}
583
584.card .card-action a:hover {
585 color: #fff;
586}
587
588.card .card-action .reading-time {
589 display: inline-flex;
590 vertical-align: middle;
591}
592
593.quickstart .card .card-action a,
594.quickstart .card .card-action a:hover {
595 color: #fff !important;
596}
597
598.settings .div_tabs {
599 padding-bottom: 15px;
600}
601
602.card.sw {
603 max-width: 370px;
604 margin-left: auto;
605 margin-right: auto;
606}
607
608.card .card-image {
609 height: 10em;
610}
611
612.card .card-fullimage {
613 height: 13.5em;
614}
615
616.card .card-image .preview,
617.card .card-fullimage .preview {
618 height: 14em;
619 background-size: cover;
620 background-repeat: no-repeat;
621 background-position: 50%;
622}
623
624/* ==========================================================================
625 5 = Article
626 ========================================================================== */
627
628#article {
629 font-size: 20px;
630 margin: 0 auto;
631 max-width: 45em;
632}
633
634#article article {
635 color: #424242;
636 font-size: 18px;
637 line-height: 1.7em;
638}
639
640#article article h1,
641#article article h2,
642#article article h3,
643#article article h4,
644#article article h5,
645#article article h6 {
646 color: #212121;
647}
648
649#article article h1 strong,
650#article article h2 strong,
651#article article h3 strong,
652#article article h4 strong,
653#article article h5 strong,
654#article article h6 strong {
655 font-weight: 500;
656}
657
658#article article h6 {
659 font-size: 1.2rem;
660}
661
662#article article h5 {
663 font-size: 1.6rem;
664}
665
666#article article h4 {
667 font-size: 1.9rem;
668}
669
670#article article h3 {
671 font-size: 2.2rem;
672}
673
674#article article h2 {
675 font-size: 2.5rem;
676}
677
678#article article h1 {
679 font-size: 2.7rem;
680}
681
682#article img,
683#article figure {
684 max-width: 100%;
685 height: auto;
686}
687
688#article article a {
689 border-bottom: 1px dotted #03a9f4;
690 text-decoration: none;
691}
692
693#article article a:hover {
694 border-bottom-style: solid;
695}
696
697#article article ul {
698 padding-left: 30px;
699}
700
701#article article ul,
702#article article ul li {
703 list-style-type: disc;
704}
705
706#article article blockquote {
707 font-style: italic;
708}
709
710#article article strong {
711 font-weight: bold;
712}
713
714#article article pre {
715 box-sizing: border-box;
716 margin: 0 0 1.75em;
717 border: #e3f2fd 1px solid;
718 width: 100%;
719 padding: 10px;
720 font-family: monospace;
721 font-size: 0.8em;
722 white-space: pre;
723 overflow: auto;
724 background: #f5f5f5;
725 border-radius: 3px;
726}
727
728#article > header > h1 {
729 font-size: 2em;
730 margin: 2.1rem 0 0.68rem;
731}
732
733.reader-mode {
734 width: 95px !important;
735 transition: width 0.2s ease;
736}
737
738.reader-mode:hover {
739 width: 240px !important;
740}
741
742.reader-mode .collapsible-body {
743 height: 0;
744 overflow: hidden;
745}
746
747.reader-mode:hover .collapsible-body {
748 height: auto;
749}
750
751.reader-mode span {
752 opacity: 0;
753 transition: opacity 0.2s ease;
754}
755
756.reader-mode:hover span {
757 opacity: 1;
758}
759
760.progress {
761 position: fixed;
762 top: 0;
763 width: 100%;
764 height: 3px;
765 margin: 0;
766 z-index: 9999;
767}
768
769#article aside .tools {
770 font-size: 0.8em;
771 display: flex;
772 flex-flow: row wrap;
773 margin: 0 auto;
774}
775
776article aside .tools li {
777 display: inline-flex;
778 vertical-align: middle;
779}
780
781#article aside .tools a {
782 color: #000;
783 text-decoration: none;
784}
785
786#article aside #list {
787 float: right;
788 margin: 0 15px 10px;
789}
790
791#article aside .chip {
792 background-color: rgba(0, 151, 167, 0.85);
793 padding: 0 15px 0 10px;
794 margin: auto 2px;
795}
796
797#article aside .chip a,
798#article aside .chip i {
799 color: #fff;
800}
801
802/* ==========================================================================
803 6 = Media queries
804 ========================================================================== */
805
806@media only screen and (max-width: 992px) {
807 header,
808 main,
809 footer {
810 padding-left: 0;
811 }
812
813 nav,
814 main,
815 footer {
816 padding-left: 0;
817 }
818
819 .pagination {
820 width: auto;
821 }
822
823 .nav-panels .action {
824 padding-right: 0.75rem;
825 }
826
827 .nav-panel-buttom {
828 justify-content: space-around;
829 }
830
831 #article {
832 max-width: 35em;
833 margin-left: auto;
834 margin-right: auto;
835 font-size: 18px;
836 }
837
838 #article > header > h1 {
839 font-size: 1.33em;
840 }
841
842 .reader-mode {
843 width: 240px !important;
844 }
845
846 .reader-mode span {
847 opacity: 1;
848 }
849
850 .tabs {
851 display: inline-block;
852 height: auto;
853 }
854
855 .tab {
856 min-width: 100%;
857 }
858
859 .indicator {
860 display: none;
861 }
862
863 .pagination li.prev,
864 .pagination li.next {
865 width: auto;
866 }
867
868 .drag-target + .drag-target {
869 height: 50%;
870 }
871
872 .drag-target + .drag-target + .drag-target {
873 top: 50%;
874 }
875}
876
877@media only screen and (min-width: 1200px) and (max-width: 1650px) {
878 .row .col.l3 {
879 width: 33.33333%;
880 margin-left: 0;
881 }
882}
883
884@media only screen and (min-width: 993px) and (max-width: 1200px) {
885 .row .col.l1 {
886 width: 25%;
887 margin-left: 0;
888 }
889
890 .row .col.l2 {
891 width: 33.33333%;
892 margin-left: 0;
893 }
894
895 .row .col.l3 {
896 width: 41.66667%;
897 margin-left: 0;
898 }
899
900 .row .col.l4 {
901 width: 50%;
902 margin-left: 0;
903 }
904
905 .row .col.l5 {
906 width: 58.33333%;
907 margin-left: 0;
908 }
909
910 .row .col.l6 {
911 width: 66.66667%;
912 margin-left: 0;
913 }
914
915 .row .col.l7 {
916 width: 75%;
917 margin-left: 0;
918 }
919
920 .row .col.l8 {
921 width: 83.33333%;
922 margin-left: 0;
923 }
924
925 .row .col.l9 {
926 width: 91.66667%;
927 margin-left: 0;
928 }
929
930 .row .col.l10 {
931 width: 100%;
932 margin-left: 0;
933 }
934}
935
936@media only screen and (max-width: 350px) {
937 .nb-results {
938 display: none;
939 }
940
941 main ul.row {
942 padding: 0;
943 }
944
945 .row .col {
946 padding: 0;
947 }
948}
949
950/* ==========================================================================
951 7 = Font
952 ========================================================================== */
953
954.icon-google-plus2::before {
955 content: "\ea89";
956}
957
958.icon-facebook2::before {
959 content: "\ea8d";
960}
961
962.icon-twitter::before {
963 content: "\ea96";
964}
965
966.icon-apple::before {
967 content: "\eabf";
968}
969
970.icon-android::before {
971 content: "\eac1";
972}
973
974.icon-chrome::before {
975 content: "\eae5";
976}
977
978.icon-firefox::before {
979 content: "\eae6";
980}
981
982.icon-link::before {
983 content: "\e9cb";
984}
985
986footer [class^="icon-"],
987footer [class*=" icon-"] {
988 font-size: 2em;
989 transition: text-shadow 0.2s ease;
990 padding-right: 10px;
991}
992
993footer [class^="icon-"]:hover,
994footer [class*=" icon-"]:hover {
995 text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
996}
997
998/* ==========================================================================
999 8 = Others
1000 ========================================================================== */
1001
1002/* force height on non-input field in the settings page */
1003div.settings div.input-field div,
1004div.settings div.input-field ul {
1005 margin-top: 40px;
1006}
1007
1008/* but avoid to kill all file input */
1009div.settings div.file-field div {
1010 margin-top: inherit;
1011}
1012
1013.input-field label.active {
1014 font-size: 1rem;
1015}
1016
1017nav .input-field input {
1018 margin: 0;
1019}
diff --git a/app/Resources/static/themes/material/css/media_queries.scss b/app/Resources/static/themes/material/css/media_queries.scss
new file mode 100644
index 00000000..08c2d8ab
--- /dev/null
+++ b/app/Resources/static/themes/material/css/media_queries.scss
@@ -0,0 +1,152 @@
1/* ==========================================================================
2 Media queries
3 ========================================================================== */
4
5@media only screen and (min-width: 992px) {
6 nav,
7 body:not(.entry) main,
8 footer {
9 padding-left: 240px;
10 }
11}
12
13@media only screen and (max-width: 992px) {
14 header,
15 main,
16 footer,
17 nav {
18 padding-left: 0;
19 }
20
21 .pagination {
22 width: auto;
23 }
24
25 .nav-panels .action {
26 padding-right: 0.75rem;
27 }
28
29 .nav-panel-buttom {
30 justify-content: space-around;
31 }
32
33 #article {
34 max-width: 35em;
35 margin-left: auto;
36 margin-right: auto;
37 font-size: 18px;
38
39 > header > h1 {
40 font-size: 1.33em;
41 }
42 }
43
44 .reader-mode {
45 width: 240px !important;
46
47 span {
48 opacity: 1;
49 }
50 }
51
52 .tabs {
53 display: inline-block;
54 height: auto;
55 }
56
57 .tab {
58 min-width: 100%;
59 }
60
61 .indicator {
62 display: none;
63 }
64
65 .pagination li.prev,
66 .pagination li.next {
67 width: auto;
68 }
69
70 .drag-target + .drag-target {
71 height: 50%;
72 }
73
74 .drag-target + .drag-target + .drag-target {
75 top: 50%;
76 }
77}
78
79@media only screen and (min-width: 1200px) and (max-width: 1650px) {
80 .row .col.l3 {
81 width: 33.33333%;
82 margin-left: 0;
83 }
84}
85
86@media only screen and (min-width: 993px) and (max-width: 1200px) {
87 .row {
88 .col.l1 {
89 width: 25%;
90 margin-left: 0;
91 }
92
93 .col.l2 {
94 width: 33.33333%;
95 margin-left: 0;
96 }
97
98 .col.l3 {
99 width: 41.66667%;
100 margin-left: 0;
101 }
102
103 .col.l4 {
104 width: 50%;
105 margin-left: 0;
106 }
107
108 .col.l5 {
109 width: 58.33333%;
110 margin-left: 0;
111 }
112
113 .col.l6 {
114 width: 66.66667%;
115 margin-left: 0;
116 }
117
118 .col.l7 {
119 width: 75%;
120 margin-left: 0;
121 }
122
123 .col.l8 {
124 width: 83.33333%;
125 margin-left: 0;
126 }
127
128 .col.l9 {
129 width: 91.66667%;
130 margin-left: 0;
131 }
132
133 .col.l10 {
134 width: 100%;
135 margin-left: 0;
136 }
137 }
138}
139
140@media only screen and (max-width: 350px) {
141 .nb-results {
142 display: none;
143 }
144
145 main ul.row {
146 padding: 0;
147 }
148
149 .row .col {
150 padding: 0;
151 }
152}
diff --git a/app/Resources/static/themes/material/css/nav.scss b/app/Resources/static/themes/material/css/nav.scss
new file mode 100644
index 00000000..1a25a5be
--- /dev/null
+++ b/app/Resources/static/themes/material/css/nav.scss
@@ -0,0 +1,106 @@
1
2/* ==========================================================================
3 Nav
4 ========================================================================== */
5
6nav {
7 height: auto;
8
9 input {
10 color: #aaa;
11 }
12
13 ul a:hover {
14 background-color: initial;
15 }
16}
17
18.nav-wrapper {
19 display: flex;
20 flex-wrap: wrap;
21 justify-content: space-between;
22 min-height: 64px;
23
24 .button-collapse {
25 padding: 0 15px;
26 }
27}
28
29.nav-input {
30 display: none;
31}
32
33.nav-panel-buttom {
34 display: flex;
35 flex-grow: 1;
36 justify-content: flex-end;
37
38 li {
39 max-height: 64px;
40 }
41}
42
43.nav-panel-add .add,
44.nav-panel-search .search,
45.nav-panels .close {
46 color: #444 !important;
47}
48
49.nav-panels {
50 transition: background 0.2s ease;
51
52 .action {
53 padding-left: 0.75rem;
54 font-size: 2.1rem;
55 white-space: nowrap;
56 }
57
58 .input-field input {
59 display: block;
60 line-height: inherit;
61 padding-left: 4rem !important;
62 width: calc(100% - 8rem);
63 height: 4.1rem;
64 }
65
66 .input-field input:focus {
67 background-color: #fff;
68 border: 0;
69 box-shadow: none;
70 color: #444;
71 }
72}
73
74.input-field {
75 &.nav-panel-add label,
76 &.nav-panel-search label {
77 left: 1rem;
78 }
79
80 &.nav-panel-add .close,
81 &.nav-panel-search .close {
82 position: absolute;
83 top: 0;
84 right: 1rem;
85 color: transparent;
86 cursor: pointer;
87 font-size: 2rem;
88 transition: 0.3s color;
89 }
90
91 &.nav-panel-add,
92 &.nav-panel-add form,
93 &.nav-panel-search,
94 &.nav-panel-search form {
95 display: flex;
96 flex: 1;
97 }
98}
99
100#button_filters {
101 display: none;
102}
103
104#button_export {
105 display: none;
106}
diff --git a/app/Resources/static/themes/material/css/print.css b/app/Resources/static/themes/material/css/print.scss
index 98505aae..967a8c2b 100755
--- a/app/Resources/static/themes/material/css/print.css
+++ b/app/Resources/static/themes/material/css/print.scss
@@ -64,11 +64,8 @@
64 64
65 #main { 65 #main {
66 width: 100%; 66 width: 100%;
67 padding: 0;
68 margin: 0; 67 margin: 0;
69 margin-left: 0; 68 padding: 0;
70 padding-right: 0;
71 padding-bottom: 0;
72 } 69 }
73 70
74 #article { 71 #article {
diff --git a/app/Resources/static/themes/material/css/sidenav.scss b/app/Resources/static/themes/material/css/sidenav.scss
new file mode 100644
index 00000000..416dc1c7
--- /dev/null
+++ b/app/Resources/static/themes/material/css/sidenav.scss
@@ -0,0 +1,45 @@
1/* ==========================================================================
2 Side-nav
3 ========================================================================== */
4
5.side-nav {
6 width: 240px;
7
8 li {
9 padding: 0;
10
11 &.logo > a:hover {
12 background: initial;
13 }
14 }
15
16 a {
17 margin: 0;
18 }
19
20 &.fixed a {
21 font-size: 13px;
22 line-height: 44px;
23 height: 44px;
24 }
25
26 .collapsible-header,
27 &.fixed .collapsible-header {
28 height: 45px;
29 line-height: 44px;
30 padding: 0 20px;
31 }
32
33 > li.logo {
34 line-height: 0;
35 text-align: center;
36 }
37}
38
39.bold > a {
40 font-weight: bold;
41}
42
43span.numberItems {
44 float: right;
45}
diff --git a/app/Resources/static/themes/material/css/variables.scss b/app/Resources/static/themes/material/css/variables.scss
new file mode 100644
index 00000000..25e22aca
--- /dev/null
+++ b/app/Resources/static/themes/material/css/variables.scss
@@ -0,0 +1,5 @@
1/* ==========================================================================
2 Variables
3 ========================================================================== */
4
5$blueAccentColor: rgba(0, 151, 167, 0.85);
diff --git a/app/Resources/static/themes/material/css/various.scss b/app/Resources/static/themes/material/css/various.scss
new file mode 100644
index 00000000..7daf40ec
--- /dev/null
+++ b/app/Resources/static/themes/material/css/various.scss
@@ -0,0 +1,32 @@
1/* ==========================================================================
2 * Various
3 * ========================================================================== */
4
5div.settings div.file-field {
6 /* force height on non-input field in the settings page */
7 div,
8 ul {
9 margin-top: 40px;
10 }
11
12 /* but avoid to kill all file input */
13 div {
14 margin-top: inherit;
15 }
16}
17
18.input-field label.active {
19 font-size: 1rem;
20}
21
22nav .input-field input {
23 margin: 0;
24}
25
26.tabs {
27 display: flex;
28}
29
30.tab {
31 flex: 1;
32}
diff --git a/app/Resources/static/themes/material/js/init.js b/app/Resources/static/themes/material/index.js
index 0b2832c0..d6afbb8a 100755
--- a/app/Resources/static/themes/material/js/init.js
+++ b/app/Resources/static/themes/material/index.js
@@ -1,21 +1,21 @@
1/* jQuery */
2import $ from 'jquery'; 1import $ from 'jquery';
3 2
4/* Annotations */ 3/* Materialize imports */
5import annotator from 'annotator'; 4import 'materialize-css/dist/css/materialize.css';
5import 'materialize-css/dist/js/materialize';
6
7/* Global imports */
8import '../_global/index';
6 9
7/* Tools */ 10/* Tools */
8import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools'; 11import { initExport, initFilters } from './js/tools';
9 12
10/* Import shortcuts */ 13/* Import shortcuts */
11import './shortcuts/main'; 14import './js/shortcuts/main';
12import './shortcuts/entry'; 15import './js/shortcuts/entry';
13import '../../_global/js/shortcuts/main';
14import '../../_global/js/shortcuts/entry';
15
16require('materialize'); // eslint-disable-line
17 16
18global.jQuery = $; 17/* Theme style */
18import './css/index.scss';
19 19
20$(document).ready(() => { 20$(document).ready(() => {
21 // sideNav 21 // sideNav
@@ -30,6 +30,7 @@ $(document).ready(() => {
30 formatSubmit: 'dd/mm/yyyy', 30 formatSubmit: 'dd/mm/yyyy',
31 hiddenName: true, 31 hiddenName: true,
32 format: 'dd/mm/yyyy', 32 format: 'dd/mm/yyyy',
33 container: 'body',
33 }); 34 });
34 initFilters(); 35 initFilters();
35 initExport(); 36 initExport();
@@ -74,37 +75,4 @@ $(document).ready(() => {
74 const scrollPercent = (s / (d - c)) * 100; 75 const scrollPercent = (s / (d - c)) * 100;
75 $('.progress .determinate').css('width', `${scrollPercent}%`); 76 $('.progress .determinate').css('width', `${scrollPercent}%`);
76 }); 77 });
77
78/* ==========================================================================
79 Annotations & Remember position
80 ========================================================================== */
81
82 if ($('article').length) {
83 const app = new annotator.App();
84 const x = JSON.parse($('#annotationroutes').html());
85
86 app.include(annotator.ui.main, {
87 element: document.querySelector('article'),
88 });
89
90 app.include(annotator.storage.http, x);
91
92 app.start().then(() => {
93 app.annotations.load({ entry: x.entryId });
94 });
95
96 $(window).scroll(() => {
97 const scrollTop = $(window).scrollTop();
98 const docHeight = $(document).height();
99 const scrollPercent = (scrollTop) / (docHeight);
100 const scrollPercentRounded = Math.round(scrollPercent * 100) / 100;
101 savePercent(x.entryId, scrollPercentRounded);
102 });
103
104 retrievePercent(x.entryId);
105
106 $(window).resize(() => {
107 retrievePercent(x.entryId);
108 });
109 }
110}); 78});
diff --git a/app/Resources/static/themes/material/js/shortcuts/main.js b/app/Resources/static/themes/material/js/shortcuts/main.js
index 0a2d2a69..042b423c 100644
--- a/app/Resources/static/themes/material/js/shortcuts/main.js
+++ b/app/Resources/static/themes/material/js/shortcuts/main.js
@@ -23,6 +23,16 @@ $(document).ready(() => {
23 return; 23 return;
24 } 24 }
25 25
26 /* Show nothing on login/register page */
27 if ($('#username').length > 0 || $('#fos_user_registration_form_username').length > 0) {
28 return;
29 }
30
31 /* Show nothing on login/register page */
32 if ($('#username').length > 0 || $('#fos_user_registration_form_username').length > 0) {
33 return;
34 }
35
26 /* Focus current card */ 36 /* Focus current card */
27 toggleFocus(card); 37 toggleFocus(card);
28 38
diff --git a/app/Resources/static/themes/material/js/tools.js b/app/Resources/static/themes/material/js/tools.js
new file mode 100644
index 00000000..39398fd8
--- /dev/null
+++ b/app/Resources/static/themes/material/js/tools.js
@@ -0,0 +1,24 @@
1import $ from 'jquery';
2
3function initFilters() {
4 // no display if filters not available
5 if ($('div').is('#filters')) {
6 $('#button_filters').show();
7 $('.js-filters-action').sideNav({ edge: 'right' });
8 $('#clear_form_filters').on('click', () => {
9 $('#filters input').val('');
10 $('#filters :checked').removeAttr('checked');
11 return false;
12 });
13 }
14}
15
16function initExport() {
17 // no display if export not available
18 if ($('div').is('#export')) {
19 $('#button_export').show();
20 $('.js-export-action').sideNav({ edge: 'right' });
21 }
22}
23
24export { initExport, initFilters };
generated by cgit v1.2.3 (git 2.25.1) at 2024-06-26 08:39:23 +0000