Merge branch 'master' into fix/data-items-order

packages/scripts/src/commands/app-data/convert/processors/flowParser/parsers/default.parser.ts

@@ -20,7 +20,7 @@ type IRowData = { type: string; name?: string; rows?: IRowData };
  * - Rewrite `_list` content as string array
  */
 export class DefaultParser<
-  FlowType extends FlowTypes.FlowTypeWithData = FlowTypes.FlowTypeWithData
+  FlowType extends FlowTypes.FlowTypeWithData = FlowTypes.FlowTypeWithData,
 > {
   activeDeployment = ActiveDeployment.get();
 
@@ -112,7 +112,11 @@ export class DefaultParser<
  * migrating deprecated columns, processing default values and self-references and handling translations
  */
 class RowProcessor {
-  constructor(public row: IRowData, public parent: DefaultParser, public defaultValues?: any) {}
+  constructor(
+    public row: IRowData,
+    public parent: DefaultParser,
+    public defaultValues?: any
+  ) {}
 
   public run() {
     this.processRowDefaultValues();

src/app/app.component.html

@@ -1,4 +1,4 @@
-<ion-app *ngIf="renderAppTemplates" contentId="main">
+<ion-app *ngIf="renderAppTemplates" contentId="main" [attr.data-platform]="platforms">
   <!-- Left Sidebar -->
   <ion-menu
     *ngIf="sideMenuDefaults.enabled"

src/app/app.component.ts

@@ -57,6 +57,13 @@ export class AppComponent {
   footerDefaults: IAppConfig["APP_FOOTER_DEFAULTS"];
   /** Track when app ready to render sidebar and route templates */
   public renderAppTemplates = false;
+  /**
+   * A space-separated list of values, hierarchically representing the current platform,
+   * e.g. on iPhone the value would be "mobile ios iphone".
+   * See https://ionicframework.com/docs/angular/platform#platforms-1
+   * Store as string to use with css [attribute~=value] selector as part of platform-specific overrides
+   * */
+  platforms: string;
 
   constructor(
     // 3rd Party Services
@@ -103,6 +110,7 @@ export class AppComponent {
 
   private async initializeApp() {
     this.platform.ready().then(async () => {
+      this.platforms = this.platform.platforms().join(" ");
       this.subscribeToAppConfigChanges();
       // ensure deployment field set correctly for use in any startup services or templates
       localStorage.setItem(this.appFields.DEPLOYMENT_NAME, this.DEPLOYMENT_NAME);

src/app/shared/components/template/components/navigation-bar/navigation-bar.component.scss

@@ -23,6 +23,7 @@ $navigation-bar-height: var(--navigation-bar-height);
       padding: var(--tiny-padding) 0;
       // Apply max-height to adapt to case where button has no text
       max-height: calc($navigation-bar-height - var(--large-padding));
+      // HACK: the width is set here to avoid a bug on iOS, see this PR: https://github.com/IDEMSInternational/parenting-app-ui/pull/2281/
       width: 100%;
 
       img {

src/global.scss

@@ -39,6 +39,9 @@
 @import "~nouislider/dist/nouislider.min.css";
 @import "~swiper/swiper.min.css";
 
+/* Platform-specific overrides */
+@import "./theme/overrides.ios.scss";
+
 /* Overrides for ionic components */
 ion-input {
   // do not apply underline when focused

src/theme/overrides.ios.scss

@@ -0,0 +1,17 @@
+/*
+* A bug on iOS (native capacitor and safari) causes some CSS rules to sporadically not be applied on some elements.
+* E.g. https://github.com/IDEMSInternational/parenting-app-ui/issues/2274
+* A workaround is to apply an empty transformation to the element (see, for example https://michaeluloth.com/css-translate-z/)
+*/
+@mixin force-gpu-acceleration {
+  -webkit-transform: translateZ(0);
+}
+
+ion-app[data-platform~="ios"] {
+  // popup component
+  .popup-backdrop {
+    .close-button {
+      @include force-gpu-acceleration;
+    }
+  }
+}