feat: add responsive and refactor imports

olyalass · Jul 31, 2024 · f664491 · f664491
1 parent 7807fd4
commit f664491
Show file tree

Hide file tree

Showing 25 changed files with 558 additions and 191 deletions.
diff --git a/src/App.css b/src/App.css
@@ -64,12 +64,15 @@
 }
 
 .content-container {
-  padding: 2vh 2vw;
+  padding: 10px 10px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: center;
   flex-grow: 1;
+  height: calc(100vh - 64px);
+  box-sizing: border-box;
+  overflow-y: scroll;
 }
 
 .ant-modal-body {
@@ -81,11 +84,10 @@
 
 .content-wrap {
   display: flex;
+  width: 1520px;
   gap: 20px;
   flex-wrap: wrap;
   justify-content: start;
-  width: 100%;
-  min-height: 80vh;
 }
 
 .anime-card {
@@ -169,11 +171,10 @@
 .anime-big-card {
   position: relative;
   display: flex;
-  gap: 10px;
+  gap: 30px;
   justify-content: space-between;
   align-items: start;
   padding: 3vw;
-  /* border: 2px solid #d29ada; */
   border-radius: 10px;
   min-width: 60vw;
   max-width: 70vw;
@@ -205,10 +206,6 @@
   color: rgba(255, 255, 255, 0.65);
 }
 
-.descriptions {
-  max-width: 60%;
-}
-
 .random-container {
   display: flex;
   align-items: center;
@@ -249,6 +246,69 @@
   position: static;
 }
 
+.nav-menu i {
+  display: none;
+}
+
+.ant-menu-submenu-title {
+  padding-inline-end: 0px !important;
+}
+
+.search-page {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: start;
+  display: flex;
+}
+
+.showhide-button {
+  display: none;
+}
+
+.lists-sider {
+  min-height: calc(100vh - 64px);
+  padding-top: 15px;
+}
+
+.home-sider {
+  height: calc(100vh - 64px);
+  overflow-y: scroll;
+}
+
+.lists-page {
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: start;
+  display: flex;
+  width: 100%;
+}
+
+@media (max-width: 1840px) {
+  .content-wrap {
+    width: 1300px;
+  }
+}
+@media (max-width: 1580px) {
+  .content-wrap {
+    width: 1080px;
+  }
+}
+@media (max-width: 1400px) {
+  .content-wrap {
+    width: 860px;
+  }
+}
+@media (max-width: 1130px) {
+  .content-wrap {
+    width: 640px;
+  }
+}
+@media (max-width: 910px) {
+  .content-wrap {
+    width: 420px;
+  }
+}
+
 @media (max-width: 1400px) {
   .anime-big-card {
     align-items: center;
@@ -277,4 +337,101 @@
   .descriptions {
     max-width: unset;
   }
+
+  .header-container {
+    width: calc(100vw - 30px);
+    gap: unset;
+  }
+}
+
+@media (max-width: 720px) {
+  .lists-page {
+    flex-direction: column;
+  }
+  .content-container {
+    min-height: calc(100vh - 91px);
+    height: fit-content;
+    width: 100%;
+  }
+  .lists-sider {
+    min-height: calc(100vh - 91px);
+    flex: 0 0 150px !important;
+    min-width: unset !important;
+  }
+  .search-sider {
+    position: relative;
+    flex-direction: row;
+    flex-wrap: wrap;
+    max-width: unset;
+    min-height: unset;
+    width: 100vw;
+    height: fit-content;
+    border-right: none;
+    padding-bottom: 10px;
+    background-color: #f9f9f9;
+  }
+  .search-sider-closed {
+    height: 20px;
+  }
+
+  .search-sider-closed .ant-form {
+    display: none;
+  }
+
+  .search-sider-dark {
+    background-color: #001529;
+    color: #e4dee4a8;
+  }
+
+  .ant-form {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    column-gap: 20px;
+    align-items: center;
+  }
+
+  .ant-form-item:has(.ant-select) {
+    min-width: 100px;
+  }
+
+  .search-page {
+    flex-direction: column;
+  }
+
+  .showhide-button {
+    display: block;
+    position: absolute;
+    width: 90px;
+    bottom: -25px;
+    left: calc(50vw - 45px);
+    border-radius: 0 0 10px 10px;
+    color: inherit;
+    background-color: inherit;
+    appearance: none;
+    border: none;
+    padding: 5px;
+    cursor: pointer;
+    z-index: 2;
+  }
+
+  .showhide-button:hover {
+    color: #d29ada;
+  }
+
+  .content-wrap {
+    width: 640px;
+  }
+}
+
+@media (max-width: 670px) {
+  .content-wrap {
+    width: 420px;
+  }
+}
+
+@media (max-width: 442px) {
+  .content-wrap {
+    width: 220px;
+  }
 }