fix: improve rating style (#54)

* fix: improve rating style * Made stars bigger :-) --------- Co-authored-by: Afonso Hermenegildo <afonsosousah@hotmail.com>
afonsosousah · Nov 13, 2024 · 16daaeb · 16daaeb
1 parent b360326
commit 16daaeb
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 82 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -1868,58 +1868,30 @@ input:-webkit-autofill:active{
 	justify-content: center;
 	align-items: center;
 }
-#rateTripMenuCard #ratingFormContainer .rating {
-	display: block;
+#rateTripMenuCard .ratingFormContainer {
+    display: flex;
+    justify-content: center;
+}
+#rateTripMenuCard .rating {
+    display: flex;
+    flex-direction: row-reverse;
 	line-height: 15vw;
-	font-size: 15vw;
+	font-size: 4vw;
 	position: relative;
 }
-#rateTripMenuCard #ratingFormContainer .rating label {
-	position: absolute;
-	top: 0;
-	left: 0;
-	height: 100%;
-	cursor: pointer;
-	white-space: nowrap;
-}
-#rateTripMenuCard #ratingFormContainer .rating label:last-child {
-	position: static;
-}
-#rateTripMenuCard #ratingFormContainer .rating label:nth-child(1) {
-	z-index: 5;
-}
-#rateTripMenuCard #ratingFormContainer .rating label:nth-child(2) {
-	z-index: 4;
-}
-#rateTripMenuCard #ratingFormContainer .rating label:nth-child(3) {
-	z-index: 3;
-}
-#rateTripMenuCard #ratingFormContainer .rating label:nth-child(4) {
-	z-index: 2;
-}
-#rateTripMenuCard #ratingFormContainer .rating label:nth-child(5) {
-	z-index: 1;
-}
-#rateTripMenuCard #ratingFormContainer .rating label input {
-	position: absolute;
-	top: 0;
-	left: 0;
-	opacity: 0;
-}
-#rateTripMenuCard #ratingFormContainer .rating label .icon {
-	float: left;
-	color: transparent;
-}
-#rateTripMenuCard #ratingFormContainer .rating label:last-child .icon {
-	color: var(--black);
+#rateTripMenuCard .rating .star {
+    font-size: 3.5rem;
+    color: black;
+    cursor: pointer;
+    transition: color 0.3s;
 }
-#rateTripMenuCard #ratingFormContainer .rating:not(:hover) label input:checked ~ .icon,
-#rateTripMenuCard #ratingFormContainer .rating:hover label:hover input ~ .icon {
-	color: var(--green);
+/* Change color up to the selected star */
+#rateTripMenuCard .rating input[type="radio"]:checked ~ .star {
+    color: var(--green);
 }
-#rateTripMenuCard #ratingFormContainer .rating label input:focus:not(:checked) ~ .icon:last-child {
-	color: var(--black);
-	text-shadow: 0 0 5px var(--green);
+/* Hide the radio buttons */
+#rateTripMenuCard .rating input[type="radio"] {
+    display: none;
 }
 #rateTripMenuCard #sendButton {
 	background-color: var(--green);
@@ -3219,4 +3191,4 @@ input[type=number] {
 	}
 	/* #endregion */
 
-}
+}
diff --git a/scripts/bikes.js b/scripts/bikes.js
@@ -461,40 +461,20 @@ function openRateTripMenu(tripObj) {
             </div>
             <img src="assets/images/mGira_station.png" alt="station" id="stationImg">
             <div id="ratingLabel">Como foi a viagem?</div>
-            <div id="ratingFormContainer">
-                <form class="rating">
-                    <label>
-                    <input type="radio" name="stars" value="1" />
-                    <span class="icon">★</span>
-                    </label>
-                    <label>
-                    <input type="radio" name="stars" value="2" />
-                    <span class="icon">★</span>
-                    <span class="icon">★</span>
-                    </label>
-                    <label>
-                    <input type="radio" name="stars" value="3" />
-                    <span class="icon">★</span>
-                    <span class="icon">★</span>
-                    <span class="icon">★</span>   
-                    </label>
-                    <label>
-                    <input type="radio" name="stars" value="4" />
-                    <span class="icon">★</span>
-                    <span class="icon">★</span>
-                    <span class="icon">★</span>
-                    <span class="icon">★</span>
-                    </label>
-                    <label>
-                    <input type="radio" name="stars" value="5" />
-                    <span class="icon">★</span>
-                    <span class="icon">★</span>
-                    <span class="icon">★</span>
-                    <span class="icon">★</span>
-                    <span class="icon">★</span>
-                    </label>
-                </form>
-            </div>
+            <div class="ratingFormContainer">
+				<form id="rating" class="rating">
+					<input type="radio" id="star5" name="rating" value="5" />
+					<label for="star5" class="star">&#9733;</label>
+					<input type="radio" id="star4" name="rating" value="4" />
+					<label for="star4" class="star">&#9733;</label>
+					<input type="radio" id="star3" name="rating" value="3" />
+					<label for="star3" class="star">&#9733;</label>
+					<input type="radio" id="star2" name="rating" value="2" />
+					<label for="star2" class="star">&#9733;</label>
+					<input type="radio" id="star1" name="rating" value="1" />
+					<label for="star1" class="star">&#9733;</label>
+				</form>
+			</div>
             <div id="sendButton" onclick="rateTrip('${tripObj.code}',${tripObj.cost})">Enviar</div>
         </div>
     </div>