Responsive refine table

ExLibrisGroup · Nov 20, 2020 · 57f9364 · 57f9364
1 parent 6afab8a
commit 57f9364
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 24 deletions.
diff --git a/cloudapp/src/app/app.module.ts b/cloudapp/src/app/app.module.ts
@@ -4,6 +4,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MaterialModule, getTranslateModule, AlertModule } from '@exlibris/exl-cloudapp-angular-lib';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 import { NgxTippyModule } from 'ngx-tippy-wrapper';
 
 import { AppComponent } from './app.component';
@@ -39,7 +40,9 @@ import { ServiceDefComponent } from './settings/service-def/service-def.componen
       ReactiveFormsModule,
       NgxTippyModule
    ],
-   providers: [],
+   providers: [
+      { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { appearance: 'standard' } },
+    ],
    bootstrap: [
       AppComponent
    ]

diff --git a/cloudapp/src/app/refine-table/refine-table.component.html b/cloudapp/src/app/refine-table/refine-table.component.html
@@ -16,13 +16,19 @@
     <!-- Id Column -->
     <ng-container matColumnDef="id">
       <mat-header-cell *matHeaderCellDef translate>Refine.MMS</mat-header-cell>
-      <mat-cell class="align-top" *matCellDef="let row">{{row.mms_id}}</mat-cell>
+      <mat-cell class="align-top" *matCellDef="let row">
+        <span class="mobile-label" translate>Refine.MMS</span>
+        {{row.mms_id}}
+      </mat-cell>
     </ng-container>
 
     <!-- Title Column -->
     <ng-container matColumnDef="title">
       <mat-header-cell *matHeaderCellDef translate>Refine.Title</mat-header-cell>
-      <mat-cell class="align-top" *matCellDef="let row">{{row.title}}</mat-cell>
+      <mat-cell class="align-top" *matCellDef="let row">
+        <span class="mobile-label" translate>Refine.Title</span>
+        {{row.title}}
+      </mat-cell>
     </ng-container>
 
     <!-- Refinement Column -->

diff --git a/cloudapp/src/app/refine-table/refine-table.component.scss b/cloudapp/src/app/refine-table/refine-table.component.scss
@@ -2,14 +2,6 @@
   width: 100%;
 }
 
-mat-cell, mat-header-cell {
-  padding: 10px;
-}
-
-mat-column-title, mat-column-id {
-  line-height: 60px;
-}
-
 .refine-table-container {
   margin-bottom: 30px;
   //display: flex;
@@ -50,11 +42,12 @@ app-refine-bib {
   width: 100%;
 }
 
-.mat-column-id {
-  flex: 0 0 150px;
-}
+@media(min-width: 600px) {
+  .mat-column-id {
+    flex: 0 0 150px;
+  }
 
-.mat-column-refine {
-  flex: 0 0 50%;
+  .mat-column-refine {
+    flex: 0 0 50%;
+  }
 }
-
diff --git a/cloudapp/src/app/select-set/select-set.component.scss b/cloudapp/src/app/select-set/select-set.component.scss
@@ -1,7 +0,0 @@
-.is-loading {
-  margin: 10px
-}
-
-.select-set-field {
-  margin: 0 0 10px 0
-}

diff --git a/cloudapp/src/main.scss b/cloudapp/src/main.scss
@@ -16,3 +16,5 @@
         min-height: 40px;
     }
 }
+
+@import './mat-table-responsive.scss';
diff --git a/cloudapp/src/mat-table-responsive.scss b/cloudapp/src/mat-table-responsive.scss
@@ -0,0 +1,27 @@
+
+.mobile-label {
+  display: none;
+}
+
+@media(max-width: 600px) {
+  .mobile-label {
+    width: 80px;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 1em;
+  }
+
+  .mat-header-row {
+    display: none;
+  }
+
+  .mat-row, .mat-cell .mat-list-base .mat-list-item .mat-list-item-content { 
+    flex-direction: column;
+    align-items: start;
+    padding: 8px 24px;
+  }
+
+  .mat-cell:first-of-type {
+    padding-left: 0;
+  }
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,3 +16,5 @@ @@
             min-height: 40px;
         }
     }
+    @import './mat-table-responsive.scss';