From 1f4e80499d0d5c5b65590058e7f2e5fb2d61b2f3 Mon Sep 17 00:00:00 2001 From: Evarin Date: Tue, 20 Jun 2017 22:23:22 +0200 Subject: [PATCH] Recherche (partiellement) responsive --- avisstage/sass/_recherche.scss | 59 +++++++++++-- avisstage/sass/_responsive.scss | 1 + avisstage/static/css/screen.css | 133 +++++++++++++++++++---------- avisstage/static/js/recherche.js | 3 + avisstage/static/js/select_lieu.js | 2 +- 5 files changed, 147 insertions(+), 51 deletions(-) diff --git a/avisstage/sass/_recherche.scss b/avisstage/sass/_recherche.scss index c176c79..913ef48 100644 --- a/avisstage/sass/_recherche.scss +++ b/avisstage/sass/_recherche.scss @@ -159,10 +159,11 @@ section.content.recherche { display: flex; .recherche-liste { - width: 40vw; - min-width: 500px; - max-width: 800px; - + width: 100%; + min-width: 400px; + max-width: 500px; + flex: 1; + .dates { display:none; } @@ -175,7 +176,7 @@ section.content.recherche { } } .recherche-carte { - flex-shrink: 1; + flex: 1.5; width: 100%; .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 + } + } +} diff --git a/avisstage/sass/_responsive.scss b/avisstage/sass/_responsive.scss index e41a54f..5ab865d 100644 --- a/avisstage/sass/_responsive.scss +++ b/avisstage/sass/_responsive.scss @@ -84,6 +84,7 @@ transform: unset; top: 0px; left: 165px; + right: unset; padding: 15px 5px; z-index: 41; background: rgba(#000, 0.5); diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css index 3c6844a..c2433ac 100644 --- a/avisstage/static/css/screen.css +++ b/avisstage/static/css/screen.css @@ -1294,50 +1294,92 @@ section.content.recherche.vue-hybride { } /* line 161, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride .recherche-liste { - width: 40vw; - min-width: 500px; - max-width: 800px; + width: 100%; + min-width: 400px; + max-width: 500px; + flex: 1; } -/* line 166, ../../sass/_recherche.scss */ +/* line 167, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride .recherche-liste .dates { display: none; } -/* line 169, ../../sass/_recherche.scss */ +/* line 170, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride .recherche-liste ul.infos li { font-size: 0.8em; font-weight: normal; } -/* line 172, ../../sass/_recherche.scss */ +/* line 173, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride .recherche-liste ul.infos li.year { display: inline-block; } -/* line 177, ../../sass/_recherche.scss */ +/* line 178, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride .recherche-carte { - flex-shrink: 1; + flex: 1.5; width: 100%; } -/* line 181, ../../sass/_recherche.scss */ +/* line 182, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride .recherche-carte .vue-options { display: none; } -/* line 187, ../../sass/_recherche.scss */ +/* line 188, ../../sass/_recherche.scss */ section.content.recherche #carte { width: 100%; height: 100%; } -/* line 192, ../../sass/_recherche.scss */ +/* line 193, ../../sass/_recherche.scss */ section.content.recherche .recherche-liste.recherche-details { display: none !important; } -/* line 195, ../../sass/_recherche.scss */ +/* line 196, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride.vue-details .recherche-liste { display: none; } -/* line 198, ../../sass/_recherche.scss */ +/* line 199, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-details { 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) { /* line 2, ../../sass/_responsive.scss */ header { @@ -1433,84 +1475,85 @@ section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-det transform: unset; top: 0px; left: 165px; + right: unset; padding: 15px 5px; z-index: 41; background: rgba(0, 0, 0, 0.5); } - /* line 91, ../../sass/_responsive.scss */ + /* line 92, ../../sass/_responsive.scss */ .content { margin-top: 70px; padding: 15px 3vw; } - /* line 96, ../../sass/_responsive.scss */ + /* line 97, ../../sass/_responsive.scss */ article.stage h3 { margin-top: 10px; } - /* line 100, ../../sass/_responsive.scss */ + /* line 101, ../../sass/_responsive.scss */ article.stage section .avis-texte, article.stage section .chapo { padding: 3px 10px; } - /* line 106, ../../sass/_responsive.scss */ + /* line 107, ../../sass/_responsive.scss */ article.stage section #stage-map { height: 200px; width: 100%; } - /* line 112, ../../sass/_responsive.scss */ + /* line 113, ../../sass/_responsive.scss */ article.stage section.misc .misc-content.withmap { display: block; } - /* line 115, ../../sass/_responsive.scss */ + /* line 116, ../../sass/_responsive.scss */ article.stage section.misc .misc-content.withmap > div { display: block; vertical-align: top; } - /* line 119, ../../sass/_responsive.scss */ + /* line 120, ../../sass/_responsive.scss */ article.stage section.misc .misc-content.withmap .map { width: 80%; min-width: 250px; min-height: 200px; margin: 0 auto; } - /* line 125, ../../sass/_responsive.scss */ + /* line 126, ../../sass/_responsive.scss */ article.stage section.misc .misc-content.withmap .desc { padding: 5px; } - /* line 133, ../../sass/_responsive.scss */ + /* line 134, ../../sass/_responsive.scss */ article.stage section .plusmoins > div { display: block; } - /* line 136, ../../sass/_responsive.scss */ + /* line 137, ../../sass/_responsive.scss */ article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before { display: block; } - /* line 140, ../../sass/_responsive.scss */ + /* line 141, ../../sass/_responsive.scss */ article.stage section .plusmoins > div:before { text-align: left; width: 100%; font-size: 1.5em; } - /* line 145, ../../sass/_responsive.scss */ + /* line 146, ../../sass/_responsive.scss */ article.stage section .plusmoins > div.moins:before { text-align: right; margin-top: 5px; } - /* line 154, ../../sass/_responsive.scss */ + /* line 155, ../../sass/_responsive.scss */ article.stage .section-wrapper { display: block; margin-left: 0; } - /* line 158, ../../sass/_responsive.scss */ + /* line 159, ../../sass/_responsive.scss */ article.stage .section-wrapper .toc-wrapper, article.stage .section-wrapper > section { display: block; } - /* line 161, ../../sass/_responsive.scss */ + /* line 162, ../../sass/_responsive.scss */ article.stage .section-wrapper .toc-wrapper { max-width: unset; width: unset; } - /* line 165, ../../sass/_responsive.scss */ + /* line 166, ../../sass/_responsive.scss */ article.stage .section-wrapper .toc { display: none; position: relative; @@ -1519,65 +1562,65 @@ section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-det padding: 4px; } - /* line 175, ../../sass/_responsive.scss */ + /* line 176, ../../sass/_responsive.scss */ .homeh1 { display: block; } - /* line 177, ../../sass/_responsive.scss */ + /* line 178, ../../sass/_responsive.scss */ .homeh1 > * { display: block; } - /* line 182, ../../sass/_responsive.scss */ + /* line 183, ../../sass/_responsive.scss */ article.promo .explications { display: block; } - /* line 184, ../../sass/_responsive.scss */ + /* line 185, ../../sass/_responsive.scss */ article.promo .explications div { max-width: 100%; display: block; } - /* line 191, ../../sass/_responsive.scss */ + /* line 192, ../../sass/_responsive.scss */ .condensed-stages { display: block; } - /* line 194, ../../sass/_responsive.scss */ + /* line 195, ../../sass/_responsive.scss */ .condensed-stages li:before, .condensed-stages li, .condensed-stages a { display: block; width: auto; max-width: auto; } - /* line 200, ../../sass/_responsive.scss */ + /* line 201, ../../sass/_responsive.scss */ .condensed-stages li:before { padding: 3px 15px; } - /* line 204, ../../sass/_responsive.scss */ + /* line 205, ../../sass/_responsive.scss */ .condensed-stages li.stage-ajout:before { display: none; } - /* line 209, ../../sass/_responsive.scss */ + /* line 210, ../../sass/_responsive.scss */ ul.infos { display: flex; flex-wrap: wrap; justify-content: space-between; } - /* line 218, ../../sass/_responsive.scss */ + /* line 219, ../../sass/_responsive.scss */ .stage-liste li .misc-hdr .dates .detail { display: inline; } - /* line 221, ../../sass/_responsive.scss */ + /* line 222, ../../sass/_responsive.scss */ .stage-liste li .misc-hdr .dates .year { padding: 0; } - /* line 229, ../../sass/_responsive.scss */ + /* line 230, ../../sass/_responsive.scss */ form .field { display: block; } - /* line 232, ../../sass/_responsive.scss */ + /* line 233, ../../sass/_responsive.scss */ form .field label, form .field .label { display: block; text-align: left; @@ -1586,18 +1629,18 @@ section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-det margin-top: 0; width: auto; } - /* line 241, ../../sass/_responsive.scss */ + /* line 242, ../../sass/_responsive.scss */ form .field .help_text { text-align: right; color: #395214; } - /* line 246, ../../sass/_responsive.scss */ + /* line 247, ../../sass/_responsive.scss */ form .field .input { padding-left: 20px; display: block; 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 { background: #f4faeb; } diff --git a/avisstage/static/js/recherche.js b/avisstage/static/js/recherche.js index 90c3b09..4957bbd 100644 --- a/avisstage/static/js/recherche.js +++ b/avisstage/static/js/recherche.js @@ -87,8 +87,10 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) { function onLoadLieux(data){ console.log(data); var lieux = data.objects; + var bds = []; $.each(lieux, function(i, item) { 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"; txt = "

"+item.nom+"

"+ "

"+txt+"

"; @@ -108,6 +110,7 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) { lieux_survol = new L.layerGroup(); map.addLayer(lieux_survol); + map.fitBounds(bds, {maxZoom: 11}); $("#liste-resultats .stage") .on("mouseover", showLieuxFromStage) .on("mouseout", hideLieuxSurvol); diff --git a/avisstage/static/js/select_lieu.js b/avisstage/static/js/select_lieu.js index 1f7d545..8fcba29 100644 --- a/avisstage/static/js/select_lieu.js +++ b/avisstage/static/js/select_lieu.js @@ -58,7 +58,7 @@ function SelectLieuWidget(STATIC_ROOT, API_LIEU, target, callback) { ui_el.append(map_el); // 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 GIScience Heidelberg'}); map.addLayer(layer); map.addLayer(marqueurs);