added rest of the pages, made room buttons scale better

smeggmann99 · Nov 3, 2024 · bb667b3 · bb667b3
1 parent bf40a5c
commit bb667b3
Show file tree

Hide file tree

Showing 17 changed files with 1,151 additions and 102 deletions.
diff --git a/app/config.json b/app/config.json
@@ -11,9 +11,9 @@
 		},
 		"quantities": {
 			"workers": {
-				"division": 10,
-				"teacher": 10,
-				"room": 10
+				"division": 5,
+				"teacher": 5,
+				"room": 5
 			}
 		}
 	},

diff --git a/web/optivum-better-schedule-frontend/components.d.ts b/web/optivum-better-schedule-frontend/components.d.ts
@@ -11,7 +11,7 @@ declare module 'vue' {
     AppBar: typeof import('./src/components/AppBar.vue')['default']
     ClassesTab: typeof import('./src/components/ClassesTab.vue')['default']
     Clock: typeof import('./src/components/clock/Clock.vue')['default']
-    copy: typeof import('./src/components/ScheduleTable copy.vue')['default']
+    copy: typeof import('./src/components/TeacherButton copy.vue')['default']
     Digit: typeof import('./src/components/clock/Digit.vue')['default']
     Division: typeof import('./src/components/pages/Division.vue')['default']
     DivisionButton: typeof import('./src/components/DivisionButton.vue')['default']
@@ -26,12 +26,18 @@ declare module 'vue' {
     LanguageSwitcher: typeof import('./src/components/LanguageSwitcher.vue')['default']
     Overlay: typeof import('./src/components/Overlay.vue')['default']
     Rays: typeof import('./src/components/Rays.vue')['default']
+    Room: typeof import('./src/components/pages/Room.vue')['default']
+    RoomButton: typeof import('./src/components/RoomButton.vue')['default']
+    Rooms: typeof import('./src/components/pages/Rooms.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     ScheduleTable: typeof import('./src/components/ScheduleTable.vue')['default']
     Settings: typeof import('./src/components/pages/Settings.vue')['default']
     SettingsPage: typeof import('./src/components/pages/SettingsPage.vue')['default']
     TabContent: typeof import('./src/components/TabContent.vue')['default']
+    Teacher: typeof import('./src/components/pages/Teacher.vue')['default']
+    TeacherButton: typeof import('./src/components/TeacherButton.vue')['default']
+    Teachers: typeof import('./src/components/pages/Teachers.vue')['default']
     ThemeSwitcher: typeof import('./src/components/ThemeSwitcher.vue')['default']
     Weather: typeof import('./src/components/Weather.vue')['default']
   }

diff --git a/web/optivum-better-schedule-frontend/package-lock.json b/web/optivum-better-schedule-frontend/package-lock.json
diff --git a/web/optivum-better-schedule-frontend/package.json b/web/optivum-better-schedule-frontend/package.json
@@ -10,6 +10,8 @@
     "@mdi/font": "7.4.47",
     "axios": "^1.7.7",
     "iso-639-1": "^3.1.3",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "pinia": "^2.2.4",
     "roboto-fontface": "*",
     "three": "^0.169.0",
@@ -23,6 +25,7 @@
   },
   "devDependencies": {
     "@babel/types": "^7.24.7",
+    "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.14.10",
     "@types/three": "^0.169.0",
     "@vitejs/plugin-vue": "^5.0.5",

diff --git a/web/optivum-better-schedule-frontend/src/components/DivisionButton.vue b/web/optivum-better-schedule-frontend/src/components/DivisionButton.vue
@@ -1,8 +1,12 @@
+<!-- DivisionButton.vue -->
 <template>
 	<div ref="tilt" class="tilt-wrapper">
-		<v-btn class="square-button" :style="{ backgroundColor: getButtonColor(index) }" :ripple="true" elevation="8"
+		<v-btn class="button" :style="{ backgroundColor: getButtonColor(index) }" :ripple="true" elevation="8"
 			variant="text" rounded="xl" :to="`/division/${props.id}`" nav link>
-			<span class="button-text">{{ props.text }}</span>
+			<div class="button-content">
+				<span class="full-name">{{ props.text }}</span>
+				<span class="designator">{{ props.designator }}</span>
+			</div>
 		</v-btn>
 	</div>
 </template>
@@ -23,17 +27,22 @@ interface VanillaTiltHTMLElement extends HTMLElement {
 	vanillaTilt: VanillaTilt;
 }
 
-const props = defineProps<{ text: string; index: number; id: number }>();
-const tilt = ref<VanillaTiltHTMLElement | null>(null);
+const props = defineProps<{
+	text: string;
+	designator: string;
+	index: number;
+	id: number;
+}>();
 
+const tilt = ref<VanillaTiltHTMLElement | null>(null);
 const enableTilt = ref(window.innerWidth > 700);
 
 watchEffect(() => {
 	if (enableTilt.value && tilt.value) {
 		VanillaTilt.init(tilt.value, {
-			max: 20,
-			speed: 10,
-			scale: 1.25,
+			max: 15,
+			speed: 400,
+			scale: 1.05,
 			glare: false,
 			reverse: false,
 			transition: true,
@@ -43,47 +52,87 @@ watchEffect(() => {
 	}
 });
 
-window.addEventListener('resize', () => {
+const resizeHandler = () => {
 	enableTilt.value = window.innerWidth > 700;
-});
+};
+
+window.addEventListener('resize', resizeHandler);
 
 onUnmounted(() => {
 	if (tilt.value?.vanillaTilt) {
 		tilt.value.vanillaTilt.destroy();
 	}
-	window.removeEventListener('resize', () => {
-		enableTilt.value = window.innerWidth > 700;
-	});
+	window.removeEventListener('resize', resizeHandler);
 });
 </script>
 
-<style scoped lang="scss">
+<style scoped>
 .tilt-wrapper {
 	display: inline-block;
 	width: 100%;
 	height: 100%;
 	user-select: none;
 }
 
-.square-button {
-	z-index: 1;
+.button {
 	width: 100%;
 	height: 100%;
-	font-size: 2.5rem;
-	font-weight: 400;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	user-select: none;
+	text-align: center;
+	overflow: hidden;
+	padding: 1rem;
+	box-sizing: border-box;
 }
 
-.button-text {
-	user-select: none;
+.button-content {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	padding: 0.5rem;
+	box-sizing: border-box;
+}
+
+.full-name {
+	max-width: 90vw;
+	font-size: clamp(0.5rem, 1vw + 0.4rem, 0.8rem);
+	font-weight: 600;
+	text-align: center;
+	white-space: normal;
+	word-wrap: normal;
+	margin-bottom: 0.3rem;
 }
 
-@media (max-width: 1279) {
-	.square-button {
-		font-size: 2rem;
+.designator {
+	font-size: clamp(0.8rem, 1vw + 0.3rem, 1rem);
+	font-weight: 800;
+	text-align: center;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+@media (max-width: 767px) {
+	.button {
+		padding: 0.8rem;
+	}
+
+	.button-content {
+		padding: 0.4rem;
+	}
+
+	.full-name {
+		font-size: 0.9rem;
+		font-weight: 800;
+	}
+
+	.designator {
+		font-size: 0.9rem;
+		font-weight: 600;
 	}
 }
 </style>