aboutsummaryrefslogtreecommitdiffhomepage
path: root/app
diff options
context:
space:
mode:
authorJérémy Benoist <j0k3r@users.noreply.github.com>2017-06-22 15:34:46 +0200
committerGitHub <noreply@github.com>2017-06-22 15:34:46 +0200
commit29714661b1df78871ceaf0e079f11041a8641d4b (patch)
treea3132b8f83fc8fdc95e860b1d11e854743d589b4 /app
parent9416053bfcefa1cce94ea23eee93f0fabf1af2f8 (diff)
parent151f45db0ef6d0a4737eb220b0803b3ccfd0b6f5 (diff)
downloadwallabag-29714661b1df78871ceaf0e079f11041a8641d4b.tar.gz
wallabag-29714661b1df78871ceaf0e079f11041a8641d4b.tar.zst
wallabag-29714661b1df78871ceaf0e079f11041a8641d4b.zip
Merge pull request #3204 from wallabag/better-export-page
Better public sharing page
Diffstat (limited to 'app')
-rw-r--r--app/Resources/static/themes/_global/share.js1
-rw-r--r--app/Resources/static/themes/_global/share.scss407
-rw-r--r--app/config/webpack/common.js10
-rw-r--r--app/config/webpack/dev.js23
-rw-r--r--app/config/webpack/prod.js50
5 files changed, 449 insertions, 42 deletions
diff --git a/app/Resources/static/themes/_global/share.js b/app/Resources/static/themes/_global/share.js
new file mode 100644
index 00000000..d7078616
--- /dev/null
+++ b/app/Resources/static/themes/_global/share.js
@@ -0,0 +1 @@
import './share.scss';
diff --git a/app/Resources/static/themes/_global/share.scss b/app/Resources/static/themes/_global/share.scss
new file mode 100644
index 00000000..5a853324
--- /dev/null
+++ b/app/Resources/static/themes/_global/share.scss
@@ -0,0 +1,407 @@
1/* -------------------------- Reset ------------------- */
2
3html,
4body,
5div,
6span,
7applet,
8object,
9iframe,
10h1,
11h2,
12h3,
13h4,
14h5,
15h6,
16p,
17blockquote,
18pre,
19a,
20abbr,
21acronym,
22address,
23big,
24cite,
25code,
26del,
27dfn,
28em,
29img,
30ins,
31kbd,
32q,
33s,
34samp,
35small,
36strike,
37strong,
38sub,
39sup,
40tt,
41b,
42u,
43i,
44dl,
45dt,
46dd,
47ol,
48ul,
49li,
50fieldset,
51form,
52label,
53legend,
54table,
55caption,
56tbody,
57tfoot,
58thead,
59tr,
60th,
61td,
62article,
63aside,
64canvas,
65details,
66embed,
67figure,
68figcaption,
69footer,
70header,
71hgroup,
72menu,
73nav,
74output,
75section,
76summary,
77time,
78mark,
79audio,
80video {
81 margin: 0;
82 padding: 0;
83 border: 0;
84 font-size: 100%;
85 vertical-align: baseline;
86}
87
88article,
89aside,
90details,
91figcaption,
92figure,
93footer,
94header,
95hgroup,
96menu,
97nav,
98section {
99 display: block;
100}
101
102body {
103 line-height: 1;
104}
105
106blockquote,
107q {
108 quotes: none;
109}
110
111blockquote::before,
112blockquote::after,
113q::before,
114q::after {
115 content: '';
116 content: none;
117}
118
119table {
120 border-collapse: collapse;
121 border-spacing: 0;
122}
123
124/* -------------------------- General properties ------------------- */
125
126body {
127 background-color: white;
128 color: #444;
129 font-family: Georgia;
130 line-height: 1.7;
131 -ms-content-zooming: none;
132 margin-bottom: 64px;
133}
134
135h1,
136h2,
137h3,
138h4,
139h5,
140h6 {
141 font-weight: 600;
142 margin: 0.2em 0;
143}
144
145article h1,
146article h2,
147article h3,
148article h4,
149article h5,
150article h6 {
151 text-align: left !important;
152 line-height: 1.3;
153}
154
155h1 {
156 font-size: 1.4em;
157}
158
159h2 {
160 font-size: 1.3em;
161}
162
163h3,
164h4 {
165 font-size: 1.2em;
166}
167
168h5,
169h6 {
170 font-size: 1.1em;
171}
172
173p {
174 margin-bottom: 0.75em;
175}
176
177b,
178strong {
179 font-weight: bold;
180}
181
182i,
183em {
184 font-style: italic;
185}
186
187a {
188 color: #444;
189 text-decoration: underline;
190}
191
192a:active,
193a:hover {
194 outline: 0;
195}
196
197p,
198ul,
199ol,
200dl {
201 margin: 0 0 1.75em;
202}
203
204ul,
205ol {
206 padding-left: 1.25em;
207}
208
209li {
210 padding-bottom: 0.2em;
211 line-height: 1.6;
212}
213
214li p:last-child,
215li li:last-child {
216 margin-bottom: -0.2em;
217}
218
219ul li:last-child,
220ol li:last-child {
221 padding-bottom: 0;
222}
223
224mark {
225 padding: 0 0.2em;
226}
227
228mark a {
229 text-decoration: none;
230}
231
232blockquote {
233 font-style: italic;
234 border-left: 0.25em solid black;
235 margin-left: -20px;
236 padding-left: 17px;
237 margin-bottom: 0.5em;
238 margin-top: 0.5em;
239}
240
241blockquote cite {
242 text-transform: uppercase;
243 font-size: 0.8em;
244 font-style: normal;
245}
246
247blockquote cite::before {
248 content: "—";
249 margin-right: 0.5em;
250}
251
252img {
253 display: block;
254 height: auto;
255 margin-bottom: 0.5em;
256 max-width: 100%;
257}
258
259figure {
260 margin: 0;
261}
262
263figure figcaption {
264 display: block;
265 margin-top: 0.3em;
266 font-style: italic;
267 font-size: 0.8em;
268}
269
270button {
271 display: none !important;
272}
273
274hr {
275 display: block;
276 height: 1px;
277 border: solid #666;
278 border-width: 1px 0 0;
279 margin: 1.6em 0;
280 padding: 0;
281}
282
283small {
284 font-size: 0.7em;
285}
286
287dl {
288 margin: 1.6em 0;
289}
290
291dl dt {
292 float: left;
293 width: 11.25em;
294 overflow: hidden;
295 clear: left;
296 text-align: right;
297 -ms-text-overflow: ellipsis;
298 -o-text-overflow: ellipsis;
299 text-overflow: ellipsis;
300 white-space: nowrap;
301 font-weight: bold;
302 margin-bottom: 1em;
303}
304
305dl dd {
306 margin-left: 12.5em;
307 margin-bottom: 1em;
308}
309
310pre {
311 -moz-box-sizing: border-box;
312 -webkit-box-sizing: border-box;
313 box-sizing: border-box;
314 margin: 4em 0;
315 border: 0.0625em solid #efefef;
316 width: 100%;
317 padding: 1em;
318 font-family: Consolas, monospace;
319 white-space: pre;
320 overflow: auto;
321}
322
323pre code {
324 font-size: 0.8em;
325 line-height: 1.6em;
326 white-space: pre-wrap;
327 background: transparent;
328 border: none;
329 padding: 0;
330 vertical-align: inherit;
331}
332
333code {
334 padding: 0.125em 0.375em;
335 margin: 0 0.2em;
336 font-family: Consolas, monospace;
337 font-size: 0.8em;
338 white-space: pre;
339 border: 1px solid lightgray;
340 overflow: auto;
341}
342
343audio,
344video {
345 max-width: 43.75em;
346}
347
348::selection,
349mark {
350 background: #666;
351 color: white;
352}
353
354table {
355 border-collapse: collapse;
356 margin-bottom: 2em;
357 width: 100%;
358}
359
360th,
361td {
362 padding: 0.25em;
363 text-align: left;
364}
365
366thead tr {
367 text-transform: uppercase;
368 font-size: 0.85em;
369 letter-spacing: 1px;
370 font-family: "Segoe UI", sans-serif;
371 font-weight: 600;
372}
373
374tbody tr:nth-child(2n+1) {
375 background: rgba(0, 0, 0, 0.1);
376}
377
378tbody {
379 border: solid #999;
380 border-width: 1px 0;
381}
382
383article {
384 padding: 0 1em;
385}
386
387/* --------------------- Responsive design ------------------------- */
388
389@media (min-width: 720px) {
390 blockquote {
391 margin-left: -1.4375em;
392 padding-left: 1.25em;
393 }
394
395 article {
396 margin: 0 auto;
397 max-width: 43.75em;
398 padding: 0 1.25em;
399 }
400
401 header {
402 max-width: 43.75em;
403 margin: 0 auto;
404 margin-top: 32px;
405 text-align: center;
406 }
407}
diff --git a/app/config/webpack/common.js b/app/config/webpack/common.js
index 4f5739f0..c497689a 100644
--- a/app/config/webpack/common.js
+++ b/app/config/webpack/common.js
@@ -4,13 +4,13 @@ const StyleLintPlugin = require('stylelint-webpack-plugin');
4 4
5const rootDir = path.resolve(__dirname, '../../../'); 5const rootDir = path.resolve(__dirname, '../../../');
6 6
7module.exports = function() { 7module.exports = function () {
8 return { 8 return {
9 entry: { 9 entry: {
10 material: path.join(rootDir, './app/Resources/static/themes/material/index.js'), 10 material: path.join(rootDir, './app/Resources/static/themes/material/index.js'),
11 baggy: path.join(rootDir, './app/Resources/static/themes/baggy/index.js'), 11 baggy: path.join(rootDir, './app/Resources/static/themes/baggy/index.js'),
12 public: path.join(rootDir, './app/Resources/static/themes/_global/share.js'),
12 }, 13 },
13
14 output: { 14 output: {
15 filename: '[name].js', 15 filename: '[name].js',
16 path: path.resolve(rootDir, 'web/bundles/wallabagcore'), 16 path: path.resolve(rootDir, 'web/bundles/wallabagcore'),
@@ -21,7 +21,7 @@ module.exports = function() {
21 $: 'jquery', 21 $: 'jquery',
22 jQuery: 'jquery', 22 jQuery: 'jquery',
23 'window.$': 'jquery', 23 'window.$': 'jquery',
24 'window.jQuery': 'jquery' 24 'window.jQuery': 'jquery',
25 }), 25 }),
26 new StyleLintPlugin({ 26 new StyleLintPlugin({
27 configFile: '.stylelintrc', 27 configFile: '.stylelintrc',
@@ -33,8 +33,8 @@ module.exports = function() {
33 ], 33 ],
34 resolve: { 34 resolve: {
35 alias: { 35 alias: {
36 jquery: path.join(rootDir, 'node_modules/jquery/dist/jquery.js') 36 jquery: path.join(rootDir, 'node_modules/jquery/dist/jquery.js'),
37 } 37 },
38 }, 38 },
39 }; 39 };
40}; 40};
diff --git a/app/config/webpack/dev.js b/app/config/webpack/dev.js
index 771df65b..b6551152 100644
--- a/app/config/webpack/dev.js
+++ b/app/config/webpack/dev.js
@@ -1,13 +1,12 @@
1const webpackMerge = require('webpack-merge'); 1const webpackMerge = require('webpack-merge');
2const webpack = require('webpack'); 2const webpack = require('webpack');
3const path = require('path');
4const commonConfig = require('./common.js'); 3const commonConfig = require('./common.js');
5 4
6module.exports = function () { 5module.exports = function () {
7 return webpackMerge(commonConfig(), { 6 return webpackMerge(commonConfig(), {
8 devtool: 'eval-source-map', 7 devtool: 'eval-source-map',
9 output: { 8 output: {
10 filename: '[name].dev.js' 9 filename: '[name].dev.js',
11 }, 10 },
12 11
13 devServer: { 12 devServer: {
@@ -34,9 +33,9 @@ module.exports = function () {
34 use: { 33 use: {
35 loader: 'babel-loader', 34 loader: 'babel-loader',
36 options: { 35 options: {
37 presets: ['env'] 36 presets: ['env'],
38 } 37 },
39 } 38 },
40 }, 39 },
41 { 40 {
42 test: /\.(s)?css$/, 41 test: /\.(s)?css$/,
@@ -46,17 +45,17 @@ module.exports = function () {
46 loader: 'css-loader', 45 loader: 'css-loader',
47 options: { 46 options: {
48 importLoaders: 1, 47 importLoaders: 1,
49 } 48 },
50 }, 49 },
51 'postcss-loader', 50 'postcss-loader',
52 'sass-loader' 51 'sass-loader',
53 ] 52 ],
54 }, 53 },
55 { 54 {
56 test: /\.(jpg|png|gif|svg|eot|ttf|woff|woff2)$/, 55 test: /\.(jpg|png|gif|svg|eot|ttf|woff|woff2)$/,
57 use: 'url-loader' 56 use: 'url-loader',
58 }, 57 },
59 ] 58 ],
60 }, 59 },
61 }) 60 });
62}; 61};
diff --git a/app/config/webpack/prod.js b/app/config/webpack/prod.js
index ef41ab99..44961cc5 100644
--- a/app/config/webpack/prod.js
+++ b/app/config/webpack/prod.js
@@ -5,34 +5,34 @@ const ManifestPlugin = require('webpack-manifest-plugin');
5 5
6const commonConfig = require('./common.js'); 6const commonConfig = require('./common.js');
7 7
8module.exports = function() { 8module.exports = function () {
9 return webpackMerge(commonConfig(), { 9 return webpackMerge(commonConfig(), {
10 output: { 10 output: {
11 filename: '[name].js' 11 filename: '[name].js',
12 }, 12 },
13 devtool: 'source-map', 13 devtool: 'source-map',
14 plugins: [ 14 plugins: [
15 new webpack.DefinePlugin({ 15 new webpack.DefinePlugin({
16 'process.env': { 16 'process.env': {
17 'NODE_ENV': JSON.stringify('production') 17 'NODE_ENV': JSON.stringify('production'),
18 } 18 },
19 }), 19 }),
20 new webpack.optimize.UglifyJsPlugin({ 20 new webpack.optimize.UglifyJsPlugin({
21 beautify: false, 21 beautify: false,
22 mangle: { 22 mangle: {
23 screw_ie8: true, 23 screw_ie8: true,
24 keep_fnames: true 24 keep_fnames: true,
25 }, 25 },
26 compress: { 26 compress: {
27 screw_ie8: true, 27 screw_ie8: true,
28 warnings: false 28 warnings: false,
29 }, 29 },
30 comments: false 30 comments: false,
31 }), 31 }),
32 new ExtractTextPlugin('[name].css'), 32 new ExtractTextPlugin('[name].css'),
33 new ManifestPlugin({ 33 new ManifestPlugin({
34 fileName: 'manifest.json', 34 fileName: 'manifest.json',
35 }) 35 }),
36 ], 36 ],
37 module: { 37 module: {
38 rules: [ 38 rules: [
@@ -48,9 +48,9 @@ module.exports = function() {
48 use: { 48 use: {
49 loader: 'babel-loader', 49 loader: 'babel-loader',
50 options: { 50 options: {
51 presets: ['env'] 51 presets: ['env'],
52 } 52 },
53 } 53 },
54 }, 54 },
55 { 55 {
56 test: /\.(s)?css$/, 56 test: /\.(s)?css$/,
@@ -63,17 +63,17 @@ module.exports = function() {
63 importLoaders: 1, 63 importLoaders: 1,
64 minimize: { 64 minimize: {
65 discardComments: { 65 discardComments: {
66 removeAll: true 66 removeAll: true,
67 }, 67 },
68 core: true, 68 core: true,
69 minifyFontValues: true 69 minifyFontValues: true,
70 } 70 },
71 } 71 },
72 }, 72 },
73 'postcss-loader', 73 'postcss-loader',
74 'sass-loader' 74 'sass-loader',
75 ] 75 ],
76 }) 76 }),
77 }, 77 },
78 { 78 {
79 test: /\.(jpg|png|gif|svg)$/, 79 test: /\.(jpg|png|gif|svg)$/,
@@ -81,8 +81,8 @@ module.exports = function() {
81 loader: 'file-loader', 81 loader: 'file-loader',
82 options: { 82 options: {
83 name: 'img/[name].[ext]', 83 name: 'img/[name].[ext]',
84 } 84 },
85 } 85 },
86 }, 86 },
87 { 87 {
88 test: /\.(eot|ttf|woff|woff2)$/, 88 test: /\.(eot|ttf|woff|woff2)$/,
@@ -90,10 +90,10 @@ module.exports = function() {
90 loader: 'file-loader', 90 loader: 'file-loader',
91 options: { 91 options: {
92 name: 'fonts/[name].[ext]', 92 name: 'fonts/[name].[ext]',
93 } 93 },
94 } 94 },
95 } 95 },
96 ] 96 ],
97 }, 97 },
98 }) 98 });
99}; 99};