Correction de mise en forme flex

modules/velos_a_vendre/index.html

@@ -27,13 +27,13 @@
 	<fieldset>
 		<legend>Filtrer les vélos</legend>
 		<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>
-		    {{: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>
-		    {{: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>
 	</fieldset>
 </div>
@@ -61,13 +61,15 @@
 	    	<span class="label">{{$etiquette}}</span>
 	        <div class="properties">
 	            <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>Taille : {{$roues}}</li>
 	                <li>Cadre : {{$genre}}</li>
 	                <li>Modèle : {{$modele}}</li>
 
 	                <li>Prix : {{$prix}} €</li>
-	                <li class="date-entree">entré en stock {{$date_entree|relative_date}} </li>
 	            </ul>
 	        </div>
 		</div>    

modules/velos_a_vendre/module.ini

@@ -4,4 +4,4 @@ author = "Charlie, de Mines de Rayons"
 author_url = "https://git.minesderayons.fr"
 restrict_section = null
 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/`"

modules/velos_a_vendre/style.css

@@ -1,19 +1,18 @@
-.filters {
+.filters fieldset {
-    
-    fieldset {
     display:flex;
-        dl {
+    flex-wrap: wrap;
+    gap: 10px;    
+}
+.filters fieldset dl {
     flex: 1 150px;
     min-width: 200px;
 }
-    }
-}
 
 .container {
 	position: relative;
 	flex: 1;
 	min-width: 200px;
-    border: solid 1px black;
+    border: solid 1px rgb(var(--gTextColor));
     background-color: transparent;
     border-radius: 10px;
     overflow: hidden;
@@ -40,7 +39,7 @@
   display: block;
   object-fit: cover;
   width: 100%;
-  height: 100px;
+  height: 125px;
 }
 
 .placeholder {
@@ -58,8 +57,6 @@
 .label {
 	margin-left: auto;
 	margin-right: auto;
-	left: 0;
-	right: 0;
 	color: black;
 	text-align: center;
     border-color: black;
@@ -67,14 +64,24 @@
     border-bottom: solid 1px;
     background-color: yellow;
     min-width: 5em;
-    width: 100%;
     min-height: 2ex;
     text-align: center;
     vertical-align: middle;
     z-index: 1;
+    position: absolute;
+    top: 0.75em;
+    left: -1.25em;
+    transform: rotate(-45deg);
+    font-weight: bold;
 }
 
-li.date-entree {
+.properties li{
+    padding-left:0.5em;    
+}
+.properties li:last-child{
+    padding-bottom:1em;    
+}
+.properties li.date-entree {
     display: block;
     position: absolute;
     bottom: 1.5em;
@@ -83,3 +90,15 @@ li.date-entree {
     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;
+}