- @for (colour of colours; track colour) {
+ @for (colour of colours; track $index) {
}
No questions yet.
}
@if (result && totalPages > 1) {
}
diff --git a/src/app/features/website/product/engagement/components/question-list/question-list.component.scss b/src/app/features/website/product/engagement/components/question-list/question-list.component.scss
index b208fb5..a76c3a5 100644
--- a/src/app/features/website/product/engagement/components/question-list/question-list.component.scss
+++ b/src/app/features/website/product/engagement/components/question-list/question-list.component.scss
@@ -12,6 +12,13 @@
color: var(--text-primary);
padding: 0 14px;
font-weight: 700;
+ cursor: pointer;
+ transition: border-color 0.2s ease, transform 0.2s ease;
+}
+
+.ask-btn:hover {
+ border-color: var(--primary-color);
+ transform: translateY(-1px);
}
.question-items {
@@ -37,6 +44,7 @@
border-radius: var(--radius-sm);
background: var(--bg-primary);
padding: 0 12px;
+ cursor: pointer;
}
.skeleton-list {
@@ -55,3 +63,19 @@
@keyframes shimmer {
to { background-position: -200% 0; }
}
+
+@media (max-width: 640px) {
+ .ask-btn {
+ width: 100%;
+ justify-self: stretch;
+ }
+
+ .pager {
+ display: grid;
+ grid-template-columns: 1fr;
+ }
+
+ .pager span {
+ text-align: center;
+ }
+}
diff --git a/src/app/features/website/product/engagement/components/question-list/question-list.component.ts b/src/app/features/website/product/engagement/components/question-list/question-list.component.ts
index edf52aa..e76d646 100644
--- a/src/app/features/website/product/engagement/components/question-list/question-list.component.ts
+++ b/src/app/features/website/product/engagement/components/question-list/question-list.component.ts
@@ -1,12 +1,13 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output, signal } from '@angular/core';
import { EngagementListResult, Question, SubmitQuestionInput } from '../../../../../../core/products/models/product-engagement.model';
+import { TranslatePipe } from '../../../../../../i18n/translate.pipe';
import { QuestionCardComponent } from '../question-card/question-card.component';
import { QuestionFormComponent } from '../question-form/question-form.component';
@Component({
selector: 'app-question-list',
standalone: true,
- imports: [QuestionCardComponent, QuestionFormComponent],
+ imports: [QuestionCardComponent, QuestionFormComponent, TranslatePipe],
templateUrl: './question-list.component.html',
styleUrls: ['./question-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.html b/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.html
index 68ad8e7..9cea560 100644
--- a/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.html
+++ b/src/app/features/website/product/engagement/components/rating-summary/rating-summary.component.html
@@ -10,7 +10,7 @@
No reviews yet.
}
@if (result && totalPages > 1) {
}
diff --git a/src/app/features/website/product/engagement/components/review-list/review-list.component.scss b/src/app/features/website/product/engagement/components/review-list/review-list.component.scss
index 6c2a32a..c7f19bd 100644
--- a/src/app/features/website/product/engagement/components/review-list/review-list.component.scss
+++ b/src/app/features/website/product/engagement/components/review-list/review-list.component.scss
@@ -27,6 +27,12 @@
background: var(--bg-primary);
padding: 0 12px;
cursor: pointer;
+ transition: border-color 0.2s ease, transform 0.2s ease;
+}
+
+.pager button:hover:not(:disabled) {
+ border-color: var(--primary-color);
+ transform: translateY(-1px);
}
.skeleton-list {
@@ -45,3 +51,14 @@
@keyframes shimmer {
to { background-position: -200% 0; }
}
+
+@media (max-width: 640px) {
+ .pager {
+ display: grid;
+ grid-template-columns: 1fr;
+ }
+
+ .pager span {
+ text-align: center;
+ }
+}
diff --git a/src/app/features/website/product/engagement/components/review-list/review-list.component.ts b/src/app/features/website/product/engagement/components/review-list/review-list.component.ts
index 16e2b6d..e8ef62e 100644
--- a/src/app/features/website/product/engagement/components/review-list/review-list.component.ts
+++ b/src/app/features/website/product/engagement/components/review-list/review-list.component.ts
@@ -1,6 +1,7 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from '@angular/core';
import { EngagementListResult, Review, SubmitReviewInput } from '../../../../../../core/products/models/product-engagement.model';
import { RatingSummary } from '../../../../../../core/products/models/product-engagement.model';
+import { TranslatePipe } from '../../../../../../i18n/translate.pipe';
import { RatingSummaryComponent } from '../rating-summary/rating-summary.component';
import { ReviewCardComponent } from '../review-card/review-card.component';
import { ReviewFormComponent } from '../review-form/review-form.component';
@@ -8,7 +9,7 @@ import { ReviewFormComponent } from '../review-form/review-form.component';
@Component({
selector: 'app-review-list',
standalone: true,
- imports: [RatingSummaryComponent, ReviewCardComponent, ReviewFormComponent],
+ imports: [RatingSummaryComponent, ReviewCardComponent, ReviewFormComponent, TranslatePipe],
templateUrl: './review-list.component.html',
styleUrls: ['./review-list.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/src/app/features/website/product/engagement/components/star-selector/star-selector.component.html b/src/app/features/website/product/engagement/components/star-selector/star-selector.component.html
index afe7c8f..7e7899f 100644
--- a/src/app/features/website/product/engagement/components/star-selector/star-selector.component.html
+++ b/src/app/features/website/product/engagement/components/star-selector/star-selector.component.html
@@ -1,4 +1,4 @@
-
+
@for (star of stars; track star) {
}