siteweb/libreavous
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adaptation aux petits écrans

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
squelettes/content/scrutarijs.html
View File

@ -45,7 +45,7 @@ Structure du client
<div data-scrutari-area="input" class="lav-input-Area"> <div data-scrutari-area="input" class="lav-input-Area">
<span class="lav-input-Block"> <span class="lav-input-Block">
<i class="fas fa-search"></i> <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> </span>
<button type="submit" class="btn lav-input-Submit">Rechercher</button> <button type="submit" class="btn lav-input-Submit">Rechercher</button>
</div> </div>
@ -76,7 +76,7 @@ Structure du client
<i class="fas fa-question-circle"></i> <i class="fas fa-question-circle"></i>
</button> </button>
<span>Période :</span> <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>
<p> <p>
<button data-scrutari-button="showModal" data-scrutari-target="help_elargir" type="button" title="Aide sur « élargir »"> <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> <span class="lav-history-Label">Votre historique :</span>
<div data-scrutari-block="historyList" class="lav-history-List"> <div data-scrutari-block="historyList" class="lav-history-List">
</div> </div>
<span> <span class="lav-history-Clear">
<button class="lav-history-Clear" data-scrutari-button="clearHistory" title="Vider l’historique"><i class="fas fa-trash"></i></button> <button data-scrutari-button="clearHistory" title="Vider l’historique"><i class="fas fa-trash"></i></button>
</span> </span>
</div> </div>
<!-- /main.area-result.result-history --> <!-- /main.area-result.result-history -->

68
squelettes/javascript/scrutarijs/perso.css
View File

@ -16,6 +16,17 @@ input[type="text"], input[type="search"] {
color: #005184; 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; width: inherit;
} }
@media screen and (max-width: 500px) {
.scrutari-fiche-Soustitre {
margin-left: 0;
}
}
/***************************************************** /*****************************************************
* .scrutari-history : Surcharge de classes Scrutari par défaut * .scrutari-history : Surcharge de classes Scrutari par défaut
@ -272,6 +290,17 @@ input[type="text"], input[type="search"] {
font-weight: 700; font-weight: 700;
} }
@media screen and (max-width: 500px) {
.lav-details-Body {
display: block;
}
.lav-details-Input {
overflow: hidden;
}
}
/***************************************************** /*****************************************************
* .lav-history- : Historique * .lav-history- : Historique
@ -296,8 +325,10 @@ input[type="text"], input[type="search"] {
.lav-history-Clear { .lav-history-Clear {
flex-shrink: 0; flex-shrink: 0;
background-color: transparent; }
.lav-history-Clear button {
background-color: transparent;
} }
.lav-history-Clear .fas { .lav-history-Clear .fas {
@ -308,6 +339,19 @@ input[type="text"], input[type="search"] {
color: #00c4f5; color: #00c4f5;
} }
@media screen and (max-width: 500px) {
.lav-history-Container {
display: block;
}
.lav-history-Clear {
display: block;
text-align: right;
}
}
/***************************************************** /*****************************************************
* .lav-input- : Traitement * .lav-input- : Traitement
******************************************************/ ******************************************************/
@ -339,3 +383,25 @@ input[type="text"], input[type="search"] {
color: #FFF !important; color: #FFF !important;
font-weight: 700; 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;
}
}