DGNum/experiENS
6
0
Fork 0
Code Issues 11 Pull requests 1 Projects Releases Packages Wiki Activity Actions

Recherche (partiellement) responsive

Browse source
This commit is contained in:
Evarin 2017-06-20 22:23:22 +02:00
parent 3709eddeb6
commit 1f4e80499d
5 changed files with 147 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
avisstage/sass/_recherche.scss
View file

@ -159,10 +159,11 @@ section.content.recherche {
display: flex; display: flex;
.recherche-liste { .recherche-liste {
width: 40vw; width: 100%;
min-width: 500px; min-width: 400px;
max-width: 800px; max-width: 500px;
flex: 1;
.dates { .dates {
display:none; display:none;
} }
@ -175,7 +176,7 @@ section.content.recherche {
} }
} }
.recherche-carte { .recherche-carte {
flex-shrink: 1; flex: 1.5;
width: 100%; width: 100%;
.vue-options { .vue-options {
@ -200,3 +201,51 @@ section.content.recherche {
} }
} }
} }
@media screen and (max-width: 600px) {
section.content.recherche {
&.vue-hybride, &.vue-carte {
height: calc(100vh - 60px);
position: absolute;
top: 60px;
}
.recherche-liste {
ul li.stage {
ul.infos {
max-height: 115px;
overflow-y: hidden;
position: relative;
&:after {
position: absolute;
content: "⋅⋅⋅";
font-size: 0.6em;
height: 15px;
top: 100px;
background: #fff;
width: 100%;
left: 0;
text-align: center;
border-top: 1px solid #ccc;
}
}
}
.dates .detail {
display: none;
}
}
}
}
@media screen and (max-width: 500px), screen and (max-width: 800px) and (orientation: portrait) {
section.content.recherche {
&.vue-hybride, &.vue-carte {
.recherche-liste {
max-width: unset;
}
flex-direction: column
}
}
}

1
avisstage/sass/_responsive.scss
View file

@ -84,6 +84,7 @@
transform: unset; transform: unset;
top: 0px; top: 0px;
left: 165px; left: 165px;
right: unset;
padding: 15px 5px; padding: 15px 5px;
z-index: 41; z-index: 41;
background: rgba(#000, 0.5); background: rgba(#000, 0.5);

133
avisstage/static/css/screen.css
View file

@ -1294,50 +1294,92 @@ section.content.recherche.vue-hybride {
} }
/* line 161, ../../sass/_recherche.scss */ /* line 161, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride .recherche-liste { section.content.recherche.vue-hybride .recherche-liste {
width: 40vw; width: 100%;
min-width: 500px; min-width: 400px;
max-width: 800px; max-width: 500px;
flex: 1;
} }
/* line 166, ../../sass/_recherche.scss */ /* line 167, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride .recherche-liste .dates { section.content.recherche.vue-hybride .recherche-liste .dates {
display: none; display: none;
} }
/* line 169, ../../sass/_recherche.scss */ /* line 170, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride .recherche-liste ul.infos li { section.content.recherche.vue-hybride .recherche-liste ul.infos li {
font-size: 0.8em; font-size: 0.8em;
font-weight: normal; font-weight: normal;
} }
/* line 172, ../../sass/_recherche.scss */ /* line 173, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride .recherche-liste ul.infos li.year { section.content.recherche.vue-hybride .recherche-liste ul.infos li.year {
display: inline-block; display: inline-block;
} }
/* line 177, ../../sass/_recherche.scss */ /* line 178, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride .recherche-carte { section.content.recherche.vue-hybride .recherche-carte {
flex-shrink: 1; flex: 1.5;
width: 100%; width: 100%;
} }
/* line 181, ../../sass/_recherche.scss */ /* line 182, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride .recherche-carte .vue-options { section.content.recherche.vue-hybride .recherche-carte .vue-options {
display: none; display: none;
} }
/* line 187, ../../sass/_recherche.scss */ /* line 188, ../../sass/_recherche.scss */
section.content.recherche #carte { section.content.recherche #carte {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
/* line 192, ../../sass/_recherche.scss */ /* line 193, ../../sass/_recherche.scss */
section.content.recherche .recherche-liste.recherche-details { section.content.recherche .recherche-liste.recherche-details {
display: none !important; display: none !important;
} }
/* line 195, ../../sass/_recherche.scss */ /* line 196, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride.vue-details .recherche-liste { section.content.recherche.vue-hybride.vue-details .recherche-liste {
display: none; display: none;
} }
/* line 198, ../../sass/_recherche.scss */ /* line 199, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-details { section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-details {
display: block !important; display: block !important;
} }
@media screen and (max-width: 600px) {
/* line 207, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride, section.content.recherche.vue-carte {
height: calc(100vh - 60px);
position: absolute;
top: 60px;
}
/* line 215, ../../sass/_recherche.scss */
section.content.recherche .recherche-liste ul li.stage ul.infos {
max-height: 115px;
overflow-y: hidden;
position: relative;
}
/* line 220, ../../sass/_recherche.scss */
section.content.recherche .recherche-liste ul li.stage ul.infos:after {
position: absolute;
content: "⋅⋅⋅";
font-size: 0.6em;
height: 15px;
top: 100px;
background: #fff;
width: 100%;
left: 0;
text-align: center;
border-top: 1px solid #ccc;
}
/* line 235, ../../sass/_recherche.scss */
section.content.recherche .recherche-liste .dates .detail {
display: none;
}
}
@media screen and (max-width: 500px), screen and (max-width: 800px) and (orientation: portrait) {
/* line 244, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride, section.content.recherche.vue-carte {
flex-direction: column;
}
/* line 245, ../../sass/_recherche.scss */
section.content.recherche.vue-hybride .recherche-liste, section.content.recherche.vue-carte .recherche-liste {
max-width: unset;
}
}
@media screen and (max-width: 850px) { @media screen and (max-width: 850px) {
/* line 2, ../../sass/_responsive.scss */ /* line 2, ../../sass/_responsive.scss */
header { header {
@ -1433,84 +1475,85 @@ section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-det
transform: unset; transform: unset;
top: 0px; top: 0px;
left: 165px; left: 165px;
right: unset;
padding: 15px 5px; padding: 15px 5px;
z-index: 41; z-index: 41;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);
} }
/* line 91, ../../sass/_responsive.scss */ /* line 92, ../../sass/_responsive.scss */
.content { .content {
margin-top: 70px; margin-top: 70px;
padding: 15px 3vw; padding: 15px 3vw;
} }
/* line 96, ../../sass/_responsive.scss */ /* line 97, ../../sass/_responsive.scss */
article.stage h3 { article.stage h3 {
margin-top: 10px; margin-top: 10px;
} }
/* line 100, ../../sass/_responsive.scss */ /* line 101, ../../sass/_responsive.scss */
article.stage section .avis-texte, article.stage section .chapo { article.stage section .avis-texte, article.stage section .chapo {
padding: 3px 10px; padding: 3px 10px;
} }
/* line 106, ../../sass/_responsive.scss */ /* line 107, ../../sass/_responsive.scss */
article.stage section #stage-map { article.stage section #stage-map {
height: 200px; height: 200px;
width: 100%; width: 100%;
} }
/* line 112, ../../sass/_responsive.scss */ /* line 113, ../../sass/_responsive.scss */
article.stage section.misc .misc-content.withmap { article.stage section.misc .misc-content.withmap {
display: block; display: block;
} }
/* line 115, ../../sass/_responsive.scss */ /* line 116, ../../sass/_responsive.scss */
article.stage section.misc .misc-content.withmap > div { article.stage section.misc .misc-content.withmap > div {
display: block; display: block;
vertical-align: top; vertical-align: top;
} }
/* line 119, ../../sass/_responsive.scss */ /* line 120, ../../sass/_responsive.scss */
article.stage section.misc .misc-content.withmap .map { article.stage section.misc .misc-content.withmap .map {
width: 80%; width: 80%;
min-width: 250px; min-width: 250px;
min-height: 200px; min-height: 200px;
margin: 0 auto; margin: 0 auto;
} }
/* line 125, ../../sass/_responsive.scss */ /* line 126, ../../sass/_responsive.scss */
article.stage section.misc .misc-content.withmap .desc { article.stage section.misc .misc-content.withmap .desc {
padding: 5px; padding: 5px;
} }
/* line 133, ../../sass/_responsive.scss */ /* line 134, ../../sass/_responsive.scss */
article.stage section .plusmoins > div { article.stage section .plusmoins > div {
display: block; display: block;
} }
/* line 136, ../../sass/_responsive.scss */ /* line 137, ../../sass/_responsive.scss */
article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before { article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before {
display: block; display: block;
} }
/* line 140, ../../sass/_responsive.scss */ /* line 141, ../../sass/_responsive.scss */
article.stage section .plusmoins > div:before { article.stage section .plusmoins > div:before {
text-align: left; text-align: left;
width: 100%; width: 100%;
font-size: 1.5em; font-size: 1.5em;
} }
/* line 145, ../../sass/_responsive.scss */ /* line 146, ../../sass/_responsive.scss */
article.stage section .plusmoins > div.moins:before { article.stage section .plusmoins > div.moins:before {
text-align: right; text-align: right;
margin-top: 5px; margin-top: 5px;
} }
/* line 154, ../../sass/_responsive.scss */ /* line 155, ../../sass/_responsive.scss */
article.stage .section-wrapper { article.stage .section-wrapper {
display: block; display: block;
margin-left: 0; margin-left: 0;
} }
/* line 158, ../../sass/_responsive.scss */ /* line 159, ../../sass/_responsive.scss */
article.stage .section-wrapper .toc-wrapper, article.stage .section-wrapper > section { article.stage .section-wrapper .toc-wrapper, article.stage .section-wrapper > section {
display: block; display: block;
} }
/* line 161, ../../sass/_responsive.scss */ /* line 162, ../../sass/_responsive.scss */
article.stage .section-wrapper .toc-wrapper { article.stage .section-wrapper .toc-wrapper {
max-width: unset; max-width: unset;
width: unset; width: unset;
} }
/* line 165, ../../sass/_responsive.scss */ /* line 166, ../../sass/_responsive.scss */
article.stage .section-wrapper .toc { article.stage .section-wrapper .toc {
display: none; display: none;
position: relative; position: relative;
@ -1519,65 +1562,65 @@ section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-det
padding: 4px; padding: 4px;
} }
/* line 175, ../../sass/_responsive.scss */ /* line 176, ../../sass/_responsive.scss */
.homeh1 { .homeh1 {
display: block; display: block;
} }
/* line 177, ../../sass/_responsive.scss */ /* line 178, ../../sass/_responsive.scss */
.homeh1 > * { .homeh1 > * {
display: block; display: block;
} }
/* line 182, ../../sass/_responsive.scss */ /* line 183, ../../sass/_responsive.scss */
article.promo .explications { article.promo .explications {
display: block; display: block;
} }
/* line 184, ../../sass/_responsive.scss */ /* line 185, ../../sass/_responsive.scss */
article.promo .explications div { article.promo .explications div {
max-width: 100%; max-width: 100%;
display: block; display: block;
} }
/* line 191, ../../sass/_responsive.scss */ /* line 192, ../../sass/_responsive.scss */
.condensed-stages { .condensed-stages {
display: block; display: block;
} }
/* line 194, ../../sass/_responsive.scss */ /* line 195, ../../sass/_responsive.scss */
.condensed-stages li:before, .condensed-stages li, .condensed-stages a { .condensed-stages li:before, .condensed-stages li, .condensed-stages a {
display: block; display: block;
width: auto; width: auto;
max-width: auto; max-width: auto;
} }
/* line 200, ../../sass/_responsive.scss */ /* line 201, ../../sass/_responsive.scss */
.condensed-stages li:before { .condensed-stages li:before {
padding: 3px 15px; padding: 3px 15px;
} }
/* line 204, ../../sass/_responsive.scss */ /* line 205, ../../sass/_responsive.scss */
.condensed-stages li.stage-ajout:before { .condensed-stages li.stage-ajout:before {
display: none; display: none;
} }
/* line 209, ../../sass/_responsive.scss */ /* line 210, ../../sass/_responsive.scss */
ul.infos { ul.infos {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
} }
/* line 218, ../../sass/_responsive.scss */ /* line 219, ../../sass/_responsive.scss */
.stage-liste li .misc-hdr .dates .detail { .stage-liste li .misc-hdr .dates .detail {
display: inline; display: inline;
} }
/* line 221, ../../sass/_responsive.scss */ /* line 222, ../../sass/_responsive.scss */
.stage-liste li .misc-hdr .dates .year { .stage-liste li .misc-hdr .dates .year {
padding: 0; padding: 0;
} }
/* line 229, ../../sass/_responsive.scss */ /* line 230, ../../sass/_responsive.scss */
form .field { form .field {
display: block; display: block;
} }
/* line 232, ../../sass/_responsive.scss */ /* line 233, ../../sass/_responsive.scss */
form .field label, form .field .label { form .field label, form .field .label {
display: block; display: block;
text-align: left; text-align: left;
@ -1586,18 +1629,18 @@ section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-det
margin-top: 0; margin-top: 0;
width: auto; width: auto;
} }
/* line 241, ../../sass/_responsive.scss */ /* line 242, ../../sass/_responsive.scss */
form .field .help_text { form .field .help_text {
text-align: right; text-align: right;
color: #395214; color: #395214;
} }
/* line 246, ../../sass/_responsive.scss */ /* line 247, ../../sass/_responsive.scss */
form .field .input { form .field .input {
padding-left: 20px; padding-left: 20px;
display: block; display: block;
text-align: right; text-align: right;
} }
/* line 252, ../../sass/_responsive.scss */ /* line 253, ../../sass/_responsive.scss */
form .field input, form .field textarea, form .field div.tinymce, form .field select { form .field input, form .field textarea, form .field div.tinymce, form .field select {
background: #f4faeb; background: #f4faeb;
} }

3
avisstage/static/js/recherche.js
View file

@ -87,8 +87,10 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) {
function onLoadLieux(data){ function onLoadLieux(data){
console.log(data); console.log(data);
var lieux = data.objects; var lieux = data.objects;
var bds = [];
$.each(lieux, function(i, item) { $.each(lieux, function(i, item) {
var marqueur = L.marker(item.coord, {icon: greenIcon}); var marqueur = L.marker(item.coord, {icon: greenIcon});
bds.push(item.coord);
var txt = item.num_stages > 1 ? item.num_stages+" stages ici": "1 stage ici"; var txt = item.num_stages > 1 ? item.num_stages+" stages ici": "1 stage ici";
txt = "<h3>"+item.nom+"</h3>"+ txt = "<h3>"+item.nom+"</h3>"+
"<p>"+txt+"</p>"; "<p>"+txt+"</p>";
@ -108,6 +110,7 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) {
lieux_survol = new L.layerGroup(); lieux_survol = new L.layerGroup();
map.addLayer(lieux_survol); map.addLayer(lieux_survol);
map.fitBounds(bds, {maxZoom: 11});
$("#liste-resultats .stage") $("#liste-resultats .stage")
.on("mouseover", showLieuxFromStage) .on("mouseover", showLieuxFromStage)
.on("mouseout", hideLieuxSurvol); .on("mouseout", hideLieuxSurvol);

2
avisstage/static/js/select_lieu.js
View file

@ -58,7 +58,7 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) {
ui_el.append(map_el); ui_el.append(map_el);
// Affiche la carte // Affiche la carte
map = L.map(map_el[0]).setView([48.8422411,2.3430553], 13); map = L.map(map_el[0]).setView([48.8422411,2.3430553], 15);
var layer = new L.TileLayer("https://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}", {attribution: 'Map tiles by <a href="http://korona.geog.uni-heidelberg.de/">GIScience Heidelberg</a>'}); var layer = new L.TileLayer("https://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}", {attribution: 'Map tiles by <a href="http://korona.geog.uni-heidelberg.de/">GIScience Heidelberg</a>'});
map.addLayer(layer); map.addLayer(layer);
map.addLayer(marqueurs); map.addLayer(marqueurs);