mirror of
https://github.com/trevor1969/teatracker.git
synced 2026-08-09 10:41:59 +00:00
feat: Add 5-star rating system for tea varieties
- Add star rating component (5 stars) to tea form - Add rating field to tea data model (default: 3) - Update addTea() to include rating - Update openTeaModal() to set rating when editing - Display rating on tea cards with star icons - Add renderStarRating() for interactive rating in form - Add renderStarRatingStatic() for display on cards - Add handleStarRatingClick() for user interaction - Add migration for existing teas without rating - Add CSS styles for rating display and interaction Co-authored-by: trevor1969 <trevor1969@users.noreply.github.com>
This commit is contained in:
42
styles.css
42
styles.css
@ -971,3 +971,45 @@ header p {
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Star Rating */
|
||||
.star-rating {
|
||||
display: flex;
|
||||
gap: 5px;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.star-rating .star {
|
||||
color: #ccc;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.star-rating .star:hover,
|
||||
.star-rating .star.active {
|
||||
color: #FFD700;
|
||||
}
|
||||
|
||||
.star-rating .star:hover ~ .star {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Rating display on tea cards */
|
||||
.rating-display {
|
||||
color: #FFD700;
|
||||
font-size: 0.9rem;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
/* Rating display on tea cards */
|
||||
.tea-rating-display {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tea-rating-display .star {
|
||||
color: #FFD700;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user