From e75a46633ca3685d6044eb9a8b2fd670f2cd030f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= Date: Wed, 22 Mar 2023 17:44:40 +0000 Subject: [PATCH] feat: dark theme --- src/app/app.component.html | 15 +++ src/app/modules/about/about-licenses.scss | 2 +- .../about/about-page/about-page-content.html | 4 +- .../modules/about/about-page/about-page.html | 2 +- .../modules/about/about-page/about-page.scss | 10 +- .../assessments/page/assessments-page.scss | 21 +-- .../modules/catalog/catalog.component.scss | 6 +- .../dashboard/dashboard.component.scss | 3 +- src/app/modules/data/data.module.ts | 2 + .../data/detail/data-detail-content.scss | 3 +- src/app/modules/data/detail/data-detail.scss | 12 ++ .../elements/favorite-button.component.html | 20 +-- .../elements/favorite-button.component.scss | 3 +- .../data/elements/title-card.component.html | 1 - .../data/elements/title-card.component.scss | 8 +- src/app/modules/data/list/data-list-item.scss | 6 - src/app/modules/data/list/search-page.html | 5 +- src/app/modules/data/list/search-page.scss | 2 +- .../dish/dish-characteristics.component.ts | 25 ++++ .../data/types/dish/dish-characteristics.html | 28 ++++ .../data/types/dish/dish-characteristics.scss | 38 ++++++ .../data/types/dish/dish-detail-content.html | 28 +--- .../data/types/dish/dish-detail-content.scss | 9 +- .../data/types/dish/dish-list-item.html | 13 +- .../data/types/event/event-list-item.html | 4 +- .../types/message/message-detail-content.html | 5 +- .../types/message/message-detail-content.scss | 29 +++-- .../place/place-detail-content.component.ts | 21 ++- .../types/place/place-detail-content.html | 3 +- .../types/place/place-list-item.component.ts | 5 +- .../data/types/place/place-list-item.html | 41 +++--- .../data/types/place/place-list-item.scss | 36 ++++++ src/app/modules/feedback/feedback-page.scss | 3 +- src/app/modules/map/page/map-page.scss | 12 +- src/app/modules/map/widget/map-widget.scss | 15 +++ .../menu/context/context-menu.component.ts | 2 +- .../modules/menu/navigation/navigation.scss | 2 +- src/app/modules/news/item/news-item.scss | 6 +- .../modules/profile/page/profile-page.html | 2 +- .../modules/profile/page/profile-page.scss | 8 +- .../page/components/calendar-component.scss | 10 +- .../page/grid/schedule-card.component.ts | 14 +- .../schedule/page/grid/schedule-card.html | 6 +- .../schedule/page/grid/schedule-card.scss | 68 +++------- .../schedule/page/grid/schedule-day.scss | 12 +- .../modules/settings/page/settings-page.html | 2 +- .../modules/settings/page/settings-page.scss | 3 +- src/app/util/section/section-link-card.html | 0 .../section/section-tail-prompt-card.html | 0 src/theme/color-processing.scss | 39 ++++++ src/theme/colors.scss | 52 ++++++++ src/theme/common/_helper.scss | 2 +- src/theme/common/_ion-content-parallax.scss | 4 +- src/theme/common/_ion-menu.scss | 18 +++ src/theme/common/_ion-searchbar.scss | 18 +++ src/theme/common/_leaflet-tile.scss | 25 ++++ src/theme/common/_typo.scss | 17 ++- src/theme/components/_card.scss | 4 +- src/theme/components/_image-dark.scss | 22 ++++ src/theme/util/_color-system.scss | 120 ++++++++++++++++++ src/theme/util/_dark.scss | 24 ++++ src/theme/variables.scss | 107 +--------------- 62 files changed, 688 insertions(+), 339 deletions(-) create mode 100644 src/app/modules/data/types/dish/dish-characteristics.component.ts create mode 100644 src/app/modules/data/types/dish/dish-characteristics.html create mode 100644 src/app/modules/data/types/dish/dish-characteristics.scss create mode 100644 src/app/modules/data/types/place/place-list-item.scss create mode 100644 src/app/util/section/section-link-card.html create mode 100644 src/app/util/section/section-tail-prompt-card.html create mode 100644 src/theme/color-processing.scss create mode 100644 src/theme/colors.scss create mode 100644 src/theme/common/_ion-menu.scss create mode 100644 src/theme/common/_ion-searchbar.scss create mode 100644 src/theme/common/_leaflet-tile.scss create mode 100644 src/theme/components/_image-dark.scss create mode 100644 src/theme/util/_color-system.scss create mode 100644 src/theme/util/_dark.scss diff --git a/src/app/app.component.html b/src/app/app.component.html index b7d2183c..95ba70ce 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,3 +1,18 @@ + + diff --git a/src/app/modules/about/about-licenses.scss b/src/app/modules/about/about-licenses.scss index 00c9e63c..9af68cb4 100644 --- a/src/app/modules/about/about-licenses.scss +++ b/src/app/modules/about/about-licenses.scss @@ -22,7 +22,7 @@ cdk-virtual-scroll-viewport { width: 100%; } -::ng-deep { +:host ::ng-deep { .cdk-virtual-scroll-content-wrapper { width: 100%; } diff --git a/src/app/modules/about/about-page/about-page-content.html b/src/app/modules/about/about-page/about-page-content.html index 936cbd65..b2e56d95 100644 --- a/src/app/modules/about/about-page/about-page-content.html +++ b/src/app/modules/about/about-page/about-page-content.html @@ -1,5 +1,5 @@ diff --git a/src/app/modules/data/elements/favorite-button.component.scss b/src/app/modules/data/elements/favorite-button.component.scss index d8997b9f..4810f30a 100644 --- a/src/app/modules/data/elements/favorite-button.component.scss +++ b/src/app/modules/data/elements/favorite-button.component.scss @@ -1,5 +1,5 @@ /*! - * Copyright (C) 2022 StApps + * Copyright (C) 2023 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. @@ -27,6 +27,7 @@ } .selected { + // TODO color: #fbc02d; } } diff --git a/src/app/modules/data/elements/title-card.component.html b/src/app/modules/data/elements/title-card.component.html index d3ecafdb..aab97c59 100644 --- a/src/app/modules/data/elements/title-card.component.html +++ b/src/app/modules/data/elements/title-card.component.html @@ -38,7 +38,6 @@ diff --git a/src/app/modules/data/elements/title-card.component.scss b/src/app/modules/data/elements/title-card.component.scss index c58e09d4..348beb30 100644 --- a/src/app/modules/data/elements/title-card.component.scss +++ b/src/app/modules/data/elements/title-card.component.scss @@ -39,10 +39,14 @@ ion-card { padding: 0 0 var(--header-spacing-bottom); .description * { - color: var(--ion-color-light); + color: var(--ion-color-primary-contrast); } .openingHours { - color: var(--ion-color-light); + color: var(--ion-color-primary-contrast); } } + + ion-button { + --color: var(--ion-color-primary-contrast); + } } diff --git a/src/app/modules/data/list/data-list-item.scss b/src/app/modules/data/list/data-list-item.scss index 714f93af..7a484fdd 100644 --- a/src/app/modules/data/list/data-list-item.scss +++ b/src/app/modules/data/list/data-list-item.scss @@ -13,7 +13,6 @@ * this program. If not, see . */ @import 'src/theme/util/_mixins.scss'; -@import 'src/theme/common/_helper.scss'; :host { display: block; @@ -50,11 +49,6 @@ ion-item { flex-direction: column; } } - ::ng-deep { - ion-note { - @extend %horizontal-list; - } - } } :host.square ::ng-deep { diff --git a/src/app/modules/data/list/search-page.html b/src/app/modules/data/list/search-page.html index 1ae5bc0d..93c7362c 100644 --- a/src/app/modules/data/list/search-page.html +++ b/src/app/modules/data/list/search-page.html @@ -56,7 +56,10 @@ -
+
{{ 'search.instruction' | translate }} diff --git a/src/app/modules/data/list/search-page.scss b/src/app/modules/data/list/search-page.scss index 78d6f4ca..66dee134 100644 --- a/src/app/modules/data/list/search-page.scss +++ b/src/app/modules/data/list/search-page.scss @@ -37,7 +37,7 @@ ion-toolbar:first-of-type { } ion-content { - --background: var(--ion-color-light); + --background: var(--ion-background-color); } .content > div { diff --git a/src/app/modules/data/types/dish/dish-characteristics.component.ts b/src/app/modules/data/types/dish/dish-characteristics.component.ts new file mode 100644 index 00000000..1ba54039 --- /dev/null +++ b/src/app/modules/data/types/dish/dish-characteristics.component.ts @@ -0,0 +1,25 @@ +/* + * Copyright (C) 2023 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 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 . + */ +import {Component, Input} from '@angular/core'; +import {SCDish} from '@openstapps/core'; + +@Component({ + selector: 'stapps-dish-characteristics', + templateUrl: 'dish-characteristics.html', + styleUrls: ['dish-characteristics.scss'], +}) +export class DishCharacteristicsComponent { + @Input() item: SCDish; +} diff --git a/src/app/modules/data/types/dish/dish-characteristics.html b/src/app/modules/data/types/dish/dish-characteristics.html new file mode 100644 index 00000000..e890ab41 --- /dev/null +++ b/src/app/modules/data/types/dish/dish-characteristics.html @@ -0,0 +1,28 @@ + + + + + + + + + + {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} + + diff --git a/src/app/modules/data/types/dish/dish-characteristics.scss b/src/app/modules/data/types/dish/dish-characteristics.scss new file mode 100644 index 00000000..cf013fb7 --- /dev/null +++ b/src/app/modules/data/types/dish/dish-characteristics.scss @@ -0,0 +1,38 @@ +/*! + * Copyright (C) 2023 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 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 . + */ +ion-note { + list-style: none; + display: flex; + flex-direction: row-reverse; + justify-content: start; +} + +abbr { + width: 16px; + aspect-ratio: 1; + + background: var(--ion-color-medium); + + mask-image: var(--background-url); + mask-repeat: no-repeat; + mask-position: center; + mask-size: contain; + mask-mode: alpha; + + + ion-label::after { + content: '•'; + margin-inline: var(--spacing-xs); + } +} diff --git a/src/app/modules/data/types/dish/dish-detail-content.html b/src/app/modules/data/types/dish/dish-detail-content.html index ee1c1221..ec1305bc 100644 --- a/src/app/modules/data/types/dish/dish-detail-content.html +++ b/src/app/modules/data/types/dish/dish-detail-content.html @@ -13,31 +13,7 @@ ~ this program. If not, see . --> - - - - - - {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} - - - - - - -
    -
  • - - - -
    • -
- - - - - - + diff --git a/src/app/modules/data/types/dish/dish-detail-content.scss b/src/app/modules/data/types/dish/dish-detail-content.scss index 85527a04..7c94e516 100644 --- a/src/app/modules/data/types/dish/dish-detail-content.scss +++ b/src/app/modules/data/types/dish/dish-detail-content.scss @@ -12,10 +12,7 @@ * You should have received a copy of the GNU General Public License along with * this program. If not, see . */ - -@import 'src/theme/common/_helper.scss'; -.vertical-list { - ul li img { - filter: unset; - } +stapps-dish-characteristics { + margin: var(--spacing-lg); + margin-block-end: var(--spacing-sm); } diff --git a/src/app/modules/data/types/dish/dish-list-item.html b/src/app/modules/data/types/dish/dish-list-item.html index 5567c6e5..7cb194c8 100644 --- a/src/app/modules/data/types/dish/dish-list-item.html +++ b/src/app/modules/data/types/dish/dish-list-item.html @@ -21,18 +21,7 @@

{{ 'description' | thingTranslate: item }}

- -
    -
  • - {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }} -
    • -
  • - - - -
    • -
- +
diff --git a/src/app/modules/data/types/event/event-list-item.html b/src/app/modules/data/types/event/event-list-item.html index 3815915e..b11fc91e 100644 --- a/src/app/modules/data/types/event/event-list-item.html +++ b/src/app/modules/data/types/event/event-list-item.html @@ -24,9 +24,9 @@

{{ 'name' | thingTranslate: item.academicTerms[0] }}

- {{ 'type' | thingTranslate: item }} + {{ 'type' | thingTranslate: item | titlecase }} - {{ 'categories' | thingTranslate: item | join: ', ' }} + {{ 'categories' | thingTranslate: item | join: ', ' | titlecase }}
diff --git a/src/app/modules/data/types/message/message-detail-content.html b/src/app/modules/data/types/message/message-detail-content.html index d285968e..898be3ff 100644 --- a/src/app/modules/data/types/message/message-detail-content.html +++ b/src/app/modules/data/types/message/message-detail-content.html @@ -1,5 +1,5 @@