Skip to content

Commit 10969e9

Browse files
Pierre-RAPierre-RA
authored
add responsive (#21)
1 parent ddf9153 commit 10969e9

File tree

5 files changed

+108
-78
lines changed

5 files changed

+108
-78
lines changed

‎bower.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
"private": true,
44
"version": "0.0.1",
55
"dependencies": {
6-
"components-font-awesome": "^4.6.3"
6+
"components-font-awesome": "^4.6.3",
7+
"bootstrap": "^3.3.7"
78
},
89
"devDependencies": {
910
"chai": "^3.5.0",

‎gulpfile.babel.js‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,12 @@ gulp.task('web-assets', () => {
4949
}).pipe(gulp.dest('web/public'));
5050
});
5151

52-
gulp.task('web-font-awesome', () => {
52+
gulp.task('web-bower', () => {
5353
return gulp.src([
54-
'app/bower_components/components-font-awesome/**'
55-
]).pipe(gulp.dest('web/public/bower_components/components-font-awesome'));
54+
'app/bower_components/**',
55+
'!app/bower_components/chai/**',
56+
'!app/bower_components/mocha/',
57+
]).pipe(gulp.dest('web/public/bower_components'));
5658
});
5759

5860
gulp.task('favicon', () => {
@@ -222,7 +224,7 @@ gulp.task('server', (cb) => {
222224

223225
gulp.task('build-web', (cb) => {
224226
runSequence('lint-web','jshint-web','web-assets', 'lang-web',
225-
'favicon', 'web-font-awesome', cb);
227+
'favicon', 'web-bower', cb);
226228
});
227229

228230
gulp.task('build-toolbar', (cb) => {

‎utils/css/lunette.css‎

Lines changed: 59 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@
1818

1919
#ext-provisu-inner {
2020
position: relative;
21-
padding: 20px 0;
21+
padding: 0;
2222
box-shadow: 0 0 5px rgba(0,0,0,0.5);
2323
border: solid 1px rgba(0,0,0,0.3);
2424
width: 90%;
2525
margin: 20px 5%;
2626
}
2727

2828
#ext-provisu-inner div {
29-
padding: 40px;
29+
padding: 10px 20px;
3030
}
3131

3232
#ext-provisu-inner h1 {
@@ -74,8 +74,16 @@
7474
display: inline-block;
7575
width: 100%;
7676
}
77+
#ext-provisu-inner {
78+
position: relative;
79+
padding: 0;
80+
box-shadow: none;
81+
border: none;
82+
width: 100%;
83+
margin: 0;
84+
}
7785
}
78-
@media(max-width:992px){
86+
@media(min-width:545px) and (max-width:992px){
7987
#ext-provisu-inner li {
8088
display: inline-block;
8189
width: 50%;
@@ -137,14 +145,6 @@
137145
font: inherit;
138146
}
139147

140-
/*
141-
#ext-provisu-inner input[type=submit]:hover,
142-
#ext-provisu-inner input[type=button]:hover,
143-
#ext-provisu-inner button[type=submit]:hover {
144-
background-color: #45a049;
145-
}
146-
*/
147-
148148
/* ************************************************************************** */
149149
/* EXT-PROVISU-NORMAL */
150150
/* ************************************************************************** */
@@ -182,6 +182,14 @@
182182
color: white;
183183
}
184184

185+
.ext-provisu-normal #ext-provisu-top h1 {
186+
color: black;
187+
}
188+
189+
.ext-provisu-normal #ext-provisu-top h1 .text-muted {
190+
color: #777;
191+
}
192+
185193
/* ************************************************************************** */
186194
/* EXT-PROVISU-BLACK */
187195
/* ************************************************************************** */
@@ -219,6 +227,14 @@
219227
color: black;
220228
}
221229

230+
.ext-provisu-black #ext-provisu-top h1 {
231+
color: white;
232+
}
233+
234+
.ext-provisu-black #ext-provisu-top h1 .text-muted {
235+
color: #ccc;
236+
}
237+
222238
/* ************************************************************************** */
223239
/* EXT-PROVISU-BLUE */
224240
/* ************************************************************************** */
@@ -256,6 +272,14 @@
256272
color: black;
257273
}
258274

275+
.ext-provisu-blue #ext-provisu-top h1 {
276+
color: white;
277+
}
278+
279+
.ext-provisu-blue #ext-provisu-top h1 .text-muted {
280+
color: #ccc;
281+
}
282+
259283
/* ************************************************************************** */
260284
/* EXT-PROVISU-CYAN */
261285
/* ************************************************************************** */
@@ -293,14 +317,18 @@
293317
color: black;
294318
}
295319

320+
.ext-provisu-cyan #ext-provisu-top h1 {
321+
color: black;
322+
}
323+
324+
.ext-provisu-cyan #ext-provisu-top h1 .text-muted {
325+
color: #777;
326+
}
327+
296328
/* ************************************************************************** */
297329
/* SIDEBOX */
298330
/* ************************************************************************** */
299331

300-
.ext-provisu-under {
301-
margin-top: 120px !important;
302-
}
303-
304332
#hon-provisu-sidebox {
305333
position: fixed;
306334
top: 0;
@@ -345,7 +373,8 @@
345373
}
346374

347375
#hon-provisu-sidebox li a:link div.item-normal,
348-
#hon-provisu-sidebox li a:visited div.item-normal {
376+
#hon-provisu-sidebox li a:visited div.item-normal,
377+
#ext-provisu-top .tooltip-nm:link, #ext-provisu-top .tooltip-nm:visited {
349378
background-color: white;
350379
color: black;
351380
}
@@ -355,43 +384,50 @@
355384
color: blue;
356385
}
357386

358-
#hon-provisu-sidebox .tool-normal {
387+
#hon-provisu-sidebox .tool-normal,
388+
#ext-provisu-top .tooltip-nm:hover, #ext-provisu-top .tooltip-nm:active {
359389
background-color: rgb(215,215,215);
360390
color: black;
361391
}
362392

363393
#hon-provisu-sidebox li a:link div.item-black,
364394
#hon-provisu-sidebox li a:visited div.item-black,
365-
#hon-provisu-sidebox .tool-black {
395+
#hon-provisu-sidebox .tool-black,
396+
#ext-provisu-top .tooltip-bk:link, #ext-provisu-top .tooltip-bk:visited {
366397
background-color: rgba(0,0,0,1);
367398
color: white;
368399
}
369400

370-
#hon-provisu-sidebox li a:hover div.item-black {
401+
#hon-provisu-sidebox li a:hover div.item-black,
402+
#ext-provisu-top .tooltip-bk:hover, #ext-provisu-top .tooltip-bk:active {
371403
background-color: rgba(0,0,0,0.9);
372404
color: yellow;
373405
}
374406

375407
#hon-provisu-sidebox li a:link div.item-blue,
376408
#hon-provisu-sidebox li a:visited div.item-blue,
377-
#hon-provisu-sidebox .tool-blue {
409+
#hon-provisu-sidebox .tool-blue,
410+
#ext-provisu-top .tooltip-bl:link, #ext-provisu-top .tooltip-bl:visited {
378411
background-color: rgba(0,0,255,1);
379412
color: yellow;
380413
}
381414

382-
#hon-provisu-sidebox li a:hover div.item-blue {
415+
#hon-provisu-sidebox li a:hover div.item-blue,
416+
#ext-provisu-top .tooltip-bl:hover, #ext-provisu-top .tooltip-bl:active {
383417
background-color: rgba(0,0,255,0.8);
384418
color: red;
385419
}
386420

387421
#hon-provisu-sidebox li a:link div.item-cyan,
388422
#hon-provisu-sidebox li a:visited div.item-cyan,
389-
#hon-provisu-sidebox .tool-cyan {
423+
#hon-provisu-sidebox .tool-cyan,
424+
#ext-provisu-top .tooltip-cy:link, #ext-provisu-top .tooltip-cy:visited {
390425
background-color: rgb(210, 239, 233);
391426
color: black;
392427
}
393428

394-
#hon-provisu-sidebox li a:hover div.item-cyan {
429+
#hon-provisu-sidebox li a:hover div.item-cyan,
430+
#ext-provisu-top .tooltip-cy:hover, #ext-provisu-top .tooltip-cy:active {
395431
background-color: rgba(210, 239, 233, 0.8);
396432
color: red;
397433
}

‎web/routes/index.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,11 @@ router.get('/', function(req, res, next) {
2222
'/bower_components/components-font-awesome/css/font-awesome.min.css';
2323
var sanitizeHtmlPath = prefix + '/js/sanitize-html.min.js';
2424
var lunettePath = prefix + '/js/lunette.js';
25+
var jqueryPath = prefix + '/bower_components/jquery/dist/jquery.min.js';
26+
var bootstrapPath = prefix +
27+
'/bower_components/bootstrap/dist/css/bootstrap.min.css';
28+
var bootstrapJsPath = prefix +
29+
'/bower_components/bootstrap/dist/js/bootstrap.min.js';
2530

2631
if (req.query.url) {
2732
var base = url.parse(req.query.url, false, true);
@@ -113,6 +118,9 @@ router.get('/', function(req, res, next) {
113118
lunetteStyle: lunetteStylePath,
114119
fontAwesome: fontAwesomePath,
115120
lunette: lunettePath,
121+
jquery: jqueryPath,
122+
bootstrap: bootstrapPath,
123+
bootstrapJs: bootstrapJsPath,
116124
external: req.query.url,
117125
filter: filter,
118126
i18n: i18n,
@@ -127,6 +135,9 @@ router.get('/', function(req, res, next) {
127135
i18n: i18n,
128136
sanitizeHtml: sanitizeHtmlPath,
129137
lunette: lunettePath,
138+
jquery: jqueryPath,
139+
bootstrap: bootstrapPath,
140+
bootstrapJs: bootstrapJsPath,
130141
});
131142
} else {
132143

@@ -143,6 +154,9 @@ router.get('/', function(req, res, next) {
143154
lunetteStyle: lunetteStylePath,
144155
fontAwesome: fontAwesomePath,
145156
lunette: lunettePath,
157+
jquery: jqueryPath,
158+
bootstrap: bootstrapPath,
159+
bootstrapJs: bootstrapJsPath,
146160
});
147161
}
148162
});
@@ -157,6 +171,9 @@ router.get('/', function(req, res, next) {
157171
lunetteStyle: lunetteStylePath,
158172
fontAwesome: fontAwesomePath,
159173
lunette: lunettePath,
174+
jquery: jqueryPath,
175+
bootstrap: bootstrapPath,
176+
bootstrapJs: bootstrapJsPath,
160177
});
161178
}
162179
});

‎web/views/layout.pug‎

Lines changed: 24 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ html
88
link(rel='stylesheet', href!=lunetteStyle, type='text/css')
99
link(rel="icon", type="image/png", href="favicon.png")
1010
link(rel='stylesheet', href!=fontAwesome)
11+
link(rel='stylesheet', href!=bootstrap)
12+
script(src!=jquery, type="text/javascript")
13+
script(src!=bootstrapJs, type="text/javascript")
1114
body#ext-provisu
1215
script(src!=sanitizeHtml, type="text/javascript")
1316
script(src!=lunette, type="text/javascript")
@@ -21,54 +24,25 @@ html
2124
ga('create', 'UA-17123283-1', 'auto');
2225
ga('send', 'pageview');
2326

27+
#ext-provisu-top.text-center
28+
h1= i18n.appName.message
29+
br
30+
small.text-muted= i18n.appDescription.message
31+
.btn-group(role='group', aria-label='...')
32+
a.btn.btn-default.tooltip-nm(href=external, data-toggle='tooltip', data-placement='bottom', title='Voir la page optimisée pour les personnes ayant des problèmes de vision - Style Noir sur Blanc')
33+
i.fa.fa-eye.fa-2x(aria-hidden='true')
34+
a.btn.btn-default.tooltip-nm(href='javascript: alter(document, {style: \'normal\'});', data-toggle='tooltip', data-placement='bottom', title='Voir la page optimisée pour les personnes ayant des problèmes de vision - Style Noir sur Blanc')
35+
i.fa.fa-low-vision.fa-2x(aria-hidden='true')
36+
a.btn.btn-default.tooltip-bk(href='javascript: alter(document, {style: \'black\'});', data-toggle='tooltip', data-placement='bottom', title='Voir la page optimisée pour les personnes ayant des problèmes de vision - Style Blanc sur Noir')
37+
i.fa.fa-low-vision.fa-2x(aria-hidden='true')
38+
a.btn.btn-default.tooltip-bl(href='javascript: alter(document, {style: \'blue\'});', data-toggle='tooltip', data-placement='bottom', title='Voir la page optimisée pour les personnes ayant des problèmes de vision - Style Jaune sur Bleu')
39+
i.fa.fa-low-vision.fa-2x(aria-hidden='true')
40+
a.btn.btn-default.tooltip-cy(href='javascript: alter(document, {style: \'cyan\'});', data-toggle='tooltip', data-placement='bottom', title='Voir la page optimisée pour les personnes ayant des problèmes de vision - Style Noir sur Bleu clair')
41+
i.fa.fa-low-vision.fa-2x(aria-hidden='true')
42+
a.btn.btn-default.tooltip-nm(href='javascript: alter(document, {font: \'smaller\'});', data-toggle='tooltip', data-placement='bottom', title='Diminuer la taille du texte')
43+
i.fa.fa-minus.fa-2x(aria-hidden='true')
44+
a.btn.btn-default.tooltip-nm(href='javascript: alter(document, {font: \'bigger\'});', data-toggle='tooltip', data-placement='bottom', title='Augmenter la taille du texte')
45+
i.fa.fa-plus.fa-2x(aria-hidden='true')
2446

25-
#hon-provisu-sidebox
26-
ul
27-
if external
28-
li
29-
a#default(href=external)
30-
.item.item-normal
31-
i.fa.fa-eye(aria-hidden="true")
32-
span.tooltip.tool-normal
33-
|#{i18n.infoDefault.message}
34-
li
35-
a#normal(href="javascript: alter(document, {style: 'normal'});")
36-
.item.item-normal
37-
i.fa.fa-low-vision(aria-hidden="true")
38-
span.tooltip.tool-normal
39-
|#{i18n.infoNormal.message}
40-
li
41-
a#black(href="javascript: alter(document, {style: 'black'});")
42-
.item.item-black
43-
i.fa.fa-low-vision(aria-hidden="true")
44-
span.tooltip.tool-black
45-
|#{i18n.infoBlack.message}
46-
li
47-
a#blue(href="javascript: alter(document, {style: 'blue'});")
48-
.item.item-blue
49-
i.fa.fa-low-vision(aria-hidden="true")
50-
span.tooltip.tool-blue
51-
|#{i18n.infoBlue.message}
52-
li
53-
a#cyan(href="javascript: alter(document, {style: 'cyan'});")
54-
.item.item-cyan
55-
i.fa.fa-low-vision(aria-hidden="true")
56-
span.tooltip.tool-cyan
57-
|#{i18n.infoCyan.message}
58-
li
59-
a#smaller(href="javascript: alter(document, {font: 'smaller'});")
60-
.item.item-normal
61-
|A-
62-
span.tooltip.tool-normal
63-
|#{i18n.infoSmaller.message}
64-
li
65-
a#bigger(href="javascript: alter(document, {font: 'bigger'});")
66-
.item.item-normal
67-
|A+
68-
span.tooltip.tool-normal
69-
|#{i18n.infoBigger.message}
70-
#ext-provisu-inner.ext-provisu-under
71-
div
72-
if i18n
73-
h1 #{i18n.appName.message}
74-
block content
47+
#ext-provisu-inner
48+
block content

0 commit comments

Comments
 (0)