more layout

src-ui/src/app/components/document-list/document-list.component.html

@@ -71,32 +71,33 @@
   </div>
 </div>
 
-<ngb-pagination [pageSize]="docs.currentPageSize" [collectionSize]="docs.collectionSize" [(page)]="docs.currentPage" [maxSize]="5"
+<div class="row m-0 justify-content-end">
+  <ngb-pagination [pageSize]="docs.currentPageSize" [collectionSize]="docs.collectionSize" [(page)]="docs.currentPage" [maxSize]="5"
   [rotate]="true" (pageChange)="reload()" aria-label="Default pagination"></ngb-pagination>
+</div>
 
 <div *ngIf="displayMode == 'largeCards'">
   <app-document-card-large *ngFor="let d of docs.documents" [document]="d" [details]="d.content">
   </app-document-card-large>
 </div>
 
-<table class="table table-hover table-sm" *ngIf="displayMode == 'details'">
+<table class="table table-hover table-sm border" *ngIf="displayMode == 'details'">
   <thead>
-    <th>ASN</th>
-    <th>Correspondent</th>
+    <th class="d-none d-lg-table-cell">ASN</th>
+    <th class="d-none d-md-table-cell">Correspondent</th>
     <th>Title</th>
-    <th>Document type</th>
+    <th class="d-none d-xl-table-cell">Document type</th>
     <th>Created</th>
-    <th>Added</th>
+    <th class="d-none d-xl-table-cell">Added</th>
   </thead>
   <tbody>
     <tr *ngFor="let d of docs.documents" routerLink="/documents/{{d.id}}">
-      <td>{{d.archive_serial_number}}</td>
-      <td>{{d.correspondent ? d.correspondent.name : ''}}</td>
-      <td>{{d.title}}<app-tag [tag]="t" *ngFor="let t of d.tags" class="ml-1"></app-tag>
-      </td>
-      <td>{{d.document_type ? d.document_type.name : ''}}</td>
+      <td class="d-none d-lg-table-cell">{{d.archive_serial_number}}</td>
+      <td class="d-none d-md-table-cell">{{d.correspondent ? d.correspondent.name : ''}}</td>
+      <td>{{d.title}}<app-tag [tag]="t" *ngFor="let t of d.tags" class="ml-1"></app-tag></td>
+      <td class="d-none d-xl-table-cell">{{d.document_type ? d.document_type.name : ''}}</td>
       <td>{{d.created | date}}</td>
-      <td>{{d.added | date}}</td>
+      <td class="d-none d-xl-table-cell">{{d.added | date}}</td>
     </tr>
   </tbody>
 </table>

src-ui/src/app/components/manage/correspondent-list/correspondent-list.component.html

@@ -4,9 +4,11 @@
   </button>
 </app-page-header>
 
-<ngb-pagination [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()" aria-label="Default pagination"></ngb-pagination>
+<div class="row m-0 justify-content-end">
+  <ngb-pagination [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()" aria-label="Default pagination"></ngb-pagination>
+</div>
 
-<table class="table table-striped">
+<table class="table table-striped border">
     <thead>
     <tr>
       <th scope="col" sortable="name" (sort)="onSort($event)">Name</th>

src-ui/src/app/components/manage/document-type-list/document-type-list.component.html

@@ -4,10 +4,12 @@
   </button>
 </app-page-header>
 
-<ngb-pagination [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()"
+<div class="row m-0 justify-content-end">
+  <ngb-pagination [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()"
   aria-label="Default pagination"></ngb-pagination>
+</div>
 
-<table class="table table-striped">
+<table class="table table-striped border">
   <thead>
     <tr>
       <th scope="col" sortable="name" (sort)="onSort($event)">Name</th>

src-ui/src/app/components/manage/tag-list/tag-list.component.html

@@ -3,32 +3,35 @@
     Create
   </button>
 </app-page-header>
-  
-<ngb-pagination [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()" aria-label="Default pagination"></ngb-pagination>
-  
-  <table class="table table-striped">
-      <thead>
-      <tr>
-        <th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
-        <th scope="col">Colour</th>
-        <th scope="col" sortable="matching_algorithm" (sort)="onSort($event)">Matching</th>
-        <th scope="col" sortable="document_count" (sort)="onSort($event)">Document count</th>
-        <th scope="col">Actions</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr *ngFor="let tag of data">
-          <td scope="row">{{ tag.name }}</td>
-          <td scope="row"><span class="badge" [style.color]="getColor(tag.colour).textColor" [style.background-color]="getColor(tag.colour).value">{{ getColor(tag.colour).name }}</span></td>
-          <td scope="row">{{ getMatching(tag) }}</td>
-          <td scope="row">{{ tag.document_count }}</td>
-          <td scope="row">
-            <div class="btn-group">
-            <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(tag)">Edit</button>
-            <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(tag)">Delete</button>
-          </div>
-          </td>
-      </tr>
-      </tbody>
-    </table>
-  
+
+<div class="row m-0 justify-content-end">
+  <ngb-pagination [pageSize]="25" [collectionSize]="collectionSize" [(page)]="page" (pageChange)="reloadData()"
+    aria-label="Default pagination"></ngb-pagination>
+</div>
+
+<table class="table table-striped border">
+  <thead>
+    <tr>
+      <th scope="col" sortable="name" (sort)="onSort($event)">Name</th>
+      <th scope="col">Colour</th>
+      <th scope="col" sortable="matching_algorithm" (sort)="onSort($event)">Matching</th>
+      <th scope="col" sortable="document_count" (sort)="onSort($event)">Document count</th>
+      <th scope="col">Actions</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let tag of data">
+      <td scope="row">{{ tag.name }}</td>
+      <td scope="row"><span class="badge" [style.color]="getColor(tag.colour).textColor"
+          [style.background-color]="getColor(tag.colour).value">{{ getColor(tag.colour).name }}</span></td>
+      <td scope="row">{{ getMatching(tag) }}</td>
+      <td scope="row">{{ tag.document_count }}</td>
+      <td scope="row">
+        <div class="btn-group">
+          <button class="btn btn-sm btn-outline-secondary" (click)="openEditDialog(tag)">Edit</button>
+          <button class="btn btn-sm btn-outline-danger" (click)="openDeleteDialog(tag)">Delete</button>
+        </div>
+      </td>
+    </tr>
+  </tbody>
+</table>