Version a peu près fonctionnelle, pour retours
This commit is contained in:
Charlie Mathey
parent
1fb779b7df
commit
502dc6f019
104
index.html
Normal file
104
index.html
Normal file
@ -0,0 +1,104 @@
|
||||
{{:assign var="custom_css." value="./style.css"}}
|
||||
{{:assign var="custom_css." value="/content.css"}}
|
||||
|
||||
{{:admin_header title="Vélos à vendre" custom_css=$custom_css current="module_velos_a_vendre"}}
|
||||
|
||||
|
||||
<div class="filters">
|
||||
<fieldset>
|
||||
<legend>Type de vélo</legend>
|
||||
<input type="checkbox" id="check-type-course" name="course" checked /><label for="course">Course</label>
|
||||
<input type="checkbox" id="check-type-mi-course" name="mi-course" checked /><label for="mi-course">Mi-course</label>
|
||||
<input type="checkbox" id="check-type-randonneuse" name="randonneuse" checked /><label for="randonneuse">Randonneuse</label>
|
||||
<input type="checkbox" id="check-type-mini" name="mini" checked /><label for="mini">Mini</label>
|
||||
<input type="checkbox" id="check-type-pliant" name="pliant" checked /><label for="pliant">Pliant</label>
|
||||
<input type="checkbox" id="check-type-ville" name="ville" checked /><label for="ville">Ville</label>
|
||||
<input type="checkbox" id="check-type-vtc" name="vtc" checked /><label for="vtc">VTC</label>
|
||||
<input type="checkbox" id="check-type-vtt" name="vtt" checked /><label for="vtt">VTT</label>
|
||||
<input type="checkbox" id="check-type-bmx" name="bmx" checked /><label for="bmx">BMX</label>
|
||||
<input type="checkbox" id="check-type-autre" name="type-autre" checked /><label for="type-autre">Autre</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Genre de cadre</legend>
|
||||
<input type="checkbox" id="check-genre-diamant" name="diamant" checked /><label for="diamant">Diamant</label>
|
||||
<input type="checkbox" id="check-genre-mixte" name="mixte" checked /><label for="mixte">Mixte</label>
|
||||
<input type="checkbox" id="check-genre-enfant-diamant" name="enfant-diamant" checked /><label for="enfant-diamant">Enfant/Diamant</label>
|
||||
<input type="checkbox" id="check-genre-enfant-mixte" name="enfant-mixte" checked /><label for="enfant-mixte">Enfant/Mixte</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>Taille des roues</legend>
|
||||
<input type="checkbox" id="check-taille-700" name="700" checked /><label for="700">700C</label>
|
||||
<input type="checkbox" id="check-taille-650" name="650" checked /><label for="650">650B</label>
|
||||
<input type="checkbox" id="check-taille-26" name="26" checked /><label for="26">26"</label>
|
||||
<input type="checkbox" id="check-taille-24" name="24" checked /><label for="24">24"</label>
|
||||
<input type="checkbox" id="check-taille-20" name="20" checked /><label for="20">20"</label>
|
||||
<input type="checkbox" id="check-taille-16" name="16" checked /><label for="16">16"</label>
|
||||
<input type="checkbox" id="check-taille-autre" name="taille-autre" checked /><label for="taille-autre">Autre</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<div class="bike-list">
|
||||
{{#select etiquette, type, genre, roues, couleur, prix, modele, date_entree FROM plugin_stock_velos WHERE raison_sortie IS NULL AND prix > 0 ORDER BY date_entree DESC;}}
|
||||
{{:assign taille=$roues|truncate:2:"":false}}
|
||||
<div class="container" type="{{$type}}" genre="{{$genre}}" roues="{{$taille}}">
|
||||
<div class="image-wrapper">
|
||||
{{#select name, path FROM files WHERE parent = {"ext/p/stock_velos/public/%s"|args:$etiquette} ;}}
|
||||
<img src="{{$root_url}}{{$path}}" class="image">
|
||||
{{else}}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-50 0 740 512" class="image"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M312 32c-13.3 0-24 10.7-24 24s10.7 24 24 24l25.7 0 34.6 64-149.4 0-27.4-38C191 99.7 183.7 96 176 96l-56 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l43.7 0 22.1 30.7-26.6 53.1c-10-2.5-20.5-3.8-31.2-3.8C57.3 224 0 281.3 0 352s57.3 128 128 128c65.3 0 119.1-48.9 127-112l49 0c8.5 0 16.3-4.5 20.7-11.8l84.8-143.5 21.7 40.1C402.4 276.3 384 312 384 352c0 70.7 57.3 128 128 128s128-57.3 128-128s-57.3-128-128-128c-13.5 0-26.5 2.1-38.7 6L375.4 48.8C369.8 38.4 359 32 347.2 32L312 32zM458.6 303.7l32.3 59.7c6.3 11.7 20.9 16 32.5 9.7s16-20.9 9.7-32.5l-32.3-59.7c3.6-.6 7.4-.9 11.2-.9c39.8 0 72 32.2 72 72s-32.2 72-72 72s-72-32.2-72-72c0-18.6 7-35.5 18.6-48.3zM133.2 368l65 0c-7.3 32.1-36 56-70.2 56c-39.8 0-72-32.2-72-72s32.2-72 72-72c1.7 0 3.4 .1 5.1 .2l-24.2 48.5c-9 18.1 4.1 39.4 24.3 39.4zm33.7-48l50.7-101.3 72.9 101.2-.1 .1-123.5 0zm90.6-128l108.5 0L317 274.8 257.4 192z"/></svg>
|
||||
{{/select}}
|
||||
</div>
|
||||
<span class="label">{{$etiquette}}</span>
|
||||
<div class="properties">
|
||||
<ul>
|
||||
<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>
|
||||
{{else}}
|
||||
Aucun vélo n'est à vendre, revenez plus tard.
|
||||
{{/select}}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
function set_toggle(id, selector) {
|
||||
document.getElementById(id).addEventListener('change', function() {
|
||||
const bikes = document.querySelectorAll(selector);
|
||||
bikes.forEach(div => {
|
||||
div.style.display = this.checked ? 'block' : 'none';
|
||||
});
|
||||
});
|
||||
}
|
||||
set_toggle('check-type-course','[type="Course"]')
|
||||
set_toggle('check-type-mi-course','[type="Mi-course"]')
|
||||
set_toggle('check-type-randonneuse','[type="Randonneuse"]')
|
||||
set_toggle('check-type-mini','[type="Mini"]')
|
||||
set_toggle('check-type-pliant','[type="Pliant"]')
|
||||
set_toggle('check-type-ville','[type="Ville"]')
|
||||
set_toggle('check-type-vtc','[type="VTC"]')
|
||||
set_toggle('check-type-vtt','[type="VTT"]')
|
||||
set_toggle('check-type-bmx','[type="BMX"]')
|
||||
set_toggle('check-type-autre','[type="Autre"]')
|
||||
|
||||
set_toggle('check-genre-diamant','[genre="Diamant"]')
|
||||
set_toggle('check-genre-mixte','[genre="Mixte"]')
|
||||
set_toggle('check-genre-enfant-diamant','[genre="Enfant/Diamant"]')
|
||||
set_toggle('check-genre-enfant-mixte','[genre="Enfant/Mixte"]')
|
||||
|
||||
set_toggle('check-taille-700','[roues="70"]')
|
||||
set_toggle('check-taille-650','[roues="65"]')
|
||||
set_toggle('check-taille-26',"[roues='26']")
|
||||
set_toggle('check-taille-24',"[roues='24']")
|
||||
set_toggle('check-taille-20',"[roues='20']")
|
||||
set_toggle('check-taille-16',"[roues='16']")
|
||||
set_toggle('check-taille-autre','[roues="Au"]')
|
||||
|
||||
</script>
|
||||
7
module.ini
Normal file
7
module.ini
Normal file
@ -0,0 +1,7 @@
|
||||
name = "Vélos à vendre"
|
||||
description = "Module à utiliser en addition à «Gestion des vélos», qui créé une page publique affichant tous les vélos à vendre."
|
||||
author = "Charlie, de Mines de Rayons"
|
||||
author_url = "https://git.minesderayons.fr"
|
||||
restrict_section = null
|
||||
restrict_level = "none"
|
||||
web = false
|
||||
83
style.css
Normal file
83
style.css
Normal file
@ -0,0 +1,83 @@
|
||||
.filters {
|
||||
|
||||
fieldset {
|
||||
position: relative;
|
||||
min-width: 200px;
|
||||
label {
|
||||
flex: 1 150px;
|
||||
min-width: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="checkbox"], input[type="radio"] {
|
||||
position: relative;
|
||||
opacity: 0;
|
||||
font-size: 1.2em;
|
||||
left: 1em;
|
||||
top: -0.1em;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
max-width:100%;
|
||||
max-height:150px;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user