Implement responsive design for question page (CS3219-AY2425S1#94)

* Replace panel with PrimeNG sidebar to make it responsive * Make questions table responsive * Add min width to ensure the contents don't collapse on each other * Reduce margins on smaller screen
limcaaarl · Nov 13, 2024 · 3ccae10 · 3ccae10
1 parent d4439c9
commit 3ccae10
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 40 deletions.
diff --git a/frontend/src/app/questions/questions.component.css b/frontend/src/app/questions/questions.component.css
@@ -6,34 +6,7 @@
     background-color: #181818 !important;
 }
 
-.sliding-panel {
-    position: fixed;
-    top: 0;
-    right: -600px; /* Adjust the width as needed */
-    width: 600px;
-    height: 100%;
-    background-color: #181818 !important;
-    color: var(--text-color); /* Use theme variable */
-    box-shadow: -2px 0 5px rgba(0,0,0,0.5);
-    transition: right 0.3s ease;
-    z-index: 1000;
-}
-
-.sliding-panel.open {
-    right: 0;
-}
-
-.panel-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 1rem;
-    background-color: #181818 !important;
-    border-bottom: 1px solid #000000; /* Use theme variable */
-}
-
 .panel-content {
-    padding: 1rem;
     line-height: 1.6; /* Adjust line height for better readability */
     color: #ffffff; /* Ensure text color is readable */
 }

diff --git a/frontend/src/app/questions/questions.component.html b/frontend/src/app/questions/questions.component.html
@@ -1,4 +1,4 @@
-<div class="card mx-8">
+<div class="card mx-3 md:mx-8">
     @if (loading) {
         <p-progressSpinner
             class="flex align-items-center justify-content-center h-screen"
@@ -41,7 +41,12 @@
                         [value]="questions"
                         [(selection)]="selectedQuestions"
                         datakey="id"
-                        [tableStyle]="{ 'table-layout': 'fixed', width: '100%', 'text-align': 'center' }"
+                        [tableStyle]="{
+                            'table-layout': 'fixed',
+                            width: '100%',
+                            'min-width': '50rem',
+                            'text-align': 'center',
+                        }"
                         [paginator]="true"
                         [rows]="10"
                         [rowsPerPageOptions]="[10, 25, 50]"
@@ -108,18 +113,17 @@ <h3 class="m-0">Questions</h3>
         (successfulRequest)="onSuccessfulRequest($event)">
     </app-question-dialog>
     <p-confirmDialog [style]="{ width: '450px' }" />
-    <div class="sliding-panel" [class.open]="isPanelVisible">
-        <div class="panel-header">
-            <h4>{{ clickedOnQuestion?.title }}</h4>
-            <p-button
-                icon="pi pi-times"
-                severity="secondary"
-                label="Close"
-                (onClick)="closePanel()"
-                class="p-button-text" />
-        </div>
+    <p-sidebar
+        [(visible)]="isPanelVisible"
+        position="right"
+        [blockScroll]="true"
+        styleClass="w-10 md:w-4"
+        transitionOptions="300ms cubic-bezier(0, 0, 0.2, 1)">
+        <ng-template pTemplate="header">
+            <h3>{{ clickedOnQuestion?.title }}</h3>
+        </ng-template>
         <div class="panel-content">
             <p style="white-space: pre-wrap">{{ clickedOnQuestion?.description }}</p>
         </div>
-    </div>
+    </p-sidebar>
 </div>
diff --git a/frontend/src/app/questions/questions.component.ts b/frontend/src/app/questions/questions.component.ts
@@ -12,6 +12,7 @@ import { MultiSelectModule } from 'primeng/multiselect';
 import { ReactiveFormsModule } from '@angular/forms';
 import { DropdownModule } from 'primeng/dropdown';
 import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { SidebarModule } from 'primeng/sidebar';
 import { Question } from './question.model';
 import { QuestionService } from '../../_services/question.service';
 import { HttpErrorResponse } from '@angular/common/http';
@@ -26,6 +27,7 @@ import { User } from '../../_models/user.model';
     imports: [
         TableModule,
         NgFor,
+        SidebarModule,
         CommonModule,
         FormsModule,
         ToastModule,