Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
P
potage
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
1
Issues
1
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
mathieu
potage
Commits
5131a989
Commit
5131a989
authored
Sep 19, 2018
by
Mat
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
page today: réactivité js des sliders
parent
75fba3d5
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
69 additions
and
18 deletions
+69
-18
src/PotageBundle/Resources/views/Membre/inc/offreALaCarte.html.twig
...Bundle/Resources/views/Membre/inc/offreALaCarte.html.twig
+8
-6
src/PotageBundle/Resources/views/Membre/inc/panier.html.twig
src/PotageBundle/Resources/views/Membre/inc/panier.html.twig
+11
-9
src/PotageBundle/Resources/views/Membre/today.js
src/PotageBundle/Resources/views/Membre/today.js
+44
-0
web/css/style.css
web/css/style.css
+6
-3
No files found.
src/PotageBundle/Resources/views/Membre/inc/offreALaCarte.html.twig
View file @
5131a989
...
...
@@ -16,19 +16,21 @@
<div
class=
"overlay"
>
<div
class=
"slidecontainer"
>
<input
type=
"range"
min=
"1"
max=
"100"
value=
"0"
class=
"slider"
id=
"slider-
{{
legume.id
}}
"
<input
class=
"slider"
id=
"slider-
{{
legume.id
}}
"
type=
"range"
min=
"0"
step=
"
{{
legume.quantiteStep
}}
"
max=
"
{{
legume.quantiteMax
}}
"
value=
"0"
orient=
"vertical"
>
<span
class=
"qmin hidden"
>
{{
legume.quantiteMin
}}
</span>
</div>
<div
class=
"texte"
>
<h5>
{{
legume.nom
}}
</h5>
<p>
{{
legume.description
}}
</p>
<small>
{{
legume.quantiteMin
}}
,
{{
legume.quantiteMax
}}
,
{{
legume.quantiteStep
}}
</small>
</div>
<div
class=
"prix
Poids
"
>
<span
class=
"prix"
>
{{
legume.prixUnitaire
}}
</span>
<div
class=
"prix
Quantite
"
>
<span
class=
"prix
Unitr
"
>
{{
legume.prixUnitaire
}}
</span>
<span
class=
"devise"
>
€
</span>
<span
class=
"unite"
>
/
{{
legume.unite
}}
</span>
/
<span
class=
"unite"
>
{{
legume.unite
}}
</span>
</div>
</div>
...
...
src/PotageBundle/Resources/views/Membre/inc/panier.html.twig
View file @
5131a989
...
...
@@ -49,14 +49,16 @@
</div>
<div
class=
"col-5"
>
<div
id=
"total"
>
<h4>
Total
</h4>
<p
class=
"h1"
>
16.85 €
</p>
<small>
<i>
Le total de la commande est donné à titre indicatif.
Votre maraîcher se réserve le droit d'adapter légèrement les quantités et le prix
en fonction des limites et de l'état du stock disponible.
</i>
</small>
</div>
<h4>
Total
</h4>
<p
class=
"h1"
>
<span
id=
"total"
>
0.00
</span>
€
</p>
<small>
<i>
Le total de la commande est donné à titre indicatif.
Votre maraîcher se réserve le droit d'adapter légèrement les quantités et le prix
en fonction des limites et de l'état du stock disponible.
</i>
</small>
</div>
src/PotageBundle/Resources/views/Membre/today.js
View file @
5131a989
...
...
@@ -12,3 +12,47 @@ $("#offre div.item")
$
(
this
).
transition
({
scale
:
1
},
200
,
'
linear
'
);
$
(
this
).
find
(
'
.overlay
'
).
transition
({
opacity
:
0
},
200
,
'
linear
'
);
});
/*
* Animer les items de l'offre, et répercuter les valeurs dans le formCommande
*
*/
let
gridItem
=
document
.
querySelectorAll
(
"
div#offre .item.legume
"
);
let
form
=
document
.
querySelector
(
"
form.formulaire_commande
"
);
let
formItem
=
form
.
querySelectorAll
(
"
ul#commandeLegumes li.formItem
"
);
// parcourt la grille
gridItem
.
forEach
(
function
(
item
)
{
let
input
=
item
.
querySelector
(
"
input.slider
"
);
let
qmin
=
parseFloat
(
item
.
querySelector
(
"
span.qmin
"
).
textContent
);
let
prixQuantite
=
item
.
querySelector
(
"
div.prixQuantite
"
);
let
prixUnitr
=
parseFloat
(
prixQuantite
.
querySelector
(
"
span.prixUnitr
"
).
textContent
);
let
unite
=
prixQuantite
.
querySelector
(
"
span.unite
"
).
textContent
;
// lorsqu'on actionne un slider
input
.
addEventListener
(
'
input
'
,
function
()
{
if
(
this
.
value
>=
qmin
)
{
// rafraichit l'affichage de l'item
let
pu
=
(
this
.
value
*
prixUnitr
).
toFixed
(
2
)
+
'
€
'
;
prixQuantite
.
innerHTML
=
this
.
value
+
'
'
+
unite
+
(
unite
!==
'
kg
'
&&
this
.
value
>
1
?
'
s
'
:
''
)
+
'
<span class="pu">(
'
+
pu
+
'
)</span>
'
;
}
else
{
// reset l'affichage de l'item
prixQuantite
.
innerHTML
=
`<span class="prixUnitr">
${
prixUnitr
}
</span><span class="devise">€</span>/<span class="unite">
${
unite
}
</span>`
;
}
});
});
console
.
log
(
gridItem
);
console
.
log
(
form
);
console
.
log
(
formItem
);
web/css/style.css
View file @
5131a989
...
...
@@ -401,21 +401,24 @@ body[id^='today'] #offre.grid div.item .overlay {
.overlay
div
.texte
{
margin-left
:
2.5em
;
}
.overlay
div
.prix
Poids
{
.overlay
div
.prix
Quantite
{
position
:
absolute
;
padding
:
1em
;
bottom
:
0
;
right
:
0
;
}
.overlay
div
.prix
Poids
{
.overlay
div
.prix
Quantite
{
font-size
:
14px
;
}
.overlay
div
.texte
h5
{
font-size
:
18px
;
}
.overlay
div
.prix
Poids
span
.prix
{
.overlay
div
.prix
Quantite
span
.prixUnitr
{
font-size
:
22px
;
}
.overlay
div
.prixQuantite
span
.pu
{
color
:
#40e859
;
}
.overlay
div
.texte
p
{
font-size
:
10px
;
}
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment