fixed that black bar in the background of divisions grid

smeggmann99 · Oct 30, 2024 · 5d94ffe · 5d94ffe
1 parent 7afc6f4
commit 5d94ffe
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git a/web/optivum-better-schedule-frontend/src/components/DivisionButton.vue b/web/optivum-better-schedule-frontend/src/components/DivisionButton.vue
@@ -74,7 +74,7 @@ onUnmounted(() => {
 	z-index: 1;
 	width: 100%;
 	height: 100%;
-	font-size: 2.5vw;
+	font-size: 2.5rem;
 	font-weight: 400;
 	display: flex;
 	align-items: center;
@@ -84,7 +84,7 @@ onUnmounted(() => {
 
 @media (max-width: 700px) {
 	.square-button {
-		font-size: 5vw;
+		font-size: 2rem;
 	}
 }
 </style>
diff --git a/web/optivum-better-schedule-frontend/src/components/Overlay.vue b/web/optivum-better-schedule-frontend/src/components/Overlay.vue
@@ -41,7 +41,7 @@
 
 
 	<v-main>
-		<div class="fill-height">
+		<div class="background-container fill-height">
 			<router-view class="fill-height fill-width" v-slot="{ Component }">
 				<component :is="Component" />
 			</router-view>
@@ -94,6 +94,10 @@ const items = computed(() => [
 	word-wrap: break-word;
 }
 
+.background-container {
+	background-color: rgb(var(--v-theme-background));
+}
+
 .nav-item :deep(.v-list-item-title) {
 	font-size: 1.25rem;
 }

diff --git a/web/optivum-better-schedule-frontend/src/components/pages/Divisions.vue b/web/optivum-better-schedule-frontend/src/components/pages/Divisions.vue
@@ -58,11 +58,12 @@ const filteredItems = computed(() => {
 })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .main-container {
 	display: flex;
 	flex-direction: column;
 	height: 100vh;
+	background-color: rgb(var(--v-theme-background));
 	overflow: visible;
 }
 
@@ -72,7 +73,7 @@ const filteredItems = computed(() => {
 }
 
 .search-container {
-	width: 50%;
+	width: 30%;
 	height: 64px;
 	margin: 16px auto;
 	display: flex;
@@ -95,37 +96,43 @@ const filteredItems = computed(() => {
 .scrollable-grid {
 	overflow-y: auto;
 	width: auto;
-	background-color: var(--v-background-base);
+	background-color: rgb(var(--v-theme-background));
 	padding: 1rem;
+	margin-bottom: 0;
 }
 
 .divisions-grid {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
 	gap: 2rem;
 	justify-content: center;
-	background-color: var(--v-background-base);
+	background-color: rgb(var(--v-theme-background));
 	padding: 1.5rem;
-	margin: 2rem 2rem 2rem;
+	margin: 2rem 2rem;
 	width: auto;
+	min-height: calc(100vh - 64px);
 }
-
 .grid-item {
 	width: 7rem;
 	height: 7rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	aspect-ratio: 1 / 1;
+	background-color: transparent;
 }
 
 @media (max-width: 1280px) {
 	.search-container {
-		padding: 0.75rem;
+		width: calc(75% - 32px);
+		max-width: 50vw;
+		margin: 16px 16px 0 auto;
+		padding: 0;
+		justify-content: flex-end;
 	}
 
 	.divisions-grid {
-		grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
+		grid-template-columns: repeat(auto-fill, minmax(5rem, 1rem));
 		gap: 2rem;
 		padding: 1rem;
 		margin: 2rem 2rem 2rem;