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

Ergonomie mobile ++

Browse source
This commit is contained in:
Evarin 2017-06-23 00:05:11 +02:00
parent 1f4e80499d
commit 7184cc287d
3 changed files with 51 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
avisstage/sass/_recherche.scss
View file

@ -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
}

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

@ -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) {

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

@ -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 = $("<div>").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__