Separate project / feed / settings

2026-05-22 22:17:04 +02:00
parent 3fd68fa938
commit 8a590aa2fc
13 changed files with 519 additions and 378 deletions
--- a/src/styles/_page.project.panel.settings.scss
+++ b/src/styles/_page.project.panel.settings.scss
@@ -0,0 +1,171 @@
+@use "@styles/common";
+@use "@styles/var";
+@use "@styles/color";
+
+#settings {
+	#settings-panel {
+		.settings-header {
+			text-align: center;
+			flex: 0 1 auto;
+
+			.logo {
+				background: color.$default-bg;
+				padding: 2rem var.$block-spacing;
+				border-radius: var.$block-radius var.$block-radius 0 0;
+
+				img {
+					width: 100%;
+					height: auto;
+					max-width: 180px;
+					transform: translateX(-10%); //Center Text, not logo. logo width (40px) / image width (200px) = 20%. And centering: 20% / 2 = 10%
+				}
+			}
+
+			#last_update {
+				position: absolute;
+				margin-top: -2em;
+				padding: 0 var.$block-spacing;
+				width: calc(100% - 2rem);
+
+				p {
+					text-align: center;
+					font-size: 0.8em;
+					margin: 0;
+					color: color.$subtitle;
+					transform: translateX(calc(-0.5 * (12px + 0.5em))); //icon width + margin right
+
+					span {
+						margin-right: 0.5em;
+						img {
+							width: 12px;
+							vertical-align: middle;
+							animation: spotlogo 20s infinite;
+						}
+					}
+
+					abbr {
+						text-decoration: none;
+						vertical-align: middle;
+					}
+				}
+			}
+		}
+
+		.settings-footer {
+			flex: 0 1 auto;
+			display: flex;
+			justify-content: center;
+			background: color.$default-bg;
+			border-radius: 0 0 var.$block-radius var.$block-radius;
+			font-size: 0.7em;
+			padding: var.$text-spacing;
+			color: color.$default;
+
+			a {
+				color: color.$default;
+				text-decoration: none;
+
+				&:hover {
+					color: color.$default-hover;
+				}
+			}
+		}
+
+		.settings-sections {
+			flex: 1 1 auto;
+			overflow: auto;
+
+			#settings-sections-scrollbox {
+				height: 100%;
+				width: 100%;
+			}
+
+			.settings-section {
+				display: inline-block;
+				margin: 2rem var.$block-spacing 0 var.$block-spacing;
+				width: calc(100% - 2 * var.$block-spacing);
+
+				&:last-child {
+					margin-bottom: 2rem;
+				}
+
+				h1 {
+					margin: 0 0 var.$block-spacing;
+					color: color.$title;
+					font-size: 1.5em;
+				}
+
+				.settings-section-body {
+					.radio {
+						&:not(:first-child) {
+							margin-top: var.$elem-spacing;
+						}
+
+						label {
+							margin-left: var.$text-spacing;
+							@extend .clickable;
+							@include common.no-text-overflow();
+
+							&:hover {
+								color: color.$default-hover;
+							}
+						}
+
+						.download {
+							color: color.$default;
+	
+							&:hover {
+								color: color.$download-hover;
+							}
+						}
+					}
+				}
+
+				&.newsletter {
+					.newsletter-form {
+						display: flex;
+						align-items: stretch;
+						gap: var.$block-spacing;
+						margin-bottom: var.$block-spacing;
+
+						input#email {
+							flex: 1 1 auto;
+							min-width: 0;
+
+							&:disabled {
+								color: color.$default-disabled;
+								background: color.$default-bg-trans-disabled;
+							}
+						}
+
+						button.manage {
+							flex: 0 0 auto;
+
+							&.loading {
+								background-color: color.$message;
+								color: color.$post-input-bg;
+
+								.spot-icon {
+									@extend .flicker;
+								}
+							}
+						}
+					}
+				}
+
+				&.admin {
+					.admin-actions {
+						display: flex;
+						flex-wrap: wrap;
+						gap: var.$block-spacing;
+
+						a.button {
+							flex: 0 0 auto;
+							min-width: 0;
+						}
+					}
+				}
+			}
+		}
+	}
+}