Layout cleanup for library creator

booklore-ui/src/app/book/components/library-creator/library-creator.component.html

@@ -1,4 +1,4 @@
-<p-stepper [value]="1" class="basis-[50rem]">
+<p-stepper [value]="1">
   <p-step-list>
     <p-step [value]="1">Library Details</p-step>
     <p-step [value]="2">Select Directory</p-step>
@@ -6,21 +6,21 @@
   <p-step-panels>
     <p-step-panel [value]="1">
       <ng-template #content let-activateCallback="activateCallback">
-        <div class="flex flex-col h-48 stepper-content-custom">
-          <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">
-            <div class="library-name-icon-parent">
-              <div class="library-name-div">
+        <div class="flex flex-col w-[40rem] h-[25rem]">
+          <div class="flex flex-auto justify-center items-center font-medium border-[var(--border-color)] border-2 border-dashed">
+            <div class="flex flex-col gap-10">
+              <div class="flex flex-row items-center gap-2">
                 <p>Library Name: </p>
                 <input type="text" pInputText [(ngModel)]="chosenLibraryName" placeholder="Enter library name..."/>
               </div>
-              <div class="library-icon-div">
+              <div class=" flex flex-row items-center gap-5">
                 <p>Library Icon:</p>
                 <div *ngIf="!selectedIcon">
                   <p-button label="Select Icon" icon="pi pi-search" (onClick)="openIconPicker()"></p-button>
                 </div>
-                <div *ngIf="selectedIcon" class="selected-icon-container">
+                <div *ngIf="selectedIcon">
                   <i [class]="selectedIcon" style="font-size: 1.25rem; margin-right: 0.75rem;"></i>
-                  <p-button icon="pi pi-times" (onClick)="clearSelectedIcon()" [rounded]="true" [text]="true" [outlined]="true" class="remove-icon-button" severity="danger"></p-button>
+                  <p-button icon="pi pi-times" (onClick)="clearSelectedIcon()" [rounded]="true" [text]="true" [outlined]="true" severity="danger"></p-button>
                 </div>
               </div>
             </div>
@@ -35,20 +35,20 @@
 
     <p-step-panel [value]="2">
       <ng-template #content let-activateCallback="activateCallback">
-        <div class="flex flex-col h-48 stepper-content-custom">
-          <div class="border-2 border-dashed border-surface-200 dark:border-surface-700 rounded bg-surface-50 dark:bg-surface-950 flex-auto flex justify-center items-center font-medium">
-            <div class="flex flex-col justify-center items-center w-100">
+        <div class="flex flex-col w-[40rem] h-[25rem]">
+          <div class="flex flex-auto justify-center items-center font-medium border-[var(--border-color)] border-2 border-dashed">
+            <div class="flex flex-col justify-center items-center">
               <p-button
                 severity="info"
                 label="Add book folders"
                 [outlined]="true"
-                (onClick)="show()">
+                (onClick)="openDirectoryPicker()">
               </p-button>
-              <p-table [value]="folders" styleClass="p-datatable-striped" class="p-table-custom mt-4">
+              <p-table [value]="folders" class="mt-4 max-w-[35rem] max-h-[11.5rem] !overflow-scroll">
                 <ng-template pTemplate="body" let-folder let-i="rowIndex">
                   <tr>
-                    <td class="tr-custom">{{ folder }}</td>
-                    <td class="tr-custom td-x-custom">
+                    <td class="!p-1 !px-2 !border-0">{{ folder }}</td>
+                    <td class="!p-1 !px-2 !border-0">
                       <p-button
                         icon="pi pi-times"
                         [rounded]="true"

booklore-ui/src/app/book/components/library-creator/library-creator.component.scss

@@ -1,95 +1 @@
-.library-name-icon-parent {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 2.5rem;
-}
 
-.library-name-div {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.library-icon-div {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.library-name-div label,
-.library-icon-div label {
-  margin-right: 0.5rem;
-}
-
-.library-name-div input {
-  width: 200px;
-}
-
-.library-icon-div p-button {
-  margin-left: 0.8rem;
-}
-
-.p-stepperPanel {
-  display: flex;
-  flex-direction: column;
-  padding: 1rem;
-}
-
-.p-stepperPanel .flex {
-  display: flex;
-}
-
-.p-stepperPanel .justify-content-end {
-  justify-content: flex-end;
-}
-
-.p-stepperPanel .mt-3 {
-  margin-top: 1rem;
-}
-
-.p-table-custom {
-  min-width: 35rem !important;
-  max-height: 11.25rem !important;
-  overflow: scroll;
-}
-
-.tr-custom {
-  padding: 0.25rem 0.5rem !important;
-  border: 0px !important;
-}
-
-.td-x-custom {
-  text-align: right;
-}
-
-.w-100 {
-  width: 100%;
-}
-
-.p-button {
-  margin-left: 0.5rem;
-}
-
-.selected-icon-container {
-  display: flex;
-  align-items: center;
-  margin-left: 1rem;
-
-  i {
-    color: var(--text-color);
-  }
-
-  .remove-icon-button {
-    margin-left: 0.5rem;
-  }
-}
-
-.stepper-content-custom {
-  height: 335px;
-  padding: 10px;
-}
-
-.p {
-  color: var(--text-color);
-}

booklore-ui/src/app/book/components/library-creator/library-creator.component.ts

@@ -56,12 +56,10 @@ export class LibraryCreatorComponent implements OnInit {
     }
   }
 
-  show() {
+  openDirectoryPicker() {
     this.directoryPickerDialogRef = this.dialogService.open(DirectoryPickerComponent, {
       header: 'Select Media Directory',
       modal: true,
-      width: '50%',
-      height: '75%',
       contentStyle: {overflow: 'auto'},
       baseZIndex: 10
     });

booklore-ui/src/app/layout/component/layout-topbar/app.topbar.component.ts

@@ -84,8 +84,6 @@ export class AppTopBarComponent implements OnDestroy {
       header: 'Create New Library',
       modal: true,
       closable: true,
-      width: '675px',
-      height: '480px',
       style: {
         position: 'absolute',
         top: '15%',

booklore-ui/src/app/utilities/component/directory-picker/directory-picker.component.html

@@ -1,33 +1,36 @@
-<div style="margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem;">
-  <input
-    id="disabled-input"
-    type="text"
-    pInputText
-    [value]="selectedProductName"
-    [disabled]="true"
-    [ngStyle]="{ 'width': '100%', 'padding': '0.5rem', 'font-size': '1rem' }"
-  />
-  <p-button label="Select" severity="success" [ngStyle]="{ 'width': '100px' }" (click)="onSelect()"/>
-</div>
-<ng-container>
-  <div style="overflow-x: auto;">
-    <p-table [value]="paths" [tableStyle]="{ 'min-width': '50rem' }" class="product-table">
-      <ng-template pTemplate="header">
-        <tr>
-          <th [style.width]="'10%'">Type</th>
-          <th [style.width]="'90%'">Name</th>
-        </tr>
-      </ng-template>
-
-      <ng-template pTemplate="body" let-product>
-        <tr (click)="onRowClick(product)">
-          <td>
-            <i *ngIf="product === '...'" class="pi pi-arrow-up"></i>
-            <i *ngIf="product !== '...'" class="pi pi-folder-open"></i>
-          </td>
-          <td>{{ product }}</td>
-        </tr>
-      </ng-template>
-    </p-table>
+<div class="min-h-screen flex flex-col">
+  <div class="mb-6 flex items-center gap-4">
+    <input
+      id="disabled-input"
+      type="text"
+      pInputText
+      [value]="selectedProductName"
+      [disabled]="true"
+      class="w-full p-2 text-base"
+    />
+    <p-button label="Select" severity="success" class="w-[100px]" (click)="onSelect()"></p-button>
   </div>
-</ng-container>
+
+  <ng-container>
+    <div class="overflow-x-auto">
+      <p-table [value]="paths" [tableStyle]="{ 'min-width': '50rem' }" class="product-table w-full">
+        <ng-template pTemplate="header">
+          <tr>
+            <th class="w-[10%]">Type</th>
+            <th class="w-[90%]">Name</th>
+          </tr>
+        </ng-template>
+
+        <ng-template pTemplate="body" let-product>
+          <tr class="cursor-pointer hover:bg-white/10" (click)="onRowClick(product)">
+            <td>
+              <i *ngIf="product === '...'" class="pi pi-arrow-up"></i>
+              <i *ngIf="product !== '...'" class="pi pi-folder-open"></i>
+            </td>
+            <td>{{ product }}</td>
+          </tr>
+        </ng-template>
+      </p-table>
+    </div>
+  </ng-container>
+</div>

docker-compose.yml

@@ -2,7 +2,7 @@ version: '3.8'
 services:
   booklore-app:
     container_name: booklore
-    image: localhost:5000/booklore-app:v33
+    image: localhost:5000/booklore-app:v8
     ports:
       - "5050:6060"
     volumes: