Merge pull request #337 from e-picsa/style/options-tool-responsive

style: improve option tool responsiveness
e-picsa · Oct 17, 2024 · 5dd8c69 · 5dd8c69
2 parents e0f9c84 + 5a939f4
commit 5dd8c69
Show file tree

Hide file tree

Showing 9 changed files with 69 additions and 34 deletions.
diff --git a/apps/picsa-apps/extension-app-native/android/.idea/misc.xml b/apps/picsa-apps/extension-app-native/android/.idea/misc.xml
diff --git a/apps/picsa-apps/extension-app-native/android/app/build.gradle b/apps/picsa-apps/extension-app-native/android/app/build.gradle
@@ -7,8 +7,8 @@ android {
         applicationId "io.picsa.extension"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 3048001
-        versionName "3.48.1"
+        versionCode 3049000
+        versionName "3.49.0"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.html
@@ -3,7 +3,7 @@
     <mat-icon>close</mat-icon>
   </button>
 
-  <mat-stepper [linear]="false" #stepper class="slim-headers">
+  <mat-stepper [linear]="false" #stepper class="slim-headers responsive-content-padding">
     <!-- Step header (common) -->
     <mat-step matStepContent *ngFor="let step of stepperSteps; index as stepIndex">
       <ng-template matStepLabel>{{ step.label | translate }}</ng-template>
@@ -67,12 +67,14 @@ <h3 class="StepTitle">{{ step.title | translate }}</h3>
     <ng-template #benefitsInput>
       <div class="entry-rows">
         <div class="entry-row-item" *ngFor="let benefit of values.benefits; index as i">
-          <div style="display: flex; flex-direction: row; gap: 3px; padding-bottom: 3px">
-            <input [(ngModel)]="benefit.benefit" class="form-control" />
-            <option-gender-input [(ngModel)]="values.benefits[i].beneficiary"></option-gender-input>
-            <button mat-button color="primary" (click)="handleRemovingBenefits(i)">
-              <mat-icon>close</mat-icon>
-            </button>
+          <div class="benefit-container">
+            <input [(ngModel)]="benefit.benefit" class="form-control" style="flex: 1" />
+            <div style="min-width: 200px; display: flex; align-items: center; justify-content: center">
+              <option-gender-input [(ngModel)]="values.benefits[i].beneficiary"></option-gender-input>
+              <button mat-button color="primary" (click)="handleRemovingBenefits(i)">
+                <mat-icon>close</mat-icon>
+              </button>
+            </div>
           </div>
         </div>
         <!-- Only enable adding more benefits when previous are validated

diff --git a/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss b/apps/picsa-tools/option-tool/src/app/components/editor/editor.component.scss
@@ -1,6 +1,7 @@
 :host {
   display: block;
 }
+
 .editor-container {
   position: relative;
   padding-bottom: 2rem;
@@ -35,38 +36,46 @@ $container-border-radius: 16px;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  width: fit-content;
+  width: 100%;
+  max-width: 500px;
   position: relative;
   border-radius: $container-border-radius;
   min-width: 18rem;
   min-height: 18rem;
   margin-top: 1rem;
   box-shadow: 0px 5px 7px 0px rgba(0, 0, 0, 0.25);
+  @apply mx-auto;
   // Desktop layout - container moves along with stepper
-  @media only screen and (min-width: 768px) {
+  @screen md {
+    @apply mx-0;
     &[data-step='2'] {
-      left: 12%;
+      left: 110px;
     }
     &[data-step='3'] {
-      left: 24%;
+      left: 220px;
     }
     &[data-step='4'] {
-      left: 36%;
+      left: 330px;
     }
+    // Linear increment stops as getting to end of 500px width
     &[data-step='5'] {
-      left: calc(min(100vw - 4rem - 36rem, 48%)); // apply min sizing to prevent overflow off screen
+      left: 355px;
     }
     &[data-step='6'] {
-      left: calc(min(100vw - 4rem - 26rem, 60%));
+      left: 380px;
     }
     &[data-step='7'] {
-      left: calc(min(100vw - 4rem - 26rem, 72%));
+      left: 405px;
     }
     &[data-step='8'] {
-      left: calc(min(100vw - 4rem - 26rem, 84%));
+      left: 430px;
     }
   }
 }
+// mat-container
+.mat-horizontal-content-container {
+  @apply p-0 sm:py-6;
+}
 
 h3.StepTitle {
   width: -webkit-fill-available;
@@ -164,6 +173,16 @@ $entry-icon-size: 64px;
   border: 1px solid var(--color-primary);
 }
 
+.benefit-container {
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  padding-bottom: 4px;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
 // ***************************************************************************************
 // Inputs - General
 // ***************************************************************************************

diff --git a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.html b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.html
@@ -4,8 +4,8 @@
   </button>
 </div>
 <div class="page-content" [class.HideOverflow]="matStepperOpen">
-  <div style="overflow: auto; flex: 1" id="options">
-    <table mat-table [dataSource]="dbDataDocs" class="mat-elevation-z8">
+  <div class="table-container mat-elevation-z8" id="options">
+    <table mat-table [dataSource]="dbDataDocs">
       <!--- Note that these columns can be defined in any order.
           The actual rendered columns are set as a property on the row definition" -->
 
@@ -142,7 +142,7 @@
   </div>
   <div class="editor-popup slide-in" [class.active]="matStepperOpen">
     <div class="blurBackground"></div>
-    <div class="editor-container">
+    <div class="editor-content">
       <option-editor (dataTransfer)="onDataTransfer($event)" style="width: 100%"></option-editor>
     </div>
   </div>

diff --git a/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss b/apps/picsa-tools/option-tool/src/app/pages/home/home.component.scss
@@ -1,19 +1,28 @@
 :host {
   display: contents;
 }
+.table-container {
+  overflow: auto;
+  flex: 1;
+  @apply max-w-screen-lg;
+  // allow space for table box shadow
+  @apply sm:w-[calc(100%-16px)] sm:mx-auto sm:my-4;
+}
 // ************************************************************
 //  Table - General
 // ************************************************************
 
 table {
   border-collapse: collapse;
+  height: 100%;
 }
 
 th {
   border-right: 1px solid var(--color-light);
   border-left: 1px solid var(--color-light);
   border-bottom: none;
   padding: 8px;
+  text-align: center;
 }
 th.subheader {
   border-bottom: 2px solid var(--color-primary);
@@ -43,23 +52,23 @@ td.mdc-data-table__cell {
   position: fixed;
   z-index: 2;
   height: 100%;
+  width: 100%;
   top: 0;
   left: 0;
+  display: flex;
 }
-.editor-container {
-  height: 100%;
-  max-height: 750px;
-  background-color: white;
+.editor-content {
+  background: white;
+  position: relative;
   overflow: auto;
-  border-radius: 20px;
   justify-content: center;
   display: flex;
-  margin: 1rem;
+  height: 100%;
+  overflow: auto;
+  margin: auto;
+  @apply max-w-screen-md;
+  @apply sm:my-4 sm:p-2;
   z-index: 2;
-  position: absolute;
-  top: 2.5rem;
-  left: 1rem;
-  width: calc(100vw - 4rem);
 }
 .slide-in {
   transition: transform 0.3s ease-in-out;

diff --git a/libs/environments/src/version.ts b/libs/environments/src/version.ts
@@ -4,5 +4,5 @@ import packageJson from '../../../package.json';
 
 export const APP_VERSION = {
   number: packageJson.version,
-  date: '2024-10-15',
+  date: '2024-10-17',
 };
diff --git a/libs/theme/src/_overrides.scss b/libs/theme/src/_overrides.scss
@@ -132,6 +132,12 @@ mat-stepper.slim-headers {
     height: 48px;
   }
 }
+mat-stepper.responsive-content-padding {
+  .mat-horizontal-content-container {
+    // keep enough padding to see shadow
+    @apply p-2 sm:px-6 sm:pb-6;
+  }
+}
 
 // Allow use of primary color with selected value by custom `value-primary` class
 mat-select.value-primary {

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "picsa-apps",
-  "version": "3.48.1",
+  "version": "3.49.0",
   "license": "See LICENSE",
   "scripts": {
     "ng": "nx",