oca/paheko-module-velos-a-vendre
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Correction de mise en forme flex

Browse Source
This commit is contained in:
oca 2024-12-23 11:56:32 +01:00
parent 46de36182b
commit 0ffea56aaa
3 changed files with 112 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
modules/velos_a_vendre/index.html
View File

@ -27,13 +27,13 @@
<fieldset> <fieldset>
<legend>Filtrer les vélos</legend> <legend>Filtrer les vélos</legend>
<dl> <dl>
{{:input name="type" type="select" label="Type de vélo" options=$types}} {{:input name="type" type="select" label="Type de vélo" options=$types default_empty="Tous les types de vélo"}}
</dl> </dl>
<dl> <dl>
{{:input name="genre" type="select" label="Genre de cadre" options=$genres}} {{:input name="genre" type="select" label="Genre de cadre" options=$genres default_empty="Tous les genres de cadre"}}
</dl> </dl>
<dl> <dl>
{{:input name="roues" type="select" label="Taille de roue" options=$roues}} {{:input name="roues" type="select" label="Taille de roue" options=$roues default_empty="Toutes les tailles de roue"}}
</dl> </dl>
</fieldset> </fieldset>
</div> </div>
@ -60,14 +60,16 @@
</div> </div>
<span class="label">{{$etiquette}}</span> <span class="label">{{$etiquette}}</span>
<div class="properties"> <div class="properties">
<ul> <ul>
<li class="date-entree">entré en stock {{$date_entree|relative_date}} </li>
<li class="numero-unique">numéro unique : {{$id|intval}} </li>
<li>Type : {{$type}}</li> <li>Type : {{$type}}</li>
<li>Taille : {{$roues}}</li> <li>Taille : {{$roues}}</li>
<li>Cadre : {{$genre}}</li> <li>Cadre : {{$genre}}</li>
<li>Modèle : {{$modele}}</li> <li>Modèle : {{$modele}}</li>
<li>Prix : {{$prix}} €</li> <li>Prix : {{$prix}} €</li>
<li class="date-entree">entré en stock {{$date_entree|relative_date}} </li>
</ul> </ul>
</div> </div>
</div> </div>

2
modules/velos_a_vendre/module.ini
View File

@ -4,4 +4,4 @@ author = "Charlie, de Mines de Rayons"
author_url = "https://git.minesderayons.fr" author_url = "https://git.minesderayons.fr"
restrict_section = null restrict_section = null
restrict_level = "none" restrict_level = "none"
web = false restrict_details = "Ce module affiche une page pour tous les utilisateurs même non loggués, disponible à l'adresse `site/m/velos_a_vendre/`"

189
modules/velos_a_vendre/style.css
View File

@ -1,85 +1,104 @@
.filters { .filters fieldset {
display:flex;
fieldset { flex-wrap: wrap;
display:flex; gap: 10px;
dl { }
flex: 1 150px; .filters fieldset dl {
min-width: 200px; flex: 1 150px;
} min-width: 200px;
} }
}
.container {
.container { position: relative;
position: relative; flex: 1;
flex: 1; min-width: 200px;
min-width: 200px; border: solid 1px rgb(var(--gTextColor));
border: solid 1px black; background-color: transparent;
background-color: transparent; border-radius: 10px;
border-radius: 10px; overflow: hidden;
overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); }
}
.properties {
.properties{ margin: 10px;
margin: 10px; padding: 10px;
padding: 10px; }
}
.bike-list {
.bike-list{ display: flex;
display: flex; flex-wrap: wrap;
flex-wrap: wrap; gap: 10px;
gap: 10px; }
}
.image-wrapper {
.image-wrapper { position: relative;
position: relative; }
}
.image {
.image { display: block;
display: block; object-fit: cover;
object-fit: cover; width: 100%;
width: 100%; height: 125px;
height: 100px; }
}
.placeholder {
.placeholder{ /* background-image: url({{$config.files.logo}}); */
/* background-image: url({{$config.files.logo}}); */ background-size: cover;
background-size: cover; background-position: center;
background-position: center; background-repeat: no-repeat;
background-repeat: no-repeat; background-color: rgb(127, 127, 127);
background-color: rgb(127, 127, 127); background-blend-mode: soft-light;
background-blend-mode: soft-light; svg {
svg { fill: rgb(var(--gTextColor));
fill: rgb(var(--gTextColor)); }
} }
}
.label {
.label { margin-left: auto;
margin-left: auto; margin-right: auto;
margin-right: auto; color: black;
left: 0; text-align: center;
right: 0; border-color: black;
color: black; border-top: solid 1px;
text-align: center; border-bottom: solid 1px;
border-color: black; background-color: yellow;
border-top: solid 1px; min-width: 5em;
border-bottom: solid 1px; min-height: 2ex;
background-color: yellow; text-align: center;
min-width: 5em; vertical-align: middle;
width: 100%; z-index: 1;
min-height: 2ex; position: absolute;
text-align: center; top: 0.75em;
vertical-align: middle; left: -1.25em;
z-index: 1; transform: rotate(-45deg);
} font-weight: bold;
}
li.date-entree {
display: block; .properties li{
position: absolute; padding-left:0.5em;
bottom: 1.5em; }
margin-bottom: -10px; .properties li:last-child{
right: 10px; padding-bottom:1em;
font-size: x-small; }
color: gray; .properties li.date-entree {
} display: block;
position: absolute;
bottom: 1.5em;
margin-bottom: -10px;
right: 10px;
font-size: x-small;
color: gray;
}
li.numero-unique {
display: block;
position: absolute;
padding-left:0px;
margin-bottom: -10px;
left: 10px;
font-size: x-small;
color: gray;
transform: rotate(90deg);
top: 125px;
transform-origin: left;
}