Merge pull request #122 from szymonpoltorak/DEV-198-Projects-responsive

Dev 198 projects responsive
szymonpoltorak · May 12, 2024 · e681ea3 · e681ea3
2 parents d6ef38a + d2b143e
commit e681ea3
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 30 deletions.
diff --git a/corn-backend/src/main/java/dev/corn/cornbackend/api/sprint/SprintServiceImpl.java b/corn-backend/src/main/java/dev/corn/cornbackend/api/sprint/SprintServiceImpl.java
@@ -260,7 +260,7 @@ public Page<SprintResponse> getSprintsBeforeSprint(long sprintId, Pageable pagea
     }
 
     @Override
-    public final List<SprintResponse> getSprintsBetweenDates(LocalDate startDate, LocalDate endDate, long projectId,
+    public List<SprintResponse> getSprintsBetweenDates(LocalDate startDate, LocalDate endDate, long projectId,
                                                              User user) {
         log.info("Getting sprints between dates: {} and {} for project with id: {}", startDate, endDate, projectId);
 

diff --git a/corn-frontend/src/app/pages/project-list/project-list.component.html b/corn-frontend/src/app/pages/project-list/project-list.component.html
@@ -1,19 +1,18 @@
 <app-toolbar [isOnProjectRoute]="true"></app-toolbar>
 
-<div class="project-list">
-    <mat-grid-list [cols]="cols">
-        @for(project of projects; track project) {
-            <mat-grid-tile>
-                <app-project [project]="project"></app-project>
-            </mat-grid-tile>
-        }
-    </mat-grid-list>
+<div class="min-w-min min-h-min grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-x-4 gap-y-8 p-4 ">
+    @for(project of projects; track project) {
+        <app-project [project]="project"></app-project>
+    }
 </div>
 
+
 <button mat-fab color="primary"
         aria-label="Add new project"
         matTooltip="Add new project"
         (click)="openCreateProjectForm()"
         class="add-button">
     <mat-icon>add</mat-icon>
 </button>
+
+
diff --git a/corn-frontend/src/app/pages/project-list/project-list.component.ts b/corn-frontend/src/app/pages/project-list/project-list.component.ts
@@ -30,9 +30,6 @@ import { Router } from "@angular/router";
     styleUrl: './project-list.component.scss'
 })
 export class ProjectListComponent implements OnInit {
-
-    cols: number = 5;
-
     pageNumber: number = 0;
 
     projects: Project[] = [];
@@ -45,8 +42,25 @@ export class ProjectListComponent implements OnInit {
                 private router: Router) {
     }
 
-    ngOnInit(): void {
-        this.getProjects();
+    async ngOnInit(): Promise<void> {
+        await this.getProjects();
+        await this.fetchMoreProjectsIfNeeded();
+    }
+
+    private async fetchMoreProjectsIfNeeded(): Promise<void> {
+        let position: number = (document.documentElement.scrollTop || document.body.scrollTop) + window.innerHeight;
+        let max: number = document.documentElement.scrollHeight;
+
+        while (position >= max) {
+            if(this.gotAllProjects) {
+                return;
+            }
+            this.pageNumber++;
+            await this.getProjects();
+
+            position = (document.documentElement.scrollTop || document.body.scrollTop) + window.innerHeight;
+            max = document.documentElement.scrollHeight;
+        }
     }
 
     @HostListener('window:scroll', ['$event'])
@@ -89,17 +103,20 @@ export class ProjectListComponent implements OnInit {
             });
     }
 
-    private getProjects(): void {
-        this.projectService
-            .getProjectsOnPage(this.pageNumber)
-            .pipe(take(1))
-            .subscribe((items: Project[]) => {
-                    if (items.length == 0) {
-                        this.gotAllProjects = true;
-                        return;
+    private async getProjects(): Promise<void> {
+        return new Promise<void>((resolve) => {
+            this.projectService
+                .getProjectsOnPage(this.pageNumber)
+                .pipe(take(1))
+                .subscribe((items: Project[]) => {
+                        if (items.length == 0) {
+                            this.gotAllProjects = true;
+                        } else {
+                            this.projects = [...this.projects, ...items];
+                        }
+                        resolve();
                     }
-                    this.projects = [...this.projects, ...items];
-                }
-            )
+                )
+        });
     }
 }
diff --git a/corn-frontend/src/app/pages/project-list/project/project.component.scss b/corn-frontend/src/app/pages/project-list/project/project.component.scss
@@ -10,10 +10,15 @@
   box-shadow: #000000 0 0 1em;
   z-index: -2;
 
-  @media(max-width: $screen-840) {
+  @media(max-width: $screen-1440) {
     width: 11em;
     height: 10em;
   }
+
+  @media(max-width: $screen-440) {
+    width: 8em;
+    height: 7em;
+  }
 }
 
 .background:hover {
@@ -34,11 +39,16 @@
   border-bottom-right-radius: 5px;
   background-color: map-get($dark-color-settings, container-background-color);
 
-  @media(max-width: $screen-840) {
+  @media(max-width: $screen-1440) {
     width: 10em;
     height: 10em;
   }
 
+  @media(max-width: $screen-440) {
+    width: 7em;
+    height: 7em;
+  }
+
   &:before {
     content: '';
     position: absolute;
@@ -61,10 +71,15 @@
   overflow: hidden;
   z-index: 1;
 
-  @media(max-width: $screen-840) {
+  @media(max-width: $screen-1440) {
     font-size: 1em;
     margin-top: 0.25em;
   }
+
+  @media(max-width: $screen-440) {
+    font-size: 0.7em;
+    margin-top: 0.15em;
+  }
 }
 
 .line {
@@ -87,10 +102,15 @@
   width: 2.7em;
   height: 2.7em;
 
-  @media (max-width: $screen-840) {
+  @media (max-width: $screen-1440) {
     width: 1.8em;
     height: 1.8em;
   }
+
+  @media (max-width: $screen-440) {
+    width: 1.1em;
+    height: 1.1em;
+  }
 }
 
 .member-row {

diff --git a/corn-frontend/src/app/pages/utils/user-avatar/user-avatar.component.scss b/corn-frontend/src/app/pages/utils/user-avatar/user-avatar.component.scss
@@ -16,4 +16,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-}
+
+  @media(max-width: 440px) {
+      font-size: 0.7em;
+  }
+}
+