Theaninova/openstapps
1
0
Fork 0
mirror of https://gitlab.com/openstapps/openstapps.git synced 2026-01-21 17:12:43 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add stylelint

Browse Source
This commit is contained in:
Thea Schöbl
2023-07-18 15:24:15 +02:00
parent b085850207
commit d3268b50c2
89 changed files with 1436 additions and 801 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/app/src/app/modules/about/about-license-modal.scss
View File

@@ -16,8 +16,8 @@
ion-card-header {
ion-button {
position: absolute;
right: 0;
top: 0;
right: 0;
}
}

4
frontend/app/src/app/modules/about/about-licenses.scss
View File

@@ -17,8 +17,8 @@ ion-content > div {
}
cdk-virtual-scroll-viewport {
height: 100%;
width: 100%;
height: 100%;
}
:host ::ng-deep {
@@ -32,6 +32,6 @@ cdk-virtual-scroll-viewport {
}
.supertext-icon {
vertical-align: text-top;
height: 14px;
vertical-align: text-top;
}

93
frontend/app/src/app/modules/about/about-page/about-page.scss
View File

@@ -12,42 +12,14 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import 'src/theme/util/_mixins.scss';
@import '~src/theme/util/mixins';
ion-text {
margin-inline: var(--spacing-md);
color: var(--ion-color-primary-contrast);
}
:host ::ng-deep {
ion-card {
margin: 0;
box-shadow: none;
ion-card-content {
h1 {
margin: 0;
}
padding-bottom: 8px;
}
ion-card-header {
color: var(--ion-color-dark);
padding-top: 8px;
padding-bottom: 4px;
font-weight: bold;
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
p,
h3,
h2,
@@ -55,37 +27,70 @@ ion-text {
margin-inline: var(--spacing-md);
}
ion-grid,
ion-col {
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
}
ion-card {
margin: 0;
box-shadow: none;
ion-card-content {
padding-bottom: 8px;
h1 {
margin: 0;
}
}
ion-card-header {
padding-top: 8px;
padding-bottom: 4px;
font-weight: bold;
color: var(--ion-color-dark);
}
ion-grid,
ion-col {
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
}
}
.about-changelog,
.licenses-content,
.page-content {
margin: var(--spacing-md);
@include border-radius-in-parallax(var(--border-radius-default));
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin: var(--spacing-md);
padding-block-end: var(--spacing-md);
background: var(--ion-item-background);
padding-block-end: var(--spacing-md);
@include border-radius-in-parallax(var(--border-radius-default));
& > * {
@include border-radius-in-parallax(var(--border-radius-default));
position: relative;
overflow: hidden;
display: block;
margin: 0;
ion-card-subtitle {
font-size: var(--font-size-lg);
color: var(--ion-color-light-contrast);
}
display: block;
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
position: relative;
margin: 0;
& > ion-thumbnail {
background: var(--ion-color-primary);
}
}
}
}
ion-text {
color: var(--ion-color-primary-contrast);
}

3
frontend/app/src/app/modules/assessments/page/assessments-page.scss
View File

@@ -14,7 +14,8 @@
*/
.content {
--ion-item-background: var(--ion-background-color);
height: 100%;
padding-inline: 8px;
--ion-item-background: var(--ion-background-color);
}

2
frontend/app/src/app/modules/assessments/types/assessment/assessment-detail.scss
View File

@@ -1,4 +1,4 @@
stapps-data-list {
height: 100px;
width: 100%;
height: 100px;
}

2
frontend/app/src/app/modules/auth/auth-callback/page/auth-callback-page.component.html
View File

@@ -13,7 +13,7 @@
~ this program. If not, see <https://www.gnu.org/licenses/>.
-->
<div class="centeredMessageContainer">
<div class="centered-message-container">
<p>
{{ 'auth.messages' + '.' + PROVIDER_TYPE + '.' + 'authorizing' | translate }}
</p>

13
frontend/app/src/app/modules/calendar/add-event-review-modal.scss
View File

@@ -1,29 +1,30 @@
div {
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
height: 100%;
ion-card-header {
ion-button {
position: absolute;
right: 0;
top: 0;
right: 0;
}
}
ion-card-content {
height: 100%;
overflow: scroll;
padding-left: 0;
height: 100%;
padding-right: 0;
padding-left: 0;
}
}
.horizontal-flex {
height: fit-content;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
justify-content: flex-end;
height: fit-content;
}

83
frontend/app/src/app/modules/dashboard/dashboard.component.scss
View File

@@ -22,12 +22,13 @@
:host ion-toolbar:last-of-type {
--padding-top: var(--spacing-md);
--padding-bottom: var(--spacing-md);
z-index: -1;
ion-icon {
margin-right: var(--spacing-sm);
width: var(--font-size-xl);
height: var(--font-size-xl);
margin-right: var(--spacing-sm);
}
ion-label {
@@ -37,71 +38,81 @@
}
.logo {
aspect-ratio: 1/1;
width: 27vw;
max-width: 150px;
max-height: 80px;
aspect-ratio: 1/1;
object-position: right;
margin-left: auto;
margin-right: 0;
margin-left: auto;
object-position: right;
}
}
ion-content {
--background: var(--ion-background-color);
--padding-bottom: var(--spacing-xl);
&::part(inner-scroll) {
scrollbar-gutter: stable;
}
}
.schedule {
width: 100%;
z-index: 3;
background: var(--ion-color-primary);
color: var(--ion-color-primary-contrast);
display: flex;
justify-content: space-between;
gap: var(--spacing-md);
padding: var(--spacing-sm);
padding-top: 0;
@include ion-md-up {
position: unset;
width: unset;
height: calc(var(--tablet-top-bar-height) + (2 * var(--spacing-xl)));
margin: 0;
padding: var(--spacing-xl);
}
z-index: 3;
display: flex;
gap: var(--spacing-md);
justify-content: space-between;
width: 100%;
padding: var(--spacing-sm);
padding-top: 0;
color: var(--ion-color-primary-contrast);
background: var(--ion-color-primary);
a {
display: flex;
flex-direction: column;
color: var(--ion-color-primary-contrast);
text-decoration: none;
height: auto;
padding: var(--spacing-lg);
color: var(--ion-color-primary-contrast);
text-decoration: none;
border-radius: var(--border-radius-default);
}
a:first-child {
text-align: center;
flex: 0 0 auto;
aspect-ratio: 1;
box-sizing: content-box;
max-height: 60px;
overflow: hidden;
border: 2px solid var(--ion-color-primary-tint);
@include phoneLandscape {
@include phone-landscape {
height: auto;
}
}
a:first-child {
justify-content: space-around;
align-items: center;
overflow: hidden;
flex: 0 0 auto;
gap: var(--spacing-sm);
align-items: center;
justify-content: space-around;
box-sizing: content-box;
aspect-ratio: 1;
max-height: 60px;
text-align: center;
border: 2px solid var(--ion-color-primary-tint);
ion-label {
font-size: var(--font-size-xxs);
@@ -114,19 +125,19 @@ ion-content {
}
a:last-child {
flex: 1 1 65%;
background: var(--linear-gradient);
justify-content: center;
z-index: 1;
@include ion-md-up {
flex: 1 1 100%;
}
@include phoneLandscape {
@include phone-landscape {
flex: 1 1 85%;
}
z-index: 1;
flex: 1 1 65%;
justify-content: center;
background: var(--linear-gradient);
ion-label {
font-size: var(--font-size-xxs);
font-weight: var(--font-weight-bold);
@@ -134,8 +145,8 @@ ion-content {
}
ion-label:first-child {
text-transform: uppercase;
color: var(--ion-color-secondary);
text-transform: uppercase;
}
ion-label:nth-child(2n) {

2
frontend/app/src/app/modules/dashboard/sections/favorites-section/favorites-section.component.scss
View File

@@ -14,8 +14,8 @@
*/
.nothing-selected::part(native) {
background: none;
color: var(--ion-color-medium-shade);
background: none;
}
simple-swiper {

2
frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section-content.component.scss
View File

@@ -14,8 +14,8 @@
*/
.no-dishes::part(native) {
background: none;
color: var(--ion-color-medium-shade);
background: none;
}
simple-swiper {

2
frontend/app/src/app/modules/dashboard/sections/mensa-section/mensa-section.component.scss
View File

@@ -19,8 +19,8 @@ stapps-mensa-section-content {
}
.nothing-selected::part(native) {
background: none;
color: var(--ion-color-medium-shade);
background: none;
}
:host {

16
frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.scss
View File

@@ -17,9 +17,10 @@ simple-swiper {
}
.more-news {
font-size: var(--font-size-xl);
--color: var(--ion-color-medium-tint);
font-size: var(--font-size-xl);
&::part(native) {
height: 100%;
background: none;
@@ -34,11 +35,12 @@ simple-swiper {
ion-thumbnail {
position: absolute;
z-index: 100;
bottom: 0;
left: 0;
z-index: 100;
height: 200px;
width: 200px;
height: 200px;
}
}
@@ -54,16 +56,18 @@ simple-swiper {
}
ion-col {
flex-grow: 0;
flex-basis: min-content;
flex-grow: 0;
}
.title {
overflow: hidden;
display: -webkit-box;
white-space: break-spaces;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
.title-sub {
@@ -73,8 +77,8 @@ simple-swiper {
// fix for Safari
stapps-offers-in-list {
position: absolute;
bottom: 0;
right: 0;
bottom: 0;
}
stapps-offers-in-list .place {

3
frontend/app/src/app/modules/dashboard/sections/search-section/search-section.component.scss
View File

@@ -27,11 +27,12 @@ ion-searchbar ::ng-deep .searchbar-input-container {
}
ion-searchbar.ios {
transition: opacity 150ms ease;
ion-ripple-effect {
display: none;
}
transition: opacity 150ms ease;
&:active {
opacity: 0.6;
}

11
frontend/app/src/app/modules/data/chips/edit-event-selection.scss
View File

@@ -12,11 +12,6 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
ion-item-divider.ios > ion-checkbox {
margin-right: 8px;
}
.list-header {
--padding-start: 0;
--background: var(--ion-color-primary-shade);
@@ -28,13 +23,17 @@ ion-item-divider.ios > ion-checkbox {
> ion-checkbox {
--background: none;
--border-color: rgba(var(--ion-color-primary-contrast-rgb), 0.77);
--border-color: rgb(var(--ion-color-primary-contrast-rgb) 0.77);
--background-checked: var(--ion-color-primary-contrast);
--border-color-checked: var(--ion-color-primary-contrast);
--checkmark-color: var(--ion-color-primary);
}
}
ion-item-divider.ios > ion-checkbox {
margin-right: 8px;
}
:host > .list-header {
--background: none;
}

47
frontend/app/src/app/modules/data/detail/data-detail-content.scss
View File

@@ -12,7 +12,7 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import 'src/theme/util/_mixins.scss';
@import '~src/theme/util/mixins';
stapps-origin-detail {
// css hack to make the element stick to the bottom of the scroll container even
@@ -22,24 +22,29 @@ stapps-origin-detail {
}
.content-switch {
display: flex;
flex: 1;
// prevent a scrollbar from appearing in some cases
margin-block-start: -1px !important;
flex: 1;
display: flex;
padding: 0 var(--spacing-md);
::ng-deep > * {
display: flex;
height: fit-content;
width: 100%;
flex-direction: column;
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
@include content-padding;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
margin-block-start: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
margin-block-end: var(--spacing-xl);
background-color: var(--ion-card-background);
@include content-padding();
& > ion-thumbnail {
background: var(--ion-color-primary);
@@ -49,45 +54,51 @@ stapps-origin-detail {
@supports selector(:has(*)) {
& > .expand-when-space,
&:has(> .expand-when-space) {
height: unset;
flex: 1;
height: unset;
}
}
}
}
:host ::ng-deep {
ion-grid,
ion-col {
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
}
ion-slides.work-locations {
ion-slide {
display: block;
text-align: left;
}
}
ion-card {
margin: 0;
box-shadow: none;
ion-card-content {
padding-bottom: 8px;
h1 {
margin: 0;
}
padding-bottom: 8px;
}
ion-card-header {
padding-top: 8px;
padding-bottom: 4px;
font-weight: bold;
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
}
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
}

4
frontend/app/src/app/modules/data/detail/data-detail.html
View File

@@ -33,13 +33,13 @@
<ion-content parallax class="ion-no-padding">
<ng-container [ngSwitch]="true">
<ng-container *ngSwitchCase="!item && (isDisconnected | async)">
<div class="centeredMessageContainer">
<div class="centered-message-container">
<ion-icon name="signal_disconnected"></ion-icon>
<ion-label> {{ 'data.detail.COULD_NOT_CONNECT' | translate }} </ion-label>
</div>
</ng-container>
<ng-container *ngSwitchCase="item === null">
<div class="centeredMessageContainer">
<div class="centered-message-container">
<ion-icon name="link_off"></ion-icon>
<ion-label> {{ 'data.detail.NOT_FOUND' | translate }} </ion-label>
</div>

4
frontend/app/src/app/modules/data/detail/data-detail.scss
View File

@@ -14,8 +14,8 @@
*/
ion-content > div > stapps-data-detail-content,
ion-content > div {
min-height: 100%;
display: flex;
flex-direction: column;
flex: 1;
flex-direction: column;
min-height: 100%;
}

6
frontend/app/src/app/modules/data/detail/data-path.scss
View File

@@ -13,10 +13,10 @@
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
.crumb-label {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
cursor: pointer;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ion-breadcrumb {

5
frontend/app/src/app/modules/data/elements/external-link.scss
View File

@@ -1,8 +1,9 @@
:host a {
cursor: pointer;
ion-icon {
vertical-align: text-top;
font-size: 80%;
padding-left: 2px;
font-size: 80%;
vertical-align: text-top;
}
}

13
frontend/app/src/app/modules/data/elements/favorite-button.component.scss
View File

@@ -15,9 +15,15 @@
:host {
ion-button {
--border-radius: 50%;
width: 50px;
height: 50px;
--border-radius: 50%;
}
.selected {
// TODO
color: #fbc02d;
}
@media (hover: hover) {
@@ -25,9 +31,4 @@
--fill: 1;
}
}
.selected {
// TODO
color: #fbc02d;
}
}

98
frontend/app/src/app/modules/data/elements/rating.scss
View File

@@ -12,51 +12,6 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
.rating-stars {
display: flex;
contain: content;
flex-direction: row-reverse;
justify-content: start;
align-items: center;
position: absolute;
background: var(--ion-color-light);
bottom: 0;
right: 0;
top: 0;
gap: var(--spacing-md);
padding-inline: var(--spacing-xl);
border-radius: var(--border-radius-default);
> ion-icon {
@media (hover: hover) {
&:hover ~ *::ng-deep stapps-icon,
&:hover::ng-deep stapps-icon {
--fill: 1;
}
}
&:has(:checked)::ng-deep ~ *::ng-deep stapps-icon,
&:has(:checked)::ng-deep stapps-icon,
&:active::ng-deep ~ *::ng-deep stapps-icon,
&:active::ng-deep stapps-icon {
--fill: 1;
color: var(--ion-color-dark);
}
}
> .thank-you {
opacity: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
bottom: 0;
padding: var(--spacing-md);
display: flex;
justify-content: center;
align-items: center;
}
}
ion-button {
margin: 0;
@@ -64,3 +19,56 @@ ion-button {
--fill: 1;
}
}
.rating-stars {
position: absolute;
top: 0;
right: 0;
bottom: 0;
contain: content;
display: flex;
flex-direction: row-reverse;
gap: var(--spacing-md);
align-items: center;
justify-content: flex-start;
padding-inline: var(--spacing-xl);
background: var(--ion-color-light);
border-radius: var(--border-radius-default);
> ion-icon {
&:active::ng-deep stapps-icon,
&:has(:checked)::ng-deep stapps-icon,
&:has(:checked)::ng-deep ~ *::ng-deep stapps-icon,
&:active::ng-deep ~ *::ng-deep stapps-icon {
--fill: 1;
color: var(--ion-color-dark);
}
@media (hover: hover) {
&:hover ~ *::ng-deep stapps-icon,
&:hover::ng-deep stapps-icon {
--fill: 1;
}
}
}
> .thank-you {
pointer-events: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md);
opacity: 0;
}
}

2
frontend/app/src/app/modules/data/elements/title-card.component.html
View File

@@ -27,7 +27,7 @@
</ion-card-title>
</ion-card-header>
<ion-card-content>
<div *ngIf="$any(item).openingHours" class="openingHours">
<div *ngIf="$any(item).openingHours" class="opening-hours">
<stapps-opening-hours [openingHours]="item.openingHours"></stapps-opening-hours>
</div>
<div *ngIf="item.description" class="description">

13
frontend/app/src/app/modules/data/elements/title-card.component.scss
View File

@@ -15,23 +15,25 @@
.text-accordion {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
ion-card {
border-radius: 0;
--background: var(--ion-color-primary);
padding: 0 var(--spacing-md);
border-radius: 0;
ion-card-header {
padding: 0;
h1 {
color: var(--ion-color-primary-contrast);
font-weight: var(--font-weight-bold);
margin: var(--spacing-sm) 0 var(--spacing-sm) 0;
font-weight: var(--font-weight-bold);
color: var(--ion-color-primary-contrast);
}
}
@@ -41,7 +43,8 @@ ion-card {
.description * {
color: var(--ion-color-primary-contrast);
}
.openingHours {
.opening-hours {
color: var(--ion-color-primary-contrast);
}
}

34
frontend/app/src/app/modules/data/list/data-list-item.scss
View File

@@ -12,7 +12,7 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import 'src/theme/util/_mixins.scss';
@import '~src/theme/util/mixins';
:host {
display: block;
@@ -22,19 +22,13 @@ ion-item::part(native) {
height: 100%;
}
.ion-text-wrap ::ng-deep ion-label {
white-space: normal !important;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
ion-item {
--border-color: transparent;
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
--inner-padding-end: 0;
--padding-start: 0;
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
margin: var(--spacing-sm);
ion-thumbnail {
@@ -53,6 +47,14 @@ ion-item {
}
}
.ion-text-wrap ::ng-deep ion-label {
display: -webkit-box;
white-space: normal !important;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
:host.square ::ng-deep {
ion-item {
margin: 0;
@@ -65,17 +67,19 @@ ion-item {
}
ion-col {
flex-grow: 0;
flex-basis: min-content;
flex-grow: 0;
}
stapps-long-inline-text,
.title {
overflow: hidden;
display: -webkit-box;
white-space: break-spaces;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.title-sub {
@@ -85,8 +89,8 @@ ion-item {
stapps-rating,
stapps-favorite-button {
position: absolute;
bottom: 0;
right: 0;
bottom: 0;
}
stapps-rating {
@@ -97,9 +101,9 @@ ion-item {
}
.rating-stars {
width: 100%;
justify-content: center;
gap: var(--spacing-xs);
justify-content: center;
width: 100%;
padding-inline: 0;
}
}

2
frontend/app/src/app/modules/data/list/data-list.html
View File

@@ -27,7 +27,7 @@
</ion-list>
</ng-container>
<div [style.display]="!loading && items && items.length === 0 ? 'block' : 'none'">
<ion-label class="centeredMessageContainer">
<ion-label class="centered-message-container">
{{ 'search.nothing_found' | translate | titlecase }}
</ion-label>
</div>

2
frontend/app/src/app/modules/data/list/search-page.html
View File

@@ -60,7 +60,7 @@
[class.no-results]="!showDefaultData && !items && !loading"
[style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'"
>
<ion-label class="centeredMessageContainer"> {{ searchInstruction | translate }} </ion-label>
<ion-label class="centered-message-container"> {{ searchInstruction | translate }} </ion-label>
</div>
<stapps-data-list
id="data-list"

14
frontend/app/src/app/modules/data/list/search-page.scss
View File

@@ -15,11 +15,15 @@
:host {
display: flex;
flex-direction: column;
flex: 1 1 100%;
flex-direction: column;
height: 100%;
}
ion-toolbar {
--ion-color-base: none !important;
}
ion-toolbar:first-of-type {
padding: 0 var(--spacing-md) var(--spacing-xs);
}
@@ -43,9 +47,9 @@ ion-content {
.content > div {
height: 100%;
ion-label.centeredMessageContainer {
min-height: unset;
ion-label.centered-message-container {
height: 100%;
min-height: unset;
margin-top: 0;
margin-bottom: 0;
}
@@ -54,7 +58,3 @@ ion-content {
ion-header {
background: var(--ion-color-primary);
}
ion-toolbar {
--ion-color-base: none !important;
}

6
frontend/app/src/app/modules/data/list/simple-data-list.scss
View File

@@ -15,8 +15,10 @@
.empty-list-message {
display: flex;
justify-content: center;
align-items: center;
color: var(--ion-color-medium);
justify-content: center;
min-height: 300px;
color: var(--ion-color-medium);
}

6
frontend/app/src/app/modules/data/list/skeleton-list.scss
View File

@@ -21,14 +21,16 @@ $item-height: 92;
$gap: 4;
.label {
fill: var(--ion-color-medium);
opacity: 0.1;
fill: var(--ion-color-medium);
}
.item {
width: calc(100% - var(--spacing-sm) * 2);
rx: var(--border-radius-default);
fill: var(--ion-item-background, var(--ion-background-color, #fff));
x: var(--spacing-sm);
y: var(--spacing-sm);
width: calc(100% - var(--spacing-sm) * 2);
}

22
frontend/app/src/app/modules/data/list/tree-list-fragment.scss
View File

@@ -22,37 +22,36 @@ ion-list {
}
.tree-indicator {
overflow: hidden;
position: relative;
overflow: hidden;
}
ion-accordion::before,
.tree-indicator::before,
.tree-indicator::after {
content: '';
position: absolute;
z-index: 1000;
left: 0;
display: block;
background-color: grey;
z-index: 1000;
position: absolute;
left: 0;
}
ion-accordion::before,
.tree-indicator::before {
height: 100%;
width: 1px;
top: 0;
width: 1px;
height: 100%;
}
.tree-indicator::after {
top: 50%;
transform: translateX(calc(-50% - 8px));
width: 40px;
height: 1px;
transform: translateX(calc(-50% - 8px));
top: 50%;
}
ion-accordion::after {
@@ -62,6 +61,7 @@ ion-accordion::after {
ion-accordion:last-of-type::before {
height: 24px;
}
.tree-indicator:last-of-type::before {
height: 50%;
}

5
frontend/app/src/app/modules/data/types/date-series/date-series-list-item.scss
View File

@@ -1,8 +1,9 @@
.remove-button {
--color: var(--ion-color-success);
--border-color: var(--ion-color-success);
&:hover {
--color-hover: var(--ion-color-danger);
--border-color: var(--ion-color-danger);
}
--color: var(--ion-color-success);
--border-color: var(--ion-color-success);
}

13
frontend/app/src/app/modules/data/types/dish/dish-characteristics.scss
View File

@@ -15,11 +15,12 @@
$size: 16px;
ion-note {
list-style: none;
display: flex;
flex-direction: row-reverse;
align-items: center;
justify-content: flex-start;
justify-content: flex-end;
list-style: none;
}
abbr {
@@ -27,16 +28,16 @@ abbr {
}
.mask-image {
width: $size;
aspect-ratio: 1;
width: $size;
background: var(--ion-color-medium);
mask-image: var(--background-url);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-mode: alpha;
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
}
img {

14
frontend/app/src/app/modules/data/types/message/message-detail-content.scss
View File

@@ -16,13 +16,16 @@
:host {
ion-thumbnail {
position: relative;
transform: scaleX(-1);
overflow: hidden;
width: 100%;
height: auto;
margin-inline: auto;
overflow: hidden;
background-size: contain;
background-position: center;
transform: scaleX(-1);
background-size: contain;
ion-img {
backdrop-filter: blur(32px);
@@ -30,15 +33,16 @@
&::part(image) {
transform: scaleX(-1);
max-width: 16cm;
object-fit: contain;
margin-inline: auto;
object-fit: contain;
}
}
}
.date-published {
--ion-card-color: var(--ion-color-medium-shade);
text-transform: uppercase;
font-weight: var(--font-weight-semi-bold);
text-transform: uppercase;
}
}

2
frontend/app/src/app/modules/data/types/place/place-detail-content.scss
View File

@@ -15,7 +15,7 @@
.map-widget {
position: relative;
width: auto;
height: 300px;
min-height: 300px;
width: auto;
}

5
frontend/app/src/app/modules/data/types/place/place-list-item.scss
View File

@@ -18,8 +18,8 @@ ion-note {
> ion-label {
display: inline-flex;
justify-content: center;
align-items: center;
justify-content: center;
}
}
@@ -30,7 +30,6 @@ ion-label + ion-label.distance::before {
.in-place {
display: flex;
justify-content: flex-end;
align-items: center;
justify-content: flex-end;
}

4
frontend/app/src/app/modules/data/types/place/special/mensa/place-mensa.scss
View File

@@ -18,14 +18,14 @@ ion-segment-button {
}
ion-segment {
justify-content: space-between;
overflow: auto;
justify-content: space-between;
height: 50px;
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
display: none;
}
ion-segment-button.segment-button {

47
frontend/app/src/app/modules/feedback/feedback-page.scss
View File

@@ -12,66 +12,75 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import '~src/theme/util/mixins';
pre {
white-space: pre-wrap;
}
ion-button {
margin: 10px;
}
@import 'src/theme/util/_mixins.scss';
:host ::ng-deep {
ion-grid,
ion-col {
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
}
ion-card {
margin: 0;
box-shadow: none;
ion-card-content {
padding-bottom: 8px;
h1 {
margin: 0;
}
padding-bottom: 8px;
}
ion-card-header {
color: var(--ion-color-dark);
padding-top: 8px;
padding-bottom: 4px;
font-weight: bold;
color: var(--ion-color-dark);
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
}
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
.feedback-content {
margin: var(--spacing-md);
@include border-radius-in-parallax(var(--border-radius-default));
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin: var(--spacing-md);
background: var(--ion-item-background);
@include border-radius-in-parallax(var(--border-radius-default));
& > * {
@include border-radius-in-parallax(var(--border-radius-default));
position: relative;
overflow: hidden;
display: block;
margin: 0;
ion-card-subtitle {
font-size: var(--font-size-lg);
color: var(--ion-color-light-contrast);
}
display: block;
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
position: relative;
margin: 0;
& > ion-thumbnail {
background: var(--ion-color-primary);
}

7
frontend/app/src/app/modules/hebis/daia-availability/daia-availability.scss
View File

@@ -16,16 +16,19 @@
:host ion-card {
margin: 0;
box-shadow: none;
ion-card-content {
padding-bottom: 8px;
h1 {
margin: 0;
}
padding-bottom: 8px;
}
ion-card-header {
color: var(--ion-color-dark);
padding-top: 8px;
padding-bottom: 4px;
font-weight: bold;
color: var(--ion-color-dark);
}
}

11
frontend/app/src/app/modules/hebis/daia-availability/daia-holding.scss
View File

@@ -14,18 +14,21 @@
*/
ion-label a {
display: block;
text-decoration: none;
margin: 20px 0 5px;
font-weight: 700;
color: var(--ion-color-primary);
margin: 20px 0 5px;
text-decoration: none;
}
ion-grid {
margin: 5px;
padding: 0;
margin: 5px 5px;
ion-row {
background-color: var(--ion-color-light);
color: var(--ion-color-light-contrast);
background-color: var(--ion-color-light);
border-bottom: 1px solid #fff;
ion-col:first-child {

23
frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail-content.scss
View File

@@ -14,32 +14,37 @@
*/
:host ::ng-deep {
ion-grid,
ion-col {
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
}
ion-card {
margin: 0;
box-shadow: none;
ion-card-content {
padding-bottom: 8px;
h1 {
margin: 0;
}
padding-bottom: 8px;
}
ion-card-header {
color: var(--ion-color-dark);
padding-top: 8px;
padding-bottom: 4px;
font-weight: bold;
color: var(--ion-color-dark);
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
}
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
}

4
frontend/app/src/app/modules/hebis/hebis-detail/hebis-detail.html
View File

@@ -27,13 +27,13 @@
<ion-content class="ion-no-padding">
<div [ngSwitch]="true">
<ng-container *ngSwitchCase="!item && (isDisconnected | async)">
<div class="centeredMessageContainer">
<div class="centered-message-container">
<ion-icon name="signal_disconnected"></ion-icon>
<ion-label> {{ 'data.detail.COULD_NOT_CONNECT' | translate }} </ion-label>
</div>
</ng-container>
<ng-container *ngSwitchCase="item === null">
<div class="centeredMessageContainer">
<div class="centered-message-container">
<ion-icon name="link_off"></ion-icon>
<ion-label> {{ 'data.detail.NOT_FOUND' | translate }} </ion-label>
</div>

2
frontend/app/src/app/modules/hebis/list/hebis-search-page.html
View File

@@ -51,7 +51,7 @@
<ion-content>
<div [style.display]="!showDefaultData && !items && !loading ? 'block' : 'none'">
<ion-label class="centeredMessageContainer"> {{ 'hebisSearch.instruction' | translate }} </ion-label>
<ion-label class="centered-message-container"> {{ 'hebisSearch.instruction' | translate }} </ion-label>
</div>
<stapps-data-list
id="data-list"

2
frontend/app/src/app/modules/library/account/checked-out/checked-out-page.html
View File

@@ -39,7 +39,7 @@
*ngIf="!checkedOutItems; else nothingFound"
></stapps-skeleton-list-item>
<ng-template #nothingFound>
<ion-label *ngIf="checkedOutItems && checkedOutItems.length === 0" class="centeredMessageContainer">
<ion-label *ngIf="checkedOutItems && checkedOutItems.length === 0" class="centered-message-container">
{{ 'search.nothing_found' | translate | titlecase }}
</ion-label>
</ng-template>

2
frontend/app/src/app/modules/library/account/holds/holds-page.html
View File

@@ -71,7 +71,7 @@
*ngIf="!paiaDocuments; else nothingFound"
></stapps-skeleton-list-item>
<ng-template #nothingFound>
<ion-label *ngIf="paiaDocuments && paiaDocuments.length === 0" class="centeredMessageContainer">
<ion-label *ngIf="paiaDocuments && paiaDocuments.length === 0" class="centered-message-container">
{{ 'search.nothing_found' | translate | titlecase }}
</ion-label>
</ng-template>

15
frontend/app/src/app/modules/map/item/map-item.component.scss
View File

@@ -20,8 +20,8 @@
max-width: 100%;
ion-card {
padding: 0;
overflow: visible;
padding: 0;
ion-card-header {
padding: 0;
@@ -41,15 +41,16 @@
}
.close {
position: absolute;
top: -15px;
right: -15px;
z-index: 1;
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 0;
--padding-end: 0;
position: absolute;
z-index: 1;
top: -15px;
right: -15px;
ion-icon {
width: 30px;
height: 30px;
@@ -58,13 +59,13 @@
}
ion-card-content {
padding: var(--spacing-md);
display: flex;
flex-direction: row;
padding: var(--spacing-md);
.show-more-button {
text-transform: uppercase;
margin-left: auto;
text-transform: uppercase;
}
}
}

51
frontend/app/src/app/modules/map/page/map-page.scss
View File

@@ -16,11 +16,13 @@
ion-content {
// fixes the unexpected issue that the content is not fullscreen (behind the header)
position: absolute;
div.map-container {
position: fixed;
width: 100%;
height: 100%;
position: fixed;
}
& > div {
overflow: hidden;
}
@@ -30,33 +32,46 @@ ion-toolbar:first-of-type {
padding: 0 var(--spacing-md) var(--spacing-xs);
}
div.map-buttons {
ion-button {
// important for iOS
// TODO: find an option that is better suited for the iOS theme
--box-shadow: var(--map-box-shadow);
align-self: flex-end;
margin: 4px;
}
}
::ng-deep {
.stapps-location {
ion-icon {
color: #fd435c;
width: 100%;
height: 100%;
color: #fd435c;
}
}
.stapps-device-location {
ion-icon {
color: #4387fd;
width: 100%;
height: 100%;
color: #4387fd;
}
}
div.floating-content {
display: block;
position: fixed;
left: 0;
z-index: 1000;
right: 0;
bottom: 0;
z-index: 1000;
left: 0;
display: block;
justify-content: center;
width: 100%;
padding: 0 var(--spacing-md) 8vh;
justify-content: center;
ion-card {
margin: 0;
@@ -68,43 +83,35 @@ ion-toolbar:first-of-type {
}
stapps-map-item {
width: 550px;
position: center;
justify-self: center;
width: 550px;
margin: var(--spacing-sm) auto;
}
}
}
div.floating-buttons {
z-index: 1000;
position: absolute;
bottom: 15px;
z-index: 1000;
right: 10px;
}
div.map-buttons {
ion-button {
margin: 4px;
// important for iOS
// TODO: find an option that is better suited for the iOS theme
--box-shadow: var(--map-box-shadow);
align-self: flex-end;
}
bottom: 15px;
}
div.map-buttons.above {
min-width: 70%;
display: none;
min-width: 70%;
}
@media (max-width: 667px) {
@media (width <= 667px) {
div.map-buttons.above {
display: flex;
}
div.floating-content {
justify-content: normal;
padding: 0 var(--spacing-md) var(--spacing-lg);
stapps-map-item {
display: grid;
width: 100%;

8
frontend/app/src/app/modules/map/widget/map-widget.scss
View File

@@ -14,15 +14,15 @@
*/
div.map-container {
height: 100%;
width: 100%;
display: block;
pointer-events: none;
display: block;
width: 100%;
height: 100%;
}
div.map-buttons {
position: absolute;
z-index: 10000;
top: 10px;
right: 10px;
z-index: 10000;
}

28
frontend/app/src/app/modules/menu/navigation/navigation.scss
View File

@@ -12,8 +12,7 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import '../../../../theme/util/mixins';
@import '~src/theme/util/mixins';
stapps-navigation-tabs {
@include ion-xl-up {
@@ -21,18 +20,11 @@ stapps-navigation-tabs {
}
}
stapps-offline-notice.has-error ~ ion-split-pane,
stapps-offline-notice.is-offline ~ ion-split-pane {
margin-top: calc(var(--font-size-md) + 2 * var(--spacing-sm));
}
:host {
ion-split-pane {
transition: margin-top 150ms ease;
--side-max-width: 256px;
margin-bottom: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom));
@include phoneLandscape {
@include phone-landscape {
margin-bottom: 0;
}
@@ -44,6 +36,9 @@ stapps-offline-notice.is-offline ~ ion-split-pane {
@include ion-xl-up {
margin-left: 0;
}
margin-bottom: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom));
transition: margin-top 150ms ease;
}
ion-toolbar.in-toolbar {
@@ -54,25 +49,30 @@ stapps-offline-notice.is-offline ~ ion-split-pane {
padding: var(--spacing-xl) var(--spacing-md);
.logo {
object-position: left;
height: 80px;
@include ion-md-up {
height: var(--tablet-top-bar-height);
}
height: 80px;
object-position: left;
}
}
}
}
stapps-offline-notice.has-error ~ ion-split-pane,
stapps-offline-notice.is-offline ~ ion-split-pane {
margin-top: calc(var(--font-size-md) + 2 * var(--spacing-sm));
}
ion-router-outlet {
background: var(--ion-background-color);
}
.menu-category {
ion-label {
font-weight: bold;
font-size: 115%;
font-weight: bold;
}
}

41
frontend/app/src/app/modules/menu/navigation/offline-notice.scss
View File

@@ -13,45 +13,53 @@
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
:host {
display: grid;
$height: calc(var(--font-size-md) + 2 * var(--spacing-sm));
height: $height;
width: 100%;
transform: translateY(calc(-1 * $height));
display: grid;
width: 100%;
height: $height;
line-height: var(--font-size-md);
font-size: var(--font-size-md);
font-weight: bold;
transform: translateY(calc(-1 * $height));
line-height: var(--font-size-md);
transition: all 150ms ease;
&.is-offline,
&.has-error {
transform: translateY(0px);
transform: translateY(0);
}
> ion-button {
grid-row: 1;
grid-column: 1;
margin: 0;
--border-radius: 0;
opacity: 0;
--padding-top: 0;
--padding-bottom: 0;
transition: all 150ms ease;
z-index: 0;
grid-column: 1;
grid-row: 1;
margin: 0;
opacity: 0;
transition: all 150ms ease;
&.close {
height: 100%;
margin: 0;
position: absolute;
right: 0;
z-index: 1;
top: 50%;
right: 0;
bottom: 0;
transform: translateY(-50%);
z-index: 1;
height: 100%;
margin: 0;
color: var(--ion-color-danger-contrast);
}
}
@@ -71,6 +79,7 @@
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}

35
frontend/app/src/app/modules/menu/navigation/tabs.component.scss
View File

@@ -15,37 +15,32 @@
@import '../../../../theme/util/mixins';
:host {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 100;
.menu-button {
display: none;
}
@include ion-md-up {
right: unset;
top: 0;
right: unset;
.menu-button {
display: revert;
position: absolute;
top: 0;
left: 0;
right: 0;
left: 0;
display: revert;
margin-top: var(--spacing-xxl);
}
ion-tab-bar {
border-top: unset;
position: relative;
border-right: var(--border);
flex-direction: column;
gap: var(--spacing-md);
width: var(--navigation-rail-width);
height: 100vh;
border-top: unset;
border-right: var(--border);
}
ion-tab-button {
@@ -53,6 +48,16 @@
height: var(--navigation-rail-item-height);
}
}
position: absolute;
z-index: 100;
right: 0;
bottom: 0;
left: 0;
.menu-button {
display: none;
}
}
.tab-selected ::ng-deep stapps-icon {

13
frontend/app/src/app/modules/news/item/news-item.scss
View File

@@ -33,12 +33,15 @@ ion-card::part(native) {
}
ion-card-title {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--font-size-xl);
--color: var(--ion-text-color-dark, white);
overflow: hidden;
display: -webkit-box;
font-size: var(--font-size-xl);
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
max-lines: 3;
}

2
frontend/app/src/app/modules/news/page/news-page.html
View File

@@ -51,7 +51,7 @@
<stapps-news-item *ngFor="let item of news" [item]="item"></stapps-news-item>
</ng-container>
</div>
<ion-label *ngIf="news.length === 0" class="centeredMessageContainer">
<ion-label *ngIf="news.length === 0" class="centered-message-container">
{{ 'search.nothing_found' | translate | titlecase }}
</ion-label>
<ion-infinite-scroll id="infinite-scroll" threshold="20%" (ionInfinite)="loadMore($event.target)">

6
frontend/app/src/app/modules/news/page/news-page.scss
View File

@@ -15,10 +15,11 @@
@import 'src/theme/util/mixins';
.news-grid {
@include auto-grid(300px);
display: grid;
gap: var(--spacing-sm);
margin: var(--spacing-sm);
@include auto-grid(300px);
> * {
height: 100%;
@@ -26,7 +27,8 @@
}
ion-content.ios > div > .news-grid {
@include auto-grid(350px);
gap: var(--spacing-lg);
margin: var(--spacing-lg);
@include auto-grid(350px);
}

72
frontend/app/src/app/modules/profile/page/profile-page-section.scss
View File

@@ -16,10 +16,45 @@
$width: 108px;
ion-item {
--border-radius: var(--border-radius-default);
--inner-padding-start: unset;
--inner-padding-end: unset;
--padding-start: unset;
--padding-end: unset;
height: 96px;
&::part(native) {
width: 100%;
height: 100%;
}
> div {
width: 100%;
height: 100%;
}
div,
ion-label {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 var(--spacing-xs) 0 var(--spacing-xs);
font-size: var(--font-size-sm);
text-align: center;
white-space: normal;
}
}
simple-swiper {
container-type: inline-size;
--swiper-slide-width: #{$width};
container-type: inline-size;
ion-item {
@each $i in 7, 6, 5, 4, 3, 2, 1 {
$max: #{($width + 8px) * $i};
@@ -30,40 +65,9 @@ simple-swiper {
}
}
ion-item {
height: 96px;
--border-radius: var(--border-radius-default);
--inner-padding-start: unset;
--inner-padding-end: unset;
--padding-start: unset;
--padding-end: unset;
> div {
width: 100%;
height: 100%;
}
div,
ion-label {
white-space: normal;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: var(--font-size-sm);
padding: 0 var(--spacing-xs) 0 var(--spacing-xs);
}
&::part(native) {
height: 100%;
width: 100%;
}
}
.log-in-hint {
padding: var(--spacing-xl);
height: 100%;
box-shadow: none;
padding: var(--spacing-xl);
background: var(--ion-color-light-tint);
box-shadow: none;
}

86
frontend/app/src/app/modules/profile/page/profile-page.scss
View File

@@ -21,20 +21,26 @@
margin-bottom: 0;
}
}
.section-headline {
margin-bottom: var(--spacing-md);
}
.user-card-wrapper {
margin-bottom: 0;
.user-card {
border-radius: var(--border-radius-default);
position: relative;
margin: 0;
box-shadow: var(--shadow-profile-card);
max-width: 400px;
margin: 0;
border-radius: var(--border-radius-default);
box-shadow: var(--shadow-profile-card);
ion-card-header {
--background: var(--ion-color-tertiary);
display: flex;
align-items: center;
padding-top: var(--spacing-sm);
@@ -43,16 +49,17 @@
ion-img {
display: block;
height: 36px;
object-position: left 50%;
margin-right: auto;
object-position: left 50%;
}
span {
color: var(--ion-color-light);
padding-top: 3px;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
line-height: 1;
padding-top: 3px;
color: var(--ion-color-light);
}
}
@@ -61,10 +68,12 @@
.profile-card-img {
position: absolute;
opacity: 0.13;
height: 100%;
width: 50%;
height: 100%;
margin-left: calc(var(--spacing-md) * -4);
opacity: 0.13;
object-position: left bottom;
}
@@ -76,25 +85,27 @@
'email email';
ion-label {
display: block;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--ion-color-medium-shade);
display: block;
}
ion-text {
display: block;
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
color: var(--ion-color-text);
display: block;
}
.full-name {
grid-area: fullName;
display: block;
grid-area: fullName;
margin-bottom: var(--spacing-sm);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-sm);
}
.matriculation-number {
@@ -114,75 +125,86 @@
.log-in-prompt {
margin: auto 0;
color: var(--ion-color-text);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semi-bold);
color: var(--ion-color-text);
}
}
}
}
ion-thumbnail {
background: var(--placeholder-gray);
height: 80%;
width: 80%;
align-items: center;
padding: 10px;
width: 80%;
height: 80%;
margin: 0;
padding: 10px;
background: var(--placeholder-gray);
border-radius: var(--border-radius-default);
ion-icon {
display: block;
width: 100%;
height: 100%;
color: white;
display: block;
}
}
ion-row.main-info {
font-weight: bold;
margin-bottom: 2px;
font-weight: bold;
}
.courses {
.courses-card {
margin: 0;
box-shadow: none;
border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
background-color: unset;
max-width: 800px;
margin: 0;
background-color: unset;
border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
box-shadow: none;
ion-card-header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: var(--ion-item-background);
border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
display: flex;
justify-content: space-between;
align-items: center;
span {
color: var(--ion-item-background-color-contrast);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
color: var(--ion-item-background-color-contrast);
}
ion-icon {
color: var(--ion-color-light);
cursor: pointer;
color: var(--ion-color-light);
}
}
ion-card-content {
overflow: hidden;
max-height: 0;
margin: 0;
padding: 0;
background-color: var(--ion-item-background);
border-radius: var(--border-radius-default);
max-height: 0;
overflow: hidden;
transition: max-height 250ms ease-in-out, padding 250ms ease-in-out, margin 250ms ease-in-out;
&.show-card {
height: 100%;
display: block;
height: 100%;
max-height: var(--max-height);
margin: var(--spacing-xxl);
padding: var(--spacing-md);
max-height: var(--max-height);
}
div {

75
frontend/app/src/app/modules/schedule/page/components/calendar-component.scss
View File

@@ -16,25 +16,49 @@
$header-height: 50px;
$hours-width: 40px;
.day-labels {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
ion-button {
width: 100%;
height: 100%;
text-transform: none;
ion-label {
overflow: visible !important;
}
}
}
.header {
position: relative;
height: $header-height;
background-color: var(--ion-color-light);
position: relative;
.left-button,
.right-button {
color: var(--ion-color-medium-shade);
position: absolute;
z-index: 99;
height: 100%;
margin: 0;
--padding-start: 0;
--padding-end: 0;
position: absolute;
z-index: 99;
height: 100%;
margin: 0;
color: var(--ion-color-medium-shade);
}
.left-button {
left: 0;
padding: 0 var(--spacing-sm);
}
.right-button {
right: 0;
padding: 0 var(--spacing-sm);
@@ -42,9 +66,9 @@ $hours-width: 40px;
.day-labels {
ion-button {
overflow: visible !important;
width: unset;
color: var(--ion-color-light-contrast);
overflow: visible !important;
}
}
@@ -57,24 +81,6 @@ $hours-width: 40px;
height: 100%;
}
.day-labels {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
ion-button {
width: 100%;
height: 100%;
text-transform: none;
ion-label {
overflow: visible !important;
}
}
}
ion-content {
overflow-y: auto;
}
@@ -89,14 +95,17 @@ ion-content {
background-color: var(--ion-background-color);
.hour-lines {
position: absolute;
top: 0;
width: 40px;
height: 70px;
border-right: 1px solid var(--ion-item-border-color);
text-align: center;
top: 0;
position: absolute;
font-weight: var(--font-weight-bold);
text-align: center;
background-color: var(--ion-background-color);
border-right: 1px solid var(--ion-item-border-color);
}
}
@@ -106,12 +115,14 @@ ion-content {
}
.date-header {
border-bottom: 1px solid var(--ion-item-border-color);
padding: var(--spacing-sm) auto;
height: fit-content;
padding: var(--spacing-sm) auto;
font-weight: var(--font-weight-bold);
text-transform: uppercase;
text-align: center;
text-transform: uppercase;
border-bottom: 1px solid var(--ion-item-border-color);
}
.day-labels > ion-button[disabled] {

2
frontend/app/src/app/modules/schedule/page/grid/infinite-swiper.scss
View File

@@ -14,8 +14,8 @@
*/
.swiper {
height: 100%;
width: 100%;
height: 100%;
}
.swiper,

85
frontend/app/src/app/modules/schedule/page/grid/schedule-card.scss
View File

@@ -14,38 +14,32 @@
*/
ion-card {
width: inherit;
z-index: 2;
margin-left: 0;
width: inherit;
margin-right: 0;
margin-left: 0;
border-radius: 0;
@each $name in lecture, exercise, default {
&.#{$name}Card {
--background: var(--calender-#{$name}-card);
ion-card-title,
ion-card-subtitle span,
ion-card-content ion-note,
ion-card-content ion-text {
color: var(--calender-#{$name}-card-contrast);
}
&:after {
background: linear-gradient(
rgba(var(--calender-#{$name}-card-rgb), 0%),
rgba(var(--calender-#{$name}-card-rgb), 100%)
);
}
}
}
&:after {
&::after {
content: '';
position: absolute;
bottom: 0;
height: 33%;
width: 100%;
height: 33%;
}
ion-card-header,
ion-card-title,
ion-card-subtitle span,
ion-card-content ion-note {
font-family: var(--headline-font-family);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
text-overflow: ellipsis;
}
ion-card-header {
@@ -58,37 +52,46 @@ ion-card {
ion-card-subtitle {
display: flex;
ion-icon.icon-white {
color: var(--ion-color-primary-contrast);
margin-right: var(--spacing-xs);
color: var(--ion-color-primary-contrast);
}
}
}
ion-card-header,
ion-card-title,
ion-card-subtitle span,
ion-card-content ion-note {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
font-family: var(--headline-font-family);
text-overflow: ellipsis;
}
ion-card-content .place-name {
display: block;
font-family: var(--headline-font-family);
}
ion-card-content .place-name {
display: block;
}
div {
position: absolute;
bottom: 0;
height: 20px;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 255) 100%);
height: 20px;
background: linear-gradient(rgb(255 255 255 / 0%) 0%, rgb(255 255 255 / 25500%) 100%);
}
@each $name in lecture, exercise, default {
&.#{$name}Card {
--background: var(--calender-#{$name}-card);
&::after {
background: linear-gradient(
rgb(var(--calender-#{$name}-card-rgb) 0%),
rgb(var(--calender-#{$name}-card-rgb) 100%)
);
}
ion-card-title,
ion-card-subtitle span,
ion-card-content ion-note,
ion-card-content ion-text {
color: var(--calender-#{$name}-card-contrast);
}
}
}
}

28
frontend/app/src/app/modules/schedule/page/grid/schedule-cursor.scss
View File

@@ -14,38 +14,44 @@
*/
div {
padding: 0;
margin: 0;
position: absolute;
z-index: 2;
top: 4px;
display: flex;
flex-direction: row;
width: 100%;
top: 4px;
z-index: 2;
margin: 0;
padding: 0;
div {
width: 100%;
height: fit-content;
hr {
width: 100%;
position: absolute;
margin-right: 16px;
margin-top: 8px;
width: 100%;
height: 2px;
border-top: 2px solid var(--ion-color-danger);
margin-top: 8px;
margin-right: 16px;
margin-block-start: 0;
margin-block-end: 0;
border-top: 2px solid var(--ion-color-danger);
}
div {
width: 8px;
height: 8px;
position: absolute;
top: -3px;
border-radius: 50% 0 50% 50%;
transform: rotateZ(45deg);
width: 8px;
height: 8px;
background-color: var(--ion-color-danger);
border-radius: 50% 0 50% 50%;
}
}
}

25
frontend/app/src/app/modules/schedule/page/grid/schedule-day.scss
View File

@@ -15,8 +15,8 @@
:host {
.day-wrapper {
border-left: 1px solid var(--ion-item-border-color);
border-right: 1px solid var(--ion-item-border-color);
border-left: 1px solid var(--ion-item-border-color);
&.leftmost {
border-left: unset;
@@ -24,16 +24,19 @@
.day-header {
position: sticky;
z-index: 3;
top: 0;
left: 0;
height: fit-content;
padding: var(--spacing-md);
border-bottom: 2px solid var(--ion-item-border-color);
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
text-align: center;
background-color: var(--ion-background-color);
z-index: 3;
border-bottom: 2px solid var(--ion-item-border-color);
&.leftmost {
border-left: 1px solid var(--ion-item-border-color);
@@ -46,32 +49,34 @@
}
div {
height: 100%;
width: 100%;
height: 100%;
}
.horizontal-group {
position: absolute;
top: 10px;
left: 0;
grid-column: 1;
grid-row: 1;
width: 100%;
box-sizing: border-box;
max-width: inherit;
display: flex;
grid-column: 1;
grid-row: 1;
flex-direction: row;
align-items: flex-start;
box-sizing: border-box;
width: 100%;
max-width: inherit;
}
.vertical-line {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background-color: var(--calender-date-line-gray);
}
}

5
frontend/app/src/app/modules/schedule/page/schedule-single-events.scss
View File

@@ -10,15 +10,16 @@
margin-right: var(--spacing-md);
.hour-label {
width: fit-content;
display: inline-block;
width: fit-content;
text-align: center;
}
.hour-line {
width: 1px;
height: 20px;
border-left: 1px solid var(--ion-color-primary);
margin: var(--spacing-xs) 0;
border-left: 1px solid var(--ion-color-primary);
}
}

45
frontend/app/src/app/modules/settings/page/settings-page.scss
View File

@@ -12,58 +12,67 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import 'src/theme/util/_mixins.scss';
@import '~src/theme/util/mixins';
:host ::ng-deep {
ion-grid,
ion-col {
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
}
ion-card {
margin: 0;
box-shadow: none;
ion-card-content {
padding-bottom: 8px;
h1 {
margin: 0;
}
padding-bottom: 8px;
}
ion-card-header {
color: var(--ion-color-dark);
padding-top: 8px;
padding-bottom: 4px;
font-weight: bold;
color: var(--ion-color-dark);
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
}
}
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
}
.settings-content {
margin: var(--spacing-md);
@include border-radius-in-parallax(var(--border-radius-default));
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
margin: var(--spacing-md);
background: var(--ion-item-background);
@include border-radius-in-parallax(var(--border-radius-default));
& > * {
@include border-radius-in-parallax(var(--border-radius-default));
position: relative;
overflow: hidden;
display: block;
margin: 0;
ion-card-subtitle {
font-size: var(--font-size-lg);
color: var(--ion-color-light-contrast);
}
display: block;
@include border-radius-in-parallax(var(--border-radius-default));
overflow: hidden;
position: relative;
margin: 0;
& > ion-thumbnail {
background: var(--ion-color-primary);
}

6
frontend/app/src/app/util/ion-icon/icon.scss
View File

@@ -14,13 +14,15 @@
*/
:host {
font-variation-settings: 'wght' var(--weight), 'GRAD' var(--grade), 'FILL' var(--fill);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
font-size: inherit;
font-variation-settings: 'wght' var(--weight), 'GRAD' var(--grade), 'FILL' var(--fill);
transition: all 0.2s ease-in-out;
}

20
frontend/app/src/app/util/section.component.scss
View File

@@ -12,8 +12,7 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
@import 'src/theme/util/mixins';
@import '~src/theme/util/mixins';
a {
display: contents;
@@ -23,6 +22,7 @@ a {
ion-grid {
width: 100%;
padding: 0;
}
ion-label {
@@ -30,16 +30,12 @@ ion-label {
font-weight: var(--font-weight-bold);
&:only-child {
height: 100%;
display: flex;
align-items: center;
height: 100%;
}
}
ion-grid {
padding: 0;
}
ion-col {
padding: 0;
}
@@ -55,14 +51,16 @@ ion-col {
}
:host {
transition: height 250ms ease;
display: block;
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
--swiper-scroll-padding: var(--spacing-md);
--swiper-gap: var(--spacing-sm);
@include ion-md-up {
padding: var(--spacing-lg) var(--spacing-xxl) var(--spacing-sm);
--swiper-scroll-padding: var(--spacing-xxl);
padding: var(--spacing-lg) var(--spacing-xxl) var(--spacing-sm);
}
display: block;
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
transition: height 250ms ease;
}

27
frontend/app/src/app/util/simple-swiper.scss
View File

@@ -14,36 +14,36 @@
*/
:host {
position: relative;
display: grid;
grid-auto-flow: column;
justify-content: start;
scrollbar-width: none;
scroll-snap-type: x mandatory;
position: relative;
contain: layout;
overflow-x: auto;
overflow-y: hidden;
contain: layout;
display: grid;
grid-auto-flow: column;
gap: var(--swiper-gap, 0);
justify-content: start;
margin-inline: calc(-1 * var(--swiper-scroll-padding));
gap: var(--swiper-gap, 0);
&::ng-deep > * {
contain: layout;
scroll-snap-align: start;
scroll-margin-inline: var(--swiper-scroll-padding, 0);
scroll-snap-align: start;
contain: layout;
width: var(--swiper-slide-width);
&:first-child {
padding-inline-start: var(--swiper-scroll-padding);
width: calc(var(--swiper-slide-width) + var(--swiper-scroll-padding));
padding-inline-start: var(--swiper-scroll-padding);
}
&:last-child {
scroll-snap-align: end;
padding-inline-end: var(--swiper-scroll-padding);
width: calc(var(--swiper-slide-width) + var(--swiper-scroll-padding));
padding-inline-end: var(--swiper-scroll-padding);
}
&:only-child {
@@ -54,5 +54,4 @@
&::-webkit-scrollbar {
display: none;
}
scrollbar-width: none;
}

74
frontend/app/src/global.scss
View File

@@ -31,8 +31,8 @@
@import 'swiper/scss/controller';
// @import 'material-symbols/rounded.scss';
@import './theme/material-symbols.scss';
@import './theme/common/_ion-content-parallax.scss';
@import './theme/material-symbols';
@import './theme/common/ion-content-parallax';
/* StApps */
@@ -49,12 +49,14 @@ stapps-icon {
&::before {
content: attr(name);
position: absolute;
z-index: -1;
top: 0;
left: 0;
font-variation-settings: 'FILL' 0;
color: white;
z-index: -1;
}
}
@@ -62,18 +64,23 @@ ion-item {
h2.name {
font-weight: bold;
}
ion-thumbnail {
background: transparent;
--size: 36px;
display: flex;
align-items: center;
padding: 10px;
margin: 0;
padding: 10px;
background: transparent;
ion-icon {
display: block;
width: 100%;
height: 100%;
color: white;
display: block;
}
}
}
@@ -82,21 +89,39 @@ ion-item,
ion-card.compact {
ion-grid,
ion-col {
padding-inline-start: 0;
padding-top: 0;
padding-bottom: 0;
padding-inline-start: 0;
}
}
.centeredMessageContainer {
ion-header stapps-favorite-button ion-icon {
color: var(--ion-color-primary-contrast);
}
ion-alert {
button.alert-button.preferred {
color: var(--ion-color-primary-contrast);
background-color: var(--ion-color-primary);
}
button.alert-button.default {
color: var(--ion-color-primary);
background-color: transparent;
}
}
.centered-message-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
justify-content: center;
min-height: 50vh;
margin: 20px;
text-align: center;
ion-icon {
font-size: 64px;
}
@@ -116,32 +141,3 @@ ion-card.bold-header {
font-weight: bold;
}
}
ion-header {
stapps-favorite-button {
ion-icon {
color: var(--ion-color-primary-contrast);
}
}
}
ion-alert {
button.alert-button.preferred {
background-color: var(--ion-color-primary);
color: var(--ion-color-primary-contrast);
}
button.alert-button.default {
background-color: transparent;
color: var(--ion-color-primary);
}
}
ion-alert {
button.alert-button.preferred {
background-color: var(--ion-color-primary);
color: var(--ion-color-primary-contrast);
}
button.alert-button.default {
background-color: transparent;
color: var(--ion-color-primary);
}
}

22
frontend/app/src/theme/_fonts.scss
View File

@@ -14,38 +14,38 @@
*/
@font-face {
font-family: 'Barlow';
font-family: Barlow;
font-weight: 400;
font-style: normal;
src: url('../assets/fonts/barlow/Barlow-Regular.ttf');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Barlow';
font-family: Barlow;
font-weight: 700;
font-style: normal;
src: url('../assets/fonts/barlow/Barlow-SemiBold.ttf');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Barlow';
src: url('../assets/fonts/barlow/Barlow-Bold.ttf');
font-family: Barlow;
font-weight: 800;
font-style: normal;
src: url('../assets/fonts/barlow/Barlow-Bold.ttf');
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Regular.ttf');
font-weight: 400;
font-style: normal;
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Regular.ttf');
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-SemiBold.ttf');
font-weight: 700;
font-style: normal;
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-SemiBold.ttf');
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Bold.ttf');
font-weight: 800;
font-style: normal;
src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Bold.ttf');
}

2
frontend/app/src/theme/color-processing.scss
View File

@@ -17,7 +17,6 @@
// being generated, but omits colors with -dark and -light suffixes, making
// it impossible to access dark theme colors while in light theme and vice versa
$include-theme-independent-colors: true;
$tint-amount: 10%;
$shade-amount: 12%;
$placeholder-fade-amount: 20%;
@@ -28,7 +27,6 @@ $item-border-color-fade-amount: 15%;
$contrast-threshold: 128;
$contrast-light-color: #fff;
$contrast-dark-color: #000;
$fade-threshold: 50%;
// https://ionicframework.com/docs/theming/themes#stepped-colors

10
frontend/app/src/theme/colors.scss
View File

@@ -37,16 +37,14 @@
--calender-default-card: var(--ion-color-light);
--calender-default-card-rgb: var(--ion-color-light-rgb);
--calender-default-card-contrast: var(--ion-color-light-contrast);
--map-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
--map-box-shadow: 0 3px 1px -2px rgb(0 0 0 / 20%), 0 2px 2px 0 rgb(0 0 0 / 14%),
0 1px 5px 0 rgb(0 0 0 / 12%);
--linear-gradient: linear-gradient(135deg, var(--ion-color-primary-shade), var(--ion-color-tertiary));
// Shadows
--shadow-default: 0px 0px 10px 4px var(--ion-box-shadow-color);
--shadow-cards: 0 0 8px 1px var(--ion-box-shadow-color);
--shadow-cards-hover: 5px 5px 8px 4px var(--ion-box-shadow-color);
--shadow-profile-card: 0 2px 6px 6px rgba(0, 0, 0, 0.06), 0 4px 5px 12px rgba(0, 0, 0, 0.04),
0 5px 6px 20px rgba(0, 0, 0, 0.02);
--shadow-profile-card: 0 2px 6px 6px rgb(0 0 0 / 6%), 0 4px 5px 12px rgb(0 0 0 / 4%),
0 5px 6px 20px rgb(0 0 0 / 2%);
}

6
frontend/app/src/theme/common/_helper.scss
View File

@@ -41,6 +41,7 @@
li img {
max-height: 1.25rem;
vertical-align: text-bottom;
// filter: invert(45%) sepia(0%) saturate(0%) hue-rotate(227deg) brightness(97%) contrast(82%);
}
}
@@ -48,11 +49,13 @@
%horizontal-list {
@extend %vertical-list;
ul {
li {
display: inline;
}
li:not(:first-child):before {
li:not(:first-child)::before {
content: ' • ';
}
}
@@ -64,6 +67,7 @@
.horizontal-list {
@extend %vertical-list;
li {
display: inline;
}

54
frontend/app/src/theme/common/_ion-button.scss
View File

@@ -14,6 +14,34 @@
*/
app-root {
.button {
--padding-top: var(--spacing-sm);
--padding-bottom: var(--spacing-sm);
height: auto;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semi-bold);
// Add default border, so buttons have the same size
&:not([fill='outline'])::part(native) {
border: var(--border-width-default) solid transparent;
}
&[fill='outline']::part(native) {
border: var(--border-width-default) solid rgb(var(--ion-color-primary-contrast-rgb) 0.2);
}
&.button-active {
--background: var(--ion-color-tertiary);
font-weight: var(--font-weight-bold);
ion-icon {
color: var(--ion-color-secondary);
}
}
}
// Change default border radius
ion-buttons ion-button.button,
.button {
@@ -22,32 +50,6 @@ app-root {
}
}
.button {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semi-bold);
--padding-top: var(--spacing-sm);
--padding-bottom: var(--spacing-sm);
height: auto;
// Add default border, so buttons have the same size
&:not([fill='outline'])::part(native) {
border: var(--border-width-default) solid transparent;
}
&[fill='outline']::part(native) {
border: var(--border-width-default) solid rgba(var(--ion-color-primary-contrast-rgb), 0.2);
}
&.button-active {
font-weight: var(--font-weight-bold);
--background: var(--ion-color-tertiary);
ion-icon {
color: var(--ion-color-secondary);
}
}
}
ion-menu-button.button {
font-size: var(--font-size-lg);
}

18
frontend/app/src/theme/common/_ion-content-parallax.scss
View File

@@ -22,24 +22,24 @@ ion-content::part(parallax-scroll) {
}
ion-content::part(parallax-parent) {
transform-style: preserve-3d;
position: relative;
transform-style: preserve-3d;
}
ion-content::part(parallax) {
$translate-y: calc($overscroll-padding * $parallax-strength);
$translate-z: calc(-1px * $parallax-strength);
$transform-origin: calc($parallax-strength * $parallax-strength * $overscroll-padding);
position: absolute;
top: 0;
right: 0;
left: 0;
$translateY: calc($overscroll-padding * $parallax-strength);
$translateZ: calc(-1px * $parallax-strength);
$transform-origin: calc($parallax-strength * $parallax-strength * $overscroll-padding);
height: calc(var(--parallax-content-size, $default-parallax-content-size) + $overscroll-padding);
width: 150%;
transform-origin: 50% $transform-origin;
transform: translate3d(0px, $translateY, $translateZ) scale($parallax-strength);
transform: translate3d(0, $translate-y, $translate-z) scale($parallax-strength);
width: 150%;
height: calc(var(--parallax-content-size, $default-parallax-content-size) + $overscroll-padding);
background: var(--parallax-background, var(--ion-color-primary));
}

2
frontend/app/src/theme/common/_ion-header.scss
View File

@@ -1,5 +1,5 @@
app-root ion-header[class*='header-'] {
&:after {
&::after {
background-image: unset;
}
}

18
frontend/app/src/theme/common/_ion-input.scss
View File

@@ -2,20 +2,22 @@ $icon-size: 23px;
app-root ion-searchbar[class*='sc-ion-searchbar-'] {
--border-radius: var(--border-radius-default);
height: 38px;
padding-top: 0;
padding-bottom: 0;
height: 38px;
&.filterable {
padding-left: 0;
padding-right: 0;
--box-shadow: none;
position: relative;
padding-right: 0;
padding-left: 0;
ion-menu-button {
position: absolute;
right: 5px;
z-index: 1;
right: 5px;
}
.searchbar-clear-button {
@@ -24,11 +26,13 @@ app-root ion-searchbar[class*='sc-ion-searchbar-'] {
}
ion-icon.searchbar-search-icon {
top: 50%;
left: var(--spacing-sm);
transform: translateY(-50%);
width: $icon-size;
height: $icon-size;
top: 50%;
transform: translateY(-50%);
left: var(--spacing-sm);
color: var(--ion-color-medium-shade);
}

5
frontend/app/src/theme/common/_ion-refresher.scss
View File

@@ -14,14 +14,15 @@
*/
ion-refresher {
background-color: var(--ion-color-primary);
text-transform: uppercase;
background-color: var(--ion-color-primary);
.refresher-pulling-icon,
.refresher-pulling-text,
.refresher-refreshing-text {
--ion-text-color: var(--ion-color-primary-contrast);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semi-bold);
--ion-text-color: var(--ion-color-primary-contrast);
}
}

11
frontend/app/src/theme/common/_ion-toolbar.scss
View File

@@ -24,11 +24,13 @@ app-root ion-toolbar.in-toolbar {
--padding-top: 0;
--padding-bottom: 0;
--opacity: 1;
padding: 0 var(--spacing-md) var(--spacing-md);
&:first-of-type {
--padding-top: 0;
--padding-bottom: 0;
padding-bottom: 0;
}
@@ -40,6 +42,7 @@ app-root ion-toolbar.in-toolbar {
ion-segment {
&:last-of-type {
--padding-bottom: 0;
padding-bottom: 0;
}
}
@@ -55,8 +58,8 @@ app-root ion-toolbar.in-toolbar {
}
ion-title {
font-weight: var(--font-weight-black);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-black);
}
ion-menu-button {
@@ -65,13 +68,15 @@ app-root ion-toolbar.in-toolbar {
ion-back-button {
--icon-margin-end: var(--spacing-xs);
height: 42px; // this prevents the back button to become a .x px value
}
}
app-root ion-toolbar.in-toolbar ion-searchbar,
.stapps-searchbar {
padding-left: 0;
padding-right: 0;
--box-shadow: none;
padding-right: 0;
padding-left: 0;
}

10
frontend/app/src/theme/common/_swiper.scss
View File

@@ -29,17 +29,19 @@
text-decoration: none;
}
}
.swiper-button-prev,
.swiper-button-next {
--swiper-navigation-size: 20px;
top: calc(-1 * var(--spacing-lg));
transform: translateY(0%);
font-weight: var(--font-weight-black);
color: var(--ion-color-dark);
@include ion-md-down {
display: none;
}
top: calc(-1 * var(--spacing-lg));
transform: translateY(0%);
font-weight: var(--font-weight-black);
color: var(--ion-color-dark);
}
.swiper-button-prev {

3
frontend/app/src/theme/common/_typo.scss
View File

@@ -18,12 +18,15 @@ body app-root {
.title[class*='sc-ion-label'] {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semi-bold);
// TODO Condensed Font
}
.title-sub,
.title-sub[class*='sc-ion-label'] {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
// TODO Condensed Font
}

14
frontend/app/src/theme/components/_card.scss
View File

@@ -14,15 +14,19 @@
*/
.card {
box-shadow: var(--shadow-cards);
// background-color: var(--ion-item-color);
border-radius: var(--border-radius-default);
display: block;
height: 100%;
padding: var(--spacing-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
text-align: left;
display: block;
height: 100%;
// background-color: var(--ion-item-color);
border-radius: var(--border-radius-default);
box-shadow: var(--shadow-cards);
transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out;
}

13
frontend/app/src/theme/components/_section.scss
View File

@@ -1,12 +1,13 @@
.section-headline {
display: flex;
flex-direction: revert;
justify-content: space-between;
width: 100%;
margin-bottom: var(--spacing-sm);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-black);
font-stretch: condensed;
text-transform: uppercase;
margin-bottom: var(--spacing-sm);
width: 100%;
display: flex;
flex-direction: revert;
justify-content: space-between;
}

19
frontend/app/src/theme/material-symbols.scss
View File

@@ -14,27 +14,28 @@
*/
@font-face {
font-family: 'Material Symbols Rounded';
font-style: normal;
font-weight: 100 700;
font-style: normal;
font-display: block;
src: url('../assets/icons.min.woff2') format('woff2');
}
.material-symbols-rounded {
//noinspection CssNoGenericFontName
direction: ltr;
display: inline-block;
// stylelint-disable-next-line
font-family: 'Material Symbols Rounded';
font-size: 24px;
font-feature-settings: 'liga'; // Support for IE
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
text-rendering: optimizelegibility; // Support for Safari and Chrome
letter-spacing: normal;
word-wrap: normal;
direction: ltr;
white-space: nowrap;
-webkit-font-smoothing: antialiased; // Support for all WebKit browsers
-moz-osx-font-smoothing: grayscale; // Support for Firefox
text-rendering: optimizeLegibility; // Support for Safari and Chrome
font-feature-settings: 'liga'; // Support for IE
}

29
frontend/app/src/theme/util/_color-system.scss
View File

@@ -17,20 +17,20 @@
@import '../color-processing';
@import './dark';
@function toRGB($color) {
@function to-rgb($color) {
@return red($color) + ',' + green($color) + ',' + blue($color);
}
@function toShade($color) {
@function to-shade($color) {
@return darken($color, $shade-amount);
}
@function toTint($color) {
@function to-tint($color) {
@return lighten($color, $tint-amount);
}
@function toContrast($color) {
$yiq: toYiq($color);
@function to-contrast($color) {
$yiq: to-yiq($color);
@return if($yiq >= $contrast-threshold, $contrast-dark-color, $contrast-light-color);
}
@@ -53,7 +53,7 @@
/**
* Converts a color to the YIQ color system
*/
@function toYiq($color) {
@function to-yiq($color) {
@return math.div(
(color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
1000
@@ -62,19 +62,19 @@
@mixin color-rgb($name, $color) {
#{$name}: #{$color};
#{$name}-rgb: #{toRGB($color)};
#{$name}-rgb: #{to-rgb($color)};
}
@mixin light-dark-scheme($light, $dark) {
:root,
.light {
@if ($include-theme-independent-colors == true) {
@if $include-theme-independent-colors == true {
@content ($light, -light);
@content (if($dark == none, $light, $dark), -dark);
}
@content ($light, "");
}
@if ($dark != none) {
@if $dark != none {
@include dark-only {
@content ($dark, "");
}
@@ -84,6 +84,7 @@
@mixin ion-color-step($name, $from, $to) {
@for $i from calc($steps-start / $steps-step) through calc($steps-end / $steps-step) {
$value: $i * $steps-step;
#{$name}-#{$value}: #{interpolate-colors($from, $to, $value, $steps-range-start, $steps-range-end)};
}
}
@@ -91,15 +92,15 @@
@mixin ion-color($name, $light, $dark: none) {
@include light-dark-scheme($light, $dark) using($color, $suffix) {
@include color-rgb(--ion-color-#{$name}#{$suffix}, $color);
@include color-rgb(--ion-color-#{$name}-shade#{$suffix}, toShade($color));
@include color-rgb(--ion-color-#{$name}-tint#{$suffix}, toTint($color));
@include color-rgb(--ion-color-#{$name}-contrast#{$suffix}, toContrast($color));
@include color-rgb(--ion-color-#{$name}-shade#{$suffix}, to-shade($color));
@include color-rgb(--ion-color-#{$name}-tint#{$suffix}, to-tint($color));
@include color-rgb(--ion-color-#{$name}-contrast#{$suffix}, to-contrast($color));
}
}
@mixin ion-background-color($light, $dark: none) {
@include light-dark-scheme($light, $dark) using($color, $suffix) {
$text-color: toContrast($color);
$text-color: to-contrast($color);
@include color-rgb(--ion-background-color#{$suffix}, $color);
@include color-rgb(--ion-text-color#{$suffix}, $text-color);
@include color-rgb(--ion-box-shadow-color#{$suffix}, fade($color, $box-shadow-fade-amount));
@@ -115,6 +116,6 @@
@include color-rgb(--ion-card-background#{$suffix}, $color);
@include color-rgb(--ion-item-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
@include color-rgb(--ion-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
@include color-rgb(--ion-item-color#{$suffix}, toContrast($color));
@include color-rgb(--ion-item-color#{$suffix}, to-contrast($color));
}
}

1
frontend/app/src/theme/util/_dark.scss
View File

@@ -18,6 +18,7 @@
@content();
}
}
.dark {
@content();
}

26
frontend/app/src/theme/util/_mixins.scss
View File

@@ -18,61 +18,61 @@
*/
@mixin ion-sm-up {
@media (min-width: 576px) {
@media (width >= 576px) {
@content;
}
}
@mixin ion-sm-down {
@media (max-width: 575.98px) {
@media (width <= 575.98px) {
@content;
}
}
@mixin ion-md-up {
@media (min-width: 768px) {
@media (width >= 768px) {
@content;
}
}
@mixin ion-md-down {
@media (max-width: 767.98px) {
@media (width <= 767.98px) {
@content;
}
}
@mixin ion-lg-up {
@media (min-width: 992px) {
@media (width >= 992px) {
@content;
}
}
@mixin ion-lg-down {
@media (max-width: 991.98px) {
@media (width <= 991.98px) {
@content;
}
}
@mixin ion-xl-up {
@media (min-width: 1200px) {
@media (width >= 1200px) {
@content;
}
}
@mixin ion-xl-down {
@media (max-width: 1199.98px) {
@media (width <= 1199.98px) {
@content;
}
}
@mixin phoneLandscape {
@media (max-height: 500px) and (orientation: landscape) {
@mixin phone-landscape {
@media (height <= 500px) and (orientation: landscape) {
@content;
}
}
@mixin phonePortraitSmall {
@media (max-height: 700px) and (orientation: portrait) {
@mixin phone-portrait-small {
@media (height <= 700px) and (orientation: portrait) {
@content;
}
}
@@ -84,11 +84,11 @@
}
@mixin border-radius-in-parallax($border-radius) {
border-radius: $border-radius;
// explicitly place element in 3D space
// Safari seems to sometimes get confused
// and disregard border radius in some cases
transform: translateZ(0);
border-radius: $border-radius;
}
@mixin content-padding {

60
frontend/app/src/theme/variables.scss
View File

@@ -12,24 +12,44 @@
* You should have received a copy of the GNU General Public License along with
* this program. If not, see <https://www.gnu.org/licenses/>.
*/
// Ionic Variables and Theming. For more info, please see:
// http://ionicframework.com/docs/theming/
@import 'colors';
@import './colors';
@import '~swiper/css/navigation';
// Import all other styles
@import './fonts';
@import './common/typo';
@import './common/helper';
@import './common/ion-button';
@import './common/ion-header';
@import './common/ion-input';
@import './common/ion-modal';
@import './common/ion-popover';
@import './common/ion-refresher';
@import './common/ion-toolbar';
@import './common/ion-menu';
@import './common/swiper';
@import './common/typography';
@import './common/leaflet-tile';
@import './common/ion-searchbar';
@import './components/image-dark';
@import './components/card';
@import './components/section';
/** Ionic CSS Variables **/
:root {
// Fonts
--ion-font-family: 'Barlow', Helvetica, Arial, sans-serif;
--headline-font-family: 'Barlow Condensed', Helvetica, Arial, sans-serif;
--ion-font-family: 'Barlow', helvetica, arial, sans-serif;
--headline-font-family: 'Barlow Condensed', helvetica, arial, sans-serif;
--font-size-xxs: 10px;
--font-size-xs: 12px;
--font-size-sm: 14px;
--font-size-md: 16px;
--font-size-lg: 20px;
--font-size-xl: 24px;
--font-weight-thin: 200;
--font-weight-regular: 400;
--font-weight-semi-bold: 700;
@@ -43,18 +63,13 @@
--spacing-lg: 16px;
--spacing-xl: 20px;
--spacing-xxl: 24px;
--border-width-default: 1px;
--border-radius-default: 8px;
--header-spacing-bottom: 70px;
--navigation-rail-width: 80px;
--navigation-rail-item-height: 56px;
--icon-stroke-width: 1.2;
--tablet-top-bar-height: 96px;
--ion-tabbar-height: 50px;
}
@@ -63,26 +78,3 @@ body {
font-family: var(--ion-font-family);
background-color: var(--ion-color-primary);
}
@import '~swiper/css/navigation';
// Import all other styles
@import 'fonts';
@import 'common/typo';
@import 'common/helper';
@import 'common/ion-button';
@import 'common/ion-header';
@import 'common/ion-input';
@import 'common/ion-modal';
@import 'common/ion-popover';
@import 'common/ion-refresher';
@import 'common/ion-toolbar';
@import 'common/ion-menu';
@import 'common/swiper';
@import 'common/typography';
@import 'common/leaflet-tile';
@import 'common/ion-searchbar';
@import 'components/image-dark';
@import 'components/card';
@import 'components/section';