For smaller screen

HeHang0 · Nov 8, 2023 · 92f38a7 · 92f38a7
1 parent 23fce74
commit 92f38a7
Show file tree

Hide file tree

Showing 22 changed files with 490 additions and 133 deletions.
diff --git a/.github/workflows/web.yml b/.github/workflows/web.yml
@@ -35,7 +35,7 @@ jobs:
           cd web
           yarn
           yarn build:zip
-          echo '<html><head><script>if(!localStorage.getItem("musiche-proxy-address"))localStorage.setItem("musiche-proxy-address","https://proxy.picapico.top/proxy");localStorage.setItem("musiche-router-prefix","musiche");let pathname=location.pathname.substring(9);let redirect=pathname?`${(location.search?"&":"?")}redirect=${pathname}`:"";location.href="/musiche"+location.search+redirect;</script></head></html>' > dist/404.html
+          echo '<html><head><script>if(!localStorage.getItem("musiche-proxy-address"))localStorage.setItem("musiche-proxy-address","https://music.picapico.top/proxy");localStorage.setItem("musiche-router-prefix","musiche");let pathname=location.pathname.substring(9);let redirect=pathname?`${(location.search?"&":"?")}redirect=${pathname}`:"";location.href="/musiche"+location.search+redirect;</script></head></html>' > dist/404.html
           cd ..\windows
           echo "<Weavers><Costura/></Weavers>" > FodyWeavers.xml
           mv ..\web\web.zip Resources\web.zip

diff --git a/web/src/App.vue b/web/src/App.vue
@@ -55,16 +55,16 @@ new MusicConnection(webView2Services.enabled);
         </el-main>
       </el-container>
     </el-container>
-    <Footer />
+    <Footer v-show="play.musicList.length > 0" />
     <PlayDetail />
     <WindowHelper v-if="webView2Services.enabled" />
   </el-container>
 </template>
 
 <style lang="less" scoped>
 .music-layout {
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
   overflow: hidden;
   .el-main {
     padding: 0;
@@ -75,14 +75,14 @@ new MusicConnection(webView2Services.enabled);
   }
   &-top {
     overflow: hidden;
-    height: calc(100vh - 80px);
+    flex: unset;
+    height: calc(100% - 80px);
     &-full {
-      height: 100vh;
+      height: 100%;
     }
   }
-  &-top,
-  .music-footer {
-    width: 100vw;
+  &-top {
+    width: 100%;
   }
 }
 .music-main {

diff --git a/web/src/components/CurrentList.vue b/web/src/components/CurrentList.vue
@@ -89,9 +89,12 @@ function clear() {
 <style lang="less">
 .music-current-list {
   width: 400px !important;
+  max-width: 100% !important;
   height: calc(100% - 192px) !important;
+  min-height: 80% !important;
   border-radius: var(--music-border-radius);
-  margin-top: 95px;
+  top: 50% !important;
+  transform: translateY(-50%);
   .el-drawer__body {
     padding: 0;
   }

diff --git a/web/src/components/Footer.vue b/web/src/components/Footer.vue
@@ -12,7 +12,6 @@ const play = usePlayStore();
 </script>
 <template>
   <el-footer
-    v-show="play.musicList.length > 0"
     class="music-footer"
     :class="props.full ? ' music-footer-full' : ''">
     <div class="music-footer-layout">
@@ -27,7 +26,7 @@ const play = usePlayStore();
         <span class="music-icon" v-else @click="play.addMyLove([play.music])">
           恨
         </span>
-        <span class="music-footer-second-text" style="margin-left: 20px">
+        <span class="music-footer-second-text">
           {{ play.playStatus.currentTime }}
           &nbsp;/&nbsp;
           {{ play.playStatus.totalTime || play.music.duration }}
@@ -178,8 +177,11 @@ const play = usePlayStore();
   opacity: 0.8;
 }
 .music-footer {
+  position: fixed;
+  bottom: 0;
   background-color: var(--music-footer-background);
   height: 80px;
+  width: 100vw;
   border-top: 1px solid var(--music-side-divider-color);
   padding: 0;
   &-play {
@@ -221,6 +223,11 @@ const play = usePlayStore();
     height: 100%;
     min-width: 880px;
     padding: var(--el-footer-padding);
+    &-left {
+      .music-footer-second-text {
+        margin-left: 20px;
+      }
+    }
     &-left,
     &-right {
       width: 300px;
@@ -345,4 +352,39 @@ const play = usePlayStore();
     display: none !important;
   }
 }
+@media (max-width: 720px), (max-height: 720px) {
+  .music-footer {
+    &-title {
+      display: none;
+    }
+    &-layout {
+      min-width: 100%;
+      &-left {
+        width: 60px;
+      }
+      &-right {
+        width: unset;
+        .el-slider {
+          display: none;
+        }
+      }
+      &-center {
+        &-progress {
+          padding: 0;
+        }
+        &-operate {
+          span + span {
+            margin-left: 10px;
+          }
+        }
+      }
+    }
+    &-layout-left {
+      .music-footer-second-text {
+        margin-left: 5px;
+        text-align: center;
+      }
+    }
+  }
+}
 </style>
diff --git a/web/src/components/Header.vue b/web/src/components/Header.vue
@@ -41,36 +41,34 @@ onUnmounted(unWatch);
 </script>
 <template>
   <el-header class="music-header">
-    <el-scrollbar :class="webView2Services.enabled ? 'wide-scrollbar' : ''">
-      <div class="music-header-content">
-        <el-button
-          v-show="canBack"
-          class="music-header-back music-button-pure music-icon"
-          @click="back">
-          <span style="opacity: 0.8">左</span>
-        </el-button>
-        <el-input
-          class="music-header-search"
-          v-model="searchKey"
-          placeholder="搜索音乐、歌手、歌词、链接"
-          @keyup.enter.native="startSearch"
-          clearable>
-          <template #prefix>
-            <el-icon
-              class="el-input__icon music-header-search-icon"
-              @click="startSearch">
-              <Search />
-            </el-icon>
-          </template>
-        </el-input>
-        <MusicTypeEle
-          v-show="setting.currentMusicTypeShow"
-          :value="setting.currentMusicType"
-          size="large"
-          @change="changeMusicType"
-          style="margin-right: 12px" />
-      </div>
-    </el-scrollbar>
+    <div class="music-header-content">
+      <el-button
+        v-if="canBack"
+        class="music-header-back music-button-pure music-icon"
+        @click="back">
+        <span style="opacity: 0.8">左</span>
+      </el-button>
+      <el-input
+        class="music-header-search"
+        v-model="searchKey"
+        placeholder="搜索音乐、歌手、歌词、链接"
+        @keyup.enter.native="startSearch"
+        clearable>
+        <template #prefix>
+          <el-icon
+            class="el-input__icon music-header-search-icon"
+            @click="startSearch">
+            <Search />
+          </el-icon>
+        </template>
+      </el-input>
+      <MusicTypeEle
+        v-show="setting.currentMusicTypeShow"
+        :value="setting.currentMusicType"
+        size="large"
+        @change="changeMusicType"
+        style="margin-right: 12px" />
+    </div>
     <div class="music-header-operate">
       <span class="music-icon" @click="push('/setting')" title="设置">
         设
@@ -141,4 +139,34 @@ onUnmounted(unWatch);
     }
   }
 }
+
+@media (max-width: 720px), (max-height: 720px) {
+  .music-header {
+    min-width: unset;
+    padding-left: 10px;
+    padding-right: 10px;
+    &-content {
+      min-width: unset;
+      flex-wrap: wrap;
+    }
+    &-search {
+      width: calc(100% - 13px);
+    }
+    button + &-search {
+      width: calc(100% - 50px);
+    }
+    .el-radio-group {
+      width: 100%;
+      margin-right: 0;
+      margin-left: 0;
+      :deep(.el-radio-button) {
+        flex: 1;
+      }
+      :deep(.el-radio-button__inner) {
+        width: 100%;
+        padding: 2px 10px !important;
+      }
+    }
+  }
+}
 </style>
diff --git a/web/src/components/MusicList.vue b/web/src/components/MusicList.vue
@@ -588,4 +588,32 @@ function openMenu(music: Music, e: any) {
     }
   }
 }
+@media (max-width: 720px), (max-height: 720px) {
+  .music-list {
+    &-header {
+      &-title {
+        flex: 1;
+      }
+      &-lover {
+        width: 30px !important;
+      }
+      &-album,
+      &-duration {
+        display: none !important;
+      }
+    }
+    &-item {
+      &-title {
+        flex: 1;
+      }
+      &-lover {
+        width: 30px !important;
+      }
+      &-album,
+      &-duration {
+        display: none !important;
+      }
+    }
+  }
+}
 </style>
diff --git a/web/src/components/PlayDetail.vue b/web/src/components/PlayDetail.vue
@@ -28,11 +28,29 @@ function setThemeColor() {
       )};--music-slider-color-end: ${color}`;
     });
 }
+const canFullScreen = Boolean(
+  document.body.requestFullscreen ||
+    (document.body as any).mozRequestFullScreen ||
+    (document.body as any).webkitRequestFullScreen ||
+    (document.body as any).msRequestFullscreen
+);
+const cancelFullScreen =
+  document.exitFullscreen ||
+  (document as any).mozCancelFullScreen ||
+  (document as any).webkitExitFullscreen ||
+  (document as any).msExitFullscreen;
 function requestFullscreen() {
   if (document.fullscreenElement) {
-    document.exitFullscreen();
+    cancelFullScreen && cancelFullScreen.call(null);
   } else {
-    pageElement.value?.requestFullscreen();
+    if (!pageElement.value) return;
+
+    const requestFullscreen =
+      pageElement.value.requestFullscreen ||
+      (pageElement.value as any).mozRequestFullScreen ||
+      (pageElement.value as any).webkitRequestFullScreen ||
+      (pageElement.value as any).msRequestFullscreen;
+    requestFullscreen && requestFullscreen.call(null);
   }
 }
 function checkFullscreen() {
@@ -96,6 +114,7 @@ beforeResolve(() => {
             >下</el-button
           >
           <el-button
+            v-if="canFullScreen"
             class="music-button-pure music-icon"
             style="transform: rotateY(180deg)"
             @click="requestFullscreen">
@@ -136,8 +155,8 @@ beforeResolve(() => {
 .music-play-detail-layout {
   position: relative;
   overflow: hidden;
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   --music-slider-color-start: rgba(92, 213, 229, 0);
@@ -180,8 +199,8 @@ beforeResolve(() => {
   }
   &-body {
     z-index: 1;
-    height: calc(100vh - 160px);
-    width: 100vw;
+    height: calc(100% - 160px);
+    width: 100%;
     position: relative;
   }
   &-footer {
@@ -197,8 +216,8 @@ beforeResolve(() => {
 </style>
 <style lang="less">
 .music-play-detail {
-  width: 100vw !important;
-  height: 100vh !important;
+  width: 100% !important;
+  height: 100% !important;
   background-color: black;
   box-shadow: none;
   .el-drawer__body {

diff --git a/web/src/components/Playlist.vue b/web/src/components/Playlist.vue
@@ -85,4 +85,26 @@ const props = withDefaults(defineProps<Props>(), {
     }
   }
 }
+@media (max-width: 720px), (max-height: 720px) {
+  .music-play-list {
+    grid-column-gap: 4px;
+    grid-row-gap: 2px;
+    grid-template-columns: repeat(auto-fill, minmax(40%, 1fr));
+    a {
+      padding: 0;
+    }
+    &-item {
+      width: unset;
+      height: unset;
+      &-name {
+        width: 100%;
+      }
+      &-image {
+        width: 100%;
+        height: 100%;
+        border-radius: var(--music-border-radius);
+      }
+    }
+  }
+}
 </style>