diff --git a/avisstage/sass/_miniheader.scss b/avisstage/sass/_miniheader.scss index 20ed42e..1af55a3 100644 --- a/avisstage/sass/_miniheader.scss +++ b/avisstage/sass/_miniheader.scss @@ -1,62 +1,55 @@ - -header { - z-index: 40; - position: fixed; - top: 0px; - left: 0px; - width: 100%; - display: block; - max-height:100vh; - overflow-y: auto; - - h1 { - padding: 10px; - } - #showmenu { +@mixin miniHeader() { + header { + z-index: 40; + position: fixed; + top: 0px; + left: 0px; + width: 100%; display: block; - float: right; - padding: 10px; + max-height:100vh; + overflow-y: auto; - img { - width: 35px; + h1 { + padding: 10px; } - } - nav { - clear: both; - text-align: right; - - ul { - display: none; + #showmenu { + display: block; + float: right; + padding: 10px; - li { - display: block; - a { + img { + width: 35px; + } + } + nav { + clear: both; + text-align: right; + + ul { + display: none; + + li { display: block; - padding: 10px 20px; - height: auto; - text-align:right; - - br { - display: none; - } - .username:after { - content: " | "; + a { + display: block; + padding: 10px 20px; + height: auto; + text-align:right; + + br { + display: none; + } + .username:after { + content: " | "; + } } } } } } -} -header.expanded { - nav ul { - display:block; + header.expanded { + nav ul { + display:block; + } } } - -h1 { - font-size: 2em; -} - -h2 { - font-size: 1.6em; -} diff --git a/avisstage/sass/_recherche.scss b/avisstage/sass/_recherche.scss index 23d842b..1c54a29 100644 --- a/avisstage/sass/_recherche.scss +++ b/avisstage/sass/_recherche.scss @@ -1,3 +1,5 @@ +@import "_miniheader.scss"; + body.recherche { section.content { @@ -161,13 +163,14 @@ body.recherche { &.vue-hybride { - @import "_miniheader.scss"; + @include miniHeader; header { position: fixed; top: 0; left: 0; - width: 500px; + width: 100%; + max-width: 500px; z-index: 15; } section.content { diff --git a/avisstage/sass/_responsive.scss b/avisstage/sass/_responsive.scss index 408579f..cfe73bd 100644 --- a/avisstage/sass/_responsive.scss +++ b/avisstage/sass/_responsive.scss @@ -1,3 +1,5 @@ +@import "_miniheader.scss"; + @media screen and (max-width: 850px) { header { font-size: 0.9em; @@ -18,8 +20,17 @@ } @media screen and (max-width: 600px) { - @import "_miniheader.scss"; + @include miniHeader; + + h1 { + font-size: 2em; + } + + h2 { + font-size: 1.6em; + } + #feedback-button { transform: unset; top: 0px; diff --git a/avisstage/static/css/screen.css b/avisstage/static/css/screen.css index 480b638..152af32 100644 --- a/avisstage/static/css/screen.css +++ b/avisstage/static/css/screen.css @@ -1226,7 +1226,7 @@ table.stats td, table.stats th { text-align: center; } -/* line 5, ../../sass/_recherche.scss */ +/* line 7, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .generale { display: inline-block; text-align: right; @@ -1237,38 +1237,38 @@ body.recherche section.content form.recherche .generale { max-width: 100%; white-space: nowrap; } -/* line 15, ../../sass/_recherche.scss */ +/* line 17, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .generale span { display: flex; } -/* line 19, ../../sass/_recherche.scss */ +/* line 21, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .generale input[type="text"] { max-width: 500px; padding: 10px; border: 1px solid #8fcc33; margin: 0 5px; } -/* line 25, ../../sass/_recherche.scss */ +/* line 27, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .generale input { display: inline; } -/* line 30, ../../sass/_recherche.scss */ +/* line 32, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .avancee { background: #fff; display: none; padding: 15px; margin-bottom: 15px; } -/* line 36, ../../sass/_recherche.scss */ +/* line 38, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .avancee.expanded { display: block; } -/* line 40, ../../sass/_recherche.scss */ +/* line 42, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .avancee .help_text { font-style: italic; font-size: 0.9em; } -/* line 45, ../../sass/_recherche.scss */ +/* line 47, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .avancee ul { margin: 0 -5px; display: flexbox; @@ -1277,7 +1277,7 @@ body.recherche section.content form.recherche .avancee ul { justify-content: space-between; width: 100%; } -/* line 53, ../../sass/_recherche.scss */ +/* line 55, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .avancee ul li { flex-grow: 1; width: 22%; @@ -1285,12 +1285,12 @@ body.recherche section.content form.recherche .avancee ul li { margin: 5px 0; padding: 0 10px; } -/* line 60, ../../sass/_recherche.scss */ +/* line 62, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .avancee ul li label { font-weight: bold; font-size: 0.9em; } -/* line 65, ../../sass/_recherche.scss */ +/* line 67, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .avancee ul li input[type="text"], body.recherche section.content form.recherche .avancee ul li input[type='number'], body.recherche section.content form.recherche .avancee ul li select { display: block; min-width: 150px; @@ -1299,59 +1299,59 @@ body.recherche section.content form.recherche .avancee ul li input[type="text"], font-size: 0.9em; background-color: #f8f8f8; } -/* line 73, ../../sass/_recherche.scss */ +/* line 75, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .avancee ul li.btnsubmit { text-align: right; } -/* line 76, ../../sass/_recherche.scss */ +/* line 78, ../../sass/_recherche.scss */ body.recherche section.content form.recherche .avancee ul li.field__sujet, body.recherche section.content form.recherche .avancee ul li.field__contexte { width: 45%; min-width: 300px; } -/* line 86, ../../sass/_recherche.scss */ +/* line 88, ../../sass/_recherche.scss */ body.recherche section.content .recherche-carte, body.recherche section.content .recherche-liste { position: relative; } -/* line 90, ../../sass/_recherche.scss */ +/* line 92, ../../sass/_recherche.scss */ body.recherche section.content .numresults { font-size: 0.9em; font-weight: bold; } -/* line 96, ../../sass/_recherche.scss */ +/* line 98, ../../sass/_recherche.scss */ body.recherche.vue-hybride #voir_hybride, body.recherche.vue-carte #voir_carte, body.recherche.vue-liste #voir_liste { background: #d2ebad; color: #000; } -/* line 103, ../../sass/_recherche.scss */ +/* line 105, ../../sass/_recherche.scss */ body.recherche .vue-options { text-align: center; } -/* line 105, ../../sass/_recherche.scss */ +/* line 107, ../../sass/_recherche.scss */ body.recherche .vue-options ul { display: inline-block; border-radius: 5px; overflow: hidden; } -/* line 110, ../../sass/_recherche.scss */ +/* line 112, ../../sass/_recherche.scss */ body.recherche .vue-options ul li { display: inline-block; background: #fff; padding: 10px; } -/* line 114, ../../sass/_recherche.scss */ +/* line 116, ../../sass/_recherche.scss */ body.recherche .vue-options ul li a { display: block; padding: 10px; margin: -10px; } -/* line 123, ../../sass/_recherche.scss */ +/* line 125, ../../sass/_recherche.scss */ body.recherche .recherche-carte .vue-options { position: absolute; z-index: 3; top: 15px; left: 60px; } -/* line 130, ../../sass/_recherche.scss */ +/* line 132, ../../sass/_recherche.scss */ body.recherche.vue-hybride section.content, body.recherche.vue-carte section.content { width: 100%; min-width: unset; @@ -1362,20 +1362,20 @@ body.recherche.vue-hybride section.content, body.recherche.vue-carte section.con padding: 0; margin: 0; } -/* line 141, ../../sass/_recherche.scss */ +/* line 143, ../../sass/_recherche.scss */ body.recherche.vue-hybride section.content .recherche-carte, body.recherche.vue-hybride section.content .recherche-liste, body.recherche.vue-carte section.content .recherche-carte, body.recherche.vue-carte section.content .recherche-liste { height: 100%; } -/* line 144, ../../sass/_recherche.scss */ +/* line 146, ../../sass/_recherche.scss */ body.recherche.vue-hybride section.content .recherche-liste, body.recherche.vue-carte section.content .recherche-liste { overflow-y: auto; padding: 15px; } -/* line 150, ../../sass/_recherche.scss */ +/* line 152, ../../sass/_recherche.scss */ body.recherche.vue-liste .recherche-carte, body.recherche.vue-carte .recherche-liste, body.recherche.vue-carte header { display: none; } -/* line 156, ../../sass/_recherche.scss */ +/* line 158, ../../sass/_recherche.scss */ body.recherche.vue-carte .recherche-carte, body.recherche.vue-liste .recherche-liste { display: block; width: 100%; @@ -1437,84 +1437,77 @@ body.recherche.vue-hybride header nav ul li a .username:after { body.recherche.vue-hybride header.expanded nav ul { display: block; } -/* line 56, ../../sass/_miniheader.scss */ -body.recherche.vue-hybride h1 { - font-size: 2em; -} -/* line 60, ../../sass/_miniheader.scss */ -body.recherche.vue-hybride h2 { - font-size: 1.6em; -} -/* line 166, ../../sass/_recherche.scss */ +/* line 168, ../../sass/_recherche.scss */ body.recherche.vue-hybride header { position: fixed; top: 0; left: 0; - width: 500px; + width: 100%; + max-width: 500px; z-index: 15; } -/* line 173, ../../sass/_recherche.scss */ +/* line 176, ../../sass/_recherche.scss */ body.recherche.vue-hybride section.content { display: flex; } -/* line 176, ../../sass/_recherche.scss */ +/* line 179, ../../sass/_recherche.scss */ body.recherche.vue-hybride section.content .recherche-liste { padding-top: 60px; width: 500px; } -/* line 180, ../../sass/_recherche.scss */ +/* line 183, ../../sass/_recherche.scss */ body.recherche.vue-hybride section.content .recherche-liste .dates { display: none; } -/* line 183, ../../sass/_recherche.scss */ +/* line 186, ../../sass/_recherche.scss */ body.recherche.vue-hybride section.content .recherche-liste ul.infos li { font-size: 0.8em; font-weight: normal; } -/* line 186, ../../sass/_recherche.scss */ +/* line 189, ../../sass/_recherche.scss */ body.recherche.vue-hybride section.content .recherche-liste ul.infos li.year { display: inline-block; } -/* line 191, ../../sass/_recherche.scss */ +/* line 194, ../../sass/_recherche.scss */ body.recherche.vue-hybride section.content .recherche-carte { flex: 1.5; width: 100%; } -/* line 195, ../../sass/_recherche.scss */ +/* line 198, ../../sass/_recherche.scss */ body.recherche.vue-hybride section.content .recherche-carte .vue-options { display: none; } -/* line 202, ../../sass/_recherche.scss */ +/* line 205, ../../sass/_recherche.scss */ body.recherche #carte { width: 100%; height: 100%; } -/* line 207, ../../sass/_recherche.scss */ +/* line 210, ../../sass/_recherche.scss */ body.recherche .recherche-liste.recherche-details { display: none !important; } -/* line 210, ../../sass/_recherche.scss */ +/* line 213, ../../sass/_recherche.scss */ body.recherche.vue-hybride.vue-details .recherche-liste { display: none; } -/* line 213, ../../sass/_recherche.scss */ +/* line 216, ../../sass/_recherche.scss */ body.recherche.vue-hybride.vue-details .recherche-liste.recherche-details { display: block !important; } @media screen and (max-width: 600px) { - /* line 221, ../../sass/_recherche.scss */ + /* line 224, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride, section.content.recherche.vue-carte { height: calc(100vh - 60px); margin-top: 60px; } - /* line 228, ../../sass/_recherche.scss */ + /* line 231, ../../sass/_recherche.scss */ section.content.recherche .recherche-liste ul li.stage:not(.expanded) ul.infos { max-height: 115px; overflow-y: hidden; position: relative; } - /* line 233, ../../sass/_recherche.scss */ + /* line 236, ../../sass/_recherche.scss */ section.content.recherche .recherche-liste ul li.stage:not(.expanded) ul.infos:after { position: absolute; content: "⋅⋅⋅"; @@ -1527,35 +1520,35 @@ body.recherche.vue-hybride.vue-details .recherche-liste.recherche-details { text-align: center; border-top: 1px solid #ccc; } - /* line 247, ../../sass/_recherche.scss */ + /* line 250, ../../sass/_recherche.scss */ section.content.recherche .recherche-liste ul li.stage:not(.expanded) a.hoverlink { display: none; } - /* line 251, ../../sass/_recherche.scss */ + /* line 254, ../../sass/_recherche.scss */ section.content.recherche .recherche-liste .dates .detail { display: none; } - /* line 257, ../../sass/_recherche.scss */ + /* line 260, ../../sass/_recherche.scss */ ul.messages { display: none; } } @media screen and (max-width: 500px), screen and (max-width: 800px) and (orientation: portrait) { - /* line 265, ../../sass/_recherche.scss */ + /* line 268, ../../sass/_recherche.scss */ section.content.recherche form.recherche .generale span input { font-size: 0.9em; flex: 1; } - /* line 269, ../../sass/_recherche.scss */ + /* line 272, ../../sass/_recherche.scss */ section.content.recherche form.recherche .generale span input[type=submit] { white-space: normal; } - /* line 273, ../../sass/_recherche.scss */ + /* line 276, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride, section.content.recherche.vue-carte { flex-direction: column; } - /* line 274, ../../sass/_recherche.scss */ + /* line 277, ../../sass/_recherche.scss */ section.content.recherche.vue-hybride .recherche-liste, section.content.recherche.vue-carte .recherche-liste { max-width: 100vw; min-width: unset; @@ -1563,27 +1556,96 @@ body.recherche.vue-hybride.vue-details .recherche-liste.recherche-details { } } @media screen and (max-width: 850px) { - /* line 2, ../../sass/_responsive.scss */ + /* line 4, ../../sass/_responsive.scss */ header { font-size: 0.9em; } - /* line 5, ../../sass/_responsive.scss */ + /* line 7, ../../sass/_responsive.scss */ header h1 { font-size: 1.5em; } - /* line 9, ../../sass/_responsive.scss */ + /* line 11, ../../sass/_responsive.scss */ header nav ul li a { height: 60px; } - /* line 14, ../../sass/_responsive.scss */ + /* line 16, ../../sass/_responsive.scss */ .explications div { max-width: 50vw; overflow: hidden; } } @media screen and (max-width: 600px) { - /* line 23, ../../sass/_responsive.scss */ + /* line 2, ../../sass/_miniheader.scss */ + header { + z-index: 40; + position: fixed; + top: 0px; + left: 0px; + width: 100%; + display: block; + max-height: 100vh; + overflow-y: auto; + } + /* line 12, ../../sass/_miniheader.scss */ + header h1 { + padding: 10px; + } + /* line 15, ../../sass/_miniheader.scss */ + header #showmenu { + display: block; + float: right; + padding: 10px; + } + /* line 20, ../../sass/_miniheader.scss */ + header #showmenu img { + width: 35px; + } + /* line 24, ../../sass/_miniheader.scss */ + header nav { + clear: both; + text-align: right; + } + /* line 28, ../../sass/_miniheader.scss */ + header nav ul { + display: none; + } + /* line 31, ../../sass/_miniheader.scss */ + header nav ul li { + display: block; + } + /* line 33, ../../sass/_miniheader.scss */ + header nav ul li a { + display: block; + padding: 10px 20px; + height: auto; + text-align: right; + } + /* line 39, ../../sass/_miniheader.scss */ + header nav ul li a br { + display: none; + } + /* line 42, ../../sass/_miniheader.scss */ + header nav ul li a .username:after { + content: " | "; + } + + /* line 51, ../../sass/_miniheader.scss */ + header.expanded nav ul { + display: block; + } + + /* line 26, ../../sass/_responsive.scss */ + h1 { + font-size: 2em; + } + + /* line 30, ../../sass/_responsive.scss */ + h2 { + font-size: 1.6em; + } + + /* line 34, ../../sass/_responsive.scss */ #feedback-button { transform: unset; top: 0px; @@ -1594,79 +1656,79 @@ body.recherche.vue-hybride.vue-details .recherche-liste.recherche-details { background: rgba(0, 0, 0, 0.5); } - /* line 32, ../../sass/_responsive.scss */ + /* line 43, ../../sass/_responsive.scss */ .content { margin-top: 70px; padding: 15px 3vw; } - /* line 37, ../../sass/_responsive.scss */ + /* line 48, ../../sass/_responsive.scss */ article.stage h3 { margin-top: 10px; } - /* line 41, ../../sass/_responsive.scss */ + /* line 52, ../../sass/_responsive.scss */ article.stage section .avis-texte, article.stage section .chapo { padding: 3px 10px; } - /* line 47, ../../sass/_responsive.scss */ + /* line 58, ../../sass/_responsive.scss */ article.stage section #stage-map { height: 200px; width: 100%; } - /* line 53, ../../sass/_responsive.scss */ + /* line 64, ../../sass/_responsive.scss */ article.stage section.misc .misc-content.withmap { display: block; } - /* line 56, ../../sass/_responsive.scss */ + /* line 67, ../../sass/_responsive.scss */ article.stage section.misc .misc-content.withmap > div { display: block; vertical-align: top; } - /* line 60, ../../sass/_responsive.scss */ + /* line 71, ../../sass/_responsive.scss */ article.stage section.misc .misc-content.withmap .map { width: 80%; min-width: 250px; min-height: 200px; margin: 0 auto; } - /* line 66, ../../sass/_responsive.scss */ + /* line 77, ../../sass/_responsive.scss */ article.stage section.misc .misc-content.withmap .desc { padding: 5px; } - /* line 74, ../../sass/_responsive.scss */ + /* line 85, ../../sass/_responsive.scss */ article.stage section .plusmoins > div { display: block; } - /* line 77, ../../sass/_responsive.scss */ + /* line 88, ../../sass/_responsive.scss */ article.stage section .plusmoins > div > *, article.stage section .plusmoins > div:before { display: block; } - /* line 81, ../../sass/_responsive.scss */ + /* line 92, ../../sass/_responsive.scss */ article.stage section .plusmoins > div:before { text-align: left; width: 100%; font-size: 1.5em; } - /* line 86, ../../sass/_responsive.scss */ + /* line 97, ../../sass/_responsive.scss */ article.stage section .plusmoins > div.moins:before { text-align: right; margin-top: 5px; } - /* line 95, ../../sass/_responsive.scss */ + /* line 106, ../../sass/_responsive.scss */ article.stage .section-wrapper { display: block; margin-left: 0; } - /* line 99, ../../sass/_responsive.scss */ + /* line 110, ../../sass/_responsive.scss */ article.stage .section-wrapper .toc-wrapper, article.stage .section-wrapper > section { display: block; } - /* line 102, ../../sass/_responsive.scss */ + /* line 113, ../../sass/_responsive.scss */ article.stage .section-wrapper .toc-wrapper { max-width: unset; width: unset; } - /* line 106, ../../sass/_responsive.scss */ + /* line 117, ../../sass/_responsive.scss */ article.stage .section-wrapper .toc { display: none; position: relative; @@ -1675,65 +1737,65 @@ body.recherche.vue-hybride.vue-details .recherche-liste.recherche-details { padding: 4px; } - /* line 116, ../../sass/_responsive.scss */ + /* line 127, ../../sass/_responsive.scss */ .homeh1 { display: block; } - /* line 118, ../../sass/_responsive.scss */ + /* line 129, ../../sass/_responsive.scss */ .homeh1 > * { display: block; } - /* line 123, ../../sass/_responsive.scss */ + /* line 134, ../../sass/_responsive.scss */ article.promo .explications { display: block; } - /* line 125, ../../sass/_responsive.scss */ + /* line 136, ../../sass/_responsive.scss */ article.promo .explications div { max-width: 100%; display: block; } - /* line 132, ../../sass/_responsive.scss */ + /* line 143, ../../sass/_responsive.scss */ .condensed-stages { display: block; } - /* line 135, ../../sass/_responsive.scss */ + /* line 146, ../../sass/_responsive.scss */ .condensed-stages li:before, .condensed-stages li, .condensed-stages a { display: block; width: auto; max-width: auto; } - /* line 141, ../../sass/_responsive.scss */ + /* line 152, ../../sass/_responsive.scss */ .condensed-stages li:before { padding: 3px 15px; } - /* line 145, ../../sass/_responsive.scss */ + /* line 156, ../../sass/_responsive.scss */ .condensed-stages li.stage-ajout:before { display: none; } - /* line 150, ../../sass/_responsive.scss */ + /* line 161, ../../sass/_responsive.scss */ ul.infos { display: flex; flex-wrap: wrap; justify-content: space-between; } - /* line 159, ../../sass/_responsive.scss */ + /* line 170, ../../sass/_responsive.scss */ .stage-liste li .misc-hdr .dates .detail { display: inline; } - /* line 162, ../../sass/_responsive.scss */ + /* line 173, ../../sass/_responsive.scss */ .stage-liste li .misc-hdr .dates .year { padding: 0; } - /* line 170, ../../sass/_responsive.scss */ + /* line 181, ../../sass/_responsive.scss */ form .field { display: block; } - /* line 173, ../../sass/_responsive.scss */ + /* line 184, ../../sass/_responsive.scss */ form .field label, form .field .label { display: block; text-align: left; @@ -1742,18 +1804,18 @@ body.recherche.vue-hybride.vue-details .recherche-liste.recherche-details { margin-top: 0; width: auto; } - /* line 182, ../../sass/_responsive.scss */ + /* line 193, ../../sass/_responsive.scss */ form .field .help_text { text-align: right; color: #395214; } - /* line 187, ../../sass/_responsive.scss */ + /* line 198, ../../sass/_responsive.scss */ form .field .input { padding-left: 20px; display: block; text-align: right; } - /* line 193, ../../sass/_responsive.scss */ + /* line 204, ../../sass/_responsive.scss */ form .field input, form .field textarea, form .field div.tinymce, form .field select { background: #f4faeb; } diff --git a/avisstage/templates/avisstage/recherche/formulaire.html b/avisstage/templates/avisstage/recherche/formulaire.html index 72533ff..8e36410 100644 --- a/avisstage/templates/avisstage/recherche/formulaire.html +++ b/avisstage/templates/avisstage/recherche/formulaire.html @@ -3,7 +3,7 @@
{{ form.generique }} - + Recherche avancée
@@ -20,7 +20,7 @@ {% endif %} {% endfor %}