fix: filters placement

ita-social-projects · Nov 7, 2024 · 5a51226 · 5a51226
1 parent 25eeee8
commit 5a51226
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 23 deletions.
diff --git a/...main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html b/...main/component/user/components/profile/profile-dashboard/profile-dashboard.component.html
@@ -99,27 +99,36 @@
       <mat-tab label="{{ 'homepage.events.my-space.tag-title' | translate }}">
         <hr />
         <div *ngIf="!loading; else spinner">
-          <div class="in-progress">
-            <div class="in-progress header" id="my-events">
-              <div class="buttons-wrapper">
-                <a [routerLink]="['/events/create-event']">
-                  <div id="create-button-event" class="secondary-global-button s-btn">
-                    <span>{{ 'profile.dashboard.add-event' | translate }}</span>
+          <div class="header">
+            <div class="in-progress">
+              <p>
+                <app-set-count [remainingCount]="totalEvents" [tabName]="'news'">
+                  {{ (isFavoriteBtnClicked ? 'profile.dashboard.saved-events' : 'profile.dashboard.my-events') | translate }} <br />
+                </app-set-count>
+              </p>
+              <div class="in-progress" id="my-events">
+                <div class="buttons-wrapper">
+                  <a [routerLink]="['/events/create-event']">
+                    <div id="create-button-event" class="secondary-global-button s-btn">
+                      <span>{{ 'profile.dashboard.add-event' | translate }}</span>
+                    </div>
+                  </a>
+                  <div class="favourites" (click)="toggleFavorites()">
+                    <span [ngClass]="isFavoriteBtnClicked ? 'flag-active' : 'flag'"></span>
                   </div>
-                </a>
-                <div class="favourites" (click)="toggleFavorites()">
-                  <span [ngClass]="isFavoriteBtnClicked ? 'flag-active' : 'flag'"></span>
                 </div>
               </div>
             </div>
-            <div class="events-filter">
-              <div class="events-types">
-                <mat-checkbox [(ngModel)]="isOnlineChecked" (ngModelChange)="onCheckboxChange()" color="primary" class="checkbox">
-                  {{ 'homepage.events.my-space.event-type-online' | translate }}
-                </mat-checkbox>
-                <mat-checkbox [(ngModel)]="isOfflineChecked" (ngModelChange)="onCheckboxChange()" color="primary" class="checkbox"
-                  >{{ 'homepage.events.my-space.event-type-offline' | translate }}
-                </mat-checkbox>
+            <div class="in-progress justify-end">
+              <div class="events-filter">
+                <div class="events-types">
+                  <mat-checkbox [(ngModel)]="isOnlineChecked" (ngModelChange)="onCheckboxChange()" color="primary" class="checkbox">
+                    {{ 'homepage.events.my-space.event-type-online' | translate }}
+                  </mat-checkbox>
+                  <mat-checkbox [(ngModel)]="isOfflineChecked" (ngModelChange)="onCheckboxChange()" color="primary" class="checkbox"
+                    >{{ 'homepage.events.my-space.event-type-offline' | translate }}
+                  </mat-checkbox>
+                </div>
               </div>
             </div>
           </div>

diff --git a/...main/component/user/components/profile/profile-dashboard/profile-dashboard.component.scss b/...main/component/user/components/profile/profile-dashboard/profile-dashboard.component.scss
@@ -18,6 +18,7 @@ a {
     font-size: 16px;
     line-height: 24px;
     letter-spacing: 0.01em;
+    margin: 24px 0;
 
     p {
       color: var(--primary-dark-grey);
@@ -29,9 +30,9 @@ a {
       align-items: center;
 
       .favourites {
-        margin: 0 10px;
-        width: 40px;
-        height: 40px;
+        margin-left: 10px;
+        width: 36px;
+        height: 36px;
         background-color: var(--primary-white);
         border-radius: 5px;
         display: flex;
@@ -61,10 +62,17 @@ a {
 
   .in-progress {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    margin: 24px 0;
-    height: 48px;
+    justify-content: space-between;
+  }
+
+  .column {
+    flex-direction: column;
+    margin-bottom: 24px;
+  }
+
+  .justify-end {
+    justify-content: end;
   }
 
   .secondary-global-button {

diff --git a/...p/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.ts b/...p/main/component/user/components/profile/profile-dashboard/profile-dashboard.component.ts
@@ -180,6 +180,7 @@ export class ProfileDashboardComponent implements OnInit, OnDestroy {
           next: (res: EventResponseDto) => {
             this.eventsList.push(...res.page);
             this.eventsPage++;
+            this.totalEvents = res.totalElements;
             this.hasNextPageOfEvents = res.hasNext;
             this.isActiveEventsScroll = res.hasNext;
           },

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -1132,6 +1132,7 @@
       "my-habits": "My habits",
       "my-news": "My news",
       "my-events": "My events",
+      "saved-events": "Saved events",
       "my-articles": "My articles",
       "habits-inprogress": "In progress",
       "add-new-habit": "Add New Habit",

diff --git a/src/assets/i18n/ua.json b/src/assets/i18n/ua.json
@@ -1160,6 +1160,7 @@
       "my-habits": "Мої звички",
       "my-news": "Мої новини",
       "my-events": "Мої події",
+      "saved-events": "Збережені події",
       "my-tips-and-tricks": "Мої статті",
       "habits-inprogress": "У процесі",
       "add-new-habit": "Додати Нову Звичку",