Merge pull request #6 from olyalass/dev

feat: lists & shared pages + other
olyalass · Jul 31, 2024 · 3e5afa4 · 3e5afa4
2 parents 06bf104 + f664491
commit 3e5afa4
Show file tree

Hide file tree

Showing 94 changed files with 3,210 additions and 852 deletions.
diff --git a/src/App.css b/src/App.css
@@ -64,17 +64,36 @@
 }
 
 .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 {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: center;
+}
+
+.content-wrap {
+  display: flex;
+  width: 1520px;
+  gap: 20px;
+  flex-wrap: wrap;
+  justify-content: start;
 }
 
 .anime-card {
   width: 200px;
-  height: 400px;
+  height: 435px;
+  padding-bottom: 50px;
   overflow: hidden;
   box-sizing: border-box;
 }
@@ -87,6 +106,53 @@
   overflow: hidden;
 }
 
+.poster-container {
+  position: relative;
+  width: 100%;
+  height: 250px;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.poster-addition {
+  color: rgba(255, 240, 245, 0.696);
+  visibility: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  top: 90px;
+  width: 100%;
+  height: 70px;
+  cursor: pointer;
+}
+
+.poster-icon {
+  font-size: 40px;
+}
+
+.poster-container:hover > .poster-addition {
+  visibility: visible;
+  z-index: 3;
+}
+
+.poster-container:hover > .poster {
+  filter: blur(4px) brightness(0.4);
+}
+
+.delete-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  margin: 0;
+  cursor: pointer;
+}
+
+.delete-button:hover {
+  border: 1px solid #d29ada;
+  color: #d29ada;
+}
+
 .anime-card-title {
   max-height: 60px;
   overflow: hidden;
@@ -105,24 +171,39 @@
 .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;
 }
 
-.anime-page-container {
+.anime-big-card-container {
+  position: relative;
   display: flex;
   flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 15px;
+}
+
+.anime-page-container {
+  display: flex;
   justify-content: center;
 }
 
-.descriptions {
-  max-width: 60%;
+.anime-big-card-extra {
+  display: flex;
+  flex-wrap: wrap;
+  width: 100%;
+  justify-content: space-between;
+  padding: 0 50px;
+}
+
+.light-text {
+  color: rgba(255, 255, 255, 0.65);
 }
 
 .random-container {
@@ -154,6 +235,80 @@
   justify-content: space-between;
 }
 
+.add-to-list-select {
+  position: absolute;
+  bottom: 10px;
+  width: 80%;
+}
+
+.add-to-list-select-right {
+  width: 250px;
+  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;
@@ -168,4 +323,115 @@
   .descriptions {
     max-width: 80%;
   }
+
+  .search-container {
+    display: none;
+  }
+
+  .nav {
+    justify-content: end;
+  }
+}
+
+@media (max-width: 800px) {
+  .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;
+  }
 }