diff --git a/src/app/modules/data/detail/data-detail.scss b/src/app/modules/data/detail/data-detail.scss
index 2fb60d16..b996acb0 100644
--- a/src/app/modules/data/detail/data-detail.scss
+++ b/src/app/modules/data/detail/data-detail.scss
@@ -1,9 +1,25 @@
+/*!
+ * 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.
+ *
+ * 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 .
+ */
+
::ng-deep {
ion-card-header {
font-weight: bold;
}
+
stapps-favorite-button {
- ion-icon {
+ ion-icon {
color: var(--ion-color-light);
}
}
diff --git a/src/app/modules/data/detail/data-path.html b/src/app/modules/data/detail/data-path.html
index 20e13d8b..6c6c5320 100644
--- a/src/app/modules/data/detail/data-path.html
+++ b/src/app/modules/data/detail/data-path.html
@@ -1,20 +1,21 @@
.
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see .
*/
import {Directive, ElementRef, ViewContainerRef} from '@angular/core';
@@ -26,12 +26,22 @@ export class IonBreadcrumbDirective extends IconReplacer {
}
replace() {
+ this.replaceIcon(
+ this.host.querySelector('span[part="separator"]'),
+ {
+ name: SCIcon`arrow_forward_ios`,
+ size: 16,
+ style: `color: var(--ion-color-tint);`,
+ },
+ '-separator',
+ );
this.replaceIcon(
this.host.querySelector('button[part="collapsed-indicator"]'),
{
name: SCIcon`more_horiz`,
size: 24,
},
+ '-collapsed',
);
}
}
diff --git a/src/app/util/ion-icon/ion-icon.directive.ts b/src/app/util/ion-icon/ion-icon.directive.ts
index ea4607af..caa92549 100644
--- a/src/app/util/ion-icon/ion-icon.directive.ts
+++ b/src/app/util/ion-icon/ion-icon.directive.ts
@@ -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.
+ * 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 .
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see .
*/
import {
@@ -54,6 +54,8 @@ export class IonIconDirective implements OnInit, OnDestroy, OnChanges {
@Input() grade: number;
+ @Input() style: string;
+
private mutationObserver: MutationObserver;
iconComponent?: ComponentRef;
@@ -121,6 +123,9 @@ export class IonIconDirective implements OnInit, OnDestroy, OnChanges {
if (this.size) {
this.element.nativeElement.style.cssText = `font-size: ${this.size}px;`;
}
+ if (this.style) {
+ this.element.nativeElement.style.cssText += this.style;
+ }
}
disableProperty(name: string) {
diff --git a/src/app/util/ion-icon/replace-util.ts b/src/app/util/ion-icon/replace-util.ts
index ddef712d..ecaa1391 100644
--- a/src/app/util/ion-icon/replace-util.ts
+++ b/src/app/util/ion-icon/replace-util.ts
@@ -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.
+ * 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 .
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see .
*/
import {
@@ -121,7 +121,7 @@ export abstract class IconReplacer implements OnInit, OnDestroy {
});
}
- replaceIcon(parent: HTMLElement | null, iconData: IconData) {
+ replaceIcon(parent: HTMLElement | null, iconData: IconData, slotName = '') {
if (!parent) return;
const icon = parent.querySelector('ion-icon');
@@ -135,10 +135,10 @@ export abstract class IconReplacer implements OnInit, OnDestroy {
// shadow dom needs to utilize slotting, to put it outside
// the shadow dom, otherwise it won't receive any css data
const slot = document.createElement('slot');
- slot.name = this.slotName;
+ slot.name = this.slotName + slotName;
icon.replaceWith(slot);
- scIcon.location.nativeElement.slot = this.slotName;
+ scIcon.location.nativeElement.slot = this.slotName + slotName;
this.element.nativeElement.append(scIcon.location.nativeElement);
} else {
icon.replaceWith(scIcon.location.nativeElement);
diff --git a/src/assets/icons.min.woff2 b/src/assets/icons.min.woff2
index a7004292..65744b72 100644
Binary files a/src/assets/icons.min.woff2 and b/src/assets/icons.min.woff2 differ
diff --git a/src/global.scss b/src/global.scss
index 9120d968..a37890a9 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -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.
+ * 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 .
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see .
*/
// http://ionicframework.com/docs/theming/
@@ -32,6 +32,7 @@
// @import 'material-symbols/rounded.scss';
@import "./theme/material-symbols.scss";
+@import "./theme/common/_ion-content-parallax.scss";
/* StApps */
@@ -113,3 +114,7 @@ ion-card.bold-header {
font-weight: bold;
}
}
+
+.ion-content-parallax {
+ @include ion-content-parallax()
+}
diff --git a/src/theme/common/_ion-content-parallax.scss b/src/theme/common/_ion-content-parallax.scss
new file mode 100644
index 00000000..c3845589
--- /dev/null
+++ b/src/theme/common/_ion-content-parallax.scss
@@ -0,0 +1,48 @@
+/*!
+ * 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.
+ *
+ * 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 .
+ */
+
+@mixin ion-content-parallax(
+ $parallax-background: var(--ion-color-primary),
+ $background: var(--ion-color-light),
+ $parallax-strength: 2,
+ $overscroll-padding: 50vh,
+ $content-size: 0px,
+) {
+ &::part(background) {
+ background: $background;
+ }
+ &::part(scroll) {
+ perspective: 2px;
+ }
+ > div {
+ transform-style: preserve-3d;
+ position: relative;
+
+ &::after {
+ content: " ";
+ position: absolute;
+ top: 0;
+ right: 0;
+ height: calc(#{$content-size} + #{$parallax-strength} * #{$overscroll-padding});
+ width: 200%;
+ transform:
+ translateY(calc(-#{$overscroll-padding} * #{$parallax-strength}))
+ translateZ(calc(-1px * #{$parallax-strength}))
+ scale(1.5);
+ z-index: -1;
+ background: $parallax-background;
+ }
+ }
+}