From d70650689c34ce9f631fda6a453fd521faef22fa Mon Sep 17 00:00:00 2001
From: niubility000 <76441520+niubility000@users.noreply.github.com>
Date: Thu, 7 Mar 2024 18:25:01 +0800
Subject: [PATCH] feat: auto hiding header bar in preview to enlarge the
 preview window (#3024)

---
 frontend/src/css/mobile.css          |  4 ----
 frontend/src/css/styles.css          | 21 ++++++++++++++++++---
 frontend/src/views/files/Preview.vue |  2 +-
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/src/css/mobile.css b/frontend/src/css/mobile.css
index 3779d6e7..8047a5b6 100644
--- a/frontend/src/css/mobile.css
+++ b/frontend/src/css/mobile.css
@@ -2,10 +2,6 @@
   nav {
     width: 10em
   }
-  /* Mobile Only fix div hidden by bottom navigation bar of mobile browser when using height: 100vh */
-  #previewer .preview {
-    height: calc(100% - 4em) !important;
-  }
 }
 
 @media (max-width: 1024px) {
diff --git a/frontend/src/css/styles.css b/frontend/src/css/styles.css
index f38f6b63..bac14c6d 100644
--- a/frontend/src/css/styles.css
+++ b/frontend/src/css/styles.css
@@ -153,7 +153,6 @@ main .spinner .bounce2 {
 
 #previewer {
   background-color: rgba(0, 0, 0, 0.99);
-  padding-top: 4em;
   position: fixed;
   top: 0;
   left: 0;
@@ -166,15 +165,25 @@ main .spinner .bounce2 {
 #previewer header {
   background: none;
   color: #fff;
+  border-bottom: 0px;
+  box-shadow: 0px 0px 0px;
+  z-index: 19999;
 }
 
 #previewer header > .action i {
   color: #fff;
+  text-shadow: 1px 1px 1px #000000;
+}
+
+#previewer header > title {
+  white-space: nowrap; 
+  text-shadow: 1px 1px 1px #000000;
 }
 
 @media (min-width: 738px) {
   #previewer header #dropdown .action i {
     color: #fff;
+  text-shadow: 1px 1px 1px #000000;
   }
 }
 
@@ -188,7 +197,7 @@ main .spinner .bounce2 {
 
 #previewer .preview {
   text-align: center;
-  height: calc(100vh - 4em);
+  height: 100%;
 }
 
 #previewer .preview pre {
@@ -203,6 +212,12 @@ main .spinner .bounce2 {
   margin: 0;
 }
 
+#previewer .preview audio {
+  width: 95%;
+  height: 88%;
+}
+
+
 #previewer .preview video {
   height: 100%;
 }
@@ -247,7 +262,7 @@ main .spinner .bounce2 {
 #previewer > button {
   margin: 0;
   position: fixed;
-  top: calc(50% + 1.85em);
+  top: 50%;
   transform: translateY(-50%);
   background-color: rgba(80, 80, 80, 0.5);
   color: white;
diff --git a/frontend/src/views/files/Preview.vue b/frontend/src/views/files/Preview.vue
index aa85e2eb..c6b0dbe0 100644
--- a/frontend/src/views/files/Preview.vue
+++ b/frontend/src/views/files/Preview.vue
@@ -6,7 +6,7 @@
     @mousemove="toggleNavigation"
     @touchstart="toggleNavigation"
   >
-    <header-bar>
+    <header-bar  v-if="showNav">
       <action icon="close" :label="$t('buttons.close')" @action="close()" />
       <title>{{ name }}</title>
       <action