Fix responsive css

This commit is contained in:
Evarin 2018-12-27 17:39:52 +01:00
parent 85de4f0245
commit 754034cd57
5 changed files with 218 additions and 149 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -3,7 +3,7 @@
<p class="generale">
<span>
{{ form.generique }}
<input type="submit" action="submit" value="Chercher un stage"/>
<input type="submit" action="submit" value="Chercher" class="submitSearch" />
</span>
<a class="toggle_avancee" href="#" onclick="$('#recherche_avancee').toggleClass('expanded'); return false;">Recherche avancée</a>
</p>
@ -20,7 +20,7 @@
{% endif %}
{% endfor %}
<li class="btnsubmit">
<input type="submit" action="submit" value="Chercher un stage"/>
<input type="submit" action="submit" value="Chercher" class="submitSearch"/>
</li>
</ul>
</div>