diff options
| author | zephex-alt <[email protected]> | 2024-05-04 18:18:30 +0000 |
|---|---|---|
| committer | GitHub <[email protected]> | 2024-05-04 18:18:30 +0000 |
| commit | a6c3531821aa10d80cc93d1809cbc45943c2c830 (patch) | |
| tree | 0b9fb3df41a4fb23283b730d699dacaf1ed9a7f3 /src/app/kdrama | |
| parent | Update README.md (diff) | |
| download | dramalama-a6c3531821aa10d80cc93d1809cbc45943c2c830.tar.xz dramalama-a6c3531821aa10d80cc93d1809cbc45943c2c830.zip | |
UI changes to improved desktop experience
Diffstat (limited to 'src/app/kdrama')
| -rw-r--r-- | src/app/kdrama/components/popular.jsx | 11 | ||||
| -rw-r--r-- | src/app/kdrama/components/recent.jsx | 9 | ||||
| -rw-r--r-- | src/app/kdrama/styles/kdrama.module.css | 1 | ||||
| -rw-r--r-- | src/app/kdrama/styles/popular.module.css | 53 |
4 files changed, 44 insertions, 30 deletions
diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx index 1b93313..d09e0ff 100644 --- a/src/app/kdrama/components/popular.jsx +++ b/src/app/kdrama/components/popular.jsx @@ -13,17 +13,20 @@ export default async function PopularDramas() { <div className={styles.AnimeContainer}>
{popular &&
- popular.results.map((item, index) => (
+ popular.results.slice(0, 16).map((item, index) => (
<Link
href={`/kdrama/${encodeURIComponent(item.id)}`}
key={index}
style={{ textDecoration: "none" }}
>
- <div className={styles.AnimeEntry} title={item.title}>
+ <div
+ className={styles.AnimeEntry}
+ title={item.title}
+ >
<Image
src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
- width={190}
- height={270}
+ width={200}
+ height={310}
alt="Drama Poster"
/>
<p>{item.title}</p>
diff --git a/src/app/kdrama/components/recent.jsx b/src/app/kdrama/components/recent.jsx index b53009e..fc142b1 100644 --- a/src/app/kdrama/components/recent.jsx +++ b/src/app/kdrama/components/recent.jsx @@ -8,17 +8,20 @@ export default async function RecentDramas() { PreFetchAnimeInfo(popular);
return (
<div className={styles.Main}>
- <p className={styles.popDramasText}>Recently Released</p>
+ <p className={styles.popDramasText}>Recent Releases</p>
<div className={styles.AnimeContainer}>
{popular &&
- popular.results.map((item, index) => (
+ popular.results.slice(0, 16).map((item, index) => (
<Link
href={`/kdrama/${encodeURIComponent(item.id)}`}
key={index}
style={{ textDecoration: "none" }}
>
- <div className={styles.AnimeEntry} title={item.title}>
+ <div
+ className={styles.AnimeEntry}
+ title={item.title}
+ >
<Image
src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
width={190}
diff --git a/src/app/kdrama/styles/kdrama.module.css b/src/app/kdrama/styles/kdrama.module.css index f27060f..d683479 100644 --- a/src/app/kdrama/styles/kdrama.module.css +++ b/src/app/kdrama/styles/kdrama.module.css @@ -1,4 +1,3 @@ .Main {
- max-width: 98%;
margin: 80px auto;
}
diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css index 16c18a2..fce54c1 100644 --- a/src/app/kdrama/styles/popular.module.css +++ b/src/app/kdrama/styles/popular.module.css @@ -1,29 +1,20 @@ .popDramasText {
color: var(--soft-purple);
- font-size: 28px;
+ font-size: 36px;
margin-bottom: 10px;
- font-weight: 500;
+ font-weight: 400;
+ text-align: center;
}
.AnimeContainer {
- display: flex;
- overflow-x: auto;
- overflow-y: hidden;
- margin-top: -8px;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+ grid-gap: 0.5rem;
+ align-items: center;
}
.AnimeContainer::-webkit-scrollbar {
- height: 5px;
-}
-
-.AnimeContainer::-webkit-scrollbar-track {
- background-color: #3333339d;
- border-radius: 5px;
-}
-
-.AnimeContainer::-webkit-scrollbar-thumb {
- background-color: rgb(68, 68, 68);
- border-radius: 5px;
+ height: 0px;
}
.AnimeContainer:hover .AnimeEntry {
@@ -32,7 +23,7 @@ .AnimeContainer:hover .AnimeEntry:hover {
opacity: 1;
- transform: scale(1.02);
+ transform: scale(1.018);
background-color: #272727;
}
@@ -40,26 +31,44 @@ display: flex;
flex-direction: column;
align-items: center;
- margin: 4px;
background-color: #1f1f1fbb;
padding: 0.5rem;
transition: opacity 200ms ease, transform 200ms ease,
background-color 200ms ease;
cursor: grab;
- border-radius: 1rem;
+ border-radius: 0.4rem;
}
.AnimeEntry img {
- border-radius: 1rem;
+ border-radius: 0.4rem;
}
.AnimeEntry p {
text-align: center;
color: white;
width: auto;
- max-width: 190px;
+ max-width: 180px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin: 0.5rem 0rem 0rem 0rem;
}
+
+@media screen and (max-width: 768px) {
+ .popDramasText {
+ text-align: start;
+ font-size: 26px;
+ margin-bottom: 1rem;
+ }
+
+ .AnimeContainer {
+ display: flex;
+ overflow-x: auto;
+ overflow-y: hidden;
+ margin-top: -8px;
+ }
+
+ .AnimeEntry img {
+ width: auto;
+ }
+}
|