Merge pull request 'fix: terms and conditions colours, editor on smaller screens show only icons' (#113) from issue111 into main

Reviewed-on: #113

client/src/app/editor/editor.component.html

@@ -164,22 +164,28 @@
       <div
         class="card-header clr-row buttonBar headerBar clr-flex-md-row clr-justify-content-center clr-justify-content-lg-end"
       >
-        <div *ngIf="tableTrue" class="clr-col-12 clr-col-lg-4 backBtn">
-          <span class="btn btn-sm btn-icon btn-dimmed" [routerLink]="['/home']">
+        <div
+          *ngIf="tableTrue"
+          class="clr-col-12 clr-col-md-3 clr-col-lg-4 backBtn"
+        >
+          <span
+            class="btn icon-collapse btn-sm btn-icon btn-dimmed"
+            [routerLink]="['/home']"
+          >
             <clr-icon shape="caret" dir="left" size="20"></clr-icon>
-            Back to table selection
+            <span class="text">Back to table selection</span>
           </span>
           <span
             (click)="viewboxManager()"
-            class="btn btn-sm btn-icon btn-dimmed viewbox-open"
+            class="btn icon-collapse btn-sm btn-icon btn-dimmed viewbox-open"
           >
             <clr-icon shape="view-cards" size="20"></clr-icon>
-            Viewboxes
+            <span class="text">Viewboxes</span>
           </span>
         </div>
 
         <div
-          class="clr-col-12 clr-col-lg-4 d-flex flex-column align-items-center"
+          class="clr-col-12 clr-col-md-5 clr-col-lg-4 d-flex flex-column align-items-center"
           [class.clr-col-lg-12]="!tableTrue"
         >
           <h4
@@ -234,34 +240,37 @@
             </ng-container>
           </h4>
         </div>
-        <div *ngIf="tableTrue" class="clr-col-12 clr-col-lg-4 btnCtrl">
+        <div
+          *ngIf="tableTrue"
+          class="clr-col-12 clr-col-md-4 clr-col-lg-4 btnCtrl"
+        >
           <ng-container *ngIf="hotTable.readOnly && !uploadPreview">
             <button
               type="button"
-              class="btnView btn btn-sm btn-icon btn-block btn-dimmed"
+              class="btnView btn icon-collapse btn-sm btn-icon btn-block btn-dimmed"
               (click)="openQb()"
             >
               <clr-icon shape="filter"></clr-icon>
-              <span>Filter</span>
+              <span class="text">Filter</span>
             </button>
 
             <button
               type="button"
-              class="btn btn-sm btn-primary btn-block"
+              class="btn icon-collapse btn-sm btn-primary btn-block"
               (click)="editTable()"
             >
               <clr-icon shape="note"></clr-icon>
-              <span>Edit</span>
+              <span class="text">Edit</span>
             </button>
 
             <button
               *ngIf="!columnLevelSecurityFlag"
               (click)="onShowUploadModal()"
               type="button"
-              class="btn btn-sm btn-success btn-block mr-0"
+              class="btn icon-collapse btn-sm btn-success btn-block mr-0"
             >
               <clr-icon shape="upload"></clr-icon>
-              <span>Upload</span>
+              <span class="text">Upload</span>
             </button>
           </ng-container>
 

client/src/app/editor/editor.component.scss

@@ -223,6 +223,16 @@ hot-table {
   font-size: inherit !important;
 }
 
+// When width is smaller remove the text from the buttons
+// keep only the icons
+@media (max-width: 992px) {
+  .icon-collapse {
+    .text {
+      display: none;
+    }
+  }
+}
+
 // FIXME
 // Let's leave it here for a reference if there
 // is an issue with viewboxes/filter modal overlaying

client/src/app/shared/terms/terms.component.scss

@@ -19,8 +19,6 @@
   .card-block {
     flex: 1;
     overflow: auto;
-
-    background-color: #f4f4f4;
   }
 }