rating stars

pages/assets/css/styles.css

@@ -148,3 +148,67 @@ footer a{
 .rowSubText{
 	font-size: 0.8em;
 }
+
+/* étoiles */
+.rating {
+    --dir: right;
+    --fill: var(--mainColor);
+    --fillbg: rgba(100, 100, 100, 0.15);
+    --heart: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21.328l-1.453-1.313q-2.484-2.25-3.609-3.328t-2.508-2.672-1.898-2.883-0.516-2.648q0-2.297 1.57-3.891t3.914-1.594q2.719 0 4.5 2.109 1.781-2.109 4.5-2.109 2.344 0 3.914 1.594t1.57 3.891q0 1.828-1.219 3.797t-2.648 3.422-4.664 4.359z"/></svg>');
+    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');
+    --stars: 5;
+    --starsize: 3rem;
+    --symbol: var(--star);
+    --value: 1;
+    --w: calc(var(--stars) * var(--starsize));
+    --x: calc(100% * (var(--value) / var(--stars)));
+    block-size: var(--starsize);
+    inline-size: var(--w);
+    position: relative;
+    touch-action: manipulation;
+    -webkit-appearance: none;
+}
+[dir="rtl"] .rating {
+--dir: left;
+}
+.rating::-moz-range-track {
+    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
+    block-size: 100%;
+    mask: repeat left center/var(--starsize) var(--symbol);
+}
+.rating::-webkit-slider-runnable-track {
+    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));
+    block-size: 100%;
+    mask: repeat left center/var(--starsize) var(--symbol);
+    -webkit-mask: repeat left center/var(--starsize) var(--symbol);
+}
+.rating::-moz-range-thumb {
+    height: var(--starsize);
+    opacity: 0;
+    width: var(--starsize);
+}
+.rating::-webkit-slider-thumb {
+    height: var(--starsize);
+    opacity: 0;
+    width: var(--starsize);
+    -webkit-appearance: none;
+}
+
+/* NO JS */
+.rating--nojs::-moz-range-track {
+    background: var(--fillbg);
+}
+.rating--nojs::-moz-range-progress {
+    background: var(--fill);
+    block-size: 100%;
+    mask: repeat left center/var(--starsize) var(--star);
+}
+.rating--nojs::-webkit-slider-runnable-track {
+    background: var(--fillbg);
+}
+.rating--nojs::-webkit-slider-thumb {
+    background-color: var(--fill);
+    box-shadow: calc(0rem - var(--w)) 0 0 var(--w) var(--fill);
+    opacity: 1;
+    width: 1px;
+}
\ No newline at end of file

pages/client/ecrireRecette.php

@@ -59,7 +59,7 @@
                             <h6 class="card-header">Ustenciles nécessaires</h6>
                             <div class="card-body">
                                 <div class="form-group">
-                                    <select multiple class="form-control" id="recetteUstencieles">
+                                    <select multiple class="form-control" id="recetteUstenciles">
                                         <option value="0">Aucun</option>
                                     </select>
                                 </div>
@@ -71,13 +71,13 @@
                             <h6 class="card-header">Difficultée de la recette</h6>
                             <div class="card-body">
                                 <div class="form-group">
-                                    <select class="form-control" id="recetteDifficulte">
-                                        <option value="1">Facile</option>
-                                        <option value="2">Moyennement facile</option>
-                                        <option value="3">Normale</option>
-                                        <option value="4">Moyennement difficile</option>
-                                        <option value="5">Difficile</option>
-                                    </select>
+                                <input
+                                id="recetteDifficulte"
+                                class="rating rating--nojs"
+                                max="5"
+                                step="1"
+                                type="range"
+                                value="3">
                                 </div>
                             </div>
                         </div>
@@ -192,6 +192,10 @@
             var recetteDescription = $("#recetteDescription").val();
             var recetteCategory = $("#recetteCategory").val();
             var recetteHeaderPic = $("#editor-headerPic").attr("headerPic");
+            var recetteIngredients = $("#recetteIngredients").val();
+            var recetteUstenciles = $("#recetteUstenciles").val();
+            var recetteDifficulte = $("#recetteDifficulte").val();
+            var recettePreparation = $("#recettePreparation").val();
 
             if(recetteTitle == ""){
                 SnackBar({