From 2ba3238c32d9bed423d8ca63e4bf0cbca49ed8a6 Mon Sep 17 00:00:00 2001
From: Ayaka Neko <neko@ayaka.moe>
Date: Thu, 17 Sep 2020 21:11:01 +0800
Subject: [PATCH] :iphone: Optimize responsive design

Signed-off-by: Ayaka Neko <neko@ayaka.moe>
---
 src/components/Album/AlbumInfo.vue |   2 +-
 src/components/Header.vue          | 137 ++++++++++++++++++++++++++++-
 src/components/Song/AlbumCard.vue  |  20 +++++
 src/components/Song/SingleCard.vue |  18 ++++
 src/pages/About.vue                |  32 +++++++
 src/pages/Landing.vue              |  14 ++-
 src/pages/Music/_id.vue            |  65 +++++++++++++-
 src/pages/Songs/Index.vue          |  24 +++++
 8 files changed, 301 insertions(+), 11 deletions(-)

diff --git a/src/components/Album/AlbumInfo.vue b/src/components/Album/AlbumInfo.vue
index c1827d1b..8b635e8c 100644
--- a/src/components/Album/AlbumInfo.vue
+++ b/src/components/Album/AlbumInfo.vue
@@ -129,7 +129,7 @@ export default {
       .content();
       .word-limit();
       height: 30px;
-      background: #F9C1D7;
+      background-color: #FAE5ED;
       border-radius: 2px;
       display: inline-block;
       color: #E56D9B;
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 4815a04f..8d8cef0c 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -2,7 +2,7 @@
   <div class="header" :class="frosted && 'frosted'">
     <div class="link-container">
       <router-link :to="{ name: 'Landing' }" class="link">
-        <img src="../assets/logo.png" style="height: 3rem">
+        <img src="../assets/logo.png">
       </router-link>
       <router-link :to="{ name: 'Landing' }" class="link text-link">
         ArcLight
@@ -14,8 +14,16 @@
         About
       </router-link>
     </div>
+    <div class="mobile-nav mobile-search-bar">
+      <v-btn icon color="white">
+        <v-icon>mdi-magnify</v-icon>
+      </v-btn>
+    </div>
     <Search class="search-bar"/>
     <v-btn v-if="!isLoggedIn" depressed large color="#E56D9B" class="sign" @click="show = true" :outlined="loginBtnLoading" :loading="loginBtnLoading">Login</v-btn>
+    <v-btn v-if="isLoggedIn" class="mobile-nav mobile-upload" fab dark x-small color="#E56D9B" @click="uploadMusic">
+      <v-icon dark>mdi-upload</v-icon>
+    </v-btn>
     <v-btn
       v-if="isLoggedIn"
       class="upload"
@@ -30,8 +38,24 @@
       </v-avatar>
       Upload Music
     </v-btn>
-    <v-menu v-if="isLoggedIn" offset-y>
+
+    <v-menu v-if="isLoggedIn" offset-y dark class="user-menu">
       <template v-slot:activator="{ on, attrs }">
+        <v-btn
+          class="mobile-nav mobile-user"
+          dark
+          fab
+          x-small
+          color="#FFF"
+          v-bind="attrs"
+          v-on="on"
+        >
+          <miniAvatar
+            :size="30"
+            v-if="userAvatar"
+            :src="userAvatar"
+          />
+        </v-btn>
         <v-btn
           depressed
           class="user"
@@ -63,11 +87,26 @@
         </v-list-item>
       </v-list>
     </v-menu>
+
+    <v-btn
+      v-if="!isLoggedIn"
+      fab
+      dark
+      x-small
+      color="#E56D9B"
+      class="mobile-nav mobile-sign"
+      @click="show = true"
+      :outlined="loginBtnLoading"
+      :loading="loginBtnLoading"
+    >
+      <v-icon dark>mdi-login</v-icon>
+    </v-btn>
+
     <v-dialog
       v-model="show"
       max-width="290"
     >
-      <v-card>
+      <v-card style="width: 50vw">
         <v-card-title class="headline">Upload your key</v-card-title>
         <v-file-input
           v-model="file"
@@ -81,6 +120,7 @@
           color="#E56D9B"
           v-model="writeCookie"
           label="Save Key for this Session for 7 days"
+          style="padding:0 20px;"
         >
         </v-checkbox>
         <v-card-actions>
@@ -148,12 +188,14 @@
 import { mapActions, mapState } from 'vuex'
 
 import Search from './Search.vue'
+import miniAvatar from '@/components/User/MiniAvatar'
 
 import { clearCookie, getCookie, setCookie } from '../util/cookie'
 
 export default {
   components: {
-    Search
+    Search,
+    miniAvatar
   },
   data () {
     return {
@@ -262,6 +304,10 @@ export default {
 
 <style lang="less" scoped>
 
+.mobile-nav {
+  display: none;
+}
+
 .header {
   padding: 20px 0 0;
   display: flex;
@@ -303,6 +349,9 @@ export default {
 .link {
   margin-left: .75rem;
   font-size: 1.2rem;
+  img {
+    height: 3rem;
+  }
 }
 
 .text-link {
@@ -391,4 +440,84 @@ export default {
     }
   }
 }
+
+@media screen and (max-width: 1200px) {
+  .link {
+    font-size: 20px;
+    img {
+      height: 2rem;
+    }
+  }
+  .upload {
+    padding: 0 10px !important;
+    height: 38px !important;
+    font-size: 12px;
+    /deep/ i {
+      font-size: 18px !important;
+    }
+  }
+  .user {
+    padding: 0 10px !important;
+    height: 38px !important;
+    font-size: 12px;
+  }
+  .search-bar {
+    display: none;
+  }
+
+  .mobile-search-bar {
+    display: block;
+    margin-right: 10px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .link {
+    font-size: 16px;
+  }
+  .upload {
+    display: none;
+  }
+  .mobile-upload {
+    display: block;
+    margin-right: 16px;
+  }
+  .user {
+    display: none;
+  }
+  .mobile-user {
+    display: block;
+    margin-right: .75rem;
+  }
+  .sign {
+    display: none;
+  }
+  .mobile-sign {
+    display: block;
+    margin-right: .75rem;
+  }
+}
+
+@media screen and (max-width: 640px) {
+
+}
+
+@media screen and (max-width: 480px) {
+  .link {
+    font-size: 15px;
+    img {
+      height: 1.8rem;
+    }
+  }
+  .link-container {
+    margin-left: 8px;
+    margin-top: 5px;
+  }
+}
+</style>
+
+<style lang="less">
+/deep/ .theme--light .v-list {
+  background-color: #333;
+}
 </style>
diff --git a/src/components/Song/AlbumCard.vue b/src/components/Song/AlbumCard.vue
index e0bd338b..fd39af64 100644
--- a/src/components/Song/AlbumCard.vue
+++ b/src/components/Song/AlbumCard.vue
@@ -160,4 +160,24 @@ a {
     }
   }
 }
+
+@media screen and (max-width: 1200px) {
+  .card-img {
+    height: 128px;
+  }
+}
+@media screen and (max-width: 992px) {
+  .card-img {
+    height: 100px !important;
+    width: 100px !important;
+  }
+  .record {
+    min-width: 100px !important;
+    min-height: 100px !important;
+    height: 100px !important;
+    width: 100px !important;
+    margin-left: -80px !important;
+    margin-top: 0px !important;
+  }
+}
 </style>
diff --git a/src/components/Song/SingleCard.vue b/src/components/Song/SingleCard.vue
index f1392829..4aacdeba 100644
--- a/src/components/Song/SingleCard.vue
+++ b/src/components/Song/SingleCard.vue
@@ -139,4 +139,22 @@ a {
     .word-limit();
   }
 }
+
+@media screen and (max-width: 1200px) {
+  .card-img {
+    height: 128px;
+  }
+}
+@media screen and (max-width: 992px) {
+  .card-img {
+    height: 100px;
+    width: 100px;
+  }
+}
+@media screen and (max-width: 768px) {
+}
+@media screen and (max-width: 640px) {
+}
+@media screen and (max-width: 480px) {
+}
 </style>
diff --git a/src/pages/About.vue b/src/pages/About.vue
index 44e4a424..4c06f445 100644
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -1,6 +1,14 @@
 <template>
   <div>
     <spaceLayout>
+      <div class="about-container">
+        <div class="about-title">
+          Why <span class="pink-text">ArcLight</span> ?
+        </div>
+        <div class="about-subtitle">
+          about Project <span class="pink-text">ArcLight</span>
+        </div>
+      </div>
     </spaceLayout>
   </div>
 </template>
@@ -17,3 +25,27 @@ export default {
   }
 }
 </script>
+
+<style lang="less" scoped>
+.about-container {
+  margin: 80px auto 20px;
+  max-width: 840px;
+  width: 100%;
+  padding: 0 20px;
+  text-align: start;
+}
+
+.about-title {
+  font-size: 32px;
+  color: white;
+}
+
+.about-subtitle {
+  font-size: 20px;
+  color: white;
+}
+
+.pink-text {
+  color: #EA6290;
+}
+</style>
diff --git a/src/pages/Landing.vue b/src/pages/Landing.vue
index 29dd5612..0a43ff7f 100644
--- a/src/pages/Landing.vue
+++ b/src/pages/Landing.vue
@@ -193,14 +193,14 @@ export default {
   }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 640px) {
   #title {
     font-size: 4rem;
     letter-spacing: 1rem;
   }
 }
 
-@media screen and (max-width: 400px) {
+@media screen and (max-width: 480px) {
   #title {
     font-size: 2rem;
     letter-spacing: 0.5rem;
@@ -208,5 +208,15 @@ export default {
   #subtitle span {
     font-size: 16px;
   }
+  .start-btn {
+    height: 28px !important;
+    padding: 2 5px !important;
+    font-size: 10px;
+  }
+  .about-btn {
+    height: 28px !important;
+    padding: 2 5px !important;
+    font-size: 10px;
+  }
 }
 </style>
diff --git a/src/pages/Music/_id.vue b/src/pages/Music/_id.vue
index 7c440551..814fa761 100644
--- a/src/pages/Music/_id.vue
+++ b/src/pages/Music/_id.vue
@@ -656,10 +656,8 @@ export default {
 
 .music-info {
   display: flex;
-  margin: 40px auto;
-  max-width: 1040px;
   width: 100%;
-  padding: 0 20px;
+  margin-top: 20px;
   &-container {
     margin-left: 20px;
   }
@@ -730,7 +728,7 @@ export default {
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 1;
-    padding-bottom: 5px;
+    line-height: 20px;
     overflow: hidden;
     word-break: break-all;
     text-align: left;
@@ -800,4 +798,63 @@ export default {
     opacity: 1;
   }
 }
+
+@media screen and (max-width: 1200px) {
+
+}
+@media screen and (max-width: 992px) {
+}
+@media screen and (max-width: 768px) {
+  .music-info {
+    display: block;
+    &-container {
+      margin-top: 16px;
+      margin-left: 0px;
+    }
+  }
+  .music-title {
+    &-genre {
+      padding: 5px 10px 5px !important;
+      font-size: 14px !important;
+      border-radius: 5px !important;
+    }
+    &-text {
+      font-size: 20px !important;
+    }
+    &-artist {
+      .music-artist-username {
+        margin-top: 2px;
+        font-size: 16px !important;
+        i {
+          font-size: 16px;
+        }
+      }
+    }
+    &-album {
+      margin-top: 2px;
+      a {
+        font-size: 16px !important;
+        i {
+          font-size: 16px;
+        }
+      }
+    }
+    &-desp {
+      margin-top: 2px;
+      span {
+        font-size: 14px !important;
+      }
+    }
+  }
+}
+@media screen and (max-width: 640px) {
+  .albuminfo-cover-img {
+    height: 100%;
+    max-height: 250px;
+    width: 100%;
+    max-width: 250px;
+  }
+}
+@media screen and (max-width: 480px) {
+}
 </style>
diff --git a/src/pages/Songs/Index.vue b/src/pages/Songs/Index.vue
index 51da123a..9db81c34 100644
--- a/src/pages/Songs/Index.vue
+++ b/src/pages/Songs/Index.vue
@@ -177,4 +177,28 @@ export default {
     flex: 1;
   }
 }
+
+@media screen and (max-width: 992px) {
+  .single-card {
+    margin-right: 6px !important;
+  }
+  .album-card {
+    margin-right: 30px !important;
+  }
+}
+@media screen and (max-width: 768px) {
+  .single-card {
+    margin-right: 0px !important;
+  }
+  .album-card {
+    margin-right: 12px !important;
+  }
+}
+@media screen and (max-width: 640px) {
+}
+@media screen and (max-width: 480px) {
+  .album-card {
+    margin-right: -15px !important;
+  }
+}
 </style>