From 7184cc287d55ac1f9b890dc95aec1a3cc7bfb965 Mon Sep 17 00:00:00 2001 From: Evarin Date: Fri, 23 Jun 2017 00:05:11 +0200 Subject: [PATCH] Ergonomie mobile ++ --- avisstage/sass/_recherche.scss | 21 ++++++++++++++++---- avisstage/static/css/screen.css | 34 ++++++++++++++++++++++---------- avisstage/static/js/recherche.js | 13 +++++++++--- 3 files changed, 51 insertions(+), 17 deletions(-) diff --git a/avisstage/sass/_recherche.scss b/avisstage/sass/_recherche.scss index 913ef48..beccdea 100644 --- a/avisstage/sass/_recherche.scss +++ b/avisstage/sass/_recherche.scss @@ -206,12 +206,11 @@ section.content.recherche { section.content.recherche { &.vue-hybride, &.vue-carte { height: calc(100vh - 60px); - position: absolute; - top: 60px; + margin-top: 60px; } .recherche-liste { - ul li.stage { + ul li.stage:not(.expanded) { ul.infos { max-height: 115px; overflow-y: hidden; @@ -231,6 +230,9 @@ section.content.recherche { } } + a.hoverlink { + display: none; + } } .dates .detail { display: none; @@ -241,9 +243,20 @@ section.content.recherche { @media screen and (max-width: 500px), screen and (max-width: 800px) and (orientation: portrait) { section.content.recherche { + form.recherche .generale span { + input { + font-size: 0.9em; + flex:1; + } + input[type=submit] { + white-space: normal; + } + } &.vue-hybride, &.vue-carte { .recherche-liste { - max-width: unset; + max-width: 100vw; + min-width: unset; + overflow: auto; } flex-direction: column } diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css index c2433ac..7d96459 100644 --- a/avisstage/static/css/screen.css +++ b/avisstage/static/css/screen.css @@ -1343,17 +1343,16 @@ section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-det /* line 207, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride, section.content.recherche.vue-carte { height: calc(100vh - 60px); - position: absolute; - top: 60px; + margin-top: 60px; } - /* line 215, ../../sass/_recherche.scss */ - section.content.recherche .recherche-liste ul li.stage ul.infos { + /* line 214, ../../sass/_recherche.scss */ + section.content.recherche .recherche-liste ul li.stage:not(.expanded) 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 { + /* line 219, ../../sass/_recherche.scss */ + section.content.recherche .recherche-liste ul li.stage:not(.expanded) ul.infos:after { position: absolute; content: "⋅⋅⋅"; font-size: 0.6em; @@ -1365,19 +1364,34 @@ section.content.recherche.vue-hybride.vue-details .recherche-liste.recherche-det text-align: center; border-top: 1px solid #ccc; } - /* line 235, ../../sass/_recherche.scss */ + /* line 233, ../../sass/_recherche.scss */ + section.content.recherche .recherche-liste ul li.stage:not(.expanded) a.hoverlink { + display: none; + } + /* line 237, ../../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 */ + /* line 247, ../../sass/_recherche.scss */ + section.content.recherche form.recherche .generale span input { + font-size: 0.9em; + flex: 1; + } + /* line 251, ../../sass/_recherche.scss */ + section.content.recherche form.recherche .generale span input[type=submit] { + white-space: normal; + } + /* line 255, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride, section.content.recherche.vue-carte { flex-direction: column; } - /* line 245, ../../sass/_recherche.scss */ + /* line 256, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride .recherche-liste, section.content.recherche.vue-carte .recherche-liste { - max-width: unset; + max-width: 100vw; + min-width: unset; + overflow: auto; } } @media screen and (max-width: 850px) { diff --git a/avisstage/static/js/recherche.js b/avisstage/static/js/recherche.js index 4957bbd..03735b5 100644 --- a/avisstage/static/js/recherche.js +++ b/avisstage/static/js/recherche.js @@ -7,6 +7,7 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) { var changevue; var details_lock = false; var map, lieux_survol; + var stage_focused; // Initialisation globale de l'interface et du switch liste / hybride / carte // TODO se souvenir des préférences d'affichage @@ -112,8 +113,10 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) { map.fitBounds(bds, {maxZoom: 11}); $("#liste-resultats .stage") - .on("mouseover", showLieuxFromStage) + .on("mouseover touchdown", showLieuxFromStage) .on("mouseout", hideLieuxSurvol); + $("#liste-resultats") + .on("touchdown", hideLieuxSurvol); } @@ -124,6 +127,7 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) { function showDetailLieu () { // Affichage du popup détaillé var data = this._lieu_data; + showDetailsListe(data); details_lock = data; var marqueur = marqueurs_db[data.id]; var html = $("
").html(marqueur._popup_header); @@ -142,7 +146,7 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) { marqueur.setPopupContent(html[0]); } - function showDetailsListeListener () { + function showDetailsListeListener (evt) { showDetailsListe(this._lieu_data); } @@ -173,8 +177,9 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) { // Survol dans la liste -> Affichage des lieux // - function showLieuxFromStage () { + function showLieuxFromStage (evt) { if (stages_map === undefined) return; + hideLieuxSurvol(); var stageid = this.id.split("-")[2]; var lieuxids = stages_map[stageid]; $.each(lieuxids, function(i, lieu_id) { @@ -182,10 +187,12 @@ function InterfaceRecherche(STATIC_ROOT, API_LIEU, lieux) { var marqueur = new L.marker(data.coord, {icon:blueIcon}); lieux_survol.addLayer(marqueur); }); + $(this).addClass("expanded"); } function hideLieuxSurvol () { lieux_survol.clearLayers(); + $("li.stage.expanded").removeClass("expanded"); } // __init__