Feat: Rating score display redesign, Rating choosing redesign, added avg rating on the game page

This commit is contained in:
Moyasee
2025-10-04 20:14:27 +03:00
parent 1f05dc8f78
commit 72562b13ef
3 changed files with 26 additions and 14 deletions

View File

@@ -615,13 +615,20 @@ export function GameDetailsContent() {
</span>
</div>
</div>
<div
<div
className="game-details__review-input"
onClick={() => editor?.commands.focus()}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
editor?.commands.focus();
}
}}
role="textbox"
tabIndex={0}
aria-label={t("write_review_placeholder")}
>
<EditorContent
editor={editor}
/>
<EditorContent editor={editor} />
</div>
</div>
@@ -632,17 +639,19 @@ export function GameDetailsContent() {
</label>
<select
className={`game-details__review-score-select ${
reviewScore
? reviewScore <= 3
? 'game-details__review-score-select--red'
reviewScore
? reviewScore <= 3
? "game-details__review-score-select--red"
: reviewScore <= 7
? 'game-details__review-score-select--yellow'
: 'game-details__review-score-select--green'
: ''
? "game-details__review-score-select--yellow"
: "game-details__review-score-select--green"
: ""
}`}
value={reviewScore || ""}
onChange={(e) =>
setReviewScore(e.target.value ? Number(e.target.value) : null)
setReviewScore(
e.target.value ? Number(e.target.value) : null
)
}
>
<option value="" disabled>
@@ -762,7 +771,9 @@ export function GameDetailsContent() {
</div>
</div>
</div>
<div className={`game-details__review-score ${getScoreColorClass(review.score)}`}>
<div
className={`game-details__review-score ${getScoreColorClass(review.score)}`}
>
{review.score}/10
</div>
</div>

View File

@@ -75,7 +75,9 @@ $hero-height: 300px;
padding: 6px 12px;
font-size: 14px;
cursor: pointer;
transition: border-color 0.2s ease, background-color 0.2s ease;
transition:
border-color 0.2s ease,
background-color 0.2s ease;
&:focus {
outline: none;

View File

@@ -115,7 +115,6 @@
@media (min-width: 1024px) {
flex-direction: column;
}
}
&__category-title {