refactor: layout detail adjustments

refactor: increase contrast of toolbar fav button refactor: remove non working localization for news refactor: equalize tab bar in top toolbar refactor: padding on map buttons and rename them refactor: repair profile card alignments for safari refactor: fix dashboard resize behavior on safari refactor: make title card button reachable again refactor: put card hover in media query refactor: realign schedule view toolbar refactor: adjust toolbar heights refactor: introduce proper header logo
2026-01-20 08:33:11 +00:00 · 2022-08-18 17:19:58 +00:00
parent ebdc14d3c3
commit f3cf3b30e3
26 changed files with 462 additions and 66 deletions
--- a/src/app/modules/catalog/catalog.component.html
+++ b/src/app/modules/catalog/catalog.component.html
@@ -6,21 +6,23 @@
    <!--TODO: read this from the config (menu item title)-->
    <ion-title>{{ 'catalog.title' | translate | titlecase }}</ion-title>
  </ion-toolbar>
+  <ion-toolbar color="primary" mode="md">
+    <ion-segment
+      (ionChange)="segmentChanged($event)"
+      [value]="selectedSemesterUID"
+      mode="md"
+    >
+      <ion-segment-button
+        *ngFor="let semester of availableSemesters"
+        [value]="semester.uid"
+      >
+        <ion-label>{{ semester.acronym }}</ion-label>
+      </ion-segment-button>
+    </ion-segment>
+  </ion-toolbar>
 </ion-header>

 <ion-content>
-  <ion-segment
-    (ionChange)="segmentChanged($event)"
-    [value]="selectedSemesterUID"
-    mode="md"
-  >
-    <ion-segment-button
-      *ngFor="let semester of availableSemesters"
-      [value]="semester.uid"
-    >
-      <ion-label>{{ semester.acronym }}</ion-label>
-    </ion-segment-button>
-  </ion-segment>
  <ion-list *ngIf="catalogs && catalogs.length > 0">
    <ion-item
      *ngFor="let catalog of catalogs"
--- a/src/app/modules/catalog/catalog.component.scss
+++ b/src/app/modules/catalog/catalog.component.scss
@@ -7,3 +7,9 @@ ion-segment-button {
 .margin-top {
  margin-top: 20vh;
 }
+
+ion-toolbar.in-toolbar {
+  &:last-of-type {
+    padding: 0 !important;
+  }
+}
--- a/src/app/modules/dashboard/dashboard.component.html
+++ b/src/app/modules/dashboard/dashboard.component.html
@@ -1,13 +1,4 @@
 <ion-header>
-  <ion-toolbar class="ion-hide-md-up">
-    <ion-label slot="start">{{
-      'dashboard.header.title' | daytimeKey | translate
-    }}</ion-label>
-    <ion-img src="assets/imgs/logo.png" class="logo"></ion-img>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
  <div class="schedule">
    <a [routerLink]="['/schedule/recurring']">
      <ion-icon name="layout-grid"></ion-icon>
@@ -35,7 +26,9 @@
      <ion-label>{{ 'dashboard.schedule.noEventLink' | translate }}</ion-label>
    </a>
  </div>
+</ion-header>

+<ion-content>
  <div class="scrollable-container">
    <stapps-navigation-section></stapps-navigation-section>
    <stapps-search-section></stapps-search-section>
--- a/src/app/modules/dashboard/dashboard.component.scss
+++ b/src/app/modules/dashboard/dashboard.component.scss
@@ -44,7 +44,7 @@ ion-content {
  .scrollable-container {
    overflow: hidden auto;
    height: 100%;
-    padding-top: 160px;
+    padding-top: 122px;

    @media (max-width: 440px) {
      padding-top: 140px;
@@ -52,7 +52,7 @@ ion-content {

    @include ion-md-up {
      padding-top: 0;
-      padding-bottom: 160px;
+      padding-bottom: 122px;
    }
  }

@@ -100,10 +100,10 @@ ion-content {
  a:first-child {
    border: 2px solid var(--ion-color-primary-tint);
    text-align: center;
-    flex: 1 1 auto;
+    flex: 0 0 auto;
    aspect-ratio: 1;
    box-sizing: content-box;
-    max-height: 100px;
+    max-height: 60px;

    @include phoneLandscape {
      height: auto;
--- a/src/app/modules/data/detail/data-detail.scss
+++ b/src/app/modules/data/detail/data-detail.scss
@@ -2,6 +2,11 @@
  ion-card-header {
    font-weight: bold;
  }
+  stapps-favorite-button {
+      ion-icon {
+      color: var(--ion-color-light);
+    }
+  }
 }

 ::ng-deep {
--- a/src/app/modules/data/elements/title-card.component.html
+++ b/src/app/modules/data/elements/title-card.component.html
@@ -35,13 +35,14 @@
        {{ 'description' | thingTranslate: item }}
      </div>
    </div>
+    <ion-button
+      expand="full"
+      fill="clear"
+      color="light"
+      *ngIf="item.description && buttonShown"
+      (click)="toggleDescriptionAccordion()"
+    >
+      <ion-icon [name]="buttonState" size="large"></ion-icon>
+    </ion-button>
  </ion-card-content>
 </ion-card>
-<ion-button
-  expand="full"
-  fill="clear"
-  *ngIf="item.description && buttonShown"
-  (click)="toggleDescriptionAccordion()"
->
-  <ion-icon [name]="buttonState" size="large"></ion-icon>
-</ion-button>
--- a/src/app/modules/data/elements/title-card.component.ts
+++ b/src/app/modules/data/elements/title-card.component.ts
@@ -57,7 +57,7 @@ export class TitleCardComponent implements OnInit, OnChanges {
  ngOnInit(): void {
    if (this.item.description) {
      this.descriptionLinesToDisplay = this.descriptionPreviewLines;
-      setTimeout(() => this.checkTextElipsis(), 0);
+      setTimeout(() => this.checkTextElipsis(), 100);
    }
  }

--- a/src/app/modules/data/types/message/message-detail-content.html
+++ b/src/app/modules/data/types/message/message-detail-content.html
@@ -36,9 +36,7 @@
  <stapps-simple-card
    *ngIf="item.datePublished"
    class="date-published"
-    content="{{ 'news.publishedOn' | translate | titlecase }} {{
-      item.datePublished | amCalendar | sentencecase
-    }}"
+    content="{{ item.datePublished | amCalendar | sentencecase }}"
  ></stapps-simple-card>
  <stapps-simple-card content="{{ item.messageBody }}"></stapps-simple-card>
  <ion-card *ngIf="item.sameAs">
--- a/src/app/modules/data/types/place/special/mensa/place-mensa.scss
+++ b/src/app/modules/data/types/place/special/mensa/place-mensa.scss
@@ -5,6 +5,7 @@ ion-segment-button {
 ion-segment {
  justify-content: space-between;
  overflow: auto;
+  height: 50px;

  &::-webkit-scrollbar {
      width: 0;
--- a/src/app/modules/hebis/list/hebis-search-page.html
+++ b/src/app/modules/hebis/list/hebis-search-page.html
@@ -18,7 +18,7 @@
    >
    </ion-searchbar>
  </ion-toolbar>
-  <ion-toolbar color="primary" class="category-tab" mode="ios">
+  <ion-toolbar color="primary" class="category-tab">
    <ion-buttons class="ion-justify-content-between">
      <ion-button
        [routerLink]="['/search/' + (queryText || '')]"
--- a/src/app/modules/map/page/map-page.scss
+++ b/src/app/modules/map/page/map-page.scss
@@ -96,6 +96,7 @@ div.map-buttons.above {
  }
  div.floating-content {
    justify-content: normal;
+    padding: 0 var(--spacing-md) var(--spacing-lg);
    stapps-map-item {
      display: grid;
      width: 100%;
--- a/src/app/modules/menu/navigation/navigation.html
+++ b/src/app/modules/menu/navigation/navigation.html
@@ -14,7 +14,7 @@
          [routerLink]="['/']"
          [routerDirection]="'root'"
        >
-          <ion-img src="assets/imgs/logo.png" class="logo"></ion-img>
+          <ion-img src="assets/imgs/header.svg" class="logo"></ion-img>
        </ion-title>
      </ion-toolbar>
    </ion-header>
--- a/src/app/modules/profile/page/profile-page.component.html
+++ b/src/app/modules/profile/page/profile-page.component.html
@@ -11,12 +11,12 @@
  <section class="user-card-wrapper">
    <ion-card class="user-card">
      <ion-card-header>
-        <ion-img src="assets/imgs/logo.png"></ion-img>
+        <ion-img src="assets/imgs/header.svg"></ion-img>
        <span>
          {{
            userInfo?.role
-              ? (userInfo?.role | uppercase)
-              : ('profile.role_guest' | translate | uppercase)
+              ? (userInfo?.role | titlecase)
+              : ('profile.role_guest' | translate | titlecase)
          }}
        </span>
      </ion-card-header>
--- a/src/app/modules/profile/page/profile-page.component.scss
+++ b/src/app/modules/profile/page/profile-page.component.scss
@@ -44,6 +44,7 @@
        ion-img {
          display: block;
          height: 36px;
+          object-position: left 50%;
          margin-right: auto;
        }

@@ -63,6 +64,9 @@
          position: absolute;
          opacity: 0.13;
          height: 100%;
+          width: 50%;
+          margin-left: calc(var(--spacing-md) * -4);
+          object-position: left 50%;
        }

        .main-info {
--- a/src/app/modules/schedule/page/grid/schedule-day.scss
+++ b/src/app/modules/schedule/page/grid/schedule-day.scss
@@ -32,7 +32,6 @@
      font-size: var(--font-size-md);
      font-weight: var(--font-weight-bold);
      text-align: center;
-      text-transform: uppercase;
      background-color: var(--ion-color-primary-contrast);
      z-index: 3;

--- a/src/app/modules/schedule/page/schedule-page.html
+++ b/src/app/modules/schedule/page/schedule-page.html
@@ -34,12 +34,7 @@
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar color="primary" mode="md" class="tabs-toolbar">
-    <ion-segment
-      #segment
-      class="tabs"
-      value="calendar"
-      (ionChange)="onSegmentChange()"
-    >
+    <ion-segment #segment value="calendar" (ionChange)="onSegmentChange()">
      <ion-segment-button value="calendar">
        <ion-label>{{ 'schedule.calendar' | translate }}</ion-label>
      </ion-segment-button>
--- a/src/app/modules/schedule/page/schedule-page.scss
+++ b/src/app/modules/schedule/page/schedule-page.scss
@@ -71,5 +71,12 @@ div {
 }

 ion-segment-button {
+  max-width: 100%;
  text-transform: none;
 }
+
+ion-toolbar.in-toolbar {
+  &:last-of-type {
+    padding: 0 !important;
+  }
+}