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;
.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
}
}
}

1
avisstage/sass/_responsive.scss
View file

@ -84,6 +84,7 @@
transform: unset;
top: 0px;
left: 165px;
right: unset;
padding: 15px 5px;
z-index: 41;
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 */
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;
}

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

@ -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 = "<h3>"+item.nom+"</h3>"+
"<p>"+txt+"</p>";
@ -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);

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);
// 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>'});
map.addLayer(layer);
map.addLayer(marqueurs);