Rebuild panel navigation

2024-02-06 21:22:36 +01:00
parent b6fc305111
commit cab899e544
11 changed files with 800 additions and 713 deletions
--- a/src/styles/_page.project.settings.scss
+++ b/src/styles/_page.project.settings.scss
@@ -0,0 +1,147 @@
+#settings {
+	#settings-panel {
+		.settings-header {
+			text-align: center;
+			flex: 0 1 auto;
+
+			.logo {
+				background: rgba(255, 255, 255, .4);
+				padding: 2rem 1rem;
+				border-radius: $block-radius $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 1rem;
+				width: calc(100% - 2rem);
+
+				p {
+					text-align: center;
+					font-size: 0.8em;
+					margin: 0;
+					color: $subtitle-color;
+					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;
+			background: rgba(255, 255, 255, .4);
+			border-radius: 0 0 3px 3px;
+			font-size: 0.7em;
+			padding: 0.3rem;
+			text-align: center;
+			color: #888;
+
+			a {
+				color: #777;
+				text-decoration: none;
+			}
+		}
+
+		.settings-sections {
+			flex: 1 1 auto;
+			overflow: auto;
+
+			#settings-sections-scrollbox {
+				height: 100%;
+				width: 100%;
+			}
+
+			.settings-section {
+				display: inline-block;
+				margin: 1.5rem 1rem 0 1rem;
+				width: calc(100% - 2 * #{$block-spacing});
+
+				&:last-child {
+					margin-bottom: 1.5rem;
+				}
+
+				h1 {
+					margin: 0 0 $block-spacing;
+					color: $title-color;
+					font-size: 1.5em;
+				}
+
+				#settings-layers {
+					.layer {
+						label {
+							margin-left: .3rem;
+							@extend .clickable;
+	
+							& > div {
+								@include no-text-overflow();
+							}
+						}
+
+						&:not(:first-child) {
+							margin-top: $elem-spacing;
+						}
+					}
+				}
+
+				&.newsletter {
+					input#email {
+						width: calc(100% - 6em);
+
+						&:disabled {
+							color: #999;
+							background: rgba(255,255,255,0.2);
+						}
+					}
+					button#nl_btn {
+						margin-left: 1em;
+						margin-bottom: 1em;
+
+						&.subscribe .fa {
+							@extend .fa-send;
+						}
+						&.unsubscribe .fa {
+							@extend .fa-unsubscribe;
+						}
+						&.loading {
+							background-color: $message-color;
+							color: white;
+							span {
+								@extend .flicker;
+							}
+						}
+					}
+				}
+
+				#settings-projects {
+					a.fa-download {
+						color: $legend-color;
+
+						&:hover {
+							color: #0078A8;
+						}
+					}
+				}
+			}
+		}
+	}
+}