From 212bba2ea3848bd3a0375a7dcd99350b6f17907a Mon Sep 17 00:00:00 2001 From: Francesco Bozzotta <39646929+silicia-apps@users.noreply.github.com> Date: Fri, 3 May 2024 11:38:02 +0000 Subject: [PATCH] style: Update global.scss to include core CSS for Ionic components and 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 --- apps/demo/src/global.scss | 30 +++++++++++++-- apps/demo/src/index.html | 37 ++++++++++--------- apps/demo/src/polyfills.ts | 2 +- apps/demo/src/style.scss | 37 ------------------- .../lib/components/item/item.component.html | 24 +++++++++--- .../lib/components/list/list.component.html | 2 +- .../lib/components/page/page.component.html | 35 ++++++++++++++---- 7 files changed, 92 insertions(+), 75 deletions(-) delete mode 100644 apps/demo/src/style.scss diff --git a/apps/demo/src/global.scss b/apps/demo/src/global.scss index 4705b6d..e9780fd 100644 --- 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 index b79ff9d..afd25f7 100644 --- a/apps/demo/src/index.html +++ b/apps/demo/src/index.html @@ -1,26 +1,27 @@ + + + Ionic App - - - Ionic App + - + + + + - - - - + - - - - - - - - - - + + + + + + + diff --git a/apps/demo/src/polyfills.ts b/apps/demo/src/polyfills.ts index e2cc080..20d96cc 100644 --- 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 - */ + */ \ No newline at end of file diff --git a/apps/demo/src/style.scss b/apps/demo/src/style.scss deleted file mode 100644 index 9a80806..0000000 --- a/apps/demo/src/style.scss +++ /dev/null @@ -1,37 +0,0 @@ -/* - * App Global CSS - * ---------------------------------------------------------------------------- - * Put style rules here that you want to apply globally. These styles are for - * the entire app and not just one component. Additionally, this file can be - * used as an entry point to import other CSS/Sass files to be included in the - * output CSS. - * For more information on global stylesheets, visit the documentation: - * https://ionicframework.com/docs/layout/global-stylesheets - */ - -/* 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'; - -/* 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'; -@import '@ionic/angular/css/display.css'; - -/** - * Ionic Dark Palette - * ----------------------------------------------------- - * For more information, 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/libs/core/src/lib/components/item/item.component.html b/libs/core/src/lib/components/item/item.component.html index e1ab482..8d448f9 100644 --- a/libs/core/src/lib/components/item/item.component.html +++ b/libs/core/src/lib/components/item/item.component.html @@ -1,9 +1,12 @@ @if(this.leftMenuId) { - + " + [color]="item.value.color" + > @@ -21,16 +24,25 @@

{{ this.header | translate }}

{{ this.label | translate }}

- +
@if(this.rightMenuId) { - + " + [color]="item.value.color" + > } - \ No newline at end of file + diff --git a/libs/core/src/lib/components/list/list.component.html b/libs/core/src/lib/components/list/list.component.html index ebf4bb1..b996309 100644 --- 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" > - \ No newline at end of file + diff --git a/libs/core/src/lib/components/page/page.component.html b/libs/core/src/lib/components/page/page.component.html index f0a10c7..d79118b 100644 --- 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" > - + - {{ this.sioCorePagesComponentState.entities[this.id!].title! | translate }} + {{ this.sioCorePagesComponentState.entities[this.id!].title! | translate + }} @@ -26,9 +31,15 @@ - + - {{ this.sioCorePagesComponentState.entities[this.id!].title! | translate }} + {{ this.sioCorePagesComponentState.entities[this.id!].title! | + translate }}
@@ -36,7 +47,10 @@
-

{{ 'PAGE_COMPONENT_DEFAULT_1' | translate }} {{ this.sioCorePagesComponentState.entities[this.id!].title! | translate }}

+

+ {{ 'PAGE_COMPONENT_DEFAULT_1' | translate }} {{ + this.sioCorePagesComponentState.entities[this.id!].title! | translate }} +

{{ 'PAGE_COMPONENT_DEFAULT_2' | translate }}

{{ 'PAGE_COMPONENT_LINK' | translate }} @@ -53,15 +67,20 @@

{{ 'PAGE_COMPONENT_DEFAULT_1' | translate }} {{ this.sioCorePagesComponentSt
- +
- + - +