table style & navbar menu

src/app/app.browser.module.ts

@@ -4,6 +4,12 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
 
+import { Offcanvas } from 'bootstrap';
+var offcanvasElementList = [].slice.call(document.querySelectorAll('.offcanvas'));
+const offcanvasList = offcanvasElementList.map(function (offcanvasEl) {
+  return new Offcanvas(offcanvasEl);
+});
+
 @NgModule({
   imports: [BrowserAnimationsModule, AppModule],
   bootstrap: [AppComponent],

src/app/features/administrative-document/document-result/document-result.component.html

@@ -13,15 +13,15 @@
         <tr>
           <th>title</th>
           <th>creationDate</th>
-          <th>actions</th>
+          <th class="fit">actions</th>
         </tr>
       </thead>
       <tbody>
         <ng-container *ngFor="let ad of adminDocuments.content">
           <tr role="button" (click)="openPdfViewer(ad.attachment)">
             <td class="text-break">{{ ad.title }}</td>
             <td class="text-break">{{ ad.dateCreation | date: 'dd/MM/yyyy' }}</td>
-            <td>
+            <td class="text-center fit">
               <div ngbDropdown class="d-inline-block" container="body">
                 <button
                   class="btn btn-outline-secondary"

src/app/features/curriculum/cv-download-request/cv-download-request.component.html

@@ -2,35 +2,35 @@
 <div class="table-responsive" *ngIf="cvDownloadRequests">
   <table class="table table-bordered">
     <thead>
-    <tr>
-      <th>email</th>
-      <th>phoneNumber</th>
-      <th>dailyRate</th>
-      <th>availability</th>
-      <th>dateReceived</th>
-      <th>action</th>
-    </tr>
-    </thead>
-    <tbody>
-    <ng-container *ngFor="let cvDr of cvDownloadRequests">
       <tr>
-        <td>{{cvDr.email}}</td>
-        <td>{{cvDr.phoneNumber}}</td>
-        <td>{{cvDr.dailyRate}}</td>
-        <td>{{cvDr.availability}}</td>
-        <td>{{cvDr.dateReceived | date: 'dd/MM/yyyy HH:mm'}}</td>
-        <td>
-          <button (click)="delete(cvDr)" class="btn btn-sm">
-            <fa-icon class="text-danger" [icon]="['fas','trash']"></fa-icon>
-          </button>
-        </td>
-      </tr>
-      <tr *ngIf="cvDr?.htmlContent?.length">
-        <td colspan="7">
-          <div [innerHTML]="cvDr.htmlContent"></div>
-        </td>
+        <th>email</th>
+        <th>phoneNumber</th>
+        <th>dailyRate</th>
+        <th>availability</th>
+        <th>dateReceived</th>
+        <th class="fit">action</th>
       </tr>
-    </ng-container>
+    </thead>
+    <tbody>
+      <ng-container *ngFor="let cvDr of cvDownloadRequests">
+        <tr>
+          <td>{{ cvDr.email }}</td>
+          <td>{{ cvDr.phoneNumber }}</td>
+          <td>{{ cvDr.dailyRate }}</td>
+          <td>{{ cvDr.availability }}</td>
+          <td>{{ cvDr.dateReceived | date: 'dd/MM/yyyy HH:mm' }}</td>
+          <td class="text-center fit">
+            <button (click)="delete(cvDr)" class="btn btn-sm">
+              <fa-icon class="text-danger" [icon]="['fas', 'trash']"></fa-icon>
+            </button>
+          </td>
+        </tr>
+        <tr *ngIf="cvDr?.htmlContent?.length">
+          <td colspan="7">
+            <div [innerHTML]="cvDr.htmlContent"></div>
+          </td>
+        </tr>
+      </ng-container>
     </tbody>
   </table>
 </div>

src/app/features/dossier/dossier-table-result/dossier-table-result.component.html

@@ -1,27 +1,35 @@
 <ng-container *ngIf="dossiers">
   <div class="d-flex justify-content-end pb-2 pt-1" *ngIf="!closed">
-
-      <button class="btn btn-outline-success me-1" (click)="toggleGraphs()">{{showGraphs ? 'Hide' : 'Show'}}
-        graphs
-      </button>
+    <button class="btn btn-outline-success me-1" (click)="toggleGraphs()">
+      {{ showGraphs ? 'Hide' : 'Show' }}
+      graphs
+    </button>
     <div ngbDropdown class="d-inline-block" container="body">
       <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>
         <fa-icon icon="exclamation"></fa-icon>
         Actions
       </button>
       <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
         <button ngbDropdownItem (click)="newDossier()" [disabled]="dossiers?.length > 0">
-          <fa-icon [icon]="['fas','plus']"></fa-icon>
+          <fa-icon [icon]="['fas', 'plus']"></fa-icon>
           New dossier
         </button>
-        <button ngbDropdownItem (click)="deleteDossier()"
-          [disabled]="closed || !dossiers?.length || dossiers[0]?.feeIds?.length > 0 || dossiers[0]?.invoiceIds?.length > 0">
-          <fa-icon [icon]="['fas','times']"></fa-icon>
+        <button
+          ngbDropdownItem
+          (click)="deleteDossier()"
+          [disabled]="
+            closed || !dossiers?.length || dossiers[0]?.feeIds?.length > 0 || dossiers[0]?.invoiceIds?.length > 0
+          "
+        >
+          <fa-icon [icon]="['fas', 'times']"></fa-icon>
           Delete dossier
         </button>
-        <button ngbDropdownItem (click)="closeActiveDossier()"
-          [disabled]="closed || !dossiers?.length || !dossiers[0]?.invoiceIds?.length">
-          <fa-icon [icon]="['fas','check']"></fa-icon>
+        <button
+          ngbDropdownItem
+          (click)="closeActiveDossier()"
+          [disabled]="closed || !dossiers?.length || !dossiers[0]?.invoiceIds?.length"
+        >
+          <fa-icon [icon]="['fas', 'check']"></fa-icon>
           Close dossier
         </button>
       </div>
@@ -33,41 +41,51 @@
         <tr>
           <th>Name</th>
           <th>Date updated</th>
-          <th class="d-md-table-cell  d-none">Nb. Expenses</th>
-          <th class="d-md-table-cell  d-none">Nb. Invoices</th>
-          <th class="d-md-table-cell  d-none">Description</th>
-          <th class="d-md-table-cell  d-none" *ngIf="!closed">Tva Delta</th>
-          <th class="d-md-table-cell  d-none" *ngIf="closed">Tva Due</th>
-          <th *ngIf="closed">Action</th>
+          <th class="d-md-table-cell d-none">Nb. Expenses</th>
+          <th class="d-md-table-cell d-none">Nb. Invoices</th>
+          <th class="d-md-table-cell d-none">Description</th>
+          <th class="d-md-table-cell d-none" *ngIf="!closed">Tva Delta</th>
+          <th class="d-md-table-cell d-none" *ngIf="closed">Tva Due</th>
+          <th class="fit" *ngIf="closed">Action</th>
         </tr>
       </thead>
       <tbody>
         <tr class="bg-light">
-          <td *ngIf="!dossiers.length" [attr.colspan]="closed ? '7':'6'">No entries</td>
+          <td *ngIf="!dossiers.length" [attr.colspan]="closed ? '7' : '6'">No entries</td>
         </tr>
         <ng-container *ngFor="let d of dossiers">
           <tr role="button" (click)="openDossier(d)">
-            <td>{{d.name}}</td>
-            <td>{{d?.updatedDate | date: 'dd/MM/yyyy HH:mm'}}</td>
-            <td class="d-md-table-cell  d-none">{{d.feeIds?.length}}</td>
-            <td class="d-md-table-cell  d-none">{{d.invoiceIds?.length}}</td>
-            <td class="d-md-table-cell  d-none">{{d.description}}</td>
-            <td class="d-md-table-cell  d-none" *ngIf="closed">{{(d?.tvaDue || 0)| currency: '€'}}</td>
-            <td *ngIf="!closed" [class.bg-danger]="d?.tvaToBePaid <0" [class.text-warning]="d?.tvaToBePaid <0"
-              [class.bg-info]="d?.tvaToBePaid > 0" [class.bg-secondary]="d?.tvaToBePaid === 0"
-              [class.text-white]="d?.tvaToBePaid >= 0" class="d-md-table-cell  d-none">{{d?.tvaToBePaid | currency:
-              '€'}}
+            <td>{{ d.name }}</td>
+            <td>{{ d?.updatedDate | date: 'dd/MM/yyyy HH:mm' }}</td>
+            <td class="d-md-table-cell d-none">{{ d.feeIds?.length }}</td>
+            <td class="d-md-table-cell d-none">{{ d.invoiceIds?.length }}</td>
+            <td class="d-md-table-cell d-none">{{ d.description }}</td>
+            <td class="d-md-table-cell d-none" *ngIf="closed">{{ d?.tvaDue || 0 | currency: '€' }}</td>
+            <td
+              *ngIf="!closed"
+              [class.bg-danger]="d?.tvaToBePaid < 0"
+              [class.text-warning]="d?.tvaToBePaid < 0"
+              [class.bg-info]="d?.tvaToBePaid > 0"
+              [class.bg-secondary]="d?.tvaToBePaid === 0"
+              [class.text-white]="d?.tvaToBePaid >= 0"
+              class="d-md-table-cell d-none"
+            >
+              {{ d?.tvaToBePaid | currency: '€' }}
             </td>
-            <td *ngIf="closed" class="text-center">
+            <td *ngIf="closed" class="text-center fit">
               <div ngbDropdown class="d-inline-block" container="body">
-                <button class="btn btn-outline-secondary" id="dropdownBasic2" ngbDropdownToggle
-                  (click)="$event.stopPropagation();"></button>
+                <button
+                  class="btn btn-outline-secondary"
+                  id="dropdownBasic2"
+                  ngbDropdownToggle
+                  (click)="$event.stopPropagation()"
+                ></button>
                 <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
                   <button ngbDropdownItem (click)="downloadArchive(d.dossierUploadId)">
-                    <fa-icon [icon]="['fas','download']"></fa-icon>&nbsp;Download
+                    <fa-icon [icon]="['fas', 'download']"></fa-icon>&nbsp;Download
                   </button>
                   <button ngbDropdownItem (click)="modify(d)">
-                    <fa-icon [icon]="['fas','edit']"></fa-icon>&nbsp;Edit
+                    <fa-icon [icon]="['fas', 'edit']"></fa-icon>&nbsp;Edit
                   </button>
                 </div>
               </div>

src/app/features/fee/default-price/default-price.component.html

@@ -11,11 +11,11 @@
       <table class="table table-sm table-bordered">
         <thead>
           <tr>
-            <th>Color</th>
+            <th class="fit">Color</th>
             <th>Label</th>
             <th>Price HVAT</th>
             <th>VAT</th>
-            <th class="text-center">
+            <th class="text-center fit">
               <button (click)="add($event)" class="btn btn-link me-1">
                 <fa-icon class="text-primary" icon="plus"></fa-icon>
               </button>
@@ -25,15 +25,15 @@
         <tbody>
           <tr *ngFor="let _ of defaultPrices.controls; index as i">
             <ng-container [formGroupName]="i">
-              <td>
+              <td class="text-center fit">
                 <p-colorPicker [baseZIndex]="2000" [id]="'colorHex' + i" formControlName="colorHex"></p-colorPicker>
               </td>
               <td>
                 <input
                   type="text"
                   (input)="changeTextToUppercase(i)"
                   pattern="[a-zA-Z0-9]+"
-                  class="form-control"
+                  class="form-control form-control-sm"
                   [id]="'tag' + i"
                   formControlName="tag"
                 />
@@ -50,7 +50,7 @@
                   <input type="number" class="form-control" [id]="'vat' + i" formControlName="vat" />
                 </div>
               </td>
-              <td class="text-center">
+              <td class="text-center fit">
                 <button class="btn btn-link text-danger" (click)="remove($event, i)" [disabled]="canRemove(i)">
                   <fa-icon [icon]="['fas', 'times']"></fa-icon>
                 </button>

src/app/features/fee/fee-table-result/fee-table-result.component.html

@@ -48,11 +48,11 @@
     <table class="table table-bordered table-hover">
       <thead>
         <tr>
-          <th></th>
+          <th class="fit"></th>
           <th>Subject</th>
           <th class="d-md-table-cell d-none">Date received</th>
-          <th>Files</th>
-          <th class="text-center" *ngIf="!archived">
+          <th class="fit">Files</th>
+          <th class="text-center fit" *ngIf="!archived">
             <input
               type="checkbox"
               class="form-check-input"
@@ -70,15 +70,15 @@
         </tr>
         <ng-container *ngFor="let f of fees.content">
           <tr role="button" (click)="openDetail(f)">
-            <td>
+            <td class="fit">
               <fa-icon [icon]="['fas', 'circle']" [ngStyle]="getStyleForTag(f)"></fa-icon>
             </td>
             <td>{{ f.subject }}</td>
             <td class="d-md-table-cell d-none">{{ f.date | date: 'dd/MM/yyyy HH:mm' }}</td>
-            <td class="text-center">
+            <td class="text-center fit">
               {{ f.attachmentIds.length }}
             </td>
-            <td class="text-center" (click)="toggleSelectedRow(f, false, $event)" *ngIf="!archived">
+            <td class="text-center fit" (click)="toggleSelectedRow(f, false, $event)" *ngIf="!archived">
               <input type="checkbox" class="form-check-input" aria-label="select" [checked]="isFeeSelected(f)" />
             </td>
           </tr>

src/app/features/file-upload/file-upload-table/file-upload-table.component.html

@@ -1,51 +1,52 @@
 <app-title title="Uploads" [uppercase]="true"></app-title>
-<app-file-upload-search-form [searchCriteria]="searchCriteria"
-                             (formSubmitted)="search($event)"></app-file-upload-search-form>
+<app-file-upload-search-form
+  [searchCriteria]="searchCriteria"
+  (formSubmitted)="search($event)"
+></app-file-upload-search-form>
 <ng-container *ngIf="fileUploads">
   <div class="table-responsive">
     <table class="table table-bordered">
       <thead>
-      <tr>
-        <th>creationDate</th>
-        <th>name</th>
-        <th class="d-md-table-cell d-none">correlationId</th>
-        <th class="d-md-table-cell d-none">public</th>
-        <th>actions</th>
-      </tr>
+        <tr>
+          <th>creationDate</th>
+          <th>name</th>
+          <th class="d-md-table-cell d-none">correlationId</th>
+          <th class="fit d-md-table-cell d-none">public</th>
+          <th class="fit">actions</th>
+        </tr>
       </thead>
       <tbody>
-      <ng-container *ngFor="let upl of fileUploads.content">
-        <tr>
-          <td class="text-break">{{upl?.metadata?.creationDate}}</td>
-          <td class="text-break">{{upl?.metadata?.name}}</td>
-          <td class="text-break d-md-table-cell d-none">{{upl?.metadata?.correlationId}}</td>
-          <td class="d-md-table-cell d-none text-break">{{upl?.metadata?.publicResource ? "Yes" : "No"}}</td>
-          <td class="text-center">
-            <div ngbDropdown class="d-inline-block" container="body">
-              <button class="btn btn-outline-secondary" id="dropdownBasic1" ngbDropdownToggle></button>
-              <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
-                <button (click)="download(upl)" ngbDropdownItem>
-                  <fa-icon [icon]="['fas','download']"></fa-icon>
-                  Download
-
-                </button>
-                <button (click)="delete(upl)" ngbDropdownItem>
-                  <fa-icon [icon]="['fas','trash']"></fa-icon>
-                  Delete
-                </button>
-                <button (click)="openPdfViewer(upl)" *ngIf="isPdf(upl)" ngbDropdownItem>
-                  <fa-icon [icon]="['fas','file-pdf']"></fa-icon>
-                  Open
-                </button>
-                <button (click)="openImageViewer(upl)" *ngIf="isImage(upl)" ngbDropdownItem>
-                  <fa-icon [icon]="['fas','file-image']"></fa-icon>
-                  Open
-                </button>
+        <ng-container *ngFor="let upl of fileUploads.content">
+          <tr>
+            <td class="text-break">{{ upl?.metadata?.creationDate }}</td>
+            <td class="text-break">{{ upl?.metadata?.name }}</td>
+            <td class="text-break d-md-table-cell d-none">{{ upl?.metadata?.correlationId }}</td>
+            <td class="fit d-md-table-cell d-none text-break">{{ upl?.metadata?.publicResource ? 'Yes' : 'No' }}</td>
+            <td class="text-center fit">
+              <div ngbDropdown class="d-inline-block" container="body">
+                <button class="btn btn-outline-secondary" id="dropdownBasic1" ngbDropdownToggle></button>
+                <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+                  <button (click)="download(upl)" ngbDropdownItem>
+                    <fa-icon [icon]="['fas', 'download']"></fa-icon>
+                    Download
+                  </button>
+                  <button (click)="delete(upl)" ngbDropdownItem>
+                    <fa-icon [icon]="['fas', 'trash']"></fa-icon>
+                    Delete
+                  </button>
+                  <button (click)="openPdfViewer(upl)" *ngIf="isPdf(upl)" ngbDropdownItem>
+                    <fa-icon [icon]="['fas', 'file-pdf']"></fa-icon>
+                    Open
+                  </button>
+                  <button (click)="openImageViewer(upl)" *ngIf="isImage(upl)" ngbDropdownItem>
+                    <fa-icon [icon]="['fas', 'file-image']"></fa-icon>
+                    Open
+                  </button>
+                </div>
               </div>
-            </div>
-          </td>
-        </tr>
-      </ng-container>
+            </td>
+          </tr>
+        </ng-container>
       </tbody>
     </table>
   </div>
@@ -56,8 +57,8 @@
       [pageSize]="fileUploads.size"
       [maxSize]="5"
       [collectionSize]="fileUploads.totalElements"
-      (pageChange)="load($event)">
+      (pageChange)="load($event)"
+    >
     </ngb-pagination>
-
   </div>
 </ng-container>