add global banner

wowsims · Mar 29, 2024 · 92f8672 · 92f8672
1 parent 1d3f19c
commit 92f8672
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 62 deletions.
diff --git a/ui/core/individual_sim_ui.ts b/ui/core/individual_sim_ui.ts
@@ -181,6 +181,7 @@ export abstract class IndividualSimUI<SpecType extends Spec> extends SimUI {
 			spec: player.getPlayerSpec(),
 			knownIssues: config.knownIssues,
 			simStatus: simLaunchStatuses[player.getSpec()],
+			noticeText: 'WoWSims - Cataclysm is still in the very early stages of development and all sims are considered non-functional at this time.',
 		});
 		this.rootElem.classList.add('individual-sim-ui');
 		this.player = player;

diff --git a/ui/index.html b/ui/index.html
@@ -15,6 +15,9 @@
 	<body class="bg-black">
 		<div class="homepage-image"></div>
 		<div id="homepage">
+			<div class="notices-banner alert border-bottom mb-0 text-center">
+				WoWSims - Cataclysm is still in the very early stages of development and all sims are considered non-functional at this time.
+			</div>
 			<header class="homepage-header">
 				<div class="container homepage-header-container">
 					<nav class="navbar navbar-dark navbar-expand-md flex-wrap align-items-end w-100">

diff --git a/ui/scss/core/sim_ui/_shared.scss b/ui/scss/core/sim_ui/_shared.scss
@@ -37,11 +37,6 @@ th {
 			flex: 1;
 		}
 
-		.notices-banner {
-			width: 100%;
-			background: lighten($body-bg, 5);
-		}
-
 		.sim-content {
 			padding-left: $container-padding;
 			padding-right: $container-padding;

diff --git a/ui/scss/shared/_global.scss b/ui/scss/shared/_global.scss
@@ -1,104 +1,106 @@
-@use "sass:map";
+@use 'sass:map';
 
 :root {
-  --bs-body-font-size: 14px;
-  --container-padding: #{$gap-width};
-  font-size: var(--bs-body-font-size);
+	--bs-body-font-size: 14px;
+	--container-padding: #{$gap-width};
+	font-size: var(--bs-body-font-size);
 }
 
 @include media-breakpoint-up(lg) {
-  :root {
-    --container-padding: 3rem;
-  }
+	:root {
+		--container-padding: 3rem;
+	}
 }
 
 @include media-breakpoint-up(xxl) {
-  :root {
-    --container-padding: 4rem;
-  }
+	:root {
+		--container-padding: 4rem;
+	}
 }
 
 @include media-breakpoint-up(1080p) {
-  :root {
-    --bs-body-font-size: 16px;
-  }
+	:root {
+		--bs-body-font-size: 16px;
+	}
 }
 
 // We want to apply only to 1440p monitors, NOT 1080p Ultrawide
 @media (min-width: map-get($grid-breakpoints, 1440p)) and (max-aspect-ratio: 16/9) {
-  :root {
-    --bs-body-font-size: 24px;
-  }
+	:root {
+		--bs-body-font-size: 24px;
+	}
 }
 
 @include media-breakpoint-up(4k) {
-  :root {
-    --bs-body-font-size: 32px;
-  }
+	:root {
+		--bs-body-font-size: 32px;
+	}
 }
 
 * {
-  letter-spacing: 1px;
+	letter-spacing: 1px;
 }
 
 html {
-  height: 100%;
-  color-scheme: dark;
-  font-size: var(--bs-body-font-size);
+	height: 100%;
+	color-scheme: dark;
+	font-size: var(--bs-body-font-size);
 }
 
 body {
-  height: 100%;
-  // Bootstrap adds padding-right when Modals open for some reason, causing popping
-  padding-right: 0 !important;
-  // Prevent browser scrollbars from adjusting page contents
-  margin-right: calc(-1 * (100vw - 100%));
-  overflow-x: hidden;
-  opacity: 0;
-  transition: opacity .25s linear;
-
-  &.ready {
-    opacity: 1;
-  }
+	height: 100%;
+	// Bootstrap adds padding-right when Modals open for some reason, causing popping
+	padding-right: 0 !important;
+	// Prevent browser scrollbars from adjusting page contents
+	margin-right: calc(-1 * (100vw - 100%));
+	overflow-x: hidden;
+	opacity: 0;
+	transition: opacity 0.25s linear;
+
+	&.ready {
+		opacity: 1;
+	}
 }
 
 a {
-  outline: none;
-  transition: color .15s ease-in-out;
+	outline: none;
+	transition: color 0.15s ease-in-out;
 
-  &.link-alt {
-    color: white;
+	&.link-alt {
+		color: white;
 
-    &:hover, &:focus, &.active {
-      color: $brand;
-    }
-  }
+		&:hover,
+		&:focus,
+		&.active {
+			color: $brand;
+		}
+	}
 }
 
 hr {
-  border-top: 1px solid;
-  border-bottom: 1px solid;
+	border-top: 1px solid;
+	border-bottom: 1px solid;
 }
 
 label {
-  font-weight: bold;
+	font-weight: bold;
 }
 
 p {
-  margin-bottom: $block-spacer;
+	margin-bottom: $block-spacer;
 }
 
 kbd {
-  background: $body-bg;
-  color: white;
+	background: $body-bg;
+	color: white;
 }
 
 .dragto:not(.dragfrom) {
-  filter: brightness(.75);
+	filter: brightness(0.75);
 }
 
 .hide {
-  display: none !important;
+	display: none !important;
 }
 
 .icon-sm {
@@ -129,12 +131,17 @@ kbd {
 	}
 }
 
-[contenteditable="true"]:active,
-[contenteditable="true"]:focus {
-  border:none;
-  outline:none;
+[contenteditable='true']:active,
+[contenteditable='true']:focus {
+	border: none;
+	outline: none;
+}
+
+[draggable='true'] {
+	cursor: grab;
 }
 
-[draggable="true"] {
-  cursor: grab;
+.notices-banner {
+	width: 100%;
+	background: lighten($body-bg, 5);
 }