From 8d543ab94d3678728466d3627e0d419ec00f3010 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Wed, 29 Jan 2020 04:53:35 +0100
Subject: viewer: finalized the thumbnails view layouts. implemented thumbnails
 lazy-loading

---
 viewer/src/views/MainLayout.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 5308205..de6f8af 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -21,7 +21,7 @@
   <div :class="{fullscreen: $uiStore.fullscreen}">
     <panel-top class="layout layout-top" />
     <panel-left class="layout layout-left" />
-    <router-view class="layout layout-content" />
+    <router-view class="layout layout-content scrollbar" />
     <ld-button-fullscreen />
     <b-loading :active="isLoading" is-full-page />
   </div>
@@ -93,6 +93,7 @@ html {
     top: var(--layout-top);
     left: var(--layout-left);
     z-index: 3;
+    overflow-x: hidden;
   }
 }
 .fullscreen {
-- 
cgit v1.2.3


From bb50cd8e6c7643f696a9ae038a207d1c98ef0b14 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Wed, 29 Jan 2020 06:18:46 +0100
Subject: viewer: fixed the body's background color (it was white, and could be
 seen during fullscreen resize animation)

---
 viewer/src/views/MainLayout.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index de6f8af..1528e64 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -70,6 +70,7 @@ body,
 html {
   height: 100%;
   overflow: hidden;
+  background-color: $content-bgcolor;
   --layout-top: #{$layout-top};
   --layout-left: #{$layout-left};
 }
-- 
cgit v1.2.3


From e91065602eeeebef236dae29e67d8e3334ab4029 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Wed, 29 Jan 2020 07:54:03 +0100
Subject: viewer: improved the picture layout. clicking a picture will switch
 between resized-to-screen and original-size (+fullscreen). drag-n-drop
 scrolls/moves the picture, just like a touch device. Resolves #19

---
 viewer/src/views/MainLayout.vue | 1 -
 1 file changed, 1 deletion(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 1528e64..7a75eb1 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -22,7 +22,6 @@
     <panel-top class="layout layout-top" />
     <panel-left class="layout layout-left" />
     <router-view class="layout layout-content scrollbar" />
-    <ld-button-fullscreen />
     <b-loading :active="isLoading" is-full-page />
   </div>
 </template>
-- 
cgit v1.2.3


From 118666b4c3faeaeaf153a2ea7172764a3cbcffab Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Wed, 29 Jan 2020 23:04:30 +0100
Subject: viewer: the loader now correctly waits for the json to be loaded and
 indexes to be processed before displaying the UI. resolves #61

---
 viewer/src/views/MainLayout.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 7a75eb1..f608b9d 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -19,9 +19,9 @@
 
 <template>
   <div :class="{fullscreen: $uiStore.fullscreen}">
-    <panel-top class="layout layout-top" />
-    <panel-left class="layout layout-left" />
-    <router-view class="layout layout-content scrollbar" />
+    <panel-top v-if="!isLoading" class="layout layout-top" />
+    <panel-left v-if="!isLoading" class="layout layout-left" />
+    <router-view v-if="!isLoading" class="layout layout-content scrollbar" />
     <b-loading :active="isLoading" is-full-page />
   </div>
 </template>
@@ -35,7 +35,7 @@ import PanelTop from "./PanelTop.vue";
   components: { PanelLeft, PanelTop },
 })
 export default class MainLayout extends Vue {
-  isLoading: boolean = false;
+  isLoading: boolean = true;
 
   mounted() {
     this.fetchGalleryItems();
-- 
cgit v1.2.3


From 8670fb146e90f98653c776b01f29d905e5a6fe9f Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Wed, 29 Jan 2020 23:11:55 +0100
Subject: viewer: fixed subdirectory deploiement; all paths are now relative to
 index.html. resolves #17

---
 viewer/src/views/MainLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index f608b9d..cedef58 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -44,7 +44,7 @@ export default class MainLayout extends Vue {
   fetchGalleryItems() {
     this.isLoading = true;
     this.$galleryStore
-      .fetchGalleryItems(`${process.env.VUE_APP_DATA_URL}/index.json`)
+      .fetchGalleryItems(`${process.env.VUE_APP_DATA_URL}index.json`)
       .finally(() => (this.isLoading = false))
       .catch(this.displayError);
   }
-- 
cgit v1.2.3


From 234d0d13c767786393494810526a77d3d89b0e83 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 30 Jan 2020 17:01:56 +0100
Subject: viewer: global keypress componant. ESC gets out of fullscreen.

---
 viewer/src/views/MainLayout.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index cedef58..f0809b6 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -23,6 +23,7 @@
     <panel-left v-if="!isLoading" class="layout layout-left" />
     <router-view v-if="!isLoading" class="layout layout-content scrollbar" />
     <b-loading :active="isLoading" is-full-page />
+    <ld-key-press :keycode="27" @action="$uiStore.fullscreen=false" />
   </div>
 </template>
 
-- 
cgit v1.2.3


From 252dd6fc6f53ecd8b28e05a0514429472d53d08e Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 31 Jan 2020 06:46:31 +0100
Subject: viewer: finalized the command buttons. added the 'up to parent'
 command

---
 viewer/src/views/MainLayout.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index f0809b6..c202def 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <div :class="{fullscreen: $uiStore.fullscreen}">
+  <div :class="{fullscreen: $uiStore.fullscreen, fullWidth: $uiStore.fullWidth}">
     <panel-top v-if="!isLoading" class="layout layout-top" />
     <panel-left v-if="!isLoading" class="layout layout-left" />
     <router-view v-if="!isLoading" class="layout layout-content scrollbar" />
@@ -98,8 +98,11 @@ html {
   }
 }
 .fullscreen {
-  --layout-left: 0px;
   --layout-top: 0px;
+  @extend .fullWidth;
+}
+.fullWidth {
+  --layout-left: 0px;
   .layout {
     &.layout-left {
       transform: translate(-$layout-left, 0);
-- 
cgit v1.2.3


From 914aa63cb65f869be9b1707c160847be16f79a68 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 31 Jan 2020 06:55:37 +0100
Subject: viewer: unified CSS classes to kebab case

---
 viewer/src/views/MainLayout.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index c202def..78d8a8a 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -18,7 +18,7 @@
 -->
 
 <template>
-  <div :class="{fullscreen: $uiStore.fullscreen, fullWidth: $uiStore.fullWidth}">
+  <div :class="{'fullscreen': $uiStore.fullscreen, 'fullwidth': $uiStore.fullWidth}">
     <panel-top v-if="!isLoading" class="layout layout-top" />
     <panel-left v-if="!isLoading" class="layout layout-left" />
     <router-view v-if="!isLoading" class="layout layout-content scrollbar" />
@@ -99,9 +99,9 @@ html {
 }
 .fullscreen {
   --layout-top: 0px;
-  @extend .fullWidth;
+  @extend .fullwidth;
 }
-.fullWidth {
+.fullwidth {
   --layout-left: 0px;
   .layout {
     &.layout-left {
-- 
cgit v1.2.3


From 95f75d95c12e95fd5c54c2203e031b0a593c7550 Mon Sep 17 00:00:00 2001
From: pacien
Date: Mon, 10 Feb 2020 20:13:50 +0100
Subject: viewer: move temporary mode selector

Out of the sidebar so we can continue polishing the interface without interference.
---
 viewer/src/views/MainLayout.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 78d8a8a..31b0440 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -24,6 +24,10 @@
     <router-view v-if="!isLoading" class="layout layout-content scrollbar" />
     <b-loading :active="isLoading" is-full-page />
     <ld-key-press :keycode="27" @action="$uiStore.fullscreen=false" />
+
+    <!-- TODO: Remove when #21 (remove explicit navigation/search modes) is resolved -->
+    <ld-mode-radio v-if="!isLoading" class="tmp-mode-selector" />
+    <!-- ===== -->
   </div>
 </template>
 
@@ -123,4 +127,15 @@ html {
     background-color: $content-bgcolor;
   }
 }
-</style>
\ No newline at end of file
+
+// TODO: Remove when #21 (remove explicit navigation/search modes) is resolved
+// Forced at the bottom right corner so we can continue working on the sidebar without interference
+.tmp-mode-selector {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 100;
+  opacity: 0.75;
+}
+// =====
+</style>
-- 
cgit v1.2.3


From e61a7c84f1a1753186980ff1990ee146395ddfc1 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Tue, 11 Feb 2020 03:30:08 +0100
Subject: viewer: store and restore the scroll position through navigation

GitHub: closes #58
---
 viewer/src/views/MainLayout.vue | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 31b0440..12388a9 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -21,7 +21,7 @@
   <div :class="{'fullscreen': $uiStore.fullscreen, 'fullwidth': $uiStore.fullWidth}">
     <panel-top v-if="!isLoading" class="layout layout-top" />
     <panel-left v-if="!isLoading" class="layout layout-left" />
-    <router-view v-if="!isLoading" class="layout layout-content scrollbar" />
+    <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" />
     <b-loading :active="isLoading" is-full-page />
     <ld-key-press :keycode="27" @action="$uiStore.fullscreen=false" />
 
@@ -32,20 +32,31 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
+import { Component, Vue, Ref, Watch } from "vue-property-decorator";
 import PanelLeft from "./PanelLeft.vue";
 import PanelTop from "./PanelTop.vue";
+import { Route } from "vue-router";
 
 @Component({
   components: { PanelLeft, PanelTop },
 })
 export default class MainLayout extends Vue {
+  @Ref() readonly content!: Vue;
+
   isLoading: boolean = true;
+  scrollPositions: ScrollPosition = {};
 
   mounted() {
     this.fetchGalleryItems();
   }
 
+  @Watch("$route")
+  routeChanged(newRoute: Route, oldRoute: Route) {
+    const el = this.content.$el;
+    this.scrollPositions[oldRoute.path] = el.scrollTop;
+    this.$nextTick(() => (el.scrollTop = this.scrollPositions[newRoute.path]));
+  }
+
   fetchGalleryItems() {
     this.isLoading = true;
     this.$galleryStore
-- 
cgit v1.2.3


From 19d40a5ee98fb1f244612155acc559ff2f21bf6b Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Wed, 12 Feb 2020 00:09:34 +0100
Subject: viewer: implemented config.json

Note: The DevServer needs to know when the file is from the App, or from the FileSystem.
We use a tilde to make this separation. The tilde URL is declared in '.env.development'
GitHub: Resolves #32
---
 viewer/src/views/MainLayout.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 12388a9..63a1b83 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -60,7 +60,8 @@ export default class MainLayout extends Vue {
   fetchGalleryItems() {
     this.isLoading = true;
     this.$galleryStore
-      .fetchGalleryItems(`${process.env.VUE_APP_DATA_URL}index.json`)
+      .fetchConfig()
+      .then(this.$galleryStore.fetchGalleryItems)
       .finally(() => (this.isLoading = false))
       .catch(this.displayError);
   }
-- 
cgit v1.2.3


From 370e3db3455f548699ff5e046e0f8dcc304991ac Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 14 Feb 2020 09:19:53 +0100
Subject: viewer: major code and search mode overhaul

Updated libraries to the lastest version
SCSS Formatter as suggested VSC extensions
Renamed toolbar-color by scrollbar-color
LD components use Props in favor of touching the stores directly (when possible)
Moved most common algorithms to a "services" folder
Complete search overhaul (lots of code change)
---
 viewer/src/views/MainLayout.vue | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 63a1b83..272c045 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -24,10 +24,6 @@
     <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" />
     <b-loading :active="isLoading" is-full-page />
     <ld-key-press :keycode="27" @action="$uiStore.fullscreen=false" />
-
-    <!-- TODO: Remove when #21 (remove explicit navigation/search modes) is resolved -->
-    <ld-mode-radio v-if="!isLoading" class="tmp-mode-selector" />
-    <!-- ===== -->
   </div>
 </template>
 
-- 
cgit v1.2.3


From 0905e3c293ceb0f1d769513870c3931530d6331d Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Mon, 24 Feb 2020 23:24:07 +0100
Subject: viewer: disable the back command to prevent exiting the gallery

GitHub: Resolves #91
---
 viewer/src/views/MainLayout.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 272c045..2d74db9 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -43,6 +43,7 @@ export default class MainLayout extends Vue {
   scrollPositions: ScrollPosition = {};
 
   mounted() {
+    history.replaceState({ ldgallery: "ENTRYPOINT" }, "");
     this.fetchGalleryItems();
   }
 
-- 
cgit v1.2.3


From d0063699f031706860689679d4ecf8651b545af1 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Tue, 25 Feb 2020 17:38:07 +0100
Subject: viewer: set page title

GitHub: Resolves #95
---
 viewer/src/views/MainLayout.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 2d74db9..c9ab11a 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -19,6 +19,7 @@
 
 <template>
   <div :class="{'fullscreen': $uiStore.fullscreen, 'fullwidth': $uiStore.fullWidth}">
+    <ld-title :current-item-path="$galleryStore.currentItemPath" />
     <panel-top v-if="!isLoading" class="layout layout-top" />
     <panel-left v-if="!isLoading" class="layout layout-left" />
     <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" />
-- 
cgit v1.2.3


From fd8064319e352a0083c9e282125e658a44e4dabb Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Thu, 27 Feb 2020 22:30:58 +0100
Subject: viewer: set page title

New version, making use of the galleryTitle property, from gallery.yaml
---
 viewer/src/views/MainLayout.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index c9ab11a..6ab7d9a 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -19,7 +19,10 @@
 
 <template>
   <div :class="{'fullscreen': $uiStore.fullscreen, 'fullwidth': $uiStore.fullWidth}">
-    <ld-title :current-item-path="$galleryStore.currentItemPath" />
+    <ld-title
+      :gallery-title="$galleryStore.galleryTitle"
+      :current-item="$galleryStore.currentItem"
+    />
     <panel-top v-if="!isLoading" class="layout layout-top" />
     <panel-left v-if="!isLoading" class="layout layout-left" />
     <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" />
-- 
cgit v1.2.3


From 7f0b8367a2092c5ffd69e9e46d055cbd605c0e3a Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Fri, 28 Feb 2020 18:50:12 +0100
Subject: viewer: more minor architectural and performance improvement

---
 viewer/src/views/MainLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 6ab7d9a..53917da 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -27,7 +27,7 @@
     <panel-left v-if="!isLoading" class="layout layout-left" />
     <router-view v-if="!isLoading" ref="content" class="layout layout-content scrollbar" />
     <b-loading :active="isLoading" is-full-page />
-    <ld-key-press :keycode="27" @action="$uiStore.fullscreen=false" />
+    <ld-key-press :keycode="27" @action="$uiStore.toggleFullscreen(false)" />
   </div>
 </template>
 
-- 
cgit v1.2.3


From 26988eacd2ff6988479b53eb88b5c2c10d3e7c82 Mon Sep 17 00:00:00 2001
From: pacien
Date: Sun, 26 Apr 2020 00:25:24 +0200
Subject: viewer: fix rest of webpack import

---
 viewer/src/views/MainLayout.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 53917da..6e707e6 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -81,7 +81,7 @@ export default class MainLayout extends Vue {
 </script>
 
 <style lang="scss">
-@import "@/assets/scss/theme.scss";
+@import "~@/assets/scss/theme.scss";
 
 body,
 html {
-- 
cgit v1.2.3


From 29d432e64e0482935ef91dbfed37d4d4cf26c42f Mon Sep 17 00:00:00 2001
From: pacien
Date: Sun, 26 Apr 2020 21:51:37 +0200
Subject: viewer/LdZoom: add support for pinch-to-zoom

GitHub: closes #106
---
 viewer/src/views/MainLayout.vue | 1 +
 1 file changed, 1 insertion(+)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index 6e707e6..c09e99a 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -87,6 +87,7 @@ body,
 html {
   height: 100%;
   overflow: hidden;
+  touch-action: none;
   background-color: $content-bgcolor;
   --layout-top: #{$layout-top};
   --layout-left: #{$layout-left};
-- 
cgit v1.2.3


From d41a885e32473935d03eb1b260061c89eef66b1e Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Tue, 28 Apr 2020 03:27:01 +0200
Subject: viewer: fullscreen on double-click is now true fullscreen. Also works
 on web-app

---
 viewer/src/views/MainLayout.vue | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

(limited to 'viewer/src/views/MainLayout.vue')

diff --git a/viewer/src/views/MainLayout.vue b/viewer/src/views/MainLayout.vue
index c09e99a..bcd2249 100644
--- a/viewer/src/views/MainLayout.vue
+++ b/viewer/src/views/MainLayout.vue
@@ -49,6 +49,11 @@ export default class MainLayout extends Vue {
   mounted() {
     history.replaceState({ ldgallery: "ENTRYPOINT" }, "");
     this.fetchGalleryItems();
+    document.body.addEventListener("fullscreenchange", this.onFullscreenChange);
+  }
+
+  destroyed() {
+    document.body.removeEventListener("fullscreenchange", this.onFullscreenChange);
   }
 
   @Watch("$route")
@@ -77,6 +82,16 @@ export default class MainLayout extends Vue {
       onAction: this.fetchGalleryItems,
     });
   }
+
+  @Watch("$uiStore.fullscreen")
+  applyFullscreen(fullscreen: boolean) {
+    if (fullscreen && !document.fullscreen) document.body.requestFullscreen();
+    else if (document.fullscreen) document.exitFullscreen();
+  }
+
+  onFullscreenChange() {
+    this.$uiStore.toggleFullscreen(document.fullscreen);
+  }
 }
 </script>
 
-- 
cgit v1.2.3