mirror of
https://gitlab.com/openstapps/openstapps.git
synced 2026-01-20 08:33:11 +00:00
feat: rework settings page design
This commit is contained in:
Thea Schöbl
committed by
Rainer Killinger
Rainer Killinger
parent
8cd2d777ab
commit
2f1298c9d7
@@ -1,5 +1,5 @@
|
||||
/*
|
||||
* Copyright (C) 2021 StApps
|
||||
* Copyright (C) 2023 StApps
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the Free
|
||||
* Software Foundation, version 3.
|
||||
@@ -18,6 +18,6 @@ import {Component} from '@angular/core';
|
||||
@Component({
|
||||
selector: 'about-changelog',
|
||||
templateUrl: 'about-changelog.html',
|
||||
styleUrls: ['about-changelog.scss'],
|
||||
styleUrls: ['about-changelog.scss', './about-page/about-page.scss'],
|
||||
})
|
||||
export class AboutChangelogComponent {}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!--
|
||||
~ Copyright (C) 2021 StApps
|
||||
~ Copyright (C) 2023 StApps
|
||||
~ This program is free software: you can redistribute it and/or modify it
|
||||
~ under the terms of the GNU General Public License as published by the Free
|
||||
~ Software Foundation, version 3.
|
||||
@@ -22,6 +22,10 @@
|
||||
<!-- TODO: translation -->
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<markdown src="assets/about/CHANGELOG.md"></markdown>
|
||||
<ion-content class="ion-content-parallax">
|
||||
<div>
|
||||
<div class="about-changelog">
|
||||
<markdown src="assets/about/CHANGELOG.md"></markdown>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
/*
|
||||
* Copyright (C) 2022 StApps
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the Free
|
||||
* Software Foundation, version 3.
|
||||
* Copyright (C) 2023 StApps
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the Free
|
||||
* Software Foundation, version 3.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful, but WITHOUT
|
||||
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
||||
* more details.
|
||||
* This program is distributed in the hope that it will be useful, but WITHOUT
|
||||
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
||||
* more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
* 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 {Component, OnInit} from '@angular/core';
|
||||
import {ModalController} from '@ionic/angular';
|
||||
@@ -31,7 +31,7 @@ export interface License {
|
||||
@Component({
|
||||
selector: 'about-changelog',
|
||||
templateUrl: 'about-licenses.html',
|
||||
styleUrls: ['about-licenses.scss'],
|
||||
styleUrls: ['about-licenses.scss', './about-page/about-page.scss'],
|
||||
})
|
||||
export class AboutLicensesComponent implements OnInit {
|
||||
licenses: License[];
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<!--
|
||||
~ Copyright (C) 2022 StApps
|
||||
~ Copyright (C) 2023 StApps
|
||||
~ This program is free software: you can redistribute it and/or modify it
|
||||
~ under the terms of the GNU General Public License as published by the Free
|
||||
~ Software Foundation, version 3.
|
||||
@@ -22,28 +22,32 @@
|
||||
<!-- TODO: translation -->
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<cdk-virtual-scroll-viewport itemSize="130" minBufferPx="1500" maxBufferPx="2000">
|
||||
<ion-card
|
||||
*cdkVirtualFor="let license of licenses"
|
||||
[href]="license.url || license.repository"
|
||||
rel="external"
|
||||
target="_blank"
|
||||
>
|
||||
<ion-card-header>
|
||||
<ion-card-title>
|
||||
{{ license.name }}
|
||||
<ion-icon size="16" weight="300" class="supertext-icon" name="open_in_browser"></ion-icon>
|
||||
</ion-card-title>
|
||||
<ion-content class="ion-content-parallax">
|
||||
<div>
|
||||
<div class="licenses-content">
|
||||
<ion-card
|
||||
*ngFor="let license of licenses"
|
||||
[href]="license.url || license.repository"
|
||||
rel="external"
|
||||
target="_blank"
|
||||
>
|
||||
<ion-card-header>
|
||||
<ion-card-title>
|
||||
{{ license.name }}
|
||||
<ion-icon size="16" weight="300" class="supertext-icon" name="open_in_browser"></ion-icon>
|
||||
</ion-card-title>
|
||||
|
||||
<ion-card-subtitle *ngIf="license.authors || license.publisher">
|
||||
{{ license.authors || license.publisher }}
|
||||
</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<ion-chip (click)="$event.preventDefault(); viewLicense(license)">
|
||||
<ion-icon name="copyright"></ion-icon>
|
||||
<ion-label>{{ license.licenses }} License</ion-label>
|
||||
</ion-chip>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</cdk-virtual-scroll-viewport>
|
||||
<ion-card-subtitle *ngIf="license.authors || license.publisher">
|
||||
{{ license.authors || license.publisher }}
|
||||
</ion-card-subtitle>
|
||||
</ion-card-header>
|
||||
<ion-card-content>
|
||||
<ion-chip (click)="$event.preventDefault(); viewLicense(license)">
|
||||
<ion-icon name="copyright"></ion-icon>
|
||||
<ion-label>{{ license.licenses }} License</ion-label>
|
||||
</ion-chip>
|
||||
</ion-card-content>
|
||||
</ion-card>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@@ -1,18 +1,22 @@
|
||||
/*!
|
||||
* Copyright (C) 2022 StApps
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the Free
|
||||
* Software Foundation, version 3.
|
||||
* Copyright (C) 2023 StApps
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the Free
|
||||
* Software Foundation, version 3.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful, but WITHOUT
|
||||
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
||||
* more details.
|
||||
* This program is distributed in the hope that it will be useful, but WITHOUT
|
||||
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
|
||||
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
|
||||
* more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License along with
|
||||
* this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
* 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-content > div {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
cdk-virtual-scroll-viewport {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Copyright (C) 2021 StApps
|
||||
* Copyright (C) 2023 StApps
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the Free
|
||||
* Software Foundation, version 3.
|
||||
|
||||
@@ -24,7 +24,11 @@
|
||||
</ng-template>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content *ngIf="content">
|
||||
<ion-text color="primary">{{ appName }} v{{ version }}</ion-text>
|
||||
<about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
|
||||
<ion-content *ngIf="content" class="ion-content-parallax">
|
||||
<div>
|
||||
<ion-text color="light">{{ appName }} v{{ version }}</ion-text>
|
||||
<div class="page-content">
|
||||
<about-page-content *ngFor="let element of content.content" [content]="element"></about-page-content>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/*!
|
||||
* Copyright (C) 2021 StApps
|
||||
* Copyright (C) 2023 StApps
|
||||
* This program is free software: you can redistribute it and/or modify it
|
||||
* under the terms of the GNU General Public License as published by the Free
|
||||
* Software Foundation, version 3.
|
||||
@@ -12,8 +12,80 @@
|
||||
* 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';
|
||||
|
||||
ion-content {
|
||||
--padding-start: 8px;
|
||||
--padding-top: 8px;
|
||||
ion-text {
|
||||
margin-inline: var(--spacing-md);
|
||||
}
|
||||
|
||||
: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,
|
||||
h1 {
|
||||
margin-inline: var(--spacing-md);
|
||||
}
|
||||
|
||||
.about-changelog,
|
||||
.licenses-content,
|
||||
.page-content {
|
||||
margin: var(--spacing-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
background: var(--ion-color-primary-contrast);
|
||||
&.licenses-content {
|
||||
background: var(--ion-color-light);
|
||||
}
|
||||
|
||||
padding-block-end: var(--spacing-md);
|
||||
@include border-radius-in-parallax(var(--border-radius-default));
|
||||
|
||||
& > * {
|
||||
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;
|
||||
background-color: var(--ion-color-primary-contrast);
|
||||
margin: 0;
|
||||
|
||||
& > ion-thumbnail {
|
||||
background: var(--ion-color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user