made the layout more responsive

.gitignore

@@ -23,3 +23,5 @@ go.work.sum
 
 # env file
 .env
+.VSCodeCounter
+.vscode

app/main.go

@@ -17,24 +17,24 @@ func main() {
 		panic(err)
 	}
 
-	division, err := scraper.ScrapeDivision(1)
+	division, err := scraper.ScrapeDivision(4)
 	if err != nil {
 		panic(err)
 	}
 
 	fmt.Println(division.Schedule.String())
 
-	teacher, err := scraper.ScrapeTeacher(1)
-	if err != nil {
-		panic(err)
-	}
+	// teacher, err := scraper.ScrapeTeacher(1)
+	// if err != nil {
+	// 	panic(err)
+	// }
 
-	fmt.Println(teacher)
+	// fmt.Println(teacher)
 
-	room, err := scraper.ScrapeRoom(1)
-	if err != nil {
-		panic(err)
-	}
+	// room, err := scraper.ScrapeRoom(1)
+	// if err != nil {
+	// 	panic(err)
+	// }
 
-	fmt.Println(room)
+	// fmt.Println(room)
 }

web/optivum-better-schedule-frontend/src/App.vue

@@ -1,9 +1,7 @@
 <!-- App.vue -->
 <template>
   <v-app>
-    <v-main>
-      <Overlay />
-    </v-main>
+    <Overlay />
   </v-app>
 </template>
 

web/optivum-better-schedule-frontend/src/components/Overlay.vue

@@ -1,40 +1,36 @@
 <!-- Overlay.vue -->
 <template>
-  <v-layout class="fill-height">
-    <v-navigation-drawer v-model="drawer" class="elevation-8">
+  <v-navigation-drawer v-model="drawer" class="elevation-8">
+    <template #prepend>
       <v-slide-x-transition appear>
-        <v-list nav>
+        <v-list nav density="default">
           <v-list-item v-for="item in items" :key="item.title" :to="item.route" nav link
             :prepend-icon="item.prependIcon" :title="item.title" class="ma-1">
           </v-list-item>
         </v-list>
       </v-slide-x-transition>
+    </template>
 
-      <template #append>
-        <v-slide-y-reverse-transition appear>
-          <v-list nav>
-            <v-list-item class="ma-1" nav link prepend-icon="mdi-cog-outline" title="Settings"
-              :to="'/settings'" />
-          </v-list>
-        </v-slide-y-reverse-transition>
-      </template>
-    </v-navigation-drawer>
-
-    <v-app-bar>
-      <v-app-bar-nav-icon v-if="$vuetify.display.mdAndDown" @click="drawer = !drawer" />
-      <v-slide-y-transition appear>
-        <v-app-bar-title>Optivum Schedule Better Frontend</v-app-bar-title>
-      </v-slide-y-transition>
-    </v-app-bar>
-
-    <v-main>
-      <div class="fill-height pa-4">
-        <v-scroll-y-transition appear>
-          <router-view class="fill-height pa-8" />
-        </v-scroll-y-transition>
-      </div>
-    </v-main>
-  </v-layout>
+    <template #append>
+      <v-slide-y-reverse-transition appear>
+        <v-list nav density="default">
+          <v-list-item class="ma-1" nav link prepend-icon="mdi-cog-outline" title="Settings" :to="'/settings'" />
+        </v-list>
+      </v-slide-y-reverse-transition>
+    </template>
+  </v-navigation-drawer>
+
+  <v-card class="menu-card rounded-pill" elevation="8">
+    <v-btn icon="mdi-menu" @click=" drawer=!drawer" />
+  </v-card>
+
+  <v-main>
+    <div class="fill-height">
+      <v-scroll-y-transition appear>
+        <router-view class="fill-height fill-width" />
+      </v-scroll-y-transition>
+    </div>
+  </v-main>
 </template>
 
 <script setup lang="ts">
@@ -49,4 +45,38 @@ const items = ref([
     route: '/',
   },
 ])
-</script>
+</script>
+
+<style scoped>
+.no-scroll {
+  overflow: hidden;
+}
+
+.grid-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+  justify-items: center;
+  max-height: 100%;
+  overflow: hidden;
+}
+
+.menu-card {
+  width: 32px;
+  aspect-ratio: 1 / 1;
+  display: inline-flex;
+  padding: 32px;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+}
+
+.v-btn {
+  margin: 0;
+  padding: 0;
+}
+
+.v-btn>.v-icon {
+  font-size: 24px;
+}
+</style>

web/optivum-better-schedule-frontend/src/components/Weather.vue

@@ -1,105 +1,84 @@
+<!-- Weather.vue -->
 <template>
-	<div class="weather-terminal">
-		<h2>Weather Report: {{ city }}</h2>
-		<pre v-if="weatherData">{{ formattedWeather }}</pre>
-		<p v-else>Loading weather data...</p>
-		<p v-if="error" class="error">{{ error }}</p>
-	</div>
+	<v-row class="d-flex justify-center align-center flex-nowrap" no-gutters>
+		<v-card class="weather-card" flat>
+			<v-card-title>
+				<span class="location-info">Nowy Sącz</span>
+			</v-card-title>
+			<v-card-subtitle class="d-flex flex-column align-start">
+				<div class="weather-info d-flex align-center mb-4">
+					<v-icon class="condition-icon">mdi-weather-lightning-rainy</v-icon>
+					<span class="temperature">35°</span>
+				</div>
+				<div class="d-flex flex-column">
+					<span>Thundershower</span>
+					<span class="text-muted">Lightly Polluted</span>
+				</div>
+			</v-card-subtitle>
+			<v-divider></v-divider>
+			<v-card-text>
+				<v-row justify="space-around" class="forecast mt-4">
+					<v-col v-for="day in forecast" :key="day.name" class="text-center muted-text">
+						<div class="forecast-day">{{ day.name }}</div>
+						<v-icon class="forecast-icon">{{ day.icon }}</v-icon>
+						<div class="forecast-temp">{{ day.temp }}</div>
+					</v-col>
+				</v-row>
+			</v-card-text>
+		</v-card>
+	</v-row>
 </template>
 
-<script lang="ts" setup>
-import { ref, onMounted, computed } from 'vue';
-import axios from 'axios';
+<script setup lang="ts">
+import { ref } from 'vue';
 
-// Define the structure of the weather data received from the API
-interface WeatherResponse {
-	current: string;
-	forecast: ForecastResponse;
-}
+const forecast = ref([
+	{ name: 'Tues', icon: 'mdi-weather-rainy', temp: '-2°/-10°' },
+	{ name: 'Wed', icon: 'mdi-weather-cloudy', temp: '-2°/-10°' },
+	{ name: 'Thur', icon: 'mdi-weather-cloudy', temp: '-2°/-10°' },
+]);
+</script>
 
-interface ForecastResponse {
-	weather: WeatherDetails[];
+<style scoped>
+.location-info {
+	font-size: 3vw;
 }
 
-interface WeatherDetails {
-	hourly: HourlyForecast[];
+.weather-card {
+	width: 100%;
+	height: 100%;
+	padding: 2vw;
+	background-color: transparent;
 }
 
-interface HourlyForecast {
-	time: string;
-	weatherDesc: { value: string }[];
-	temp_C: string;
-	windSpeedKmph: string;
-	precipMM: string;
+.weather-info {
+	display: flex;
+	justify-content: center;
+	align-items: center;
 }
 
-// Props declaration
-const props = defineProps<{
-	city: string;
-}>();
-
-// Reactive state
-const weatherData = ref<WeatherResponse | null>(null);
-const error = ref<string | null>(null);
-
-// Fetch detailed weather data from the API
-const fetchWeather = async () => {
-	try {
-		// Fetch the current weather data
-		const response = await axios.get(`https://wttr.in/${props.city}?format=%C+%t%n%w%u+%p+%P`);
-
-		// Fetch the 3-day weather forecast data
-		const forecastResponse = await axios.get(`https://wttr.in/${props.city}?format=j1`);
-
-		weatherData.value = {
-			current: response.data,
-			forecast: forecastResponse.data,
-		};
-	} catch (err) {
-		error.value = 'Error fetching weather data';
-	}
-};
-
-// Function to format the weather data for terminal-like output
-const formattedWeather = computed(() => {
-	if (!weatherData.value) return '';
-
-	const { current, forecast } = weatherData.value;
-	const currentWeather = `Weather: ${current}`;
-
-	// Format forecast data
-	const forecastData = forecast.weather[0].hourly.map((hour: HourlyForecast) => {
-		const time = new Date(hour.time).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-		return `│ ${time} | ${hour.weatherDesc[0].value} ${hour.temp_C} °C | Wind: ${hour.windSpeedKmph} km/h | Rain: ${hour.precipMM} mm`;
-	}).join('\n');
+.condition-icon {
+	font-size: 2vw;
+	margin-right: 0.5vw;
+}
 
-	return `
-${currentWeather}
-┌──────────────────────────────┐
-│ Hourly Forecast              │
-└──────────────────────────────┘
-${forecastData}
-Follow @igor_chubin wttr.in pyphoon wego
-  `;
-});
+.temperature {
+	font-size: 2vw;
+	font-weight: bold;
+}
 
-// Lifecycle hook to fetch weather data on mount
-onMounted(() => {
-	fetchWeather();
-});
-</script>
+.forecast-day,
+.forecast-temp {
+	font-size: 1.2vw;
+	color: rgba(100, 100, 100, 0.8);
+}
 
-<style scoped>
-.weather-terminal {
-	background-color: black;
-	color: white;
-	padding: 1rem;
-	border-radius: 5px;
-	font-family: monospace;
-	white-space: pre;
+.forecast-icon {
+	font-size: 2vw;
+	color: rgba(100, 100, 100, 0.8);
 }
 
-.error {
-	color: red;
+.muted-text {
+	color: rgba(100, 100, 100, 0.8);
 }
-</style>
+</style>

web/optivum-better-schedule-frontend/src/components/clock/Clock.vue

@@ -1,8 +1,8 @@
 <!-- Clock.vue -->
 <template>
 	<v-row class="d-flex justify-center align-center flex-nowrap" no-gutters>
-		<v-card class="clock-card d-flex flex-nowrap elevation-8 rounded-pill">
-			<v-col v-for="(unit, index) in timeUnits" :key="index" class="d-flex align-center" cols="auto">
+		<v-card class="clock-card pa-6 d-flex flex-nowrap" flat>
+			<v-col v-for="(unit, index) in timeUnits" :key="index" class="d-flex align-center pa-0" cols="auto">
 				<div class="digit-group">
 					<DigitalClockDigit v-for="(digit, digitIndex) in unit.digits" :key="digitIndex" :value="digit" />
 					<span v-if="index < timeUnits.length - 1" class="colon">:</span>
@@ -69,26 +69,19 @@ const timeUnits = computed(() => [
 	display: flex;
 	justify-content: center;
 	align-items: center;
-	padding: 2rem;
+	background: transparent;
 }
 
 .digit-group {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	/* Center the digits */
-	overflow: visible;
-}
-
-.v-row {
-	flex-grow: 1;
-	/* Allow row to expand */
+	overflow: hidden;
 }
 
 .colon {
 	font-size: 12vw;
 	font-weight: bold;
 	user-select: none;
-	line-height: 1;
 }
 </style>

web/optivum-better-schedule-frontend/src/components/clock/Digit.vue

@@ -63,14 +63,14 @@ const { value } = defineProps({
 }
 
 .flip-enter-from {
-	transform: translateY(-120%);
+	transform: translateY(-140%);
 }
 
 .flip-enter-to {
 	transform: translateY(10%);
 }
 
 .flip-leave-to {
-	transform: translateY(120%);
+	transform: translateY(140%);
 }
 </style>