diff options
author | Thomas Citharel <tcit@tcit.fr> | 2017-03-31 20:21:41 +0200 |
---|---|---|
committer | Thomas Citharel <tcit@tcit.fr> | 2017-05-04 14:49:44 +0200 |
commit | 64f81bc31699ed239e4becec1cfa7ebc0bef2b5a (patch) | |
tree | 6363a596055683587d11aaffcf30608a682988aa /app/Resources/static/themes/material | |
parent | 3b4502e0e663866e7bac00164fd935fdc92309d6 (diff) | |
download | wallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.tar.gz wallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.tar.zst wallabag-64f81bc31699ed239e4becec1cfa7ebc0bef2b5a.zip |
Adds Webpack support and removes the use for Grunt
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
use scss
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
fix build, add babel, fix annotations
fixes (and improvements !) for baggy
add live reload & environments & eslint & theme fixes
Diffstat (limited to 'app/Resources/static/themes/material')
16 files changed, 1089 insertions, 48 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..7d0bdac7 --- /dev/null +++ b/app/Resources/static/themes/material/css/article.scss | |||
@@ -0,0 +1,174 @@ | |||
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 | font-size: 0.8em; | ||
107 | display: flex; | ||
108 | flex-flow: row wrap; | ||
109 | margin: 0 auto; | ||
110 | |||
111 | li { | ||
112 | display: inline-flex; | ||
113 | vertical-align: middle; | ||
114 | } | ||
115 | |||
116 | a { | ||
117 | color: #000; | ||
118 | text-decoration: none; | ||
119 | } | ||
120 | } | ||
121 | |||
122 | #list { | ||
123 | float: right; | ||
124 | margin: 0 15px 10px; | ||
125 | } | ||
126 | |||
127 | .chip { | ||
128 | background-color: $blueAccentColor; | ||
129 | padding: 0 15px 0 10px; | ||
130 | margin: auto 2px; | ||
131 | |||
132 | a, | ||
133 | i { | ||
134 | color: #fff; | ||
135 | } | ||
136 | } | ||
137 | } | ||
138 | } | ||
139 | |||
140 | .reader-mode { | ||
141 | width: 95px !important; | ||
142 | transition: width 0.2s ease; | ||
143 | |||
144 | .collapsible-body { | ||
145 | height: 0; | ||
146 | overflow: hidden; | ||
147 | } | ||
148 | |||
149 | span { | ||
150 | opacity: 0; | ||
151 | transition: opacity 0.2s ease; | ||
152 | } | ||
153 | } | ||
154 | |||
155 | .reader-mode:hover { | ||
156 | width: 240px !important; | ||
157 | |||
158 | .collapsible-body { | ||
159 | height: auto; | ||
160 | } | ||
161 | |||
162 | span { | ||
163 | opacity: 1; | ||
164 | } | ||
165 | } | ||
166 | |||
167 | .progress { | ||
168 | position: fixed; | ||
169 | top: 0; | ||
170 | width: 100%; | ||
171 | height: 3px; | ||
172 | margin: 0; | ||
173 | z-index: 9999; | ||
174 | } | ||
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..18ef6e60 --- /dev/null +++ b/app/Resources/static/themes/material/css/cards.scss | |||
@@ -0,0 +1,186 @@ | |||
1 | /* ========================================================================== | ||
2 | Cards | ||
3 | ========================================================================== */ | ||
4 | |||
5 | main { | ||
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-content .activator, | ||
31 | .card-reveal .activator { | ||
32 | cursor: pointer; | ||
33 | font-family: "Material Icons"; | ||
34 | } | ||
35 | |||
36 | .card-content i.right, | ||
37 | .card-reveal i.right { | ||
38 | margin-left: 0; | ||
39 | } | ||
40 | |||
41 | .card-content .original { | ||
42 | line-height: 24px; | ||
43 | font-size: 15px; | ||
44 | } | ||
45 | |||
46 | .card-entry-labels { | ||
47 | position: absolute; | ||
48 | top: 10px; | ||
49 | z-index: 90; | ||
50 | max-width: 50%; | ||
51 | } | ||
52 | |||
53 | .card-entry-labels-hidden { | ||
54 | margin: 2.5px auto; | ||
55 | } | ||
56 | |||
57 | .card-entry-labels-hidden li { | ||
58 | display: inline-block; | ||
59 | background-color: $blueAccentColor; | ||
60 | margin: 0 5px; | ||
61 | padding: 5px 12px; | ||
62 | border-radius: 3px; | ||
63 | color: #fff; | ||
64 | max-height: 2em; | ||
65 | max-width: calc(100% - 15px); | ||
66 | overflow: hidden; | ||
67 | text-overflow: ellipsis; | ||
68 | white-space: nowrap; | ||
69 | } | ||
70 | |||
71 | .card-entry-labels-hidden li { | ||
72 | display: inline-block; | ||
73 | background-color: $blueAccentColor; | ||
74 | margin: 0 5px; | ||
75 | padding: 5px 12px; | ||
76 | border-radius: 3px; | ||
77 | color: #fff; | ||
78 | max-height: 2em; | ||
79 | max-width: calc(100% - 15px); | ||
80 | overflow: hidden; | ||
81 | text-overflow: ellipsis; | ||
82 | white-space: nowrap; | ||
83 | } | ||
84 | |||
85 | .card-content .estimatedTime { | ||
86 | margin-bottom: 10px; | ||
87 | } | ||
88 | |||
89 | .card-action { | ||
90 | padding: 10px 5px 10px 15px; | ||
91 | |||
92 | ul.links { | ||
93 | margin: 0; | ||
94 | font-size: 24px; | ||
95 | line-height: 24px; | ||
96 | } | ||
97 | |||
98 | a { | ||
99 | color: #fff; | ||
100 | margin: 0; | ||
101 | } | ||
102 | |||
103 | a:hover { | ||
104 | color: #fff; | ||
105 | } | ||
106 | |||
107 | ul.tools li a.tool { | ||
108 | margin-right: 5px !important; | ||
109 | } | ||
110 | |||
111 | .reading-time { | ||
112 | display: inline-flex; | ||
113 | vertical-align: middle; | ||
114 | } | ||
115 | } | ||
116 | |||
117 | .card-entry-labels li, | ||
118 | .card-tag-labels li { | ||
119 | margin: 10px 10px 10px auto; | ||
120 | padding: 5px 12px 5px 16px !important; | ||
121 | background-color: $blueAccentColor; | ||
122 | border-radius: 0 3px 3px 0; | ||
123 | color: #fff; | ||
124 | cursor: default; | ||
125 | max-height: 2em; | ||
126 | overflow: hidden; | ||
127 | text-overflow: ellipsis; | ||
128 | white-space: nowrap; | ||
129 | } | ||
130 | |||
131 | .card-image { | ||
132 | height: 10em; | ||
133 | } | ||
134 | |||
135 | .card-fullimage { | ||
136 | height: 13.5em; | ||
137 | } | ||
138 | |||
139 | .card-image .preview, | ||
140 | .card-fullimage .preview { | ||
141 | height: 14em; | ||
142 | background: no-repeat 50%/cover; | ||
143 | } | ||
144 | |||
145 | &.sw { | ||
146 | max-width: 370px; | ||
147 | margin-left: auto; | ||
148 | margin-right: auto; | ||
149 | } | ||
150 | } | ||
151 | |||
152 | a.original { | ||
153 | text-overflow: ellipsis; | ||
154 | white-space: nowrap; | ||
155 | overflow: hidden; | ||
156 | display: block; | ||
157 | } | ||
158 | |||
159 | .card-entry-tags a, | ||
160 | .card-entry-labels a, | ||
161 | .card-tag-labels a, | ||
162 | .card-entry-labels-hidden a, | ||
163 | #list .chip a { | ||
164 | text-decoration: none; | ||
165 | font-weight: normal; | ||
166 | color: #fff; | ||
167 | } | ||
168 | |||
169 | .card-stacked { | ||
170 | &:hover ul.tools-list { | ||
171 | display: block; | ||
172 | } | ||
173 | |||
174 | ul.tools-list { | ||
175 | display: none; | ||
176 | } | ||
177 | } | ||
178 | |||
179 | .quickstart .card .card-action a, | ||
180 | .quickstart .card .card-action a:hover { | ||
181 | color: #fff !important; | ||
182 | } | ||
183 | |||
184 | .settings .div_tabs { | ||
185 | padding-bottom: 15px; | ||
186 | } | ||
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..b6a46a9e --- /dev/null +++ b/app/Resources/static/themes/material/css/entries.scss | |||
@@ -0,0 +1,87 @@ | |||
1 | /* ========================================================================== | ||
2 | * Entries | ||
3 | * ========================================================================== */ | ||
4 | |||
5 | .results { | ||
6 | height: 1em; | ||
7 | |||
8 | .nb-results, | ||
9 | .pagination { | ||
10 | margin: 15px 15px 0; | ||
11 | } | ||
12 | |||
13 | .nb-results { | ||
14 | display: inline-flex; | ||
15 | } | ||
16 | |||
17 | a { | ||
18 | color: #444; | ||
19 | } | ||
20 | } | ||
21 | |||
22 | .pagination { | ||
23 | float: right; | ||
24 | |||
25 | ul { | ||
26 | margin: 0 !important; | ||
27 | |||
28 | .prev.disabled, | ||
29 | .next.disabled { | ||
30 | display: none; | ||
31 | } | ||
32 | } | ||
33 | |||
34 | li { | ||
35 | padding: 0; | ||
36 | } | ||
37 | |||
38 | a { | ||
39 | padding: 0 10px; | ||
40 | height: 30px; | ||
41 | display: block; | ||
42 | } | ||
43 | |||
44 | .disabled { | ||
45 | margin-right: 10px; | ||
46 | margin-left: 10px; | ||
47 | } | ||
48 | |||
49 | li.active span { | ||
50 | padding: 0 10px; | ||
51 | height: 30px; | ||
52 | display: block; | ||
53 | color: #fff; | ||
54 | } | ||
55 | } | ||
56 | |||
57 | .page-footer .footer-copyright { | ||
58 | min-width: 50px; | ||
59 | height: auto !important; | ||
60 | line-height: 1em !important; | ||
61 | |||
62 | p { | ||
63 | text-overflow: ellipsis; | ||
64 | white-space: nowrap; | ||
65 | overflow: hidden; | ||
66 | display: block; | ||
67 | } | ||
68 | } | ||
69 | |||
70 | .hidden { | ||
71 | display: none; | ||
72 | } | ||
73 | |||
74 | .picker__date-display { | ||
75 | display: none; | ||
76 | } | ||
77 | |||
78 | footer { | ||
79 | &.page-footer { | ||
80 | margin-top: 10px; | ||
81 | padding-top: 0; | ||
82 | } | ||
83 | |||
84 | .row { | ||
85 | margin-bottom: 10px; | ||
86 | } | ||
87 | } | ||
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..268e6dca --- /dev/null +++ b/app/Resources/static/themes/material/css/icons.scss | |||
@@ -0,0 +1,185 @@ | |||
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 | |||
111 | a.icon-image { | ||
112 | background-repeat: no-repeat; | ||
113 | padding-right: 0.4em !important; | ||
114 | padding-left: 1em !important; | ||
115 | margin-left: 25px; | ||
116 | |||
117 | &::before { | ||
118 | content: ""; | ||
119 | display: block; | ||
120 | width: 24px; | ||
121 | height: 24px; | ||
122 | float: left; | ||
123 | margin: 0 6px 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 | |||
143 | .icon-google-plus2::before { | ||
144 | content: "\ea89"; | ||
145 | } | ||
146 | |||
147 | .icon-facebook2::before { | ||
148 | content: "\ea8d"; | ||
149 | } | ||
150 | |||
151 | .icon-twitter::before { | ||
152 | content: "\ea96"; | ||
153 | } | ||
154 | |||
155 | .icon-apple::before { | ||
156 | content: "\eabf"; | ||
157 | } | ||
158 | |||
159 | .icon-android::before { | ||
160 | content: "\eac1"; | ||
161 | } | ||
162 | |||
163 | .icon-chrome::before { | ||
164 | content: "\eae5"; | ||
165 | } | ||
166 | |||
167 | .icon-firefox::before { | ||
168 | content: "\eae6"; | ||
169 | } | ||
170 | |||
171 | .icon-link::before { | ||
172 | content: "\e9cb"; | ||
173 | } | ||
174 | |||
175 | footer [class^="icon-"], | ||
176 | footer [class*=" icon-"] { | ||
177 | font-size: 2em; | ||
178 | transition: text-shadow 0.2s ease; | ||
179 | padding-right: 10px; | ||
180 | } | ||
181 | |||
182 | footer [class^="icon-"]:hover, | ||
183 | footer [class*=" icon-"]:hover { | ||
184 | text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); | ||
185 | } | ||
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..8b8b06e6 --- /dev/null +++ b/app/Resources/static/themes/material/css/layout.scss | |||
@@ -0,0 +1,50 @@ | |||
1 | /* ========================================================================== | ||
2 | Layout | ||
3 | ========================================================================== */ | ||
4 | |||
5 | body { | ||
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 | |||
21 | nav, | ||
22 | main, | ||
23 | footer { | ||
24 | padding-left: 240px; | ||
25 | } | ||
26 | |||
27 | main, | ||
28 | #content, | ||
29 | .valign-wrapper { | ||
30 | height: 100%; | ||
31 | } | ||
32 | |||
33 | #main { | ||
34 | flex: 1 0 auto; | ||
35 | |||
36 | .logo { | ||
37 | a { | ||
38 | height: 100pt; | ||
39 | } | ||
40 | |||
41 | img { | ||
42 | height: 100pt; | ||
43 | width: 100pt; | ||
44 | } | ||
45 | |||
46 | &:hover { | ||
47 | background: transparent; | ||
48 | } | ||
49 | } | ||
50 | } | ||
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..96f34494 --- /dev/null +++ b/app/Resources/static/themes/material/css/media_queries.scss | |||
@@ -0,0 +1,149 @@ | |||
1 | /* ========================================================================== | ||
2 | Media queries | ||
3 | ========================================================================== */ | ||
4 | |||
5 | @media only screen and (max-width: 992px) { | ||
6 | header, | ||
7 | main, | ||
8 | footer { | ||
9 | padding-left: 0; | ||
10 | } | ||
11 | |||
12 | nav, | ||
13 | main, | ||
14 | footer { | ||
15 | padding-left: 0; | ||
16 | } | ||
17 | |||
18 | .pagination { | ||
19 | width: auto; | ||
20 | } | ||
21 | |||
22 | .nav-panels .action { | ||
23 | padding-right: 0.75rem; | ||
24 | } | ||
25 | |||
26 | .nav-panel-buttom { | ||
27 | justify-content: space-around; | ||
28 | } | ||
29 | |||
30 | #article { | ||
31 | max-width: 35em; | ||
32 | margin-left: auto; | ||
33 | margin-right: auto; | ||
34 | font-size: 18px; | ||
35 | |||
36 | > header > h1 { | ||
37 | font-size: 1.33em; | ||
38 | } | ||
39 | } | ||
40 | |||
41 | .reader-mode { | ||
42 | width: 240px !important; | ||
43 | |||
44 | span { | ||
45 | opacity: 1; | ||
46 | } | ||
47 | } | ||
48 | |||
49 | .tabs { | ||
50 | display: inline-block; | ||
51 | height: auto; | ||
52 | } | ||
53 | |||
54 | .tab { | ||
55 | min-width: 100%; | ||
56 | } | ||
57 | |||
58 | .indicator { | ||
59 | display: none; | ||
60 | } | ||
61 | |||
62 | .pagination li.prev, | ||
63 | .pagination li.next { | ||
64 | width: auto; | ||
65 | } | ||
66 | |||
67 | .drag-target + .drag-target { | ||
68 | height: 50%; | ||
69 | } | ||
70 | |||
71 | .drag-target + .drag-target + .drag-target { | ||
72 | top: 50%; | ||
73 | } | ||
74 | } | ||
75 | |||
76 | @media only screen and (min-width: 1200px) and (max-width: 1650px) { | ||
77 | .row .col.l3 { | ||
78 | width: 33.33333%; | ||
79 | margin-left: 0; | ||
80 | } | ||
81 | } | ||
82 | |||
83 | @media only screen and (min-width: 993px) and (max-width: 1200px) { | ||
84 | .row { | ||
85 | .col.l1 { | ||
86 | width: 25%; | ||
87 | margin-left: 0; | ||
88 | } | ||
89 | |||
90 | .col.l2 { | ||
91 | width: 33.33333%; | ||
92 | margin-left: 0; | ||
93 | } | ||
94 | |||
95 | .col.l3 { | ||
96 | width: 41.66667%; | ||
97 | margin-left: 0; | ||
98 | } | ||
99 | |||
100 | .col.l4 { | ||
101 | width: 50%; | ||
102 | margin-left: 0; | ||
103 | } | ||
104 | |||
105 | .col.l5 { | ||
106 | width: 58.33333%; | ||
107 | margin-left: 0; | ||
108 | } | ||
109 | |||
110 | .col.l6 { | ||
111 | width: 66.66667%; | ||
112 | margin-left: 0; | ||
113 | } | ||
114 | |||
115 | .col.l7 { | ||
116 | width: 75%; | ||
117 | margin-left: 0; | ||
118 | } | ||
119 | |||
120 | .col.l8 { | ||
121 | width: 83.33333%; | ||
122 | margin-left: 0; | ||
123 | } | ||
124 | |||
125 | .col.l9 { | ||
126 | width: 91.66667%; | ||
127 | margin-left: 0; | ||
128 | } | ||
129 | |||
130 | .col.l10 { | ||
131 | width: 100%; | ||
132 | margin-left: 0; | ||
133 | } | ||
134 | } | ||
135 | } | ||
136 | |||
137 | @media only screen and (max-width: 350px) { | ||
138 | .nb-results { | ||
139 | display: none; | ||
140 | } | ||
141 | |||
142 | main ul.row { | ||
143 | padding: 0; | ||
144 | } | ||
145 | |||
146 | .row .col { | ||
147 | padding: 0; | ||
148 | } | ||
149 | } | ||
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 | |||
6 | nav { | ||
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..b430077e --- /dev/null +++ b/app/Resources/static/themes/material/css/sidenav.scss | |||
@@ -0,0 +1,41 @@ | |||
1 | /* ========================================================================== | ||
2 | Side-nav | ||
3 | ========================================================================== */ | ||
4 | |||
5 | .side-nav { | ||
6 | width: 240px; | ||
7 | |||
8 | li { | ||
9 | padding: 0; | ||
10 | } | ||
11 | |||
12 | a { | ||
13 | margin: 0 1rem; | ||
14 | } | ||
15 | |||
16 | &.fixed a { | ||
17 | font-size: 13px; | ||
18 | line-height: 44px; | ||
19 | height: 44px; | ||
20 | } | ||
21 | |||
22 | .collapsible-header, | ||
23 | &.fixed .collapsible-header { | ||
24 | height: 45px; | ||
25 | line-height: 44px; | ||
26 | padding: 0 20px; | ||
27 | } | ||
28 | |||
29 | > li.logo { | ||
30 | line-height: 0; | ||
31 | text-align: center; | ||
32 | } | ||
33 | } | ||
34 | |||
35 | .bold > a { | ||
36 | font-weight: bold; | ||
37 | } | ||
38 | |||
39 | span.numberItems { | ||
40 | float: right; | ||
41 | } | ||
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..6a6f52f9 --- /dev/null +++ b/app/Resources/static/themes/material/css/various.scss | |||
@@ -0,0 +1,24 @@ | |||
1 | /* ========================================================================== | ||
2 | * Various | ||
3 | * ========================================================================== */ | ||
4 | |||
5 | div.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 | |||
22 | nav .input-field input { | ||
23 | margin: 0; | ||
24 | } | ||
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 */ | ||
2 | import $ from 'jquery'; | 1 | import $ from 'jquery'; |
3 | 2 | ||
4 | /* Annotations */ | 3 | /* Materialize imports */ |
5 | import annotator from 'annotator'; | 4 | import 'materialize-css/dist/css/materialize.css'; |
5 | import 'materialize-css/dist/js/materialize'; | ||
6 | |||
7 | /* Global imports */ | ||
8 | import '../_global/index'; | ||
6 | 9 | ||
7 | /* Tools */ | 10 | /* Tools */ |
8 | import { savePercent, retrievePercent, initFilters, initExport } from '../../_global/js/tools'; | 11 | import { initExport, initFilters } from './js/tools'; |
9 | 12 | ||
10 | /* Import shortcuts */ | 13 | /* Import shortcuts */ |
11 | import './shortcuts/main'; | 14 | import './js/shortcuts/main'; |
12 | import './shortcuts/entry'; | 15 | import './js/shortcuts/entry'; |
13 | import '../../_global/js/shortcuts/main'; | ||
14 | import '../../_global/js/shortcuts/entry'; | ||
15 | |||
16 | require('materialize'); // eslint-disable-line | ||
17 | 16 | ||
18 | global.jQuery = $; | 17 | /* Theme style */ |
18 | import './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/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 @@ | |||
1 | import $ from 'jquery'; | ||
2 | |||
3 | function 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 | |||
16 | function 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 | |||
24 | export { initExport, initFilters }; | ||