Adaptation aux petits écrans

This commit is contained in:
Vincent Calame 2023-07-20 12:28:40 +02:00 committed by root
parent 8d30afaf19
commit 8debdd2696
2 changed files with 73 additions and 7 deletions

View File

@ -45,7 +45,7 @@ Structure du client
<div data-scrutari-area="input" class="lav-input-Area">
<span class="lav-input-Block">
<i class="fas fa-search"></i>
<input type="search" class="lav-input-Field" size="40" name="q" value="" placeholder="Chercher un sujet, un-e intervenant-e…">
<input type="search" class="lav-input-Field" size="30" name="q" value="" placeholder="Chercher un sujet, un-e intervenant-e…">
</span>
<button type="submit" class="btn lav-input-Submit">Rechercher</button>
</div>
@ -76,7 +76,7 @@ Structure du client
<i class="fas fa-question-circle"></i>
</button>
<span>Période :</span>
<input type="text" class="lav-details-Input" name="periode" value="" size="20">
<input type="text" class="lav-details-Input" name="periode" value="">
</p>
<p>
<button data-scrutari-button="showModal" data-scrutari-target="help_elargir" type="button" title="Aide sur « élargir »">
@ -112,8 +112,8 @@ Structure du client
<span class="lav-history-Label">Votre historique :</span>
<div data-scrutari-block="historyList" class="lav-history-List">
</div>
<span>
<button class="lav-history-Clear" data-scrutari-button="clearHistory" title="Vider lhistorique"><i class="fas fa-trash"></i></button>
<span class="lav-history-Clear">
<button data-scrutari-button="clearHistory" title="Vider lhistorique"><i class="fas fa-trash"></i></button>
</span>
</div>
<!-- /main.area-result.result-history -->

View File

@ -16,6 +16,17 @@ input[type="text"], input[type="search"] {
color: #005184;
}
@media screen and (max-width: 500px) {
ul.spip > li {
padding-left: 0;
}
ul.spip > li::before {
left: -1em;
}
}
@ -63,6 +74,13 @@ input[type="text"], input[type="search"] {
width: inherit;
}
@media screen and (max-width: 500px) {
.scrutari-fiche-Soustitre {
margin-left: 0;
}
}
/*****************************************************
* .scrutari-history : Surcharge de classes Scrutari par défaut
@ -272,6 +290,17 @@ input[type="text"], input[type="search"] {
font-weight: 700;
}
@media screen and (max-width: 500px) {
.lav-details-Body {
display: block;
}
.lav-details-Input {
overflow: hidden;
}
}
/*****************************************************
* .lav-history- : Historique
@ -295,9 +324,11 @@ input[type="text"], input[type="search"] {
}
.lav-history-Clear {
flex-shrink: 0;
background-color: transparent;
flex-shrink: 0;
}
.lav-history-Clear button {
background-color: transparent;
}
.lav-history-Clear .fas {
@ -308,6 +339,19 @@ input[type="text"], input[type="search"] {
color: #00c4f5;
}
@media screen and (max-width: 500px) {
.lav-history-Container {
display: block;
}
.lav-history-Clear {
display: block;
text-align: right;
}
}
/*****************************************************
* .lav-input- : Traitement
******************************************************/
@ -339,3 +383,25 @@ input[type="text"], input[type="search"] {
color: #FFF !important;
font-weight: 700;
}
@media screen and (max-width: 640px) {
.lav-input-Area {
column-gap: 15px;
}
}
@media screen and (max-width: 500px) {
.lav-input-Area {
display: block;
}
.lav-input-Submit {
margin-top: 5px;
}
.lav-input-Field {
overflow: hidden;
}
}