diff --git a/icons.config.ts b/icons.config.ts index 2f8cf38b..0ba30ecc 100644 --- a/icons.config.ts +++ b/icons.config.ts @@ -1,16 +1,16 @@ /* * Copyright (C) 2022 StApps - * This program is free software: you can redistribute it and/or modify it - * under the terms of the GNU General Public License as published by the Free - * Software Foundation, version 3. + * This program is free software: you can redistribute it and/or modify it + * under the terms of the GNU General Public License as published by the Free + * Software Foundation, version 3. * - * This program is distributed in the hope that it will be useful, but WITHOUT - * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or - * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for - * more details. + * This program is distributed in the hope that it will be useful, but WITHOUT + * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or + * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for + * more details. * - * You should have received a copy of the GNU General Public License along with - * this program. If not, see . + * You should have received a copy of the GNU General Public License along with + * this program. If not, see . */ import type {IconConfig} from './scripts/icon-config'; diff --git a/scripts/minify-icon-font.ts b/scripts/minify-icon-font.ts index bce8e4d9..db9099cf 100644 --- a/scripts/minify-icon-font.ts +++ b/scripts/minify-icon-font.ts @@ -86,6 +86,7 @@ async function minifyIconFont() { glyphs.push(...codePoints); } + glyphs.sort(); const pythonPath = `"${await run('npm config get python')}"`; console.log(`Using python from npm config ${pythonPath}`); diff --git a/src/app/modules/menu/navigation/navigation.html b/src/app/modules/menu/navigation/navigation.html index 7f66186c..8e574b24 100644 --- a/src/app/modules/menu/navigation/navigation.html +++ b/src/app/modules/menu/navigation/navigation.html @@ -13,7 +13,7 @@ ~ this program. If not, see . --> - + - + diff --git a/src/app/modules/menu/navigation/navigation.scss b/src/app/modules/menu/navigation/navigation.scss index 3765ebb0..1fe972ad 100644 --- a/src/app/modules/menu/navigation/navigation.scss +++ b/src/app/modules/menu/navigation/navigation.scss @@ -15,8 +15,15 @@ @import '../../../../theme/util/mixins'; +stapps-navigation-tabs { + @include ion-lg-up { + display: none; + } +} + :host { ion-split-pane { + --side-max-width: 256px; margin-bottom: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom)); @include phoneLandscape { @@ -25,6 +32,11 @@ @include ion-md-up { margin-bottom: 0; + margin-left: var(--navigation-rail-width); + } + + @include ion-lg-up { + margin-left: 0; } } diff --git a/src/app/modules/menu/navigation/tabs.component.scss b/src/app/modules/menu/navigation/tabs.component.scss index e898b864..d6664e02 100644 --- a/src/app/modules/menu/navigation/tabs.component.scss +++ b/src/app/modules/menu/navigation/tabs.component.scss @@ -12,6 +12,7 @@ * You should have received a copy of the GNU General Public License along with * this program. If not, see . */ +@import '../../../../theme/util/mixins'; :host { position: absolute; @@ -19,51 +20,41 @@ left: 0; right: 0; z-index: 100; + + .menu-button { + display: none; + } + + @include ion-md-up { + right: unset; + top: 0; + + .menu-button { + display: revert; + position: absolute; + top: 0; + left: 0; + right: 0; + margin-top: var(--spacing-xxl); + } + + ion-tab-bar { + border-top: unset; + position: relative; + border-right: var(--border); + flex-direction: column; + gap: var(--spacing-md); + width: var(--navigation-rail-width); + height: 100vh; + } + + ion-tab-button { + flex: unset; + height: var(--navigation-rail-item-height); + } + } } .tab-selected ::ng-deep stapps-icon { --fill: 1; } - -/*:host { - display: flex; - flex-direction: row; - background: var(--ion-color-primary-contrast); - justify-content: space-between; - position: absolute; - bottom: 0; - left: 0; - right: 0; - max-height: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom)); - padding-bottom: env(safe-area-inset-bottom); - - a { - display: flex; - flex-direction: column; - flex: 1 1 25%; - align-items: center; - padding: var(--spacing-xs); - - color: var(--ion-color-medium); - background: var(--ion-color-primary-contrast); - text-decoration: none; - - &.active-root-link { - color: var(--ion-color-medium-contrast); - - ion-icon ::ng-deep stapps-icon { - --fill: 1; - } - } - - ion-icon { - font-size: 28px; - } - - ion-label { - text-transform: uppercase; - font-size: var(--font-size-xs); - font-weight: var(--font-weight-semi-bold); - } - } -}*/ diff --git a/src/app/modules/menu/navigation/tabs.template.html b/src/app/modules/menu/navigation/tabs.template.html index a93a7492..92f0dd8f 100644 --- a/src/app/modules/menu/navigation/tabs.template.html +++ b/src/app/modules/menu/navigation/tabs.template.html @@ -34,6 +34,11 @@ --> + + + + +