From 0ffea56aaae0dc51053add367a645824a893db61 Mon Sep 17 00:00:00 2001
From: oca <charlie.mathey@crans.org>
Date: Mon, 23 Dec 2024 11:56:32 +0100
Subject: [PATCH] Correction de mise en forme flex

---
 modules/velos_a_vendre/index.html |  12 +-
 modules/velos_a_vendre/module.ini |   2 +-
 modules/velos_a_vendre/style.css  | 189 ++++++++++++++++--------------
 3 files changed, 112 insertions(+), 91 deletions(-)

diff --git a/modules/velos_a_vendre/index.html b/modules/velos_a_vendre/index.html
index e0c6405..a6bedd4 100644
--- a/modules/velos_a_vendre/index.html
+++ b/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>
@@ -60,14 +60,16 @@
             </div>
 	    	<span class="label">{{$etiquette}}</span>
 	        <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>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>    
diff --git a/modules/velos_a_vendre/module.ini b/modules/velos_a_vendre/module.ini
index 7b3694b..7f0a208 100644
--- a/modules/velos_a_vendre/module.ini
+++ b/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
\ No newline at end of file
+restrict_details = "Ce module affiche une page pour tous les utilisateurs même non loggués, disponible à l'adresse `site/m/velos_a_vendre/`"
\ No newline at end of file
diff --git a/modules/velos_a_vendre/style.css b/modules/velos_a_vendre/style.css
index 5282d99..342e165 100644
--- a/modules/velos_a_vendre/style.css
+++ b/modules/velos_a_vendre/style.css
@@ -1,85 +1,104 @@
-.filters {
-    
-    fieldset {
-    	display:flex;
-        dl {
-            flex: 1 150px;
-            min-width: 200px;
-        }
-    }
-}
-
-.container {
-	position: relative;
-	flex: 1;
-	min-width: 200px;
-    border: solid 1px black;
-    background-color: transparent;
-    border-radius: 10px;
-    overflow: hidden;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-}
-
-.properties{
- 	margin: 10px;
-    padding: 10px;
-}
-
-.bike-list{
-	display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-}
-
-.image-wrapper {
-    position: relative;
-}
-
-
-.image {
-  display: block;
-  object-fit: cover;
-  width: 100%;
-  height: 100px;
-}
-
-.placeholder{
-    /* background-image: url({{$config.files.logo}});  */
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-color: rgb(127, 127, 127);
-    background-blend-mode: soft-light;
-    svg {
-        fill: rgb(var(--gTextColor));
-    }
-}
-
-.label {
-	margin-left: auto;
-	margin-right: auto;
-	left: 0;
-	right: 0;
-	color: black;
-	text-align: center;
-    border-color: black;
-    border-top: solid 1px;
-    border-bottom: solid 1px;
-    background-color: yellow;
-    min-width: 5em;
-    width: 100%;
-    min-height: 2ex;
-    text-align: center;
-    vertical-align: middle;
-    z-index: 1;
-}
-
-li.date-entree {
-    display: block;
-    position: absolute;
-    bottom: 1.5em;
-    margin-bottom: -10px;
-    right: 10px;
-    font-size: x-small;
-    color: gray;
-}
\ No newline at end of file
+.filters fieldset {
+    display:flex;
+    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 rgb(var(--gTextColor));
+    background-color: transparent;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.properties {
+ 	margin: 10px;
+    padding: 10px;
+}
+
+.bike-list {
+	display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.image-wrapper {
+    position: relative;
+}
+
+
+.image {
+  display: block;
+  object-fit: cover;
+  width: 100%;
+  height: 125px;
+}
+
+.placeholder {
+    /* background-image: url({{$config.files.logo}});  */
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-color: rgb(127, 127, 127);
+    background-blend-mode: soft-light;
+    svg {
+        fill: rgb(var(--gTextColor));
+    }
+}
+
+.label {
+	margin-left: auto;
+	margin-right: auto;
+	color: black;
+	text-align: center;
+    border-color: black;
+    border-top: solid 1px;
+    border-bottom: solid 1px;
+    background-color: yellow;
+    min-width: 5em;
+    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;
+}
+
+.properties li{
+    padding-left:0.5em;    
+}
+.properties li:last-child{
+    padding-bottom:1em;    
+}
+.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;
+}