diff --git a/src/colors.scss b/src/_additional-colors.scss similarity index 57% rename from src/colors.scss rename to src/_additional-colors.scss index 4e490b36..481e6edb 100644 --- a/src/colors.scss +++ b/src/_additional-colors.scss @@ -5,6 +5,7 @@ $white: #fff; $gray-light: #f4f4f4; $gray-medium: #cacaca; $gray-dark: #545454; +$gray-light-alt: #e0e0e0; $primary-dark: #032850; $primary-default: #003b7c; @@ -28,3 +29,18 @@ $accent-alert: #ec4a70; $red: #e73445; $lila: #7f6fee; +$green-dark: #43a047; +$green-light: #e8f5e9; + +$chip-group-oer: #d6a6d6; +$chip-group-type: #a6c0d6; +$chip-group-discipline: #a6d6ae; +$chip-group-educationalContext: #d6a6a6; +$chip-group-intendedEndUserRole: #d3d6a6; +$chip-group-learningResourceType: #d6c1a6; +$chip-group-source: #d0a6d6; + +$icon-green: #11612d; +$icon-orange: #fab835; +$icon-red: #e73446; +$icon-gray: #383838; diff --git a/src/_custom-theme.scss b/src/_custom-theme.scss new file mode 100644 index 00000000..a265735e --- /dev/null +++ b/src/_custom-theme.scss @@ -0,0 +1,239 @@ +// This file was generated by running 'ng generate @angular/material:theme-color'. +// Proceed with caution if making changes to this file. +// Note: Color palettes are generated from primary: #003B7C, tertiary: #003B7C, neutral: #CACACA + +@use 'sass:color'; +@use 'sass:map'; +@use '@angular/material' as mat; + +$primary: #003b7c; +$primary-dark: #032850; // alternative for: color.scale($primary, $lightness: -(100% / 40) * 15), + +// Adjustments: +// * entire primary + primary: 25, 40 +// * neutral: 35 (#515353), 80 (#c6c6c6), 95 (#eef0fd), 98 (#f9f9ff), 99 (#fdfbff) +$_palettes: ( + primary: ( + 0: #000000, + 10: color.scale($primary, $lightness: - (100% / 40) * 30), + 20: color.scale($primary, $lightness: - (100% / 40) * 20), + 25: $primary-dark, + 30: color.scale($primary, $lightness: - (100% / 40) * 10), + 35: color.scale($primary, $lightness: - (100% / 40) * 5), + 40: $primary, + 50: color.scale($primary, $lightness: (100% / 60) * 10), + 60: color.scale($primary, $lightness: (100% / 60) * 20), + 70: color.scale($primary, $lightness: (100% / 60) * 30), + 80: color.scale($primary, $lightness: (100% / 60) * 40), + 90: color.scale($primary, $lightness: (100% / 60) * 50), + 95: color.scale($primary, $lightness: (100% / 60) * 55), + 98: color.scale($primary, $lightness: (100% / 60) * 58), + 99: color.scale($primary, $lightness: (100% / 60) * 59), + 100: #ffffff, + ), + secondary: ( + 0: #000000, + 10: #0c1b34, + 20: #22304a, + 25: #2e3c55, + 30: #394761, + 35: #45536e, + 40: #515f7a, + 50: #697794, + 60: #8391af, + 70: #9dabca, + 80: #b9c7e7, + 90: #d7e3ff, + 95: #ecf0ff, + 98: #f9f9ff, + 99: #fdfbff, + 100: #ffffff, + ), + tertiary: ( + 0: #000000, + 10: #001b3f, + 20: #002f65, + 25: #003a7a, + 30: #154687, + 35: #255293, + 40: #345ea0, + 50: #4f77bb, + 60: #6991d7, + 70: #84acf3, + 80: #abc7ff, + 90: #d7e3ff, + 95: #ecf0ff, + 98: #f9f9ff, + 99: #fdfbff, + 100: #ffffff, + ), + neutral: ( + 0: #000000, + 10: #1a1c1c, + 20: #2f3131, + 25: #3a3c3c, + 30: #464747, + 35: #545454, + 40: #5d5e5f, + 50: #767777, + 60: #909191, + 70: #ababab, + 80: #cacaca, + 90: #e3e2e2, + 95: #f1f0f0, + 98: #faf9f9, + 99: #f4f4f4, + 100: #ffffff, + 4: #0d0e0f, + 6: #121414, + 12: #1e2020, + 17: #292a2a, + 22: #333535, + 24: #38393a, + 87: #dadada, + 92: #e8e8e8, + 94: #eeeeee, + 96: #f4f3f3, + ), + neutral-variant: ( + 0: #000000, + 10: #181c24, + 20: #2c3039, + 25: #373b45, + 30: #434750, + 35: #4e525c, + 40: #5a5e68, + 50: #737781, + 60: #8d909b, + 70: #a8abb6, + 80: #c3c6d2, + 90: #dfe2ee, + 95: #ececec, + 98: #f9f9ff, + 99: #fefefe, + 100: #ffffff, + ), + error: ( + 0: #000000, + 10: #410002, + 20: #690005, + 25: #7e0007, + 30: #93000a, + 35: #a80710, + 40: #ba1a1a, + 50: #de3730, + 60: #ff5449, + 70: #ff897d, + 80: #ffb4ab, + 90: #ffdad6, + 95: #ffedea, + 98: #fff8f7, + 99: #fffbff, + 100: #ffffff, + ), +); + +$_rest: ( + secondary: map.get($_palettes, secondary), + neutral: map.get($_palettes, neutral), + neutral-variant: map.get($_palettes, neutral-variant), + error: map.get($_palettes, error), +); + +$primary-palette: map.merge(map.get($_palettes, primary), $_rest); +$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest); + +@function _high-contrast-value($light, $dark, $theme-type) { + @if ($theme-type == light) { + @return $light; + } + @if ($theme-type == dark) { + @return $dark; + } + @if ($theme-type == color-scheme) { + @return light-dark(#{$light}, #{$dark}); + } + + @error 'Unknown theme-type #{$theme-type}. Expected light, dark, or color-scheme'; +} + +@mixin high-contrast-overrides($theme-type) { + @include mat.theme-overrides( + ( + primary: _high-contrast-value(#002654, #ebf0ff, $theme-type), + on-primary: _high-contrast-value(#ffffff, #000000, $theme-type), + primary-container: _high-contrast-value(#003b7c, #a4c3ff, $theme-type), + on-primary-container: _high-contrast-value(#ffffff, #000b21, $theme-type), + inverse-primary: _high-contrast-value(#abc7ff, #174788, $theme-type), + primary-fixed: _high-contrast-value(#194889, #d7e3ff, $theme-type), + primary-fixed-dim: _high-contrast-value(#00316a, #abc7ff, $theme-type), + on-primary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type), + on-primary-fixed-variant: _high-contrast-value(#ffffff, #00102c, $theme-type), + secondary: _high-contrast-value(#1e2c45, #ebf0ff, $theme-type), + on-secondary: _high-contrast-value(#ffffff, #000000, $theme-type), + secondary-container: _high-contrast-value(#3c4964, #b5c3e3, $theme-type), + on-secondary-container: _high-contrast-value(#ffffff, #000b21, $theme-type), + secondary-fixed: _high-contrast-value(#3c4964, #d7e3ff, $theme-type), + secondary-fixed-dim: _high-contrast-value(#25334c, #b9c7e7, $theme-type), + on-secondary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type), + on-secondary-fixed-variant: _high-contrast-value(#ffffff, #021129, $theme-type), + tertiary: _high-contrast-value(#002654, #ebf0ff, $theme-type), + on-tertiary: _high-contrast-value(#ffffff, #000000, $theme-type), + tertiary-container: _high-contrast-value(#003b7c, #a4c3ff, $theme-type), + on-tertiary-container: _high-contrast-value(#ffffff, #000b21, $theme-type), + tertiary-fixed: _high-contrast-value(#194889, #d7e3ff, $theme-type), + tertiary-fixed-dim: _high-contrast-value(#00316a, #abc7ff, $theme-type), + on-tertiary-fixed: _high-contrast-value(#ffffff, #000000, $theme-type), + on-tertiary-fixed-variant: _high-contrast-value(#ffffff, #00102c, $theme-type), + background: _high-contrast-value(#faf9f9, #121414, $theme-type), + on-background: _high-contrast-value(#1a1c1c, #e3e2e2, $theme-type), + surface: _high-contrast-value(#faf9f9, #121414, $theme-type), + surface-dim: _high-contrast-value(#b8b9b9, #121414, $theme-type), + surface-bright: _high-contrast-value(#faf9f9, #4f5050, $theme-type), + surface-container-lowest: _high-contrast-value(#ffffff, #000000, $theme-type), + surface-container: _high-contrast-value(#e3e2e2, #2f3131, $theme-type), + surface-container-high: _high-contrast-value(#d4d4d4, #3a3c3c, $theme-type), + surface-container-highest: _high-contrast-value(#c6c6c6, #464747, $theme-type), + on-surface: _high-contrast-value(#000000, #ffffff, $theme-type), + shadow: _high-contrast-value(#000000, #000000, $theme-type), + scrim: _high-contrast-value(#000000, #000000, $theme-type), + surface-tint: _high-contrast-value(#345ea0, #abc7ff, $theme-type), + inverse-surface: _high-contrast-value(#2f3131, #e3e2e2, $theme-type), + inverse-on-surface: _high-contrast-value(#ffffff, #000000, $theme-type), + outline: _high-contrast-value(#282c35, #edeffc, $theme-type), + outline-variant: _high-contrast-value(#454953, #bfc2ce, $theme-type), + error: _high-contrast-value(#600004, #ffece9, $theme-type), + on-error: _high-contrast-value(#ffffff, #000000, $theme-type), + error-container: _high-contrast-value(#98000a, #ffaea4, $theme-type), + on-error-container: _high-contrast-value(#ffffff, #220001, $theme-type), + surface-variant: _high-contrast-value(#dfe2ee, #434750, $theme-type), + on-surface-variant: _high-contrast-value(#000000, #ffffff, $theme-type), + ) + ); +} + +$light-theme: mat.define-theme( + ( + color: ( + theme-type: light, + primary: $primary-palette, + tertiary: $tertiary-palette, + ), + density: ( + scale: -1, + ), + ) +); + +$dark-theme: mat.define-theme( + ( + color: ( + theme-type: dark, + primary: $primary-palette, + tertiary: $tertiary-palette, + ), + density: ( + scale: -1, + ), + ) +); diff --git a/src/angular-material-overrides.theme.scss b/src/angular-material-overrides.theme.scss index 09c59202..dd588745 100644 --- a/src/angular-material-overrides.theme.scss +++ b/src/angular-material-overrides.theme.scss @@ -1,27 +1,111 @@ @use '@angular/material' as mat; +@import 'additional-colors'; + +// global overrides @mixin angular-material-theme-overrides($theme) { - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); - $primary: map-get($theme, primary); + // overwrite variables + // badge background-color + --mat-badge-background-color: #{$pink-default}; - .mat-mdc-tooltip { - background: mat.m2-get-color-from-palette($background, tooltip); - border-radius: 3px; + // overwrite border radius for template page + app-template { + --mdc-fab-small-container-shape: 4px; } - .slick-prev::before, - .slick-next::before { - color: mat.m2-get-color-from-palette($foreground, text); + // overwrite chips default color, background-color + radius for search-field component + suggestion-card dropdown + app-search-field, + .suggestion-card { + // neutral-variant, 30 is equal to on-surface-variant that is used as the chip text color + // the color should not change in dark mode + --mdc-chip-label-text-color: #{mat.get-theme-color($theme, neutral-variant, 30)}; + --mdc-chip-with-trailing-icon-trailing-icon-color: #{mat.get-theme-color( + $theme, + neutral-variant, + 30 + )}; + --mdc-chip-elevated-container-color: #{$gray-light-alt}; + --mdc-chip-container-shape-radius: 16px; + + // TODO: Replace static colors + .mat-mdc-chip.chip-group-oer { + background-color: #{$chip-group-oer}; + } + .mat-mdc-chip.chip-group-type { + background-color: #{$chip-group-type}; + } + .mat-mdc-chip.chip-group-discipline { + background-color: #{$chip-group-discipline}; + } + .mat-mdc-chip.chip-group-educationalContext { + background-color: #{$chip-group-educationalContext}; + } + .mat-mdc-chip.chip-group-intendedEndUserRole { + background-color: #{$chip-group-intendedEndUserRole}; + } + .mat-mdc-chip.chip-group-learningResourceType { + background-color: #{$chip-group-learningResourceType}; + } + .mat-mdc-chip.chip-group-source { + background-color: #{$chip-group-source}; + } } - .app-backdrop { - background: mat.m2-get-color-from-palette($background, background, 0.9); + // overwrite suggestion dropdown background-color + .suggestion-card { + @if mat.get-theme-type($theme) == light { + background-color: mat.get-theme-color($theme, surface); + } @else { + background-color: mat.get-theme-color($theme, surface-container); + } } - // the padding of the mat-mdc-dialog-actions is not set properly - .mat-mdc-dialog-actions { - --mat-dialog-actions-padding: var(--mat-dialog-content-padding); + //--mdc-switch-unselected-icon-color: #EC4A70; + + // use roles to retrieve colors, i.e., primary or on-primary + // reference for roles: https://material-foundation.github.io/material-theme-builder/ + + // set color depending on the theme: https://v18.material.angular.io/guide/theming#theme-your-own-components-using-a-material-3-theme + //.mat-mdc-button-base { + // //@if mat.get-theme-type($theme) == dark { + // // color: mat.get-theme-color($theme, secondary, 0) !important; + // // background: mat.get-theme-color($theme, secondary, 80) !important; + // //} @else { + // // color: mat.get-theme-color($theme, secondary, 100) !important; + // // background: mat.get-theme-color($theme, secondary, 40) !important; + // //} + // + // // Try out system variables + // //color: var(--mat-sys-on-primary-container) !important; + // //background: var(--mat-sys-on-primary-container) !important; + // + // + // color: mat.get-theme-color($theme, on-secondary) !important; + // background: mat.get-theme-color($theme, secondary) !important; + //} + + //$background: map-get($theme, background); + //$foreground: map-get($theme, foreground); + //$primary: map-get($theme, primary); + // + //.mat-mdc-tooltip { + // background: mat.m2-get-color-from-palette($background, tooltip); + // border-radius: 3px; + //} + // + .slick-prev::before, + .slick-next::before { + //color: mat.m2-get-color-from-palette($foreground, text); + color: mat.get-theme-color($theme, inverse-surface); } + // + //.app-backdrop { + // background: mat.m2-get-color-from-palette($background, background, 0.9); + //} + // + //// the padding of the mat-mdc-dialog-actions is not set properly + //.mat-mdc-dialog-actions { + // --mat-dialog-actions-padding: var(--mat-dialog-content-padding); + //} } @mixin angular-material-typography-overrides($typography) { diff --git a/src/app/wlo-search/core/error-page/error-page.component.scss b/src/app/wlo-search/core/error-page/error-page.component.scss index 0f57cccc..05a1823d 100644 --- a/src/app/wlo-search/core/error-page/error-page.component.scss +++ b/src/app/wlo-search/core/error-page/error-page.component.scss @@ -1,8 +1,8 @@ :host { - display: block; + margin: auto; padding: 20px 40px; max-width: 1200px; - margin: auto; + display: block; } pre { diff --git a/src/app/wlo-search/core/error-page/error.service.ts b/src/app/wlo-search/core/error-page/error.service.ts index 9a90669c..441331c5 100644 --- a/src/app/wlo-search/core/error-page/error.service.ts +++ b/src/app/wlo-search/core/error-page/error.service.ts @@ -1,4 +1,3 @@ -// import { Location } from '@angular/common'; import { Injectable } from '@angular/core'; import { NavigationError, Router } from '@angular/router'; import { ConfigService } from '../config.service'; @@ -9,11 +8,7 @@ import { ConfigService } from '../config.service'; export class ErrorService { private error: NavigationError; - constructor( - private config: ConfigService, - // private location: Location, - private router: Router, - ) {} + constructor(private config: ConfigService, private router: Router) {} goToErrorPage(error: NavigationError) { this.error = error; diff --git a/src/app/wlo-search/core/footerbar/footerbar.component.scss b/src/app/wlo-search/core/footerbar/footerbar.component.scss index 05a79efe..c902d53a 100644 --- a/src/app/wlo-search/core/footerbar/footerbar.component.scss +++ b/src/app/wlo-search/core/footerbar/footerbar.component.scss @@ -2,6 +2,7 @@ $rem: 20px; :host { box-sizing: border-box; + // TODO: Typography font-size: $rem; } @@ -27,9 +28,6 @@ $rem: 20px; // - Replace all `((-?[\d\.])+)rem` with `#{$1 * $rem}` /*! CSS Used from: https://pre.wirlernenonline.de/wp-content/themes/wir-lernen-online/dist/assets/scss/app.css?ver=20200821 ; media=all */ @media all { - a { - background-color: transparent; - } img { border-style: none; } @@ -45,18 +43,6 @@ $rem: 20px; height: auto; -ms-interpolation-mode: bicubic; } - ::-moz-placeholder { - color: #313131; - } - :-ms-input-placeholder { - color: #313131; - } - ::-ms-input-placeholder { - color: #313131; - } - ::placeholder { - color: #313131; - } div, ul, li, @@ -66,20 +52,16 @@ $rem: 20px; } p { margin-bottom: #{1 * $rem}; + // TODO: Typography font-size: inherit; line-height: 1.4; text-rendering: optimizeLegibility; } a { line-height: inherit; - color: #003e82; text-decoration: none; cursor: pointer; } - a:hover, - a:focus { - color: #003570; - } a img { border: 0; } @@ -89,6 +71,7 @@ $rem: 20px; line-height: 1.4; } li { + // TODO: Typography font-size: inherit; } ul { @@ -96,13 +79,6 @@ $rem: 20px; list-style-type: disc; } @media print { - * { - background: transparent !important; - color: black !important; - print-color-adjust: economy; - box-shadow: none !important; - text-shadow: none !important; - } a, a:visited { text-decoration: underline; @@ -122,18 +98,18 @@ $rem: 20px; } } .menu { - padding: 0; margin: 0; + padding: 0; list-style: none; position: relative; display: flex; flex-wrap: wrap; } .menu a { + padding: #{0.7 * $rem} #{1 * $rem}; line-height: 1; text-decoration: none; display: block; - padding: #{0.7 * $rem} #{1 * $rem}; } .menu a { margin-bottom: 0; @@ -146,6 +122,7 @@ $rem: 20px; padding: #{0.7 * $rem} #{1 * $rem}; } .menu li a { + // TODO: Typography font-family: 'Montserrat-Bold', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; } a:active, @@ -154,24 +131,20 @@ $rem: 20px; outline: 0; outline: none; } - *:focus { - outline: 1px dotted #003e82; - } .site-footer { overflow: hidden; - color: white; - background-color: #032850; + // TODO: Typography font-family: 'Source-Sans-Pro-Regular', sans-serif; } .site-footer .footer-wrapper { - display: flex; - max-width: 1200px; margin: 0 auto; padding-bottom: 2em; + display: flex; + max-width: 1200px; } .site-footer .footer-wrapper .footer-main { - width: 70%; margin-top: 3em; + width: 70%; } .site-footer .footer-wrapper .footer-main .footer-buttons { display: flex; @@ -190,20 +163,17 @@ $rem: 20px; transform: translate(0, -4px); } .site-footer .footer-wrapper .footer-main .footer-menu { - display: flex; margin-top: 0.5em; + display: flex; } .site-footer .footer-wrapper .footer-main .footer-menu a { - color: white; - font-family: 'Montserrat-Medium', Helvetica, Roboto, Arial, sans-serif; - font-size: 16px; padding-left: 0; padding-right: 1.15em; + // TODO: Typography + font-family: 'Montserrat-Medium', Helvetica, Roboto, Arial, sans-serif; + font-size: 16px; transition: 0.3s; } - .site-footer .footer-wrapper .footer-main .footer-menu a:hover { - color: #e4f700; - } .site-footer .footer-wrapper .footer-right { display: flex; justify-content: flex-end; @@ -213,48 +183,41 @@ $rem: 20px; display: flex; align-items: center; width: 40%; - background: white; } .site-footer .footer-wrapper .footer-right .footer-license { + padding: 1em; display: flex; align-items: center; width: 52%; - padding: 1em; + // TODO: Typography font-size: 14px; } .site-footer .footer-wrapper .footer-right .footer-license p { margin: 0; } .site-footer .footer-wrapper .footer-right .footer-license a { - color: white; + // TODO: Typography font-family: 'Source-Sans-Pro-Bold', sans-serif; transition: 0.3s; text-decoration: underline; } - .site-footer .footer-wrapper .footer-right .footer-license a:hover { - color: #e4f700; - } .site-footer .footer-wrapper .footer-btn { + margin: 0.5em 1em 0.5em 0; + padding: 8px 16px; display: flex; align-items: center; justify-content: center; - color: #032850; + // TODO: Typography font-family: 'Montserrat-Bold', Helvetica, Roboto, Arial, sans-serif; font-size: 14px; height: 30px; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; - margin: 0.5em 1em 0.5em 0; - padding: 8px 16px; - background: #e4f700; cursor: pointer; border-radius: 50px; transition: 0.3s; } - .site-footer .footer-wrapper .footer-btn:hover { - background: #b4da1c; - } @media (max-width: 900px) { .site-footer .footer-wrapper { flex-direction: column; @@ -270,9 +233,9 @@ $rem: 20px; justify-content: center; } .site-footer .footer-wrapper .footer-right { + margin-top: 2em; width: 100%; justify-content: space-between; - margin-top: 2em; } } } diff --git a/src/app/wlo-search/core/footerbar/footerbar.component.theme.scss b/src/app/wlo-search/core/footerbar/footerbar.component.theme.scss new file mode 100644 index 00000000..de669171 --- /dev/null +++ b/src/app/wlo-search/core/footerbar/footerbar.component.theme.scss @@ -0,0 +1,91 @@ +@use '@angular/material' as mat; +@import '../../../../additional-colors'; +@import '../../functions'; + +@mixin footerbar-theme($theme) { + // custom theme created for extracted styles, thus, the same order and selectors are used + // single selectors might be combined (e.g., a{}) or combined (e.g., &:hover) + // ::after selectors might require !important + app-footerbar { + @media all { + a { + color: mat.get-theme-color($theme, primary); + background-color: transparent; + + // TODO: Add, if necessary + //&:hover, &:focus { + // color: #003570; + //} + } + + // TODO: Change, if necessary + ::-moz-placeholder { + color: #313131; + } + :-ms-input-placeholder { + color: #313131; + } + ::-ms-input-placeholder { + color: #313131; + } + ::placeholder { + color: #313131; + } + + // TODO: Change, if necessary + @media print { + * { + background: transparent !important; + color: black !important; + print-color-adjust: economy; + box-shadow: none !important; + text-shadow: none !important; + } + } + + *:focus { + outline: 1px dotted mat.get-theme-color($theme, primary); + } + + .site-footer { + @if mat.get-theme-type($theme) == light { + color: mat.get-theme-color($theme, primary, 100); + background-color: mat.get-theme-color($theme, primary, 25); + } @else { + color: mat.get-theme-color($theme, on-background); + background: mat.get-theme-color($theme, surface-container-lowest); + } + } + + .site-footer .footer-wrapper .footer-main .footer-menu a, + .site-footer .footer-wrapper .footer-right .footer-license a { + @if mat.get-theme-type($theme) == light { + color: mat.get-theme-color($theme, primary, 100); + } @else { + color: mat.get-theme-color($theme, primary); + } + + &:hover { + color: $neon-default; + } + } + + .site-footer .footer-wrapper .footer-right .footer-bmbf { + @if mat.get-theme-type($theme) == light { + background: mat.get-theme-color($theme, surface-container-lowest); + } @else { + background: mat.get-theme-color($theme, inverse-surface); + } + } + + .site-footer .footer-wrapper .footer-btn { + color: mat.get-theme-color($theme, primary, 40); + background: $neon-default; + + &:hover { + background: $neon-medium; + } + } + } + } +} diff --git a/src/app/wlo-search/core/headerbar/headerbar.component.html b/src/app/wlo-search/core/headerbar/headerbar.component.html index 36bb2662..1c12b663 100644 --- a/src/app/wlo-search/core/headerbar/headerbar.component.html +++ b/src/app/wlo-search/core/headerbar/headerbar.component.html @@ -22,8 +22,8 @@ - Try our experimental features! + + Try our + experimental features! + diff --git a/src/app/wlo-search/core/headerbar/headerbar.component.scss b/src/app/wlo-search/core/headerbar/headerbar.component.scss index efba7c41..eaea3854 100644 --- a/src/app/wlo-search/core/headerbar/headerbar.component.scss +++ b/src/app/wlo-search/core/headerbar/headerbar.component.scss @@ -4,10 +4,10 @@ } :host { + margin-bottom: 20px; position: relative; display: flex; background-position: center; - margin-bottom: 20px; justify-content: center; align-items: center; &[data-style='standard'] { @@ -19,23 +19,23 @@ } .content { - width: 100%; - flex-direction: column; - display: flex; margin: 20px; + width: 100%; max-width: 1060px; + display: flex; + flex-direction: column; } .logo { - align-self: flex-start; - margin-bottom: 16px; margin-top: 2px; + margin-bottom: 16px; height: 35px; + align-self: flex-start; } .filter-row { - display: flex; margin-top: 20px; + display: flex; align-items: center; @media screen and (max-width: 450px) { justify-content: space-between; @@ -43,10 +43,11 @@ } .filter-button { + margin-right: 30px; + padding: 0 18px; height: 30px; line-height: 30px; border-radius: 15px; - margin-right: 30px; .button-wrapper { display: flex; align-items: center; @@ -58,6 +59,8 @@ } } } + // slightly adjust padding of badge container + --mat-badge-container-padding: 3px 8px; } .experiments { diff --git a/src/app/wlo-search/core/headerbar/headerbar.component.theme.scss b/src/app/wlo-search/core/headerbar/headerbar.component.theme.scss index 79a2b1b6..8bf9f00f 100644 --- a/src/app/wlo-search/core/headerbar/headerbar.component.theme.scss +++ b/src/app/wlo-search/core/headerbar/headerbar.component.theme.scss @@ -1,30 +1,48 @@ @use '@angular/material' as mat; @import '../../functions'; +@import '../../../../additional-colors'; @mixin headerbar-theme($theme) { - $primary: map-get($theme, primary); - $primary-foreground-color: primary-foreground-color($theme); - $customAccent: map-get($theme, custom-accent); - app-headerbar { - border-color: mat.m2-get-color-from-palette($primary); + // Note: this should not change, even when being in dark mode + border-color: mat.get-theme-color($theme, primary, 25); + // Compact mode for the headerbar &[data-style='compact'] { - background-color: mat.m2-get-color-from-palette($primary, 400); + // Note: this should not change, even when being in dark mode + background-color: mat.get-theme-color($theme, primary, 40); } .filter-button { - color: $primary-foreground-color !important; + color: mat.get-theme-color($theme, primary); + background-color: mat.get-theme-color($theme, on-primary); + &:hover, + &:active, + &:focus { + @if mat.get-theme-type($theme) == light { + background-color: mat.get-theme-color($theme, secondary, 95); + } @else { + background-color: mat.get-theme-color($theme, primary, 10); + } + } .mat-badge-content { - background-color: mat.m2-get-color-from-palette($customAccent, accent2); + color: mat.get-theme-color($theme, primary, 100); + background-color: $pink-default; } } .experiments { &, > a { - color: mat.m2-get-color-from-palette($primary, default-contrast); + // Note: this should not change, even when being in dark mode + color: mat.get-theme-color($theme, primary, 95); } } } } @mixin headerbar-typography($typography) { + app-headerbar { + // TODO: Replace typography + .filter-button { + font-size: 16px; + } + } } diff --git a/src/app/wlo-search/core/menubar/menubar.component.scss b/src/app/wlo-search/core/menubar/menubar.component.scss index fd6e0b74..148caf4f 100644 --- a/src/app/wlo-search/core/menubar/menubar.component.scss +++ b/src/app/wlo-search/core/menubar/menubar.component.scss @@ -2,6 +2,7 @@ $rem: 20px; :host { box-sizing: border-box; + // TODO: Typography font-size: $rem; } @@ -32,9 +33,7 @@ $rem: 20px; .top-bar { position: absolute; padding-bottom: 30px !important; - background-color: #ececec !important; width: 100%; - box-shadow: 0 8px 12px -2px rgb(0 0 0 / 40%); } } @@ -51,13 +50,11 @@ $rem: 20px; /*! CSS Used from: https://dev.wirlernenonline.de/wp-content/themes/wir-lernen-online/dist/assets/scss/app.css?ver=20200821 ; media=all */ @media all { - a { - background-color: transparent; - } img { border-style: none; } button { + // TODO: Typography font-family: inherit; font-size: 100%; line-height: 1.15; @@ -78,10 +75,6 @@ $rem: 20px; border-style: none; padding: 0; } - button:-moz-focusring, - [type='button']:-moz-focusring { - outline: 1px dotted ButtonText; - } *, *::before, *::after { @@ -101,11 +94,11 @@ $rem: 20px; appearance: none; border: 0; border-radius: 5px; - background: transparent; line-height: 1; cursor: auto; } button { + // TODO: Typography font-family: inherit; } [type='button'] { @@ -114,18 +107,6 @@ $rem: 20px; appearance: none; border-radius: 5px; } - ::-moz-placeholder { - color: #313131; - } - :-ms-input-placeholder { - color: #313131; - } - ::-ms-input-placeholder { - color: #313131; - } - ::placeholder { - color: #313131; - } div, ul, li { @@ -134,14 +115,9 @@ $rem: 20px; } a { line-height: inherit; - color: #003e82; text-decoration: none; cursor: pointer; } - a:hover, - a:focus { - color: #003570; - } a img { border: 0; } @@ -151,6 +127,7 @@ $rem: 20px; line-height: 1.4; } li { + // TODO: Typography font-size: inherit; } ul { @@ -162,13 +139,6 @@ $rem: 20px; margin-bottom: 0; } @media print { - * { - background: transparent !important; - color: black !important; - print-color-adjust: economy; - box-shadow: none !important; - text-shadow: none !important; - } a, a:visited { text-decoration: underline; @@ -187,16 +157,16 @@ $rem: 20px; } } .grid-container { - padding-right: #{0.75 * $rem}; - padding-left: #{0.75 * $rem}; - max-width: #{60 * $rem}; margin-left: auto; margin-right: auto; + padding-left: #{0.75 * $rem}; + padding-right: #{0.75 * $rem}; + max-width: #{60 * $rem}; } @media print, screen and (min-width: 40em) { .grid-container { - padding-right: #{1 * $rem}; padding-left: #{1 * $rem}; + padding-right: #{1 * $rem}; } } .grid-x { @@ -205,12 +175,12 @@ $rem: 20px; } .cell { flex: 0 0 auto; - min-height: 0px; - min-width: 0px; + min-height: 0; + min-width: 0; width: 100%; } .cell.auto { - flex: 1 1 0px; + flex: 1 1 0; } .grid-x > .auto { width: auto; @@ -231,7 +201,7 @@ $rem: 20px; } @media print, screen and (min-width: 64em) { .grid-x > .large-auto { - flex: 1 1 0px; + flex: 1 1 0; width: auto; } .grid-x > .large-shrink { @@ -293,18 +263,18 @@ $rem: 20px; max-width: 100%; } .menu { - padding: 0; margin: 0; + padding: 0; list-style: none; position: relative; display: flex; flex-wrap: wrap; } .menu a { + padding: #{0.7 * $rem} #{1 * $rem}; line-height: 1; text-decoration: none; display: block; - padding: #{0.7 * $rem} #{1 * $rem}; } .menu a { margin-bottom: 0; @@ -342,24 +312,19 @@ $rem: 20px; display: block; width: 100%; height: 2px; - background: #003e82; - box-shadow: 0 7px 0 #003e82, 0 14px 0 #003e82; content: ''; } - .menu-icon:hover::after { - background: #003e82; - box-shadow: 0 7px 0 #003e82, 0 14px 0 #003e82; - } .dropdown.menu > li.opens-right > .is-dropdown-submenu { top: 100%; right: auto; left: 0; } .dropdown.menu > li.is-dropdown-submenu-parent > a { - position: relative; padding-right: #{1.5 * $rem}; + position: relative; } .dropdown.menu > li.is-dropdown-submenu-parent > a::after { + margin-top: -3px; display: block; width: 0; height: 0; @@ -367,21 +332,19 @@ $rem: 20px; content: ''; border-bottom-width: 0; border-top-style: solid; - border-color: #003e82 transparent transparent; right: 5px; left: auto; - margin-top: -3px; } .dropdown.menu > li > a { padding: #{0.7 * $rem} #{1 * $rem}; } .dropdown.menu.vertical > li .is-dropdown-submenu { - top: 0; margin-left: 0; + top: 0; } .dropdown.menu.vertical > li.opens-right > .is-dropdown-submenu { - right: auto; left: 100%; + right: auto; } .dropdown.menu.vertical > li > a::after { right: 14px; @@ -394,7 +357,6 @@ $rem: 20px; content: ''; border-right-width: 0; border-left-style: solid; - border-color: transparent transparent transparent #003e82; } @media print, screen and (min-width: 64em) { .dropdown.menu.large-horizontal > li.opens-right > .is-dropdown-submenu { @@ -403,10 +365,11 @@ $rem: 20px; left: 0; } .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a { - position: relative; padding-right: #{1.5 * $rem}; + position: relative; } .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after { + margin-top: -3px; display: block; width: 0; height: 0; @@ -414,21 +377,19 @@ $rem: 20px; content: ''; border-bottom-width: 0; border-top-style: solid; - border-color: #003e82 transparent transparent; right: 5px; left: auto; - margin-top: -3px; } } .is-dropdown-submenu-parent { position: relative; } .is-dropdown-submenu-parent a::after { + margin-top: -6px; position: absolute; top: 50%; right: 5px; left: auto; - margin-top: -6px; } .is-dropdown-submenu-parent.opens-right > .is-dropdown-submenu { right: auto; @@ -441,8 +402,6 @@ $rem: 20px; z-index: 1; display: none; min-width: 200px; - border: 1px solid #d8d8d8; - background: #fefefe; } .dropdown .is-dropdown-submenu a { padding: #{0.7 * $rem} #{1 * $rem}; @@ -452,8 +411,6 @@ $rem: 20px; } .title-bar { padding: #{1 * $rem}; - background: #fefefe; - color: #003e82; display: flex; justify-content: flex-start; align-items: center; @@ -463,17 +420,13 @@ $rem: 20px; margin-right: #{0.25 * $rem}; } .top-bar { + padding: 0; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; - padding: 0; flex-wrap: wrap; } - .top-bar, - .top-bar ul { - background-color: transparent; - } .top-bar .top-bar-left { flex: 0 0 100%; max-width: 100%; @@ -483,8 +436,8 @@ $rem: 20px; flex-wrap: nowrap; } .top-bar .top-bar-left { - flex: 1 1 auto; margin-right: auto; + flex: 1 1 auto; } } .top-bar-left { @@ -505,6 +458,7 @@ $rem: 20px; position: relative !important; } .menu li a { + // TODO: Typography font-family: 'Montserrat-Bold', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; } a:active, @@ -517,14 +471,11 @@ $rem: 20px; .position-relative { position: relative; } - *:focus { - outline: 1px dotted #003e82; - } .site-header { z-index: 999; min-height: 63px; - background-color: #fefefe; - border-bottom: 1px solid #ececec; + border-bottom-width: 1px; + border-bottom-style: solid; position: fixed; top: 0; left: 0; @@ -533,7 +484,6 @@ $rem: 20px; } @media print, screen and (max-width: 39.99875em) { .site-header .top-bar { - background-color: #ececec; padding-bottom: calc(2 * 15px); } .site-header .top-bar .menu { @@ -542,7 +492,6 @@ $rem: 20px; } @media print, screen and (min-width: 40em) and (max-width: 63.99875em) { .site-header .top-bar { - background-color: #ececec; padding-bottom: calc(2 * 15px); } .site-header .top-bar .menu { @@ -564,24 +513,19 @@ $rem: 20px; .top-call-to-action-menu li a { display: flex; align-items: center; - background-color: #e4f700; - color: #032850; height: 30px; + // TODO: Typography font-family: 'Montserrat-Bold', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; font-size: 16px !important; border-radius: 60px; transition: 0.3s; } - .top-call-to-action-menu li a:hover { - color: #003b7c; - background: #b4da1c; - } .menu li a { + // TODO: Typography font-family: 'Montserrat-Bold', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; font-size: 20px; } .is-dropdown-submenu { - background-color: #fefefe !important; border-radius: 24px; border: none; text-align: left; @@ -592,6 +536,7 @@ $rem: 20px; width: fit-content; } .is-dropdown-submenu li a { + // TODO: Typography font-family: 'Montserrat-Medium', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; font-size: 20px; } @@ -602,18 +547,15 @@ $rem: 20px; border-radius: 0 0 24px 24px; } .is-dropdown-submenu-item:hover { - background-color: #d9e2eb; cursor: pointer; } } /*! CSS Used from: https://dev.wirlernenonline.de/wp-content/themes/wir-lernen-online/dist/assets/scss/wlo.css?ver=20200821 ; media=all */ @media all { .skip-link { + padding: 15px 23px 14px; position: absolute; top: -100px; - background-color: #f1f1f1; - box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); - color: #21759b; display: block; font-family: 'Open Sans', sans-serif; font-size: 14px; @@ -621,26 +563,16 @@ $rem: 20px; height: auto; left: 6px; line-height: normal; - padding: 15px 23px 14px; text-decoration: none; width: auto; z-index: 100000; transition: top 0.75s ease-out; } .skip-link:focus { - color: #21759b; top: 7px; transition: top 0s; } } -/*! CSS Used from: https://dev.wirlernenonline.de/wp-content/themes/wir-lernen-online/style.css?ver=20200821 ; media=all */ -@media all { - @media screen and (max-width: 1024px) { - #main-menu { - box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.4); - } - } -} // The following styles were extracted from wirlernenonline.de // in order to make the animations working properly @@ -693,9 +625,7 @@ $rem: 20px; } .drilldown a { - // Note: Hard fix for now, as the body cannot be changed padding: #{0.7 * $rem} #{1 * $rem}; - background: #ececec; } .drilldown .is-drilldown-submenu { @@ -704,7 +634,6 @@ $rem: 20px; left: 100%; z-index: -1; width: 100%; - background: #ececec; transition: transform 0.15s linear; } .drilldown .is-drilldown-submenu.is-active { @@ -729,6 +658,7 @@ $rem: 20px; position: relative; } .drilldown .is-drilldown-submenu-parent > a::after { + margin-top: -6px; display: block; width: 0; height: 0; @@ -736,10 +666,8 @@ $rem: 20px; content: ''; border-right-width: 0; border-left-style: solid; - border-color: transparent transparent transparent #003e82; position: absolute; top: 50%; - margin-top: -6px; right: #{1 * $rem}; } @@ -751,7 +679,6 @@ $rem: 20px; content: ''; border-right-width: 0; border-left-style: solid; - border-color: transparent transparent transparent #003e82; right: #{1 * $rem}; left: auto; } @@ -764,12 +691,12 @@ $rem: 20px; content: ''; border-left-width: 0; border-right-style: solid; - border-color: transparent #003e82 transparent transparent; right: auto; left: #{1 * $rem}; } .drilldown .js-drilldown-back > a::before { + margin-right: #{0.75 * $rem}; display: block; width: 0; height: 0; @@ -777,8 +704,6 @@ $rem: 20px; content: ''; border-left-width: 0; border-right-style: solid; - border-color: transparent #003e82 transparent transparent; display: inline-block; vertical-align: middle; - margin-right: #{0.75 * $rem}; } diff --git a/src/app/wlo-search/core/menubar/menubar.component.theme.scss b/src/app/wlo-search/core/menubar/menubar.component.theme.scss index 23be3890..1862ed20 100644 --- a/src/app/wlo-search/core/menubar/menubar.component.theme.scss +++ b/src/app/wlo-search/core/menubar/menubar.component.theme.scss @@ -1,48 +1,221 @@ @use '@angular/material' as mat; +@import '../../../../additional-colors'; @import '../../functions'; @mixin menubar-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - $primary-foreground-color: primary-foreground-color($theme); - + // custom theme created for extracted styles, thus, the same order and selectors are used + // single selectors might be combined (e.g., a{}) or combined (e.g., &:hover) + // ::after selectors might require !important app-menubar { - header { - background-color: mat.m2-get-color-from-palette($background, dialog); - border-bottom-color: mat.m2-get-color-from-palette($foreground, divider); - /* - @media (prefers-color-scheme: dark) { - background-color: mat.get-color-from-palette($background, app-bar); - } - */ - } - a { - color: $primary-foreground-color; - } - *:focus { - outline-color: $primary-foreground-color; - } - .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after { - border-top-color: $primary-foreground-color; - } - .dropdown.menu.vertical > li.opens-right > a::after { - border-left-color: $primary-foreground-color; + @media screen and (max-width: 1023px) { + .top-bar { + @if mat.get-theme-type($theme) == light { + background: mat.get-theme-color($theme, neutral, 95) !important; + } @else { + background: mat.get-theme-color($theme, neutral, 0) !important; + } + // TODO: Change, if necessary + box-shadow: 0 8px 12px -2px rgb(0 0 0 / 40%); + } } - .is-dropdown-submenu { - background-color: mat.m2-get-color-from-palette($background, background); - border-color: mat.m2-get-color-from-palette($foreground, divider); + + @media all { + a { + color: mat.get-theme-color($theme, primary); + background-color: transparent; + + // TODO: Add, if necessary + //&:hover, &:focus { + // color: #003570; + //} + } + + button:-moz-focusring, + [type='button']:-moz-focusring { + outline: 1px dotted ButtonText; + } + + button { + background: transparent; + } + + // TODO: Change, if necessary + ::-moz-placeholder { + color: #313131; + } + :-ms-input-placeholder { + color: #313131; + } + ::-ms-input-placeholder { + color: #313131; + } + ::placeholder { + color: #313131; + } + + // TODO: Change, if necessary + @media print { + * { + background: transparent !important; + color: black !important; + print-color-adjust: economy; + box-shadow: none !important; + text-shadow: none !important; + } + } + + .menu-icon::after, + .menu-icon:hover::after { + background: mat.get-theme-color($theme, primary) !important; + box-shadow: 0 7px 0 mat.get-theme-color($theme, primary), + 0 14px 0 mat.get-theme-color($theme, primary) !important; + } + + .dropdown.menu > li.is-dropdown-submenu-parent > a::after { + border-color: mat.get-theme-color($theme, primary) transparent transparent !important; + } + + .dropdown.menu.vertical > li.opens-right > a::after { + border-color: transparent transparent transparent + mat.get-theme-color($theme, primary) !important; + } + + @media print, screen and (min-width: 64em) { + .dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after { + border-color: mat.get-theme-color($theme, primary) transparent transparent !important; + } + } + + .is-dropdown-submenu { + @if mat.get-theme-type($theme) == light { + background: mat.get-theme-color($theme, neutral, 99); + } @else { + background: mat.get-theme-color($theme, neutral, 0); + } + } + + .title-bar { + color: mat.get-theme-color($theme, primary); + } + + .title-bar, + .site-header { + @if mat.get-theme-type($theme) == light { + background: mat.get-theme-color($theme, neutral, 99); + } @else { + background: mat.get-theme-color($theme, neutral, 0); + } + } + + .top-bar, + .top-bar ul { + background-color: transparent; + } + + *:focus { + outline: 1px dotted mat.get-theme-color($theme, primary); + } + + .site-header { + // TODO: Replace (border-bottom-color: #ececec;) + @if mat.get-theme-type($theme) == light { + border-bottom-color: mat.get-theme-color($theme, neutral, 95); + } @else { + border-bottom-color: mat.get-theme-color($theme, neutral, 0); + } + } + + @media print, screen and (max-width: 39.99875em) { + .site-header .top-bar { + @if mat.get-theme-type($theme) == light { + background-color: mat.get-theme-color($theme, neutral, 95); + } @else { + background-color: mat.get-theme-color($theme, neutral, 0); + } + } + } + + @media print, screen and (min-width: 40em) and (max-width: 63.99875em) { + .site-header .top-bar { + @if mat.get-theme-type($theme) == light { + background-color: mat.get-theme-color($theme, neutral, 95); + } @else { + background-color: mat.get-theme-color($theme, neutral, 0); + } + } + } + + .top-call-to-action-menu li a { + background-color: $neon-default; + @if mat.get-theme-type($theme) == light { + color: mat.get-theme-color($theme, primary); + } @else { + color: mat.get-theme-color($theme, primary, 40); + } + + &:hover { + background: $neon-medium; + } + } + + .is-dropdown-submenu { + @if mat.get-theme-type($theme) == light { + background-color: mat.get-theme-color($theme, neutral, 99) !important; + } @else { + background-color: mat.get-theme-color($theme, neutral, 0) !important; + } + } + + .is-dropdown-submenu-item:hover { + @if mat.get-theme-type($theme) == light { + // rgba is used to simulate the existing color of WLO + background-color: rgba( + mat.get-theme-color($theme, secondary, 70), + 0.3 + ) !important; + } @else { + background-color: mat.get-theme-color($theme, secondary, 10) !important; + } + } + + .skip-link { + // TODO: Change, if necessary + background-color: #f1f1f1; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + color: mat.get-theme-color($theme, primary); + + &:focus { + color: mat.get-theme-color($theme, primary); + } + } + + // TODO: Change, if necessary + @media all { + @media screen and (max-width: 1024px) { + #main-menu { + box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.4); + } + } + } } - .is-dropdown-submenu-item:hover { - background-color: mat.m2-get-color-from-palette($foreground, text, 0.1); + + .drilldown a, + .drilldown .is-drilldown-submenu { + @if mat.get-theme-type($theme) == light { + background: mat.get-theme-color($theme, neutral, 95); + } @else { + background: mat.get-theme-color($theme, neutral, 0); + } } - .menu-icon::after { - background: $primary-foreground-color; - box-shadow: 0 7px 0 $primary-foreground-color, 0 14px 0 $primary-foreground-color; + + .drilldown .is-drilldown-submenu-parent > a::after, + .drilldown.align-left .is-drilldown-submenu-parent > a::after { + border-color: transparent transparent transparent mat.get-theme-color($theme, primary) !important; } - @media screen and (max-width: 63.99875em) { - .site-header .top-bar { - background-color: mat.m2-get-color-from-palette($foreground, text, 0.08); - } + + .drilldown.align-right .is-drilldown-submenu-parent > a::after, + .drilldown .js-drilldown-back > a::before { + border-color: transparent mat.get-theme-color($theme, primary) transparent transparent !important; } } } diff --git a/src/app/wlo-search/core/oer-slider/oer-slider.component.html b/src/app/wlo-search/core/oer-slider/oer-slider.component.html index 209ca299..421e0b3d 100644 --- a/src/app/wlo-search/core/oer-slider/oer-slider.component.html +++ b/src/app/wlo-search/core/oer-slider/oer-slider.component.html @@ -14,7 +14,7 @@ matTooltip="What is OER?" i18n-matTooltip > - help + diff --git a/src/app/wlo-search/core/oer-slider/oer-slider.component.scss b/src/app/wlo-search/core/oer-slider/oer-slider.component.scss index adc8e4ff..542e5585 100644 --- a/src/app/wlo-search/core/oer-slider/oer-slider.component.scss +++ b/src/app/wlo-search/core/oer-slider/oer-slider.component.scss @@ -1,4 +1,14 @@ +:host { + display: flex; + min-width: 0; +} + +// custom adjustments for the slide-toggle :host ::ng-deep mat-slide-toggle { + // add spacing between the toggle and its label + .mdc-label { + margin-left: 15px !important; + } // change height and width of the toggle button background .mdc-switch { width: 46px; @@ -7,24 +17,29 @@ .mdc-switch__track { height: 17px; border-radius: 8px; + + // remove border from switch track + &::before { + border: none; + } + } + + // fix position of switch button + &.mdc-switch--unselected .mdc-switch__handle { + margin-left: -5px !important; + border-radius: 15px; } } // change height and width of the toggle button itself .mdc-switch__handle { height: 30px !important; width: 30px !important; - - &:has(.mdc-switch__icons) { - border-radius: 15px; - // fix position - margin-left: -5px !important; - } } -} - -:host { - display: flex; - min-width: 0; + // remove icons from toggle + // TODO: This is also a setting, but will change several selectors used above + .mdc-switch__icons { + display: none !important; + } } .slider-container { @@ -45,12 +60,16 @@ } } +// TODO: Typography $help-button-size: 18px; .help-button { - margin-left: -5px; - margin-bottom: -5px; - mat-icon { + display: flex; + align-items: center; + justify-content: center; + + .mat-icon, + .mat-mdc-icon { width: $help-button-size; height: $help-button-size; line-height: $help-button-size; diff --git a/src/app/wlo-search/core/oer-slider/oer-slider.component.theme.scss b/src/app/wlo-search/core/oer-slider/oer-slider.component.theme.scss index c481ae9f..7039c93b 100644 --- a/src/app/wlo-search/core/oer-slider/oer-slider.component.theme.scss +++ b/src/app/wlo-search/core/oer-slider/oer-slider.component.theme.scss @@ -1,44 +1,34 @@ @use '@angular/material' as mat; @import '../../functions'; +@import '../../../../additional-colors'; @mixin oer-slider-theme($theme) { - $custom-accent: map-get($theme, custom-accent); - $background: map-get($theme, background); - $primary: map-get($theme, primary); - + // custom theme created for the oer-slider + // Note: the colors should not change, even when being in dark mode app-oer-slider { - .mdc-label { - margin-left: 15px !important; - color: mat.m2-get-color-from-palette($primary, default-contrast); - } - .help-button mat-icon { - color: mat.m2-get-color-from-palette($primary, default-contrast); + // use a variant of the neutral palette + .mdc-label, + .help-button .mat-icon, + .help-button .mat-mdc-icon { + color: mat.get-theme-color($theme, neutral, 99); } + // change background color of switch track .mat-mdc-slide-toggle .mdc-switch__track { &::before { - background: mat.m2-get-color-from-palette( - $primary, - default-contrast, - 0.38 - ) !important; + background: rgba(mat.get-theme-color($theme, secondary, 70), 0.6) !important; } &::after { - background: #fff !important; + background: mat.get-theme-color($theme, neutral, 99) !important; } } // change color of the toggle button .mat-mdc-slide-toggle.mat-mdc-slide-toggle-checked .mdc-switch__handle::after { - background: mat.m2-get-color-from-palette($custom-accent, accent2) !important; + background: $pink-default !important; } .mat-mdc-slide-toggle .mdc-switch.mdc-switch--unselected:enabled .mdc-switch__handle::after { - background: #fff !important; - } - // remove icons from toggle - // TODO: This is also a setting, but this will change several selectors used above - .mat-mdc-slide-toggle .mdc-switch__icons { - display: none !important; + background: mat.get-theme-color($theme, neutral, 99) !important; } } } diff --git a/src/app/wlo-search/core/page-mode.service.ts b/src/app/wlo-search/core/page-mode.service.ts index 0d40cebe..aeacb2e4 100644 --- a/src/app/wlo-search/core/page-mode.service.ts +++ b/src/app/wlo-search/core/page-mode.service.ts @@ -19,11 +19,11 @@ export class PageConfig { /** The compact style removes most links, 'none' removes the entire footer. */ footerStyle: 'standard' | 'compact' | 'none' = 'standard'; /** Page body background becomes transparent. */ - transparentBackground = false; + transparentBackground: boolean = false; /** Number of search results per page. */ - numberOfResults = 12; + numberOfResults: number = 12; /** An additional button in the details view to trigger an iFrame message. */ - showEmbedButton = false; + showEmbedButton: boolean = false; } /** diff --git a/src/app/wlo-search/core/search-field/search-field.component.html b/src/app/wlo-search/core/search-field/search-field.component.html index 4bb4cf07..f1f53990 100644 --- a/src/app/wlo-search/core/search-field/search-field.component.html +++ b/src/app/wlo-search/core/search-field/search-field.component.html @@ -22,7 +22,7 @@
- + Educational level Discipline Keyword - Intended End User Role - Learning Resource Type + + Intended End User Role + + + Learning Resource Type + Source
diff --git a/src/app/wlo-search/core/search-field/search-field.component.scss b/src/app/wlo-search/core/search-field/search-field.component.scss index 763ed598..bec7dfd6 100644 --- a/src/app/wlo-search/core/search-field/search-field.component.scss +++ b/src/app/wlo-search/core/search-field/search-field.component.scss @@ -7,11 +7,11 @@ form { display: flex; width: 100%; .search-field-wrapper { + padding: 5px 7px; display: flex; flex-grow: 1; border-radius: 27px; align-items: center; - padding: 5px 7px; min-height: 40px; &.multi-line { border-radius: 20px; @@ -24,24 +24,28 @@ form { height: 43px; min-width: 0; .search-icon { + margin-top: -1px; + margin-right: 6px; + margin-left: 16px; width: 22px; height: 22px; - margin-left: 16px; } input { - height: 43px; margin: 4px; - flex-shrink: 1; + height: 43px; min-width: 0; + flex-shrink: 1; // Placeholder text-overflow: ellipsis; } .submit-button { + margin: 6px; + padding-left: 16px; + padding-right: 16px; + height: 32px; + border-radius: 16px; display: flex; align-items: center; - line-height: 30px; - border-radius: 15px; - margin: 6px; flex-shrink: 0; } } @@ -74,10 +78,12 @@ form { // second selector without :host, as it is added at the bottom of the body // used a custom class instead :host mat-chip-grid ::ng-deep, +:host mat-chip-listbox ::ng-deep, .suggestion-mat-chip-listbox ::ng-deep { .mdc-evolution-chip-set__chips .mat-mdc-standard-chip { min-height: 30px; .mdc-evolution-chip__text-label { + // TODO: Typography font-family: 'Montserrat-Bold', serif; font-weight: 700; } @@ -85,6 +91,18 @@ form { .mdc-evolution-chip-set__chips .category-chip:last-of-type { margin-right: 8px; } + .mdc-evolution-chip__action { + // do not signal that the button is clickable + cursor: default; + &::before { + border: none; + } + } + // suggestion chips and remove chip buttons should be marked as being clickable + .suggestion-chip .mdc-evolution-chip__action, + .mat-mdc-chip-remove { + cursor: pointer; + } } .search-field { @@ -92,10 +110,9 @@ form { } .suggestion-card { + padding: 10px; width: 100%; - background-color: white; border-radius: 20px; - padding: 10px; .suggestion-group { &:not(:last-of-type) { padding-bottom: 20px; @@ -103,6 +120,7 @@ form { .label-container { display: flex; } + // TODO: Typography // .what-is-oer-link { // padding-left: 10px; // font-size: 90%; @@ -110,36 +128,15 @@ form { // cursor: pointer; // } .category-label { + padding-bottom: 6px; display: block; + // TODO: Typography text-transform: uppercase; font-weight: 500; font-size: 90%; - color: #666; - padding-bottom: 6px; } .suggestion-chip { cursor: pointer; } } } -.mat-mdc-chip.chip-group-oer { - background-color: rgb(214, 166, 214); -} -.mat-mdc-chip.chip-group-type { - background-color: rgb(166, 192, 214); -} -.mat-mdc-chip.chip-group-discipline { - background-color: rgb(166, 214, 174); -} -.mat-mdc-chip.chip-group-educationalContext { - background-color: rgb(214, 166, 166); -} -.mat-mdc-chip.chip-group-intendedEndUserRole { - background-color: rgb(211, 214, 166); -} -.mat-mdc-chip.chip-group-learningResourceType { - background-color: rgb(214, 193, 166); -} -.mat-mdc-chip.chip-group-source { - background-color: rgb(208, 166, 214); -} diff --git a/src/app/wlo-search/core/search-field/search-field.component.theme.scss b/src/app/wlo-search/core/search-field/search-field.component.theme.scss index 58b7bcca..a2ef092b 100644 --- a/src/app/wlo-search/core/search-field/search-field.component.theme.scss +++ b/src/app/wlo-search/core/search-field/search-field.component.theme.scss @@ -1,23 +1,29 @@ @use '@angular/material' as mat; @mixin search-field-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - $primary: map-get($theme, primary); - $custom: map-get($theme, custom-accent); - app-search-field { - form { - .search-field-wrapper { - background-color: mat.m2-get-color-from-palette($background, dialog); - .search-field-input-wrapper { - background-color: mat.m2-get-color-from-palette($primary, 50); - input { - color: mat.m2-get-color-from-palette($primary, text) !important; + form .search-field-wrapper { + background-color: mat.get-theme-color($theme, surface); + + .search-field-input-wrapper { + @if mat.get-theme-type($theme) == light { + background-color: rgba(mat.get-theme-color($theme, secondary, 60), 0.3); + } @else { + background-color: mat.get-theme-color($theme, surface-container); + } + input { + @if mat.get-theme-type($theme) == light { + color: mat.get-theme-color($theme, primary, 25); + } @else { + color: mat.get-theme-color($theme, primary); + } + + &::placeholder { + color: mat.get-theme-color($theme, secondary); } } - mat-icon { - color: mat.m2-get-color-from-palette($foreground, icon); + .search-icon { + color: mat.get-theme-color($theme, primary); } } } @@ -26,11 +32,14 @@ @mixin search-field-typography($typography) { app-search-field { - .submit-button, // adjusting the selector is currently necessary to overwrite the default font-size: // https://stackoverflow.com/a/43273285/3623608 - .mat-mdc-form-field, .mat-mdc-form-field.mat-mdc-form-field { + .mat-mdc-form-field, + .mat-mdc-form-field.mat-mdc-form-field { font-size: mat.m2-font-size($typography, body-1); } + .submit-button { + font-size: 17px; + } } } diff --git a/src/app/wlo-search/index.scss b/src/app/wlo-search/index.scss index 40ab1f44..1c3eef5d 100644 --- a/src/app/wlo-search/index.scss +++ b/src/app/wlo-search/index.scss @@ -1,3 +1,4 @@ +@import 'core/footerbar/footerbar.component.theme.scss'; @import 'core/headerbar/headerbar.component.theme.scss'; @import 'core/menubar/menubar.component.theme.scss'; @import 'core/oer-slider/oer-slider.component.theme.scss'; @@ -5,35 +6,37 @@ @import 'search/search-page/badges/badges.component.theme.scss'; @import 'search/search-page/multivalue-checkbox/multivalue-checkbox.component.theme.scss'; @import 'search/search-page/paginator/paginator.component.theme.scss'; -@import 'search/search-page/preview-panel/preview-panel.component.theme.scss'; @import 'search/search-page/result-card/result-card.component.theme.scss'; @import 'search/search-page/search-filterbar/search-filterbar.component.theme.scss'; @import 'search/search-page/search-page.component.theme.scss'; -@import 'search/search-page/subjects-portal/subjects-portal.component.theme.scss'; @import 'search/shared/collection-card/collection-card.component.theme.scss'; @import 'search/shared/details/details.component.theme.scss'; -@import 'search/shared/report-problem/report-problem.component.theme.scss'; @import 'template/add-swimlane-button/add-swimlane-border-button.component.theme.scss'; +@import 'template/swimlane/swimlane.component.theme.scss'; @import 'template/template.component.theme.scss'; @import 'wlo-search.component.theme.scss'; +// list of replacements used: +// * primary -> primary (role) +// * primary, 400 -> primary, 25 +// * secondary-text -> neutral, 35 +// * transparent background -> rgba(surface (role), .5) @mixin components-themes($theme) { @include add-swimlane-border-theme($theme); @include badges-theme($theme); @include collection-card-theme($theme); @include details-theme($theme); + @include footerbar-theme($theme); @include headerbar-theme($theme); @include menubar-theme($theme); @include multivalue-checkbox-theme($theme); @include oer-slider-theme($theme); @include paginator-theme($theme); - @include preview-panel-theme($theme); - @include report-problem-theme($theme); @include result-card-theme($theme); @include search-field-theme($theme); @include search-filterbar-theme($theme); @include search-page-theme($theme); - @include subjects-portal-theme($theme); + @include swimlane-theme($theme); @include template-page-theme($theme); @include wlo-search-theme($theme); } @@ -45,7 +48,6 @@ @include multivalue-checkbox-typography($typography); @include oer-slider-typography($typography); @include paginator-typography($typography); - @include preview-panel-typography($typography); @include result-card-typography($typography); @include search-field-typography($typography); @include search-filterbar-typography($typography); diff --git a/src/app/wlo-search/preferences/experiments-toggles/experiments-toggles.component.scss b/src/app/wlo-search/preferences/experiments-toggles/experiments-toggles.component.scss index 2e7d226b..3c0b6187 100644 --- a/src/app/wlo-search/preferences/experiments-toggles/experiments-toggles.component.scss +++ b/src/app/wlo-search/preferences/experiments-toggles/experiments-toggles.component.scss @@ -1,9 +1,9 @@ :host { + margin: auto; + padding: 20px; display: flex; flex-direction: column; - padding: 20px; max-width: 800px; - margin: auto; } ul { diff --git a/src/app/wlo-search/search/search-page/badges/badges.component.html b/src/app/wlo-search/search/search-page/badges/badges.component.html index 0cce7bf5..baef5c39 100644 --- a/src/app/wlo-search/search/search-page/badges/badges.component.html +++ b/src/app/wlo-search/search/search-page/badges/badges.component.html @@ -6,6 +6,7 @@ [matTooltipPosition]="orientation === 'vertical' ? 'left' : 'above'" matTooltip="Recommended by editorial team" > +
+
diff --git a/src/app/wlo-search/search/search-page/badges/badges.component.scss b/src/app/wlo-search/search/search-page/badges/badges.component.scss index 944210fc..6e5f5231 100644 --- a/src/app/wlo-search/search/search-page/badges/badges.component.scss +++ b/src/app/wlo-search/search/search-page/badges/badges.component.scss @@ -19,8 +19,8 @@ } } .icon { + padding: 2px 4px; width: 20px; height: 20px; - padding: 2px 4px; } } diff --git a/src/app/wlo-search/search/search-page/badges/badges.component.theme.scss b/src/app/wlo-search/search/search-page/badges/badges.component.theme.scss index 6f51b2ac..f7239632 100644 --- a/src/app/wlo-search/search/search-page/badges/badges.component.theme.scss +++ b/src/app/wlo-search/search/search-page/badges/badges.component.theme.scss @@ -1,18 +1,19 @@ @use '@angular/material' as mat; +@import '../../../../../additional-colors'; @import '../../../functions'; @mixin badges-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - // $custom-accent: map-get($theme, custom-accent); app-badges { .app-badges-badge { - background-color: mat.m2-get-color-from-palette($background, card); + // neutral, 98 is equivalent to surface, but does not change in dark mode + background: mat.get-theme-color($theme, neutral, 98); + > .icon { - color: mat.m2-get-color-from-palette($foreground, secondary-text); + // neutral-variant, 30 is equivalent to on-surface-variant, but does not change in dark mode + color: mat.get-theme-color($theme, neutral-variant, 30); } > .editorial-icon { - color: #106029; + color: $neon-dark; } } } diff --git a/src/app/wlo-search/search/search-page/multivalue-checkbox/multivalue-checkbox.component.scss b/src/app/wlo-search/search/search-page/multivalue-checkbox/multivalue-checkbox.component.scss index aa21f9ba..59688d77 100644 --- a/src/app/wlo-search/search/search-page/multivalue-checkbox/multivalue-checkbox.component.scss +++ b/src/app/wlo-search/search/search-page/multivalue-checkbox/multivalue-checkbox.component.scss @@ -10,17 +10,21 @@ padding-left: 0; } + ::ng-deep .mat-mdc-checkbox-ripple.mat-mdc-focus-indicator::before { + display: none; + } + span { &.label { + margin-right: 1em; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; - margin-right: 1em; } &.count { - border-radius: 20px; padding: 0 6px; + border-radius: 20px; } } } diff --git a/src/app/wlo-search/search/search-page/multivalue-checkbox/multivalue-checkbox.component.theme.scss b/src/app/wlo-search/search/search-page/multivalue-checkbox/multivalue-checkbox.component.theme.scss index e69c3d68..cf13705d 100644 --- a/src/app/wlo-search/search/search-page/multivalue-checkbox/multivalue-checkbox.component.theme.scss +++ b/src/app/wlo-search/search/search-page/multivalue-checkbox/multivalue-checkbox.component.theme.scss @@ -1,46 +1,38 @@ @use '@angular/material' as mat; +@import '../../../../../additional-colors'; @import '../../../functions'; @mixin multivalue-checkbox-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - $customAccent: map-get($theme, custom-accent); - $primary-foreground-color: primary-foreground-color($theme); - app-multivalue-checkbox { mat-checkbox { - .mat-checkbox-frame { - border-color: mat.m2-get-color-from-palette($foreground, disabled); - } - .mat-mdc-checkbox-ripple.mat-mdc-focus-indicator::before { - display: none; - } &:not(.checked) { + .mdc-checkbox__background { + border-color: mat.get-theme-color($theme, on-surface-variant) !important; + } span.label { - color: mat.m2-get-color-from-palette($foreground, secondary-text); + color: mat.get-theme-color($theme, on-surface-variant); } span.count { - background-color: mat.m2-get-color-from-palette($background, unselected-chip); - color: mat.m2-get-color-from-palette($foreground, secondary-text); - } - .mat-checkbox-inner-container { - background-color: mat.m2-get-color-from-palette($background, card); + color: mat.get-theme-color($theme, on-surface-variant); + @if mat.get-theme-type($theme) == light { + background-color: mat.get-theme-color($theme, surface-dim); + } @else { + background-color: mat.get-theme-color($theme, neutral, 35); + } } } &.checked { - span.label { - color: mat.m2-get-color-from-palette($foreground, text); - } span.count { - background-color: mat.m2-get-color-from-palette($customAccent, accent2); - color: mat.m2-get-color-from-palette($customAccent, accent2-contrast); + color: mat.get-theme-color($theme, neutral, 99); + background-color: $pink-default; } &.mat-accent .mdc-checkbox__background { - border-color: $primary-foreground-color !important; - background-color: $primary-foreground-color !important; - - .mdc-checkbox__checkmark .mdc-checkbox__checkmark-path { - stroke: #fff; + @if mat.get-theme-type($theme) == light { + border-color: mat.get-theme-color($theme, primary, 25) !important; + background-color: mat.get-theme-color($theme, primary, 25) !important; + } @else { + border-color: mat.get-theme-color($theme, primary) !important; + background-color: mat.get-theme-color($theme, primary) !important; } } } diff --git a/src/app/wlo-search/search/search-page/paginator/paginator.component.html b/src/app/wlo-search/search/search-page/paginator/paginator.component.html index 7de49d0e..3150ac96 100644 --- a/src/app/wlo-search/search/search-page/paginator/paginator.component.html +++ b/src/app/wlo-search/search/search-page/paginator/paginator.component.html @@ -9,12 +9,17 @@ queryParamsHandling="merge" [disabled]="pageIndex === 0" > - arrow_back + - 1 + 1 + ... {{ page + 1 }} + {{ page + 1 }} + {{ pageIndex + 1 }} {{ page + 1 }} + {{ page + 1 }} + ... + ... + - arrow_forward + diff --git a/src/app/wlo-search/search/search-page/paginator/paginator.component.scss b/src/app/wlo-search/search/search-page/paginator/paginator.component.scss index fdedfbcd..6f7aa455 100644 --- a/src/app/wlo-search/search/search-page/paginator/paginator.component.scss +++ b/src/app/wlo-search/search/search-page/paginator/paginator.component.scss @@ -12,10 +12,10 @@ } .page-number { + margin: 0 2px; width: 36px; line-height: 43px; text-align: center; - margin: 0 2px; border-radius: 5px; &:not(:hover) { text-decoration: none; diff --git a/src/app/wlo-search/search/search-page/paginator/paginator.component.theme.scss b/src/app/wlo-search/search/search-page/paginator/paginator.component.theme.scss index 6ff6d1f1..66084f43 100644 --- a/src/app/wlo-search/search/search-page/paginator/paginator.component.theme.scss +++ b/src/app/wlo-search/search/search-page/paginator/paginator.component.theme.scss @@ -2,17 +2,21 @@ @import '../../../functions'; @mixin paginator-theme($theme) { - $primary-foreground-color: primary-foreground-color($theme); - $primary: map-get($theme, primary); - app-paginator { - .ellipsis { - color: mat.m2-get-color-from-palette($primary); + .ellipsis, + .page-number, + .arrow:not(.mat-mdc-button-disabled) { + @if mat.get-theme-type($theme) == light { + color: mat.get-theme-color($theme, primary, 25); + } @else { + color: mat.get-theme-color($theme, primary); + } } - .page-number { - color: mat.m2-get-color-from-palette($primary); - &.active { - background-color: mat.m2-get-color-from-palette($primary, 70); + .page-number.active { + @if mat.get-theme-type($theme) == light { + background-color: rgba(mat.get-theme-color($theme, secondary, 70), 0.5); + } @else { + background-color: mat.get-theme-color($theme, neutral, 30); } } } diff --git a/src/app/wlo-search/search/search-page/preview-panel/preview-panel.component.scss b/src/app/wlo-search/search/search-page/preview-panel/preview-panel.component.scss index 5087227b..5b9ada45 100644 --- a/src/app/wlo-search/search/search-page/preview-panel/preview-panel.component.scss +++ b/src/app/wlo-search/search/search-page/preview-panel/preview-panel.component.scss @@ -18,20 +18,20 @@ $previewPanelSpanScreenThreshold: 800px; } ::ng-deep .app-preview-panel-dialog-container .mat-mdc-dialog-container { - height: unset; padding: 0; + height: unset; overflow: hidden; position: relative; } .app-preview-panel-sidebar { + margin-right: 20px; + margin-bottom: 20px; max-height: calc(100vh - 40px); display: flex; width: 500px; top: 20px; position: sticky; - margin-right: 20px; - margin-bottom: 20px; @media screen and (max-width: $previewPanelSpanScreenThreshold) { position: relative; top: unset; diff --git a/src/app/wlo-search/search/search-page/preview-panel/preview-panel.component.theme.scss b/src/app/wlo-search/search/search-page/preview-panel/preview-panel.component.theme.scss deleted file mode 100644 index 55de78d9..00000000 --- a/src/app/wlo-search/search/search-page/preview-panel/preview-panel.component.theme.scss +++ /dev/null @@ -1,11 +0,0 @@ -@use '@angular/material' as mat; -@import '../../../functions'; - -@mixin preview-panel-theme($theme) { -} - -@mixin preview-panel-typography($typography) { - .app-preview-panel-sidebar, - .app-preview-panel-dialog-container { - } -} diff --git a/src/app/wlo-search/search/search-page/result-card-content-compact/result-card-content-compact.component.scss b/src/app/wlo-search/search/search-page/result-card-content-compact/result-card-content-compact.component.scss index 1f23d6f4..5fbbd542 100644 --- a/src/app/wlo-search/search/search-page/result-card-content-compact/result-card-content-compact.component.scss +++ b/src/app/wlo-search/search/search-page/result-card-content-compact/result-card-content-compact.component.scss @@ -1,7 +1,7 @@ .mat-mdc-card-header { - flex-wrap: wrap; margin-bottom: 5px; padding-bottom: 5px; + flex-wrap: wrap; .source { flex: 1 1 100%; @@ -30,18 +30,18 @@ } .mat-mdc-card-content { - flex-grow: 1; margin-bottom: 0; + flex-grow: 1; .main-content-row { min-height: 99px; .thumbnail { + margin-top: 2px; + margin-left: 20px; overflow: hidden; float: right; height: 90px; width: 90px; border-radius: 15px; - margin-top: 2px; - margin-left: 20px; } .description { margin-bottom: 0.7em; diff --git a/src/app/wlo-search/search/search-page/result-card-content-standard/result-card-content-standard.component.html b/src/app/wlo-search/search/search-page/result-card-content-standard/result-card-content-standard.component.html index 4d3b74e1..9f9b69b2 100644 --- a/src/app/wlo-search/search/search-page/result-card-content-standard/result-card-content-standard.component.html +++ b/src/app/wlo-search/search/search-page/result-card-content-standard/result-card-content-standard.component.html @@ -25,14 +25,14 @@

{{ description | trim | truncate: 65 }}

- perm_media + Learning resource type
{{ lrt.displayName }}
- book_icon + Discipline
@@ -41,7 +41,7 @@

- school + Educational level
diff --git a/src/app/wlo-search/search/search-page/result-card-content-standard/result-card-content-standard.component.scss b/src/app/wlo-search/search/search-page/result-card-content-standard/result-card-content-standard.component.scss index 2f779cc3..eee8af2e 100644 --- a/src/app/wlo-search/search/search-page/result-card-content-standard/result-card-content-standard.component.scss +++ b/src/app/wlo-search/search/search-page/result-card-content-standard/result-card-content-standard.component.scss @@ -3,26 +3,26 @@ a:not(:hover) { } .image-container { + margin-bottom: 10px; // Prevent flicker of hover animations in Chrome. -webkit-backface-visibility: hidden; position: relative; height: 175px; - margin-bottom: 10px; overflow: hidden; > * { + margin: auto; position: absolute; width: 100%; height: 100%; - margin: auto; } } .pre-heading { - display: flex; margin-bottom: 6px; + display: flex; .source { - flex-grow: 1; margin-right: 10px; + flex-grow: 1; } .badges { margin-top: 4px; @@ -53,8 +53,8 @@ a:not(:hover) { } .body { - flex-grow: 1; margin-bottom: 0; + flex-grow: 1; .description { overflow-wrap: break-word; @@ -65,18 +65,22 @@ a:not(:hover) { &:not(:last-child) { padding-bottom: 4px; } - > mat-icon { + > .mat-icon, + > .mat-mdc-icon { padding: 0 6px 0 3px; - width: 12px; + // workaround to fix that text overflows icons + min-width: 12px; + max-width: 12px; height: 12px; + // TODO: Typography font-size: 12px; } span { display: inline-flex; white-space: nowrap; &:not(:last-child)::after { - content: ','; margin-right: 0.4em; + content: ','; } } } diff --git a/src/app/wlo-search/search/search-page/result-card/result-card.component.scss b/src/app/wlo-search/search/search-page/result-card/result-card.component.scss index a0815573..ca2d2129 100644 --- a/src/app/wlo-search/search/search-page/result-card/result-card.component.scss +++ b/src/app/wlo-search/search/search-page/result-card/result-card.component.scss @@ -14,12 +14,6 @@ mat-card { border-radius: $card-border-radius; overflow: hidden; word-break: break-word; - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25) !important; - transition: box-shadow 0.3s, transform 0.3s; - &:hover { - transform: translate(0, -4px); - box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25) !important; - } &.app-result-card-selected::after { position: absolute; content: ''; diff --git a/src/app/wlo-search/search/search-page/result-card/result-card.component.theme.scss b/src/app/wlo-search/search/search-page/result-card/result-card.component.theme.scss index 431581b4..0b2898f9 100644 --- a/src/app/wlo-search/search/search-page/result-card/result-card.component.theme.scss +++ b/src/app/wlo-search/search/search-page/result-card/result-card.component.theme.scss @@ -2,27 +2,36 @@ @import '../../../functions'; @mixin result-card-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - $primary: map-get($theme, primary); - $custom-accent: map-get($theme, custom-accent); - $primary-foreground-color: primary-foreground-color($theme); - app-result-card { + mat-card { + // surface-container-lowest is equal to #fff in light mode + background: mat.get-theme-color($theme, surface-container-lowest); + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25) !important; + transition: box-shadow 0.3s, transform 0.3s; + &:hover { + transform: translate(0, -4px); + box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.25) !important; + } + } .app-result-card-selected::after { - border-color: mat.m2-get-color-from-palette($primary, 400); + border-color: mat.get-theme-color($theme, primary); } - .body { - mat-icon { - color: mat.m2-get-color-from-palette($foreground, secondary-text); - } + .app-result-card-title button { + color: mat.get-theme-color($theme, on-surface); } + // TODO: neutral, 35 might be replaced by on-surface-variant + .body mat-icon, .metadata, .source { - color: mat.m2-get-color-from-palette($foreground, secondary-text); + @if mat.get-theme-type($theme) == light { + color: mat.get-theme-color($theme, neutral, 35); + } @else { + color: mat.get-theme-color($theme, neutral, 99); + } } } app-result-card-content-compact { + // TODO: Change static color .editorial-hint { color: #106029; } diff --git a/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.html b/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.html index 51ecdd98..629bd0a1 100644 --- a/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.html +++ b/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.html @@ -1,6 +1,6 @@
- tune +

Filters

Filters

[queryParams]="{ filters: null }" queryParamsHandling="merge" > - undo Reset + Reset -
@@ -29,27 +35,27 @@

Filters

> - perm_media + Content type - book_icon + Discipline - school + Educational Level - group + Intended End User Role - cloud + Supplier - list + Keywords @@ -67,8 +73,8 @@

Filters

*ngIf="facets[key].hasMore" (click)="loadMoreFacetBuckets(key)" > - show morekeyboard_arrow_down + show more + diff --git a/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.scss b/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.scss index ed761de8..3224e46a 100644 --- a/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.scss +++ b/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.scss @@ -1,27 +1,33 @@ $sidePadding: 20px; mat-card { + padding: 0; height: 100%; display: flex; flex-direction: column; - padding: 0; border-radius: 20px 20px 0 0; > .header { + padding: 10px $sidePadding 10px $sidePadding; border-radius: 20px 20px 0 0; height: 40px; - padding: 10px $sidePadding 10px $sidePadding; display: flex; align-items: center; border-bottom-width: 1px; border-bottom-style: solid; h2 { - flex-grow: 1; margin: 0 10px; + flex-grow: 1; } .reset-button { - mat-icon { + .mat-icon, + .mat-mdc-icon { margin-right: 0.3em; } + &::ng-deep .mdc-button__label { + display: flex; + align-items: center; + justify-content: center; + } } } > .body { @@ -31,19 +37,28 @@ mat-card { padding: 10px; } > .type { + padding: 10px $sidePadding; border-bottom-width: 1px; border-bottom-style: solid; - padding: 10px $sidePadding; > mat-label { + margin: 10px 0; display: flex; align-items: center; - margin: 10px 0; - > mat-icon { + > .mat-icon, + > .mat-mdc-icon { margin-right: 10px; } } } > .mat-accordion .mat-expansion-panel { + &:first-of-type { + border-top-right-radius: 0; + border-top-left-radius: 0; + } + &:last-of-type { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } &[hidden] { display: none; } @@ -56,13 +71,21 @@ mat-card { } } .show-more-button { - margin-top: 4px; - margin-left: -10px; - .mat-icon { + margin-top: 8px; + margin-left: -8px; + .mat-icon, + .mat-mdc-icon { + margin-left: 4px; + // TODO: Typography font-size: 24px; width: 24px; height: 24px; } + &::ng-deep .mdc-button__label { + display: flex; + align-items: center; + justify-content: center; + } } } } diff --git a/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.theme.scss b/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.theme.scss index 69d5e666..e7fc3b7c 100644 --- a/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.theme.scss +++ b/src/app/wlo-search/search/search-page/search-filterbar/search-filterbar.component.theme.scss @@ -2,34 +2,54 @@ @import '../../../functions'; @mixin search-filterbar-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - $primary: map-get($theme, primary); - $customAccent: map-get($theme, custom-accent); - $primary-foreground-color: primary-foreground-color($theme); - app-search-filterbar { > mat-card { - > .header { - color: mat.m2-get-color-from-palette($primary); - background-color: mat.m2-get-color-from-palette($primary, 50); - border-color: mat.m2-get-color-from-palette($foreground, divider); + > .header, + .close-button { + @if mat.get-theme-type($theme) == light { + color: mat.get-theme-color($theme, primary, 25); + } @else { + color: mat.get-theme-color($theme, primary); + } .reset-button { - color: mat.m2-get-color-from-palette($primary); + color: mat.get-theme-color($theme, primary); + } + } + > .header { + @if mat.get-theme-type($theme) == light { + background-color: rgba(mat.get-theme-color($theme, secondary, 60), 0.3); + } @else { + background-color: mat.get-theme-color($theme, surface-container); } + border-color: mat.get-theme-color($theme, outline-variant); } > .body { - > .type { - background-color: mat.m2-get-color-from-palette($background, app-bar); - border-color: mat.m2-get-color-from-palette($foreground, divider); - > mat-label { - color: $primary-foreground-color; + > .mat-accordion .mat-expansion-panel .mat-expansion-panel-header { + @if mat.get-theme-type($theme) == light { + background-color: mat.get-theme-color($theme, surface); + } @else { + background-color: mat.get-theme-color($theme, surface-container); + } + .mat-expansion-panel-header-title { + @if mat.get-theme-type($theme) == light { + color: mat.get-theme-color($theme, primary, 25); + } @else { + color: mat.get-theme-color($theme, primary); + } + } + svg path { + @if mat.get-theme-type($theme) == light { + fill: mat.get-theme-color($theme, primary, 25); + } @else { + fill: mat.get-theme-color($theme, primary); + } } } - > .mat-accordion .mat-expansion-panel .mat-expansion-panel-header { - .mat-expansion-panel-header-title, - .mat-expansion-indicator::after { - color: $primary-foreground-color; + > .mat-accordion .mat-expansion-panel .mat-expansion-panel-body { + @if mat.get-theme-type($theme) == light { + background-color: mat.get-theme-color($theme, surface); + } @else { + background-color: mat.get-theme-color($theme, surface-container); } } } @@ -51,7 +71,8 @@ .reset-button { @include mat.m2-typography-level($typography, button); - .mat-icon { + .mat-icon, + .mat-mdc-icon { font-size: 24px; width: 24px; height: 24px; diff --git a/src/app/wlo-search/search/search-page/search-page.component.html b/src/app/wlo-search/search/search-page/search-page.component.html index f9441882..5c46efb9 100644 --- a/src/app/wlo-search/search/search-page/search-page.component.html +++ b/src/app/wlo-search/search/search-page/search-page.component.html @@ -21,8 +21,9 @@ [queryParams]="{ filters: null, oer: 'NONE' }" queryParamsHandling="merge" i18n - >Search without filters + Search without filters +
@@ -54,7 +55,7 @@ i18n-matTooltip matTooltip="Standard view" > - view_column + - view_module + @@ -104,8 +105,9 @@ [routerLinkActiveOptions]="{ exact: true }" #linkAllResults="routerLinkActive" [active]="linkAllResults.isActive" - >All search results + All search results + Search results by content type + Search results by content type + diff --git a/src/app/wlo-search/search/search-page/search-page.component.scss b/src/app/wlo-search/search/search-page/search-page.component.scss index 9ffe241a..1f1d8740 100644 --- a/src/app/wlo-search/search/search-page/search-page.component.scss +++ b/src/app/wlo-search/search/search-page/search-page.component.scss @@ -7,8 +7,8 @@ $filterBarSpanScreenThreshold: 650px; app-search-filterbar { - height: 100%; margin-bottom: 20px; + height: 100%; @media screen and (min-width: $filterBarSpanScreenThreshold) { flex-grow: 1; flex-basis: 350px; @@ -44,7 +44,6 @@ app-search-filterbar { } } .search-result-options { - border-bottom: 1px solid rgba(0, 0, 0, 0.12); .mat-mdc-tab-link { height: 48px; } @@ -55,12 +54,14 @@ app-search-filterbar { display: flex; flex-direction: column; em { + // TODO: Typography font-style: normal; } .no-results { + margin-top: 5px; + margin-bottom: 16px; display: flex; flex-direction: column; - margin-top: 5px; a { margin-top: 10px; } @@ -68,21 +69,21 @@ app-search-filterbar { } .summary-row { + margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; - margin-bottom: 12px; p { margin: 0; } } .participate-button { + padding: 0 20px; display: flex; align-items: center; height: 30px; border-radius: 15px; - padding: 0 20px; } .summary-divider { diff --git a/src/app/wlo-search/search/search-page/search-page.component.theme.scss b/src/app/wlo-search/search/search-page/search-page.component.theme.scss index 227c1afd..96772d67 100644 --- a/src/app/wlo-search/search/search-page/search-page.component.theme.scss +++ b/src/app/wlo-search/search/search-page/search-page.component.theme.scss @@ -1,24 +1,63 @@ @use '@angular/material' as mat; +@import '../../../../additional-colors'; @import '../../functions'; @mixin search-page-theme($theme) { - $foreground: map-get($theme, foreground); - $primary-foreground-color: primary-foreground-color($theme); - $customAccent: map-get($theme, custom-accent); - app-search { - .breadcrumbs { - color: $primary-foreground-color; - mat-icon { - color: mat.m2-get-color-from-palette($foreground, secondary-text, 0.25); - } - } .did-you-mean a { - color: $primary-foreground-color; + color: mat.get-theme-color($theme, primary); } .participate-button { - color: $primary-foreground-color; - background-color: mat.m2-get-color-from-palette($customAccent, accent1); + color: mat.get-theme-color($theme, primary, 40); + background-color: $neon-default; + + &:hover { + background: $neon-medium; + } + } + // change color of tabs for all search results and search results by content type + .search-result-options { + --mat-tab-header-active-label-text-color: #{mat.get-theme-color($theme, primary)}; + --mat-tab-header-active-focus-label-text-color: #{mat.get-theme-color($theme, primary)}; + @if mat.get-theme-type($theme) == light { + --mat-tab-header-inactive-label-text-color: #{mat.get-theme-color( + $theme, + neutral, + 35 + )}; + --mat-tab-header-inactive-hover-label-text-color: #{mat.get-theme-color( + $theme, + neutral, + 35 + )}; + } @else { + --mat-tab-header-inactive-label-text-color: #{mat.get-theme-color( + $theme, + neutral, + 80 + )}; + --mat-tab-header-inactive-hover-label-text-color: #{mat.get-theme-color( + $theme, + neutral, + 80 + )}; + } + } + // change background color of view mode toggle button + .style-toggle { + @if mat.get-theme-type($theme) == light { + --mat-standard-button-toggle-selected-state-background-color: #{mat.get-theme-color( + $theme, + neutral, + 80 + )}; + } @else { + --mat-standard-button-toggle-selected-state-background-color: #{mat.get-theme-color( + $theme, + neutral, + 35 + )}; + } } } } @@ -33,5 +72,9 @@ .summary { font-size: mat.m2-font-size($typography, body-1); } + // TODO: Replace static font-weight + .participate-button { + font-weight: 700; + } } } diff --git a/src/app/wlo-search/search/search-page/search-results/search-results.component.html b/src/app/wlo-search/search/search-page/search-results/search-results.component.html index 69e5e870..698a72b7 100644 --- a/src/app/wlo-search/search/search-page/search-results/search-results.component.html +++ b/src/app/wlo-search/search/search-page/search-results/search-results.component.html @@ -10,5 +10,5 @@ [filters]="filters" > - + diff --git a/src/app/wlo-search/search/search-page/search-results/search-results.component.scss b/src/app/wlo-search/search/search-page/search-results/search-results.component.scss index 02cfa175..a65c6aa7 100644 --- a/src/app/wlo-search/search/search-page/search-results/search-results.component.scss +++ b/src/app/wlo-search/search/search-page/search-results/search-results.component.scss @@ -7,8 +7,8 @@ display: grid; justify-content: space-evenly; &[data-search-results-style='standard'] { - gap: 30px; margin-top: 20px; + gap: 30px; } &[data-search-results-style='compact'] { gap: 30px 14px; @@ -22,6 +22,6 @@ } app-paginator { - align-self: center; margin: 50px 0; + align-self: center; } diff --git a/src/app/wlo-search/search/search-page/subjects-portal-section/subjects-portal-section.component.html b/src/app/wlo-search/search/search-page/subjects-portal-section/subjects-portal-section.component.html index 7c46dd60..ef699314 100644 --- a/src/app/wlo-search/search/search-page/subjects-portal-section/subjects-portal-section.component.html +++ b/src/app/wlo-search/search/search-page/subjects-portal-section/subjects-portal-section.component.html @@ -10,7 +10,7 @@

queryParamsHandling="merge" > show more - keyboard_arrow_right + diff --git a/src/app/wlo-search/search/search-page/subjects-portal-section/subjects-portal-section.component.scss b/src/app/wlo-search/search/search-page/subjects-portal-section/subjects-portal-section.component.scss index 4a2cd572..e1bd5f74 100644 --- a/src/app/wlo-search/search/search-page/subjects-portal-section/subjects-portal-section.component.scss +++ b/src/app/wlo-search/search/search-page/subjects-portal-section/subjects-portal-section.component.scss @@ -30,9 +30,9 @@ } } .card-container { + margin: 10px 30px 30px 10px; display: flex; justify-content: center; - margin: 10px 30px 30px 10px; .slick-initialized &.slick-slide { display: flex; height: unset; @@ -48,8 +48,19 @@ } } } -.show-more-button .mat-icon { - font-size: 24px; - width: 24px; - height: 24px; +.show-more-button { + .mat-icon, + .mat-mdc-icon { + margin-left: 4px; + // TODO: Typography + font-size: 24px; + width: 24px; + height: 24px; + } + + &::ng-deep .mdc-button__label { + display: flex; + align-items: center; + justify-content: center; + } } diff --git a/src/app/wlo-search/search/search-page/subjects-portal/subjects-portal.component.html b/src/app/wlo-search/search/search-page/subjects-portal/subjects-portal.component.html index 132f9441..d62f9b75 100644 --- a/src/app/wlo-search/search/search-page/subjects-portal/subjects-portal.component.html +++ b/src/app/wlo-search/search/search-page/subjects-portal/subjects-portal.component.html @@ -14,8 +14,9 @@ color="primary" routerLink="{{ routerPath }}/search" queryParamsHandling="merge" - >All search results + All search results + @@ -30,7 +31,7 @@ > show more - keyboard_arrow_down + .mat-expansion-panel { - // background-color: mix(mat.get-color-from-palette($background, card), mat.get-color-from-palette($primary), 90%); - // &, - // & .mat-expansion-panel-header-title, - // & .mat-expansion-panel-header-description, - // & .mat-expansion-indicator::after { - // color: $primary-foreground-color; - // } - // > .mat-expansion-panel-header .mat-expansion-panel-header-title > .icon { - // background-color: mat.get-color-from-palette($custom-accent, accent2); - // } - // } - // } -} diff --git a/src/app/wlo-search/search/shared/collection-card/collection-card.component.html b/src/app/wlo-search/search/shared/collection-card/collection-card.component.html index fab8e2a7..4f55b179 100644 --- a/src/app/wlo-search/search/shared/collection-card/collection-card.component.html +++ b/src/app/wlo-search/search/shared/collection-card/collection-card.component.html @@ -33,7 +33,7 @@

- photo_library + Number of elements: diff --git a/src/app/wlo-search/search/shared/collection-card/collection-card.component.scss b/src/app/wlo-search/search/shared/collection-card/collection-card.component.scss index 56f75385..cf9872b5 100644 --- a/src/app/wlo-search/search/shared/collection-card/collection-card.component.scss +++ b/src/app/wlo-search/search/shared/collection-card/collection-card.component.scss @@ -1,14 +1,9 @@ .app-collection-card-container { + padding: 8px 15px; display: flex; flex-direction: column; - padding: 8px 15px; height: 98px; border-radius: 10px; - transition: box-shadow 0.3s, transform 0.3s; - &:hover { - transform: translate(0, -4px); - box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25); - } } // Background image, not compatible with background colors. @@ -31,22 +26,23 @@ // } .app-collection-card-icon-container { + margin-bottom: 5px; display: flex; justify-content: flex-end; - margin-bottom: 5px; } .editorial-icon { width: 16px; height: 16px; + // TODO: Typography font-size: 16px; } .app-collection-card-title { - flex-grow: 1; - width: 100%; margin-top: 0; margin-bottom: 5px; + flex-grow: 1; + width: 100%; } .app-collection-card-title a { display: -webkit-box; @@ -70,10 +66,12 @@ .app-collection-card-metadata-item { line-height: 12px; display: inline-flex; - mat-icon { + .mat-icon, + .mat-mdc-icon { + margin-right: 5px; height: 12px; width: 12px; + // TODO: Typography font-size: 12px; - margin-right: 5px; } } diff --git a/src/app/wlo-search/search/shared/collection-card/collection-card.component.theme.scss b/src/app/wlo-search/search/shared/collection-card/collection-card.component.theme.scss index 7a9b5985..e8e760ea 100644 --- a/src/app/wlo-search/search/shared/collection-card/collection-card.component.theme.scss +++ b/src/app/wlo-search/search/shared/collection-card/collection-card.component.theme.scss @@ -2,20 +2,15 @@ @import '../../../functions'; @mixin collection-card-theme($theme) { - $primary: map-get($theme, primary); - app-collection-card { .app-collection-card-container { - background-color: mat.m2-get-color-from-palette($primary, 400); - color: mat.m2-get-contrast-color-from-palette($primary, 400); - // Background image, not compatible with background colors. - // - // &.app-collection-card-container-background-light { - // color: mat.get-color-from-palette($app-light-theme-foreground, text); - // } - // &.app-collection-card-container-background-dark { - // color: mat.get-color-from-palette($app-dark-theme-foreground, text); - // } + color: mat.get-theme-color($theme, on-primary); + background: mat.get-theme-color($theme, primary); + transition: box-shadow 0.3s, transform 0.3s; + &:hover { + transform: translate(0, -4px); + box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.25); + } } } } diff --git a/src/app/wlo-search/search/shared/details/details.component.html b/src/app/wlo-search/search/shared/details/details.component.html index ab17f81d..96248033 100644 --- a/src/app/wlo-search/search/shared/details/details.component.html +++ b/src/app/wlo-search/search/shared/details/details.component.html @@ -6,7 +6,7 @@ i18n-aria-label aria-label="Hide preview panel" > - close +
- perm_media + {{ lrt.displayName }}, @@ -35,7 +35,7 @@ class="app-preview-panel-info-bar-item" *ngIf="hit | nodeProperty: 'isExternal'; else mimeType" > - photo_library + Website @@ -44,7 +44,7 @@ class="app-preview-panel-info-bar-item" *ngIf="hit | nodeProperty: 'mimeType' as mimeType" > - photo_library + {{ mimeType }} @@ -56,7 +56,7 @@ class="app-preview-panel-info-bar-item" *ngIf="hit | nodeProperty: 'duration' as duration" > - alarm + {{ duration | duration }} @@ -65,7 +65,7 @@ class="app-preview-panel-info-bar-item" *ngIf="hit | nodeProperty: 'language' as languages" > - question_answer + {{ hit | nodeProperty: 'title' }}

> more - keyboard_arrow_down + less - keyboard_arrow_up +

@@ -128,7 +128,7 @@

{{ hit | nodeProperty: 'title' }}

> Go to original page - open_in_new + {{ hit | nodeProperty: 'title' }}

class="app-preview-panel-metadata app-preview-panel-metadata-icon" *ngIf="hit | nodeProperty: 'discipline' as disciplines" > - book_icon + Discipline
@@ -178,7 +178,7 @@

{{ hit | nodeProperty: 'title' }}

class="app-preview-panel-metadata app-preview-panel-metadata-icon" *ngIf="hit | nodeProperty: 'educationalContext' as educationalContexts" > - school + Educational level
@@ -200,7 +200,7 @@

{{ hit | nodeProperty: 'title' }}

class="app-preview-panel-metadata app-preview-panel-metadata-icon" *ngIf="hit | nodeProperty: 'license' as license" > - lock + License
@@ -309,8 +309,8 @@

{{ hit | nodeProperty: 'title' }}

value="100" diameter="30" > - sentiment_satisfied_alt - sentiment_very_dissatisfied + + Deine Meldung ist erfolgreich bei uns eingegangen. Vielen Dank für deine Hilfe! @@ -329,7 +329,7 @@

{{ hit | nodeProperty: 'title' }}

 Report problem - announcement +
@@ -337,7 +337,7 @@

{{ hit | nodeProperty: 'title' }}

Related Subject Pages

Related Subject Pages
diff --git a/src/app/wlo-search/search/shared/details/details.component.scss b/src/app/wlo-search/search/shared/details/details.component.scss index 95941a94..b54877a3 100644 --- a/src/app/wlo-search/search/shared/details/details.component.scss +++ b/src/app/wlo-search/search/shared/details/details.component.scss @@ -28,10 +28,10 @@ } .app-preview-panel-info-bar { + padding: 5px 50px; display: flex; align-items: center; flex-wrap: wrap; - padding: 5px 50px; } .app-preview-panel-info-bar-item { @@ -43,27 +43,28 @@ margin-right: 25px; } - > mat-icon { + > .mat-icon, + > .mat-mdc-icon { margin-right: 8px; min-width: 28px; } } .app-preview-panel-body { + padding: 28px 44px; display: flex; flex-direction: column; flex-grow: 1; - padding: 28px 44px; &:not(:last-child) { - padding-bottom: 58px; margin-bottom: -30px; + padding-bottom: 58px; } .badges { + margin-top: -10px; position: absolute; right: 50px; - margin-top: -10px; } .mat-mdc-progress-spinner { @@ -79,14 +80,13 @@ .report-problem-link { margin-top: 10px; margin-left: auto; - color: var(--primary); - mat-icon, .mat-icon, .mat-mdc-icon { margin-left: 5px; height: 20px; width: 20px; + // TODO: Typography font-size: 20px; } } @@ -108,12 +108,12 @@ } .app-preview-panel-expand-description-button { + margin-left: 15px; + padding: 0 6px; display: inline-flex; align-items: center; border: unset; background: unset; - margin-left: 15px; - padding: 0 6px; cursor: pointer; &:hover > span { @@ -122,17 +122,16 @@ } .app-preview-panel-buttons { + margin: 30px 0; display: flex; flex-wrap: wrap; gap: 20px 15px; - margin: 30px 0; .app-preview-panel-button { height: 30px; line-height: 30px; border-radius: 15px; - mat-icon, .mat-icon, .mat-mdc-icon { margin-left: 10px; @@ -148,24 +147,22 @@ } .app-details-report-problem-state { + margin: 10px 0; + padding: 12px 18px; display: flex; align-items: center; flex-direction: column; gap: 5px; - margin: 10px 0; - padding: 12px 18px; border-width: 2px; border-style: solid; text-align: center; - &.app-details-report-problem-state-loading { - border-color: #0000; - } - .mat-mdc-progress-spinner, - .mat-icon { + .mat-icon, + .mat-mdc-icon { width: 32px; height: 32px; + // TODO: Typography font-size: 32px; } @@ -191,10 +188,12 @@ padding-bottom: 10px; } - > mat-icon { + > .mat-icon, + > .mat-mdc-icon { margin-right: 8px; min-width: 28px; height: 22px; + // TODO: Typography font-size: 22px; } @@ -203,15 +202,15 @@ // white-space: nowrap; // causes overflow of long words like URLs &:not(:last-child)::after { - content: ','; margin-right: 0.4em; + content: ','; } } } .app-preview-related-items { - border-radius: inherit; padding: 20px 40px; + border-radius: inherit; .app-preview-related-items-heading { margin-top: 2px; @@ -257,19 +256,3 @@ } } } - -.icon-green { - color: #11612d; -} - -.icon-orange { - color: #fab835; -} - -.icon-red { - color: #e73446; -} - -.icon-gray { - color: #383838; -} diff --git a/src/app/wlo-search/search/shared/details/details.component.theme.scss b/src/app/wlo-search/search/shared/details/details.component.theme.scss index 8968cb98..2870217d 100644 --- a/src/app/wlo-search/search/shared/details/details.component.theme.scss +++ b/src/app/wlo-search/search/shared/details/details.component.theme.scss @@ -1,53 +1,102 @@ @use '@angular/material' as mat; @import '../../../functions'; +@import '../../../../../additional-colors'; @mixin details-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - $primary: map-get($theme, primary); - $warn: map-get($theme, warn); - $is-dark-theme: map-get($theme, is-dark); - $custom-accent: map-get($theme, custom-accent); - $primary-foreground-color: primary-foreground-color($theme); - - $body-background-dark: lighten(mat.m2-get-color-from-palette($background, background), 10%); - $body-background-light: darken(mat.m2-get-color-from-palette($background, background), 5%); - $body-background: if($is-dark-theme, $body-background-dark, $body-background-light); - app-details { .app-preview-panel-close-button { - background-color: mat.m2-get-color-from-palette($background, background, 0.75); + background-color: mat.get-theme-color($theme, surface-container-high); } - .app-preview-panel-info-bar { - background-color: mat.m2-get-color-from-palette($primary, 50); + .app-preview-panel-info-bar, + .app-preview-related-items { + background-color: mat.get-theme-color($theme, surface-variant); } .app-preview-panel-body { - background-color: $body-background; + background-color: mat.get-theme-color($theme, surface-container-high); } + // source link above large title .app-preview-panel-source { - color: mat.m2-get-color-from-palette($foreground, secondary-text); + @if mat.get-theme-type($theme) == light { + color: mat.get-theme-color($theme, neutral, 35); + } @else { + color: mat.get-theme-color($theme, neutral, 99); + } + } + // more button + .app-preview-panel-expand-description-button { + color: mat.get-theme-color($theme, primary); } - .app-preview-panel-report-problem-button { - // important is currently necessary to overwrite the default color - color: mat.m2-get-color-from-palette($foreground, secondary-text) !important; + .report-problem-link { + color: mat.get-theme-color($theme, primary); } + // success + error states .app-details-report-problem-state-success { - color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 600); - border-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 600); - background-color: mat.m2-get-color-from-palette(mat.$m2-green-palette, 50); + color: $green-dark; + border-color: $green-dark; + background-color: $green-light; } .app-details-report-problem-state-error { - color: mat.m2-get-color-from-palette($warn); - border-color: mat.m2-get-color-from-palette($warn); - background-color: mat.m2-get-color-from-palette($warn, 50); - } - .app-preview-related-items { - background-color: mat.m2-get-color-from-palette($primary, 50); + color: mat.get-theme-color($theme, error); + border-color: mat.get-theme-color($theme, error); + background-color: mat.get-theme-color($theme, error-container); } + // slick buttons for related topic pages .app-preview-slick-next, .app-preview-slick-prev { - background-color: $body-background; - color: $primary-foreground-color; + color: mat.get-theme-color($theme, primary); + background-color: mat.get-theme-color($theme, surface); + } + // outline buttons (primary + warn) + .mdc-button--outlined.btn-outline-primary:not(:disabled) { + color: mat.get-theme-color($theme, primary); + border: 1.5px solid mat.get-theme-color($theme, primary); + + .mat-icon, + .mat-mdc-icon { + margin-left: 6px !important; + margin-right: -3px !important; + font-size: 20px; + width: 20px; + height: 20px; + } + + &:hover { + color: mat.get-theme-color($theme, on-primary); + background: mat.get-theme-color($theme, primary); + } + } + .mdc-button--outlined.btn-outline-warn:not(:disabled) { + color: mat.get-theme-color($theme, error); + border: 1.5px solid mat.get-theme-color($theme, error); + + .mat-icon, + .mat-mdc-icon { + margin-left: 6px !important; + margin-right: -3px !important; + font-size: 20px; + width: 20px; + height: 20px; + } + + &:hover { + color: mat.get-theme-color($theme, on-error); + background: mat.get-theme-color($theme, error); + } + } + .icon-green { + color: $icon-green; + } + + .icon-orange { + color: $icon-orange; + } + + .icon-red { + color: $icon-red; + } + + .icon-gray { + color: $icon-gray; } } } diff --git a/src/app/wlo-search/search/shared/preview-image/preview-image.component.html b/src/app/wlo-search/search/shared/preview-image/preview-image.component.html index ffe5c1ee..a2b33cb5 100644 --- a/src/app/wlo-search/search/shared/preview-image/preview-image.component.html +++ b/src/app/wlo-search/search/shared/preview-image/preview-image.component.html @@ -21,11 +21,12 @@ [style.objectFit]="objectFit" > + diff --git a/src/app/wlo-search/search/shared/report-problem/report-problem.component.html b/src/app/wlo-search/search/shared/report-problem/report-problem.component.html index f62ee25d..140939b1 100644 --- a/src/app/wlo-search/search/shared/report-problem/report-problem.component.html +++ b/src/app/wlo-search/search/shared/report-problem/report-problem.component.html @@ -12,8 +12,9 @@

Report Problem

class="problem-kind-radio-button" color="primary" [value]="kind.key" - >{{ kind.value }} + {{ kind.value }} + Describe what's wrong diff --git a/src/app/wlo-search/search/shared/report-problem/report-problem.component.theme.scss b/src/app/wlo-search/search/shared/report-problem/report-problem.component.theme.scss deleted file mode 100644 index 601787d9..00000000 --- a/src/app/wlo-search/search/shared/report-problem/report-problem.component.theme.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use '@angular/material' as mat; -@import '../../../functions'; - -@mixin report-problem-theme($theme) { - app-report-problem { - .mat-mdc-dialog-content p { - color: mat.m2-get-color-from-palette(map-get($theme, foreground), text); - } - } -} diff --git a/src/app/wlo-search/shared/shared.module.ts b/src/app/wlo-search/shared/shared.module.ts index 130b9f67..fee2141a 100644 --- a/src/app/wlo-search/shared/shared.module.ts +++ b/src/app/wlo-search/shared/shared.module.ts @@ -31,6 +31,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar'; import { MatTabsModule } from '@angular/material/tabs'; import { MatTooltipModule } from '@angular/material/tooltip'; import { RouterModule } from '@angular/router'; +import { EduSharingUiCommonModule } from 'ngx-edu-sharing-ui'; import { SlickCarouselModule } from 'ngx-slick-carousel'; import { DisplayNamePipe } from './display-name.pipe'; import { FocusStateDirective } from './focus-state.directive'; @@ -45,6 +46,7 @@ import { SkipTargetDirective } from './skip-target.directive'; A11yModule, CdkAccordionModule, DragDropModule, + EduSharingUiCommonModule, LayoutModule, OverlayModule, FormsModule, @@ -81,6 +83,7 @@ import { SkipTargetDirective } from './skip-target.directive'; A11yModule, CdkAccordionModule, DragDropModule, + EduSharingUiCommonModule, LayoutModule, OverlayModule, FormsModule, diff --git a/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.theme.scss b/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.theme.scss index 627cf345..237207bc 100644 --- a/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.theme.scss +++ b/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.theme.scss @@ -2,11 +2,9 @@ @import '../../functions'; @mixin add-swimlane-border-theme($theme) { - $customGray: map-get($theme, custom-gray); - app-add-swimlane-border-button { .container-border { - border-color: mat.m2-get-color-from-palette($customGray, gray2); + border-color: mat.get-theme-color($theme, neutral, 80); } } } diff --git a/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.ts b/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.ts index cb36a841..4773c5db 100644 --- a/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.ts +++ b/src/app/wlo-search/template/add-swimlane-button/add-swimlane-border-button.component.ts @@ -1,12 +1,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { EduSharingUiCommonModule } from 'ngx-edu-sharing-ui'; import { SharedModule } from '../../shared/shared.module'; import { swimlaneTypeOptions } from '../custom-definitions'; import { SelectOption } from '../swimlane/swimlane-settings-dialog/select-option'; @Component({ standalone: true, - imports: [EduSharingUiCommonModule, SharedModule], + imports: [SharedModule], selector: 'app-add-swimlane-border-button', templateUrl: './add-swimlane-border-button.component.html', styleUrls: ['./add-swimlane-border-button.component.scss'], diff --git a/src/app/wlo-search/template/swimlane/grid-widget/grid-widget.component.scss b/src/app/wlo-search/template/swimlane/grid-widget/grid-widget.component.scss index e69de29b..b63e46f1 100644 --- a/src/app/wlo-search/template/swimlane/grid-widget/grid-widget.component.scss +++ b/src/app/wlo-search/template/swimlane/grid-widget/grid-widget.component.scss @@ -0,0 +1,10 @@ +.alert-warning { + margin: 24px 24px 0 24px !important; + padding: 16px; + text-align: center; + // TODO: Typography + font-size: 16px; + border-width: 1px; + border-style: solid; + border-radius: 4px; +} diff --git a/src/app/wlo-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.html b/src/app/wlo-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.html index 901ee585..ebcba705 100644 --- a/src/app/wlo-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.html +++ b/src/app/wlo-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.html @@ -50,13 +50,13 @@

Configure "{{ data.swimlane.heading }}" - arrow_upward +

diff --git a/src/app/wlo-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.scss b/src/app/wlo-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.scss index 2c9406f4..f30aedbe 100644 --- a/src/app/wlo-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.scss +++ b/src/app/wlo-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.scss @@ -1,3 +1,7 @@ +:host { + width: 100%; +} + .settings-form { padding-top: 5px !important; @@ -6,19 +10,23 @@ } .grid-definition { - display: block; margin-top: 10px; margin-bottom: 10px; + display: block; - // TODO: Move into theme file + // TODO: Typography --mat-expansion-header-text-font: Montserrat-SemiBold, serif; --mat-expansion-header-text-weight: 400; + // overwrite border-radius of dimension selection buttons + --mdc-filled-button-container-shape: 4px !important; + --mdc-outlined-button-container-shape: 4px !important; .mat-expansion-panel-header-title { margin-left: 70px; } .mat-expansion-panel-header-description { + // TODO: Typography font-size: 13px; } @@ -32,8 +40,8 @@ min-width: inherit; line-height: 10px; padding: 5px 5px 2px 5px; - border: 1px solid #e0e0e0; - background: #f4f4f4; + border-width: 1px; + border-style: solid; cursor: pointer; &:first-child { @@ -49,13 +57,16 @@ cursor: not-allowed; } - mat-icon { + .mat-icon, + .mat-mdc-icon { + // TODO: Typography font-size: 20px; } } } .delete-btn { + // TODO: Typography font-size: 20px; float: right; } @@ -72,8 +83,8 @@ } .line-break { - display: block; margin-top: 0.5rem; + display: block; } } } @@ -86,21 +97,23 @@ } .config-label { - display: block; margin-bottom: 5px; + display: block; } .config-note { - font-size: 13px; margin-bottom: 20px; padding-left: 10px; + // TODO: Typography + font-size: 13px; } } } .no-grid-tiles { padding: 10px; - font-size: 16px; text-align: center; + // TODO: Typography + font-size: 16px; } } diff --git a/src/app/wlo-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.theme.scss b/src/app/wlo-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.theme.scss new file mode 100644 index 00000000..7b7e8e7d --- /dev/null +++ b/src/app/wlo-search/template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component.theme.scss @@ -0,0 +1,17 @@ +@use '@angular/material' as mat; +@import '../../../../../additional-colors'; +@import '../../../functions'; + +@mixin swimlane-settings-dialog-theme($theme) { + app-swimlane-settings-dialog { + .wlo-move-buttons { + button { + border-color: $gray-light-alt; + background: $gray-light; + } + } + .grid-definition .mdc-button--outlined { + border-color: mat.get-theme-color($theme, outline); + } + } +} diff --git a/src/app/wlo-search/template/swimlane/swimlane.component.scss b/src/app/wlo-search/template/swimlane/swimlane.component.scss index 16d40156..55c49aeb 100644 --- a/src/app/wlo-search/template/swimlane/swimlane.component.scss +++ b/src/app/wlo-search/template/swimlane/swimlane.component.scss @@ -44,19 +44,18 @@ } .text-widget { - background: #fff; - height: 100%; padding: 10px; + height: 100%; box-sizing: border-box; } } .add-widget-container { - margin-bottom: 16px; padding: 16px 24px; width: 100%; height: 100%; - border: 1px solid rgba(0, 0, 0, 0.7); + border-width: 1px; + border-style: solid; border-radius: 8px; display: flex; align-items: center; @@ -66,13 +65,8 @@ .add-widget-btn { padding: 8px 18px; border-radius: 50px; + // TODO: Typography font-family: 'Montserrat-Bold', 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif; - color: var(--primary); - background: #e4f700; - - &:hover { - background: #b4da1c; - } ::ng-deep .mdc-button__label { display: flex; @@ -80,11 +74,12 @@ justify-content: center; i { - font-size: 20px; + margin-right: 5px; height: 20px; width: 20px; + // TODO: Typography + font-size: 20px; font-weight: 800; - margin-right: 5px; } } } diff --git a/src/app/wlo-search/template/swimlane/swimlane.component.theme.scss b/src/app/wlo-search/template/swimlane/swimlane.component.theme.scss new file mode 100644 index 00000000..97f810e8 --- /dev/null +++ b/src/app/wlo-search/template/swimlane/swimlane.component.theme.scss @@ -0,0 +1,23 @@ +@use '@angular/material' as mat; +@import '../../../../additional-colors'; +@import '../../functions'; + +@mixin swimlane-theme($theme) { + app-swimlane { + .text-widget { + background: mat.get-theme-color($theme, surface-container-low); + } + .add-widget-container { + border-color: rgba(mat.get-theme-color($theme, outline), 0.7); + + .add-widget-btn { + color: mat.get-theme-color($theme, primary, 40); + background: $neon-default; + + &:hover { + background: $neon-medium; + } + } + } + } +} diff --git a/src/app/wlo-search/template/swimlane/swimlane.component.ts b/src/app/wlo-search/template/swimlane/swimlane.component.ts index 818a6f01..f7afc28d 100644 --- a/src/app/wlo-search/template/swimlane/swimlane.component.ts +++ b/src/app/wlo-search/template/swimlane/swimlane.component.ts @@ -1,6 +1,5 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; import { MdsValue, MdsWidget, Node, NodeEntries } from 'ngx-edu-sharing-api'; -import { EduSharingUiCommonModule } from 'ngx-edu-sharing-ui'; import { SharedModule } from '../../shared/shared.module'; import { widgetTypeOptions, workspaceSpacesStorePrefix } from '../custom-definitions'; import { GridTile } from './grid-tile'; @@ -8,7 +7,7 @@ import { GridWidgetComponent } from './grid-widget/grid-widget.component'; import { SelectOption } from './swimlane-settings-dialog/select-option'; @Component({ - imports: [GridWidgetComponent, EduSharingUiCommonModule, SharedModule], + imports: [GridWidgetComponent, SharedModule], selector: 'app-swimlane', templateUrl: './swimlane.component.html', styleUrls: ['./swimlane.component.scss'], diff --git a/src/app/wlo-search/template/template.component.scss b/src/app/wlo-search/template/template.component.scss index f48f1be0..eb251844 100644 --- a/src/app/wlo-search/template/template.component.scss +++ b/src/app/wlo-search/template/template.component.scss @@ -1,6 +1,7 @@ -@import '../../../colors'; +@import '../../../additional-colors'; :host { + // this CSS variable is overwritten by the component --topic-color: $primary-dark; --border-radius: 24px; --maximal-width: 1200px; @@ -13,6 +14,17 @@ margin: auto; } +.alert-warning { + margin: 24px 24px 0 24px !important; + padding: 16px; + text-align: center; + // TODO: Typography + font-size: 16px; + border-width: 1px; + border-style: solid; + border-radius: 4px; +} + .reloading-indicator-bg { position: absolute; top: 0; @@ -24,10 +36,6 @@ justify-content: center; cursor: wait; z-index: 100; - - &.transparent-bg { - background: $black-40; - } } .template-header { @@ -65,14 +73,15 @@ } .side-menu-header { + // TODO: Typography font-size: 18px; } .portal-outer-wrapper { - display: block; margin-top: -20px; margin-bottom: 30px; padding-right: calc(var(--offcanvas-menu-width) + var(--offcanvas-offset)); + display: block; border-radius: var(--border-radius); z-index: 10; @@ -81,10 +90,10 @@ } .portal-wrapper { + margin: 0 auto; display: flex; justify-content: center; max-width: initial; - margin: 0 auto; transition: 0.3s; .portal-wrapper-left { @@ -158,7 +167,9 @@ position: absolute; right: 25px; - mat-icon { + .mat-icon, + .mat-mdc-icon { + // TODO: Typography font-size: 30px; } } @@ -236,6 +247,7 @@ .fachportal-new-content-inner { h2 { + // TODO: Typography font-size: 20px; } } @@ -255,6 +267,7 @@ .no-swimlanes { padding: 10px; + // TODO: Typography font-size: 16px; text-align: center; } diff --git a/src/app/wlo-search/template/template.component.theme.scss b/src/app/wlo-search/template/template.component.theme.scss index f328b2bf..c935d858 100644 --- a/src/app/wlo-search/template/template.component.theme.scss +++ b/src/app/wlo-search/template/template.component.theme.scss @@ -1,41 +1,40 @@ @use '@angular/material' as mat; +@import '../../../additional-colors'; @import '../functions'; @mixin template-page-theme($theme) { - $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - $primary: map-get($theme, primary); - $customAccent: map-get($theme, custom-accent); - $customGray: map-get($theme, custom-gray); - $primary-foreground-color: primary-foreground-color($theme); - app-template { - // overwrite border radius - --mdc-fab-small-container-shape: 4px; - .action-btn { - color: mat.m2-get-color-from-palette($customGray, gray3); - background: mat.m2-get-color-from-palette($customGray, gray1); + @if mat.get-theme-type($theme) == light { + color: mat.get-theme-color($theme, neutral, 35); + background: mat.get-theme-color($theme, neutral, 99); + } @else { + color: mat.get-theme-color($theme, neutral, 99); + background: mat.get-theme-color($theme, neutral, 35); + } &.btn-modify { - color: mat.m2-get-color-from-palette($primary); - background: mat.m2-get-color-from-palette($customAccent, accent1); + color: mat.get-theme-color($theme, on-primary); + background: mat.get-theme-color($theme, primary); } } .reloading-indicator-bg { - background: mat.m2-get-color-from-palette($background, background); - } + background: mat.get-theme-color($theme, surface); - // note: this element is located within the wlo-topic-header, - // thus, !important is necessary to overwrite its style - h1 { - color: mat.m2-get-color-from-palette($foreground, text) !important; + &.transparent-bg { + background: rgba(mat.get-theme-color($theme, inverse-surface), 0.5); + } } .template-header-container, .portal-wrapper-left { - background: mat.m2-get-color-from-palette($background, background); + background: mat.get-theme-color($theme, surface); + } + + .alert-warning { + border: 1px solid $accent-warning; + background: $accent-warning-20; } } } diff --git a/src/app/wlo-search/template/template.component.ts b/src/app/wlo-search/template/template.component.ts index 3acdb2c8..b3d4187a 100644 --- a/src/app/wlo-search/template/template.component.ts +++ b/src/app/wlo-search/template/template.component.ts @@ -21,7 +21,7 @@ import { Facet } from 'ngx-edu-sharing-api/lib/api/models/facet'; import { ParentEntries } from 'ngx-edu-sharing-api/lib/api/models/parent-entries'; import { SearchResultNode } from 'ngx-edu-sharing-api/lib/api/models/search-result-node'; import { Value } from 'ngx-edu-sharing-api/lib/api/models/value'; -import { EduSharingUiCommonModule, SpinnerComponent } from 'ngx-edu-sharing-ui'; +import { SpinnerComponent } from 'ngx-edu-sharing-ui'; import { ColorChangeEvent, FilterBarComponent, @@ -85,7 +85,6 @@ import { SwimlaneSettingsDialogComponent } from './swimlane/swimlane-settings-di imports: [ AddSwimlaneBorderButtonComponent, CdkDragHandle, - EduSharingUiCommonModule, FilterBarComponent, SearchModule, SharedModule, @@ -219,7 +218,29 @@ export class TemplateComponent implements OnInit { } // TODO: use a color from the palette defined in the collection // set the background to some random (but deterministic) color, just for visuals - this.topicColor = this.stringToColour(this.topic()); + let topicColor: string = this.stringToColour(this.topic()); + + // TODO: later, this will be stored as variable that can be changed by the user + // check, if dark mode is preferred (https://stackoverflow.com/a/57795495) + if ( + window.matchMedia && + window.matchMedia('(prefers-color-scheme: dark)').matches + ) { + // check, if the color is too light + // https://stackoverflow.com/a/12043228 + const c: string = topicColor.substring(1); // strip # + const rgb: number = parseInt(c, 16); // convert rrggbb to decimal + const r: number = (rgb >> 16) & 0xff; // extract red + const g: number = (rgb >> 8) & 0xff; // extract green + const b: number = (rgb >> 0) & 0xff; // extract blue + + const luma: number = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709 + if (luma > 100) { + // darken the color (https://stackoverflow.com/a/13532993) + topicColor = this.shadeColor(topicColor, -60); + } + } + this.topicColor = topicColor; // 2) retrieve the page config node either by checking the node itself or by iterating the parents of the collectionNode this.pageConfigNode = await this.retrievePageConfigNode(this.collectionNode); @@ -976,6 +997,8 @@ export class TemplateComponent implements OnInit { swimlane, // widgets: this.topicWidgets, }, + minWidth: '700px', + maxWidth: '100%', }); // TODO: fix error when closing (ERROR TypeError: Cannot set properties of null (setting '_closeInteractionType')) @@ -1106,6 +1129,31 @@ export class TemplateComponent implements OnInit { return colour; } + // https://stackoverflow.com/a/13532993 + shadeColor(color: string, percent: number): string { + let r: number = parseInt(color.substring(1, 3), 16); + let g: number = parseInt(color.substring(3, 5), 16); + let b: number = parseInt(color.substring(5, 7), 16); + + r = Math.round((r * (100 + percent)) / 100); + g = Math.round((g * (100 + percent)) / 100); + b = Math.round((b * (100 + percent)) / 100); + + r = r < 255 ? r : 255; + g = g < 255 ? g : 255; + b = b < 255 ? b : 255; + + r = Math.round(r); + g = Math.round(g); + b = Math.round(b); + + const RR: string = r.toString(16).length == 1 ? '0' + r.toString(16) : r.toString(16); + const GG: string = g.toString(16).length == 1 ? '0' + g.toString(16) : g.toString(16); + const BB: string = b.toString(16).length == 1 ? '0' + b.toString(16) : b.toString(16); + + return '#' + RR + GG + BB; + } + protected readonly defaultMds: string = defaultMds; protected readonly defaultTopicTextNodeId: string = defaultTopicTextNodeId; protected readonly defaultTopicsColumnBrowserNodeId: string = defaultTopicsColumnBrowserNodeId; diff --git a/src/app/wlo-search/wlo-search.component.theme.scss b/src/app/wlo-search/wlo-search.component.theme.scss index 9f64bd84..1026d4f6 100644 --- a/src/app/wlo-search/wlo-search.component.theme.scss +++ b/src/app/wlo-search/wlo-search.component.theme.scss @@ -2,14 +2,12 @@ @import './functions'; @mixin wlo-search-theme($theme) { - $background: map-get($theme, background); - $primary-foreground-color: primary-foreground-color($theme); - app-wlo-search { > .loading-spinner { - background-color: mat.m2-get-color-from-palette($background, dialog, 0.5); + background-color: rgba(mat.get-theme-color($theme, surface), 0.5); + .mat-mdc-progress-spinner circle { - stroke: $primary-foreground-color; + stroke: mat.get-theme-color($theme, primary); } } } diff --git a/src/app/wlo-search/wlo-search.module.ts b/src/app/wlo-search/wlo-search.module.ts index 237482ac..52f0da34 100644 --- a/src/app/wlo-search/wlo-search.module.ts +++ b/src/app/wlo-search/wlo-search.module.ts @@ -3,23 +3,23 @@ import { CoreModule } from './core/core.module'; import { PreferencesModule } from './preferences/preferences.module'; import { SearchModule } from './search/search.module'; import { SharedModule } from './shared/shared.module'; +import { SwimlaneComponent } from './template/swimlane/swimlane.component'; +import { SwimlaneSettingsDialogComponent } from './template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component'; +import { TemplateComponent } from './template/template.component'; import { WloSearchRoutingModule } from './wlo-search-routing.module'; import { WloSearchComponent } from './wlo-search.component'; -import { TemplateComponent } from './template/template.component'; -import { SwimlaneSettingsDialogComponent } from './template/swimlane/swimlane-settings-dialog/swimlane-settings-dialog.component'; -import { SwimlaneComponent } from './template/swimlane/swimlane.component'; @NgModule({ declarations: [WloSearchComponent], imports: [ - WloSearchRoutingModule, CoreModule, - SharedModule, - SearchModule, PreferencesModule, - TemplateComponent, + SearchModule, + SharedModule, SwimlaneComponent, SwimlaneSettingsDialogComponent, + TemplateComponent, + WloSearchRoutingModule, ], }) export class WloSearchModule {} diff --git a/src/index.html b/src/index.html index c5379e50..3b68280f 100644 --- a/src/index.html +++ b/src/index.html @@ -8,7 +8,7 @@ - + diff --git a/src/material.scss b/src/material.scss deleted file mode 100644 index ad84a3b8..00000000 --- a/src/material.scss +++ /dev/null @@ -1,107 +0,0 @@ -@use '@angular/material' as mat; -// Custom Theming for Angular Material -// For more information: https://material.angular.io/guide/theming - -$primary: #032850; - -$primary-palette: ( - 50: #d9e2eb, - 70: #ccd8e5, - 100: lighten($primary, 40%), - 200: lighten($primary, 30%), - 300: lighten($primary, 20%), - 400: #003b7c, - 500: $primary, - 600: darken($primary, 3%), - 700: darken($primary, 6%), - 800: darken($primary, 9%), - 900: darken($primary, 12%), - A100: lighten($primary, 40%), - A200: lighten($primary, 30%), - A400: $primary, - A700: darken($primary, 12%), - contrast: ( - 50: rgba(black, 0.87), - 100: rgba(black, 0.87), - 200: rgba(black, 0.87), - 300: rgba(black, 0.87), - 400: white, - 500: white, - 600: white, - 700: white, - 800: white, - 900: white, - A100: rgba(black, 0.87), - A200: rgba(black, 0.87), - A400: white, - A700: white, - ), -); - -$custom-accent: ( - accent1: #e4f700, - accent2: #ec4a70, - contrast: ( - accent1: rgba(black, 0.87), - accent2: white, - ), -); - -$custom-gray: ( - gray1: #f4f4f4, - gray2: #cacaca, - gray3: #545454, - contrast: ( - gray1: white, - gray2: rgba(black, 0.87), - gray3: rgba(black, 0.87), - ), -); - -$app-custom-accent: mat.m2-define-palette($custom-accent, accent1, accent2, contrast); -$app-custom-gray: mat.m2-define-palette($custom-gray, gray1, gray2, gray3); -$app-primary: mat.m2-define-palette($primary-palette); -$app-accent: mat.m2-define-palette($primary-palette, A200, A100, A400); -$app-warn: mat.m2-define-palette(mat.$m2-red-palette); - -// Foreground colors. -// -// Mostly copy-paste from _theming.scss. Changes are marked with comments. -// Foreground palette for light themes. -$app-light-theme-foreground: ( - base: black, - divider: rgba(black, 0.12), - dividers: rgba(black, 0.12), - disabled: rgba(black, 0.38), - disabled-button: rgba(black, 0.26), - disabled-text: rgba(black, 0.38), - elevation: black, - hint-text: rgba(black, 0.38), - secondary-text: rgba(black, 0.67), - // changed - icon: rgba(black, 0.54), - icons: rgba(black, 0.54), - text: rgba(black, 0.87), - slider-min: rgba(black, 0.87), - slider-off: rgba(black, 0.26), - slider-off-active: rgba(black, 0.38), -); - -// Foreground palette for dark themes. -$app-dark-theme-foreground: ( - base: white, - divider: rgba(white, 0.12), - dividers: rgba(white, 0.12), - disabled: rgba(white, 0.5), - disabled-button: rgba(white, 0.3), - disabled-text: rgba(white, 0.5), - elevation: black, - hint-text: rgba(white, 0.5), - secondary-text: rgba(white, 0.7), - icon: white, - icons: white, - text: white, - slider-min: white, - slider-off: rgba(white, 0.3), - slider-off-active: rgba(white, 0.3), -); diff --git a/src/styles.scss b/src/styles.scss index 5d056c85..2e349255 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,92 +1,51 @@ @use '@angular/material' as mat; @use 'app/wlo-search'; -@import './colors.scss'; -@import './fonts.scss'; -$material-icons-font-path: 'material-icons/iconfont/'; -@import 'material-icons/iconfont/material-icons.scss'; - -// App color palette -@import 'material'; - -// Plus imports for other components in your app. -@import 'angular-material-overrides.theme.scss'; +@use 'custom-theme' as custom-theme; -// Overrides -// -// Redefine or introduce new properties here. -// mat.$light-theme-background-palette: map_merge( -// mat.$light-theme-background-palette, -// ( -// // tooltip: map_get(mat.$grey-palette, 100), -// ) -// ); -// mat.$light-theme-foreground-palette: map_merge( -// mat.$light-theme-foreground-palette, -// ( -// // tooltip: $dark-secondary-text, -// ) -// ); +@import './additional-colors'; +@import './fonts'; +// TODO: Remove, as those are the incorrect styles +$material-icons-font-path: 'material-icons/iconfont/'; +@import 'material-icons/iconfont/material-icons'; +@import 'ngx-edu-sharing-ui/assets/scss/variables'; +@import 'angular-material-overrides.theme'; -@mixin apply-theme($theme, $foreground-theme) { - $theme: map_merge( - $theme, - ( - custom-accent: $app-custom-accent, - custom-gray: $app-custom-gray, - foreground: $foreground-theme, - ) - ); - // Include theme styles for core and each component used in your app. - // Alternatively, you can import and @include the theme mixins for each component - // that you are using. +// Include the common styles for Angular Material +// The core mixin that includes prerequisite styles for common features used by multiple components +@include mat.all-component-typographies(); +@include mat.core(); +// TODO: Comment out due to ugly focus indicators on click +//@include mat.strong-focus-indicators(); + +@mixin apply-theme($theme) { + // Emit styles for color, typography and density to all components. + // Alternatives: all-component-colors, all-component-typographies, all-component-densities + // + // You might reduce size by only including the styles used in the application, + // e.g. mat.core-theme and mat.button-theme instead of mat.all-component-theme @include mat.all-component-themes($theme); - @include mat.strong-focus-indicators-theme($theme); + //@include mat.strong-focus-indicators-theme($theme); + // include global material overrides @include angular-material-theme-overrides($theme); + // include search component themes @include wlo-search.components-themes($theme); - body { - color: mat.m2-get-color-from-palette(map-get($theme, foreground), text); - background-color: mat.m2-get-color-from-palette(map-get($theme, background), background); - } } -// Include the common styles for Angular Material. We include this here so that you only -// have to load a single css file for Angular Material in your app. -// Be sure that you only ever include this mixin once! -// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles. -// The following line adds: -// 1. Default typography styles for all components -// 2. Styles for typography hierarchy classes (e.g. .mat-headline-1) -// If you specify typography styles for the components you use elsewhere, you should delete this line. -// If you don't need the default component typographies but still want the hierarchy styles, -// you can delete this line and instead use: -// `@include mat.legacy-typography-hierarchy(mat.define-typography-config());` -@include mat.all-component-typographies(); -@include mat.core(); -@include mat.strong-focus-indicators(); - -// Create the theme object (a Sass map containing all of the palettes). -$app-theme-light: mat.m2-define-light-theme( - ( - color: ( - primary: $app-primary, - accent: $app-accent, - warn: $app-warn, - ), - density: -1, - ) -); -$app-theme-dark: mat.m2-define-dark-theme($app-primary, $app-accent, $app-warn); - -/* -@media not all and (prefers-color-scheme: dark) { - @include apply-theme($app-theme-light); -} -@media all and (prefers-color-scheme: dark) { - @include apply-theme($app-theme-dark); +:root { + @include apply-theme(custom-theme.$light-theme); + // make CSS variable accessible for further applications + --primary: #{mat.get-theme-color(custom-theme.$light-theme, primary)}; } -*/ -@include apply-theme($app-theme-light, $app-light-theme-foreground); +// TODO: This will enable dark mode, if selected by the system +// for dark mode, we only want to swap the colors and every other style should remain the same +//@media (prefers-color-scheme: dark) { +// :root { +// @include mat.all-component-colors(custom-theme.$dark-theme); +// } +//} + +// TODO: Convert to Material 3 // Typography // // See @angular/material/core/typography/_typography.scss for defaults. @@ -126,85 +85,36 @@ $form-typography: mat.m2-define-typography-config( // adjustments by the wlo-search components @include wlo-search.components-typographies($app-typography); +// CUSTOM GLOBAL STYLES html, body { height: 100%; - --primary: #{$primary-dark}; -} - -// fix opening mat-dialog moves elements with position: sticky -// related answer: https://stackoverflow.com/a/49067665 -html.cdk-global-scrollblock { - position: static !important; - overflow-y: hidden !important; } body { margin: 0; + // TODO: Replace font-family: mat.m2-font-family($app-typography); font-size: mat.m2-font-size($app-typography, body-1); line-height: mat.m2-line-height($app-typography, body-1); } -.alert-warning { - margin: 24px 24px 0 24px !important; - padding: 16px; - font-size: 16px; - text-align: center; - border: 1px solid $accent-warning; - border-radius: 4px; - color: $black; - background: $accent-warning-20; +// Copied from Edu-Sharing Core-UI +.display-none { + display: none !important; } - -:focus-visible { - outline-style: solid; - outline-offset: 2px; - outline-width: 3px; - outline-color: currentcolor; +.opacity-invisible { + opacity: 0; } -.cdk-focused:not(.cdk-keyboard-focused) .mat-mdc-focus-indicator::before, -.cdk-focused:not(.cdk-keyboard-focused).mat-mdc-focus-indicator::before, -.cdk-focused:not(.cdk-keyboard-focused).mat-focus-indicator::before { - display: none; -} - -// TODO: Move into theme file of details component -.mdc-button--outlined.btn-outline-primary:not(:disabled) { - color: var(--primary); - border: 1.5px solid var(--primary); - - .mat-icon, - .mat-mdc-icon { - margin-left: 6px !important; - margin-right: -3px !important; - font-size: 20px; - width: 20px; - height: 20px; - } - - &:hover { - color: $white; - background: var(--primary); - } +// fix opening mat-dialog moves elements with position: sticky +// related answer: https://stackoverflow.com/a/49067665 +html.cdk-global-scrollblock { + position: static !important; + overflow-y: hidden !important; } -.mdc-button--outlined.btn-outline-warn:not(:disabled) { - color: mat.m2-get-color-from-palette(mat.$m2-red-palette, 500); - border: 1.5px solid mat.m2-get-color-from-palette(mat.$m2-red-palette, 500); - - .mat-icon, - .mat-mdc-icon { - margin-left: 6px !important; - margin-right: -3px !important; - font-size: 20px; - width: 20px; - height: 20px; - } - - &:hover { - color: $white; - background: mat.m2-get-color-from-palette(mat.$m2-red-palette, 500); - } +:focus-visible { + outline-offset: 2px; + outline: currentcolor solid 3px; }