feat: fullscreen mode

src/App.vue

@@ -6,7 +6,7 @@
     </transition>
 
     <!-- Content -->
-    <Navbar />
+    <Navbar v-if="!globalStore.fullscreenMode" />
     <MainContainer />
   </div>
 </template>

src/components/App/MainContainer.vue

@@ -1,15 +1,22 @@
 <template>
   <main
-    class="grid print:block print:bg-white p-3 mx-auto max-w-[800px] h-[calc(100vh-40px)] min-h-[300px] grid-rows-[auto_auto_1fr] gap-1"
+    class="grid print:block print:bg-white p-3 mx-auto max-w-[800px] min-h-[300px] gap-1 relative"
+    :class="{
+      'grid-rows-[auto_auto_1fr] h-[calc(100vh-40px)]': !globalStore.fullscreenMode,
+      'grid-rows-[1fr] h-screen': globalStore.fullscreenMode
+    }"
   >
-    <SearchContainer />
+    <SearchContainer v-if="!globalStore.fullscreenMode" />
-    <TimetableWarnings />
+    <TimetableWarnings v-if="!globalStore.fullscreenMode" />
     <TimetableContainer />
   </main>
 </template>
 
 <script setup lang="ts">
+import { useGlobalStore } from '../../stores/global.store';
 import TimetableContainer from '../Timetable/TimetableContainer.vue';
 import TimetableWarnings from '../Timetable/TimetableWarnings.vue';
 import SearchContainer from '../TimetableSearch/SearchContainer.vue';
+
+const globalStore = useGlobalStore();
 </script>

src/components/App/Navbar.vue

@@ -8,7 +8,10 @@
     </div>
 
     <div>
-      <button class="bg-slate-600 p-1 px-2 rounded-md hover:bg-slate-500 flex items-center" @click="changeLang()">
+      <button
+        class="bg-slate-600 p-1 px-2 rounded-md hover:bg-slate-500 flex items-center"
+        @click="changeLang()"
+      >
         <GlobeIcon :size="18" class="mr-2" /> {{ i18n.locale.value == 'pl' ? 'POL' : 'ENG' }}
       </button>
     </div>

src/components/Timetable/TimetableContainer.vue

@@ -2,6 +2,15 @@
   <!-- Timetable render based on current view mode -->
   <CurrentTimetableView v-if="globalStore.currentTimetableData != null" />
 
+  <!-- Button closing fullscreen mode, relative to MainContainer -->
+  <button
+    v-if="globalStore.fullscreenMode"
+    class="absolute right-6 top-3 p-1  rounded-md bg-green-600 hover:bg-green-500 print:hidden"
+    @click="() => (globalStore.fullscreenMode = false)"
+  >
+    <Minimize2Icon :size="22" />
+  </button>
+
   <!-- If there is no timetable chosen -->
   <div class="overflow-auto text-center font-bold text-zinc-400 p-1 min-h-full" v-else>
     <component :is="viewModes[globalStore.viewMode]" />
@@ -14,6 +23,7 @@ import LocalStorageView from '../TimetableViews/LocalStorageView.vue';
 import JournalStorageView from '../TimetableViews/JournalStorageView.vue';
 import ActiveDataView from '../TimetableViews/ActiveDataView.vue';
 import CurrentTimetableView from '../TimetableViews/CurrentTimetableView.vue';
+import { Minimize2Icon } from 'lucide-vue-next';
 
 const globalStore = useGlobalStore();
 

src/components/TimetableSearch/SearchModeActions.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-between gap-2">
+  <div class="flex justify-between gap-2" v-if="!globalStore.fullscreenMode">
     <div class="flex gap-2">
       <button
         :class="`p-1 rounded-md ${
@@ -36,11 +36,19 @@
     </div>
 
     <div class="flex gap-2">
-      <button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700 self-end" @click="toggleDarkMode">
+      <button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700" @click="toggleDarkMode">
         <MoonIcon v-if="globalStore.darkMode" />
         <SunIcon v-else />
       </button>
 
+      <button
+        class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700 disabled:opacity-60 disabled:hover:bg-zinc-800"
+        @click="toggleFullscreenMode()"
+        :disabled="globalStore.currentTimetableData == null"
+      >
+        <FullscreenIcon :size="24" />
+      </button>
+
       <button
         class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700 disabled:opacity-60 disabled:hover:bg-zinc-800"
         :disabled="globalStore.currentTimetableData == null"
@@ -62,6 +70,12 @@
       </button>
     </div>
   </div>
+
+  <div class="flex justify-end" v-else>
+    <button class="bg-zinc-800 p-1 rounded-md hover:bg-zinc-700 self-end" @click="toggleDarkMode">
+      <FullscreenIcon />
+    </button>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -71,6 +85,7 @@ import type { ViewMode, TimetableData } from '../../types/common.types';
 import {
   ArchiveIcon,
   FolderDownIcon,
+  FullscreenIcon,
   HistoryIcon,
   MoonIcon,
   PrinterIcon,
@@ -153,4 +168,8 @@ function openPrintingWindow() {
 
   window.print();
 }
+
+function toggleFullscreenMode() {
+  globalStore.fullscreenMode = !globalStore.fullscreenMode;
+}
 </script>

src/components/TimetableViews/CurrentTimetableView.vue

@@ -1,13 +1,22 @@
 <template>
   <div
-    class="overflow-auto p-1 bg-white print:bg-white dark:bg-zinc-950 print:text-black text-black dark:text-white min-h-full"
+    class="overflow-auto p-1 bg-white print:bg-white dark:bg-zinc-950 print:text-black text-black dark:text-white min-h-full relative"
     :class="{ dark: globalStore.darkMode }"
   >
+    <!-- <button
+      v-if="globalStore.fullscreenMode"
+      class="fixed right-0 top-0 bg-green-600 p-1 m-1 rounded-md hover:bg-green-500 print:hidden"
+      @click="() => (globalStore.fullscreenMode = false)"
+    >
+      <Minimize2Icon :size="22" />
+    </button> -->
+
     <TimetableContent />
   </div>
 </template>
 
 <script setup lang="ts">
+import { Minimize2Icon } from 'lucide-vue-next';
 import { useGlobalStore } from '../../stores/global.store';
 import TimetableContent from '../Timetable/TimetableContent.vue';
 

src/stores/global.store.ts

@@ -11,6 +11,7 @@ import { getHeadUnits } from '../utils/trainUtils';
 export const useGlobalStore = defineStore('global', {
   state: () => ({
     darkMode: false,
+    fullscreenMode: false,
     viewMode: 'active' as ViewMode,
 
     selectedTrainId: null as string | null,