style: Update global.scss to include core CSS for Ionic components an…

…d optional CSS utils, update index.html to modify meta viewport tag, remove unused style.scss file and its contents and update item.component.html and page.component.html to improve code formatting and structure
silicia-apps · May 3, 2024 · 212bba2 · 212bba2
1 parent d299f09
commit 212bba2
Show file tree

Hide file tree

Showing 7 changed files with 92 additions and 75 deletions.
diff --git a/apps/demo/src/global.scss b/apps/demo/src/global.scss
@@ -9,7 +9,29 @@
  * https://ionicframework.com/docs/layout/global-stylesheets
  */
 
-/* (Optional) This is added to prevent the flashing that happens when toggling between palettes */
-ion-item {
-  --transition: none;
-}
+/* Core CSS required for Ionic components to work properly */
+@import '@ionic/angular/css/core.css';
+
+/* Basic CSS for apps built with Ionic */
+@import '@ionic/angular/css/normalize.css';
+@import '@ionic/angular/css/structure.css';
+@import '@ionic/angular/css/typography.css';
+@import '@ionic/angular/css/display.css';
+
+/* Optional CSS utils that can be commented out */
+@import '@ionic/angular/css/padding.css';
+@import '@ionic/angular/css/float-elements.css';
+@import '@ionic/angular/css/text-alignment.css';
+@import '@ionic/angular/css/text-transformation.css';
+@import '@ionic/angular/css/flex-utils.css';
+
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import "@ionic/angular/css/palettes/dark.always.css"; */
+// @import '@ionic/angular/css/palettes/dark.class.css';
+@import '@ionic/angular/css/palettes/dark.system.css';
diff --git a/apps/demo/src/index.html b/apps/demo/src/index.html
@@ -1,26 +1,27 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Ionic App</title>
 
-<head>
-  <meta charset="utf-8" />
-  <title>Ionic App</title>
+    <base href="/" />
 
-  <base href="/" />
+    <meta name="color-scheme" content="light dark" />
+    <meta
+      name="viewport"
+      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
+    />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="msapplication-tap-highlight" content="no" />
 
-  <meta name="color-scheme" content="light dark" />
-  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-  <meta name="format-detection" content="telephone=no" />
-  <meta name="msapplication-tap-highlight" content="no" />
+    <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
 
-  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />
-
-  <!-- add to homescreen for ios -->
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-</head>
-
-<body>
-  <sio-root></sio-root>
-</body>
+    <!-- add to homescreen for ios -->
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+  </head>
 
+  <body>
+    <sio-root></sio-root>
+  </body>
 </html>
diff --git a/apps/demo/src/polyfills.ts b/apps/demo/src/polyfills.ts
@@ -52,4 +52,4 @@ import 'zone.js';  // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
- */
+ */
diff --git a/apps/demo/src/style.scss b/apps/demo/src/style.scss
diff --git a/libs/core/src/lib/components/item/item.component.html b/libs/core/src/lib/components/item/item.component.html
@@ -1,9 +1,12 @@
 <ion-item-sliding [disabled]="this.disabled" #slidingItem>
   @if(this.leftMenuId) {
   <ion-item-options side="start">
-    <ion-item-option *ngFor="
+    <ion-item-option
+      *ngFor="
           let item of this.sioCoreLeftMenuState?.items | keyvalue;
-        " [color]="item.value.color">
+        "
+      [color]="item.value.color"
+    >
       <ion-icon slot="icon-only" [name]="item.value.icon"></ion-icon>
     </ion-item-option>
   </ion-item-options>
@@ -21,16 +24,25 @@ <h3>{{ this.header | translate }}</h3>
       <p>{{ this.label | translate }}</p>
     </ion-label>
     <div class="metadata-end-wrapper" slot="end">
-      <sio-button clear round display_icon="only" size="small" icon="ellipsis-vertical"></sio-button>
+      <sio-button
+        clear
+        round
+        display_icon="only"
+        size="small"
+        icon="ellipsis-vertical"
+      ></sio-button>
     </div>
   </ion-item>
   @if(this.rightMenuId) {
   <ion-item-options side="end">
-    <ion-item-option *ngFor="
+    <ion-item-option
+      *ngFor="
           let item of this.sioCoreRightMenuState?.items | keyvalue;
-        " [color]="item.value.color">
+        "
+      [color]="item.value.color"
+    >
       <ion-icon slot="icon-only" [name]="item.value.icon"></ion-icon>
     </ion-item-option>
   </ion-item-options>
   }
-</ion-item-sliding>
+</ion-item-sliding>
diff --git a/libs/core/src/lib/components/list/list.component.html b/libs/core/src/lib/components/list/list.component.html
@@ -11,4 +11,4 @@
     [leftMenuId]="this.leftMenuId"
   >
   </sio-item>
-</ion-list>
+</ion-list>
diff --git a/libs/core/src/lib/components/page/page.component.html b/libs/core/src/lib/components/page/page.component.html
@@ -4,14 +4,19 @@
   [translucent]="true"
   class="ion-no-border"
 >
-  <ion-toolbar [color]="this.sioCorePagesComponentState.entities[this.id!].color!">
+  <ion-toolbar
+    [color]="this.sioCorePagesComponentState.entities[this.id!].color!"
+  >
     <ion-buttons slot="start">
       <ng-container>
         <ion-menu-button menu="start"></ion-menu-button>
         <ion-back-button *ngIf="this.back"></ion-back-button>
       </ng-container>
     </ion-buttons>
-    <ion-title>{{ this.sioCorePagesComponentState.entities[this.id!].title! | translate }}</ion-title>
+    <ion-title
+      >{{ this.sioCorePagesComponentState.entities[this.id!].title! | translate
+      }}</ion-title
+    >
     <ion-buttons slot="end">
       <ng-content select="[slot='end']"> </ng-content>
     </ion-buttons>
@@ -26,17 +31,26 @@
   </ion-toolbar>
 </ion-header>
 <ion-content [fullscreen]="true" class="ion-padding">
-  <ion-header *ngIf="this.sioCorePagesComponentState.entities![this.id!]?.toolbar!" collapse="condense">
+  <ion-header
+    *ngIf="this.sioCorePagesComponentState.entities![this.id!]?.toolbar!"
+    collapse="condense"
+  >
     <ion-toolbar>
-      <ion-title size="large">{{ this.sioCorePagesComponentState.entities[this.id!].title! | translate }}</ion-title>
+      <ion-title size="large"
+        >{{ this.sioCorePagesComponentState.entities[this.id!].title! |
+        translate }}</ion-title
+      >
     </ion-toolbar>
   </ion-header>
   <div #content>
     <ng-content></ng-content>
   </div>
   <ng-container *ngIf="!content.hasChildNodes()">
     <div id="container">
-      <h1>{{ 'PAGE_COMPONENT_DEFAULT_1' | translate }} {{ this.sioCorePagesComponentState.entities[this.id!].title! | translate }}</h1>
+      <h1>
+        {{ 'PAGE_COMPONENT_DEFAULT_1' | translate }} {{
+        this.sioCorePagesComponentState.entities[this.id!].title! | translate }}
+      </h1>
       <strong>{{ 'PAGE_COMPONENT_DEFAULT_2' | translate }}</strong>
       <p>
         {{ 'PAGE_COMPONENT_LINK' | translate }}
@@ -53,15 +67,20 @@ <h1>{{ 'PAGE_COMPONENT_DEFAULT_1' | translate }} {{ this.sioCorePagesComponentSt
 
 <ion-footer>
   <div #footer>
-  <ng-content select="[slot='footer']"></ng-content>
+    <ng-content select="[slot='footer']"></ng-content>
   </div>
   <ng-container *ngIf="!footer.hasChildNodes()">
     <ion-fab slot="footer" vertical="bottom" horizontal="end">
       <sio-button type="fab" icon="add"></sio-button>
       <ion-fab-list side="top">
-        <sio-button type="fab" icon="logo-euro" size="small" upload ></sio-button>
+        <sio-button
+          type="fab"
+          icon="logo-euro"
+          size="small"
+          upload
+        ></sio-button>
         <!--// <sio-button type="fab" icon="notifications" size="small"></sio-button> //-->
-        <sio-button type="fab" icon="car" size="small" upload ></sio-button>
+        <sio-button type="fab" icon="car" size="small" upload></sio-button>
       </ion-fab-list>
     </ion-fab>
   </ng-container>
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,4 +52,4 @@ import 'zone.js'; // Included with Angular CLI. @@
     /***************************************************************************************************
      * APPLICATION IMPORTS
-     */
+     */