diff --git a/src/app/components/app/app_page.php b/src/app/components/app/app_page.php
index 62933b5248b8fad16034258a90ece162b139af8f..739b68df23ec83c3b41587756c96dab131e7ff74 100644
--- a/src/app/components/app/app_page.php
+++ b/src/app/components/app/app_page.php
@@ -8,7 +8,7 @@
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/globals.css">
<!-- Page CSS -->
- <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/home/Home.css">
+ <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/home/homeStyle.css">
<link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/search/search.css">
<!-- <link rel="stylesheet" type="text/css" href="<?= BASE_URL ?>/styles/globals.css"> -->
diff --git a/src/app/components/home/home_page.php b/src/app/components/home/home_page.php
index 4b7afcd6090337705d1c0ae2a7eb49d827af9a18..10a3c90663f0a941e4a4c9ee240176d5159aeaf7 100644
--- a/src/app/components/home/home_page.php
+++ b/src/app/components/home/home_page.php
@@ -1,12 +1,11 @@
-<section>
- <div class="comedy-content">
- <h4>COMEDY</h4>
- <div class="home-podcast-list">
- <?php if (isset($this->data["tech_podcasts"])) : ?>
- <div class="home-podcast-list">
- <?php foreach ($this->data["tech_podcasts"] as $podcast) : ?>
- <div class="podcast">
- <img class="thumbnail" src="<?= STORAGE_URL . $podcast->url_thumbnail ?>" alt="image">
+<section class="home-section">
+ <div class="home-content">
+ <?php if (isset($this->data["comedy"])) : ?>
+ <h4>comedy</h4>
+ <div class="home-podcast-container">
+ <?php foreach ($this->data["comedy"] as $podcast) : ?>
+ <div class="home-podcast-card" data-id-podcast="<?= $podcast->id_podcast?>">
+ <img class="thumbnail" src="<?= STORAGE_URL . $podcast->url_thumbnail ?>" alt="podcast image">
<div class="info">
<div class="sh5"><?= $podcast->title ?> </div>
<div class="b5"><?= $podcast->name ?></div>
@@ -14,11 +13,38 @@
</div>
<?php endforeach; ?>
</div>
- <?php else : ?>
- <div class="sh4">
- no results found.
+ <?php endif; ?>
+ </div>
+ <div class="home-content">
+ <?php if (isset($this->data["tech"])) : ?>
+ <h4>technology</h4>
+ <div class="home-podcast-container">
+ <?php foreach ($this->data["tech"] as $podcast) : ?>
+ <div class="home-podcast-card" data-id-podcast="<?= $podcast->id_podcast?>">
+ <img class="thumbnail" src="<?= STORAGE_URL . $podcast->url_thumbnail ?>" alt="podcast image">
+ <div class="info">
+ <div class="sh5"><?= $podcast->title ?> </div>
+ <div class="b5"><?= $podcast->name ?></div>
+ </div>
+ </div>
+ <?php endforeach; ?>
+ </div>
+ <?php endif; ?>
+ </div>
+ <div class="home-content">
+ <?php if (isset($this->data["horror"])) : ?>
+ <h4>horror</h4>
+ <div class="home-podcast-container">
+ <?php foreach ($this->data["horror"] as $podcast) : ?>
+ <div class="home-podcast-card" data-id-podcast="<?= $podcast->id_podcast?>">
+ <img class="thumbnail" src="<?= STORAGE_URL . $podcast->url_thumbnail ?>" alt="podcast image">
+ <div class="info">
+ <div class="sh5"><?= $podcast->title ?> </div>
+ <div class="b5"><?= $podcast->name ?></div>
+ </div>
+ </div>
+ <?php endforeach; ?>
</div>
<?php endif; ?>
</div>
- </div>
</section>
\ No newline at end of file
diff --git a/src/app/components/podcast/page.php b/src/app/components/podcast/page.php
index 1c127e60e244cafef64c2fba7f66a789fa82e800..3e90b5c8de480c6b65e3605a7c75debaccb01813 100644
--- a/src/app/components/podcast/page.php
+++ b/src/app/components/podcast/page.php
@@ -13,7 +13,6 @@
</head>
<body>
- <?php include(dirname(__DIR__) . "/common/sidebar.php") ?>
<?php include(dirname(__DIR__) . "/common/toast.php") ?>
<main>
@@ -71,8 +70,6 @@
<?php endforeach; ?>
</ul>
</main>
-
- <?php include(dirname(__DIR__) . "/common/player.php") ?>
</body>
</html>
\ No newline at end of file
diff --git a/src/app/components/search/result.php b/src/app/components/search/result.php
index 2e53d5fb65519185a8fa49e9d5b7c8c23117bbe5..edaead348e4418f2db383d9e03082c7ccba648be 100644
--- a/src/app/components/search/result.php
+++ b/src/app/components/search/result.php
@@ -2,7 +2,7 @@
<?php if (isset($this->data["podcasts"])): ?>
<div class="podcast-list">
<?php foreach ($this->data["podcasts"] as $podcast): ?>
- <div class="podcast">
+ <div class="podcast-card-result" data-id-podcast="<?= $podcast->id_podcast?>">
<img class="thumbnail" src="<?= STORAGE_URL . $podcast->url_thumbnail ?>" alt="image">
<div class="info">
<div class="sh5"><?=$podcast->title?> </div>
@@ -13,6 +13,6 @@
</div>
<?php else : ?>
<h5>
- no results found.
+ No results found.
</h5>
<?php endif;?>
\ No newline at end of file
diff --git a/src/app/components/search/search_page.php b/src/app/components/search/search_page.php
index 9dafe1d7fe6ce1644e8f78db3538e7b7864dc048..0ed4bc8bb109c6281724d93a455d2f33f270c9d1 100644
--- a/src/app/components/search/search_page.php
+++ b/src/app/components/search/search_page.php
@@ -18,7 +18,7 @@
<div class="dropdown-content genre-content">
<div class="item genre-option" data-value="">All genre</div>
<div class="item genre-option" data-value="comedy">Comedy</div>
- <div class="item genre-option" data-value="sports">Sports</div>
+ <div class="item genre-option" data-value="horror">Horror</div>
<div class="item genre-option" data-value="technology">Technology</div>
</div>
</div>
diff --git a/src/app/controllers/home/get_home.php b/src/app/controllers/home/get_home.php
index 326d83989560633f39876647717aabc01881743e..971363d7364a0c437aa8e8644e24eda478c662b0 100644
--- a/src/app/controllers/home/get_home.php
+++ b/src/app/controllers/home/get_home.php
@@ -7,12 +7,18 @@ class GetHomeController
session_start();
$data = [];
-
+ $categories = ["comedy", "technology", "horror" ];
+
// podcast Info
$podcastModel = new PodcastModel();
- $podcastTech = $podcastModel->getPodcastByGenre("comedy");
+ $podcastTech = $podcastModel->getPodcastByGenre("technology");
+ $podcastComedy = $podcastModel->getPodcastByGenre("comedy");
+ $podcastHorror = $podcastModel->getPodcastByGenre("horror");
if ($podcastTech){
- $data["tech_podcasts"] = $podcastTech;
+ $data["categories"] = $categories;
+ $data["tech"] = $podcastTech;
+ $data["comedy"] = $podcastComedy;
+ $data["horror"] = $podcastHorror;
}
// Home View
diff --git a/src/app/controllers/profile/get_profile.php b/src/app/controllers/profile/get_profile.php
index 0ae440f317af7450a3abeaafd0bed1f892528c4c..fa2ab21e192a6239c0ce5e4cdc0bdc2377cbda50 100644
--- a/src/app/controllers/profile/get_profile.php
+++ b/src/app/controllers/profile/get_profile.php
@@ -1,6 +1,6 @@
<?php
-class getProfileController
+class GetProfileController
{
public function call()
{
diff --git a/src/app/controllers/profile/update_profile.php b/src/app/controllers/profile/update_profile.php
index b75829b06cb9b68977de57decc97b5ff31ecf698..b22599403d32c455fede310af6ccff5a2eb55fcb 100644
--- a/src/app/controllers/profile/update_profile.php
+++ b/src/app/controllers/profile/update_profile.php
@@ -4,6 +4,7 @@ class UpdateProfileController
{
public function call()
{
+ session_start();
if (isset($_SERVER["HTTP_API_KEY"])) {
if ($_SERVER["HTTP_API_KEY"] != $_ENV["REST_PHP_KEY"]) {
http_response_code(403);
@@ -65,5 +66,6 @@ class UpdateProfileController
exit;
}
}
+ session_destroy();
}
}
diff --git a/src/app/core/app.php b/src/app/core/app.php
index f56be79b84e7dfa7a01f04c48955b13897c79210..aac88f2ad7ddff628481d5d8cfd4d895015ae9b2 100644
--- a/src/app/core/app.php
+++ b/src/app/core/app.php
@@ -10,18 +10,17 @@ class App
// Pages routes
$router->get("public/login", new GetLoginController());
$router->get("public/signup", new GetSignupController());
- $router->get("public/profile", new getProfileController());
- $router->post("public/profile", new UpdateProfileController());
-
+ $router->get("public/profile", new GetProfileController());
+
$router->get("public", new AppController());
$router->get("public/home", new AppController());
$router->get("public/search", new AppController());
$router->get("public/library", new AppController());
$router->get("public/playlist", new AppController());
$router->get("public/profile", new getProfileController());
- $router->get("public/podcast", new GetPodcastPageController());
+ $router->get("public/podcast", new AppController());
$router->get("public/playlist", new GetPlaylistController());
-
+
$router->get("public/dashboard", new AppController());
$router->get("public/dashboard-main", new AppController());
$router->get("public/dashboard-episode", new AppController());
@@ -36,6 +35,7 @@ class App
$router->get("public/components/library", new GetLibraryController());
$router->get("public/components/playlist", new GetPlaylistController());
$router->get("public/components/dashboard", new GetDashboardLayoutController());
+ $router->get("public/components/podcast", new GetPodcastPageController());
$router->get("public/components/dashboard-main", new GetDashboardLayoutController());
$router->get("public/components/dashboard-episode", new GetDashboardLayoutController());
@@ -49,10 +49,11 @@ class App
$router->post("public/logout", new LogoutController());
$router->post("public/login", new PostLoginController());
$router->post("public/signup", new PostSignupController());
-
+
$router->post("public/episode/play", new PostPlayEpisodeController());
$router->post("public/podcast", new PostPodcastPageController());
$router->post("public/playlist", new PostPlaylistController());
+ $router->post("public/profile", new UpdateProfileController());
$router->post("public/dashboard/add-episode", new PostAddEpisodeController());
$router->post("public/dashboard/edit-episode", new PostEditEpisodeController());
@@ -62,7 +63,7 @@ class App
// DELETE routes
$router->delete("public/dashboard/episode", new DeleteEpisodeController());
$router->delete("public/dashboard/podcast", new DeletePodcastController());
-
+
// $router->get("public/library", new GetLibraryController());
$router->directRequest($url);
diff --git a/src/app/models/podcast.php b/src/app/models/podcast.php
index e93138bd65ddb882b27dbb9324aab3e941e56835..56da4b0ef5b9bb5b6edad8dbac9c15033b8983d8 100644
--- a/src/app/models/podcast.php
+++ b/src/app/models/podcast.php
@@ -40,7 +40,7 @@ class PodcastModel
switch ($sort) {
case "alphabetical":
$query =
- "SELECT p.title, p.category, p.url_thumbnail, p.description, u.name
+ "SELECT p.id_podcast, p.title, p.category, p.url_thumbnail, p.description, u.name
FROM podcast AS p
NATURAL JOIN user AS u
LEFT JOIN episode AS e ON p.id_podcast = e.id_podcast
@@ -54,7 +54,7 @@ class PodcastModel
break;
case "date joined":
$query =
- "SELECT p.title, p.category, p.url_thumbnail, p.description, u.name
+ "SELECT p.id_podcast, p.title, p.category, p.url_thumbnail, p.description, u.name
FROM podcast AS p
NATURAL JOIN user AS u
LEFT JOIN episode AS e ON p.id_podcast = e.id_podcast
@@ -68,7 +68,7 @@ class PodcastModel
break;
default:
$query =
- "SELECT p.title, p.category, p.url_thumbnail, p.description, u.name
+ "SELECT p.id_podcast, p.title, p.category, p.url_thumbnail, p.description, u.name
FROM podcast AS p
NATURAL JOIN user AS u
LEFT JOIN episode e ON e.id_podcast=p.id_podcast
@@ -96,7 +96,7 @@ class PodcastModel
public function getPodcastByGenre($genre)
{
$query =
- "SELECT title, category, url_thumbnail, description, name
+ "SELECT id_podcast, title, category, url_thumbnail, description, name
FROM podcast
NATURAL JOIN user
WHERE category = :genre
diff --git a/src/public/javascript/app/app.js b/src/public/javascript/app/app.js
index 0dd9d16448d610028e0f736c5195c685d986ce2b..98b3977d75da848eed7f819fa0632f5fc9123eb6 100644
--- a/src/public/javascript/app/app.js
+++ b/src/public/javascript/app/app.js
@@ -1,6 +1,10 @@
import { handleDashboard } from "../dashboard/layout.mjs";
import { handlePlaylist } from "../library/library.mjs";
import { handleLibrary } from "../library/library2.mjs";
+import { handleSearch } from "../search/search.js";
+import { handleResultSearch } from "../search/resultSearch.js";
+import { handlePodcast } from "../podcast/script.js";
+import { handleHome } from "../home/home.js";
const mainSection = document.querySelector("#main-section");
const sidebar = document.querySelector(".sidebar");
@@ -28,13 +32,19 @@ const getPage = (page, queryParam) => {
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
mainSection.innerHTML = xhr.responseText;
- // handleSearch();
if (window.location.href.includes("dashboard")) {
handleDashboard();
} else if(window.location.href.includes("library")){
handleLibrary();
} else if(window.location.href.includes("playlist")){
handlePlaylist();
+ } else if (window.location.href.includes("search")) {
+ handleSearch();
+ handleResultSearch();
+ } else if (window.location.href.includes("podcast")) {
+ handlePodcast();
+ } else if (window.location.href.includes("home")) {
+ handleHome();
}
}
};
diff --git a/src/public/javascript/home/home.js b/src/public/javascript/home/home.js
new file mode 100644
index 0000000000000000000000000000000000000000..fcf54559145d48aa3b8270d56215c990dd6e7709
--- /dev/null
+++ b/src/public/javascript/home/home.js
@@ -0,0 +1,21 @@
+export const handleHome = () => {
+ const podcastCardHome = document.querySelectorAll('.home-podcast-card');
+ const mainSection = document.querySelector('#main-section');
+
+ podcastCardHome &&
+ podcastCardHome.forEach(function(podcastCard) {
+ podcastCard.addEventListener('click', () => {
+ const xhr = new XMLHttpRequest();
+ xhr.open('GET', `/public/components/podcast?id_podcast=${podcastCard.dataset.idPodcast}`, true);
+
+ xhr.onreadystatechange = () => {
+ if (xhr.readyState == 4 && xhr.status == 200) {
+ mainSection.innerHTML = xhr.responseText;
+ }
+ };
+
+ xhr.send();
+ history.pushState({}, '', `http://localhost:8080/public/podcast?id_podcast=${podcastCard.dataset.idPodcast}`);
+ });
+ });
+}
\ No newline at end of file
diff --git a/src/public/javascript/podcast/script.js b/src/public/javascript/podcast/script.js
index 122b303623acb13f36b474574422af08c8657463..b41b2158b457713029fb3bd4e3fbe4c7ca78a8af 100644
--- a/src/public/javascript/podcast/script.js
+++ b/src/public/javascript/podcast/script.js
@@ -1,79 +1,80 @@
"use strict";
import { showSuccessToast, showErrorToast, showInformationToast } from "../toast.mjs";
+export function handlePodcast() {
+ // Get DOM elements
+ const playButtonsEl = document.querySelectorAll(".play-button");
+ const addLibraryButtonEl = document.getElementById("add-library-btn")
+ const libraryChoicesEl = document.getElementById("library-choices")
+ const overlayEl = document.getElementById("overlay-library")
+ const playlists = document.querySelectorAll(".playlist");
-// Get DOM elements
-const playButtonsEl = document.querySelectorAll(".play-button");
-const addLibraryButtonEl = document.getElementById("add-library-btn")
-const libraryChoicesEl = document.getElementById("library-choices")
-const overlayEl = document.getElementById("overlay-library")
-const playlists = document.querySelectorAll(".playlist");
-
-// Handle play episode
-Array.from(playButtonsEl).forEach((el) => {
- el.addEventListener("click", (e) => {
- e.preventDefault();
+ // Handle play episode
+ Array.from(playButtonsEl).forEach((el) => {
+ el.addEventListener("click", (e) => {
+ e.preventDefault();
- const formData = new FormData();
- formData.append("idEpisode", el.dataset.id);
+ const formData = new FormData();
+ formData.append("idEpisode", el.dataset.id);
- const xhr = new XMLHttpRequest();
- xhr.open("POST", "/public/episode/play");
+ const xhr = new XMLHttpRequest();
+ xhr.open("POST", "/public/episode/play");
- xhr.onreadystatechange = () => {
- if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
- }
- };
+ xhr.onreadystatechange = () => {
+ if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
+ }
+ };
- xhr.send(formData);
+ xhr.send(formData);
+ });
});
-});
-// Handle open 'library' input
-addLibraryButtonEl &&
- addLibraryButtonEl.addEventListener("click", (e) => {
+ // Handle open 'library' input
+ addLibraryButtonEl &&
+ addLibraryButtonEl.addEventListener("click", (e) => {
+ e.preventDefault();
+
+ libraryChoicesEl.classList.toggle("hidden");
+ overlayEl.classList.toggle("hidden");
+ });
+
+ // Handle click outside 'library'
+ overlayEl.addEventListener("click", (e) => {
e.preventDefault();
libraryChoicesEl.classList.toggle("hidden");
overlayEl.classList.toggle("hidden");
});
-// Handle click outside 'library'
-overlayEl.addEventListener("click", (e) => {
- e.preventDefault();
-
- libraryChoicesEl.classList.toggle("hidden");
- overlayEl.classList.toggle("hidden");
-});
+ if(playlists.length !== 0){
+ playlists.forEach(function(playlist){
+ playlist.addEventListener("click", (e) => {
+ e.preventDefault();
+
+ const data = new FormData();
-if(playlists.length !== 0){
- playlists.forEach(function(playlist){
- playlist.addEventListener("click", (e) => {
- e.preventDefault();
-
- const data = new FormData();
-
- const xhr = new XMLHttpRequest();
-
- xhr.open("POST", "/public/podcast", true);
-
- data.append("id_playlist", playlist.dataset.id);
- data.append("id_podcast", libraryChoicesEl.dataset.idPodcast);
+ const xhr = new XMLHttpRequest();
+
+ xhr.open("POST", "/public/podcast", true);
+
+ data.append("id_playlist", playlist.dataset.id);
+ data.append("id_podcast", libraryChoicesEl.dataset.idPodcast);
- xhr.onload = function () {
- if (xhr.readyState === XMLHttpRequest.DONE) {
- if (xhr.status === 201) {
- showSuccessToast("Podcast berhasil ditambahkan ke playlist!");
- }else if(xhr.status === 203){
- showInformationToast("Podcast sudah ada dalam playlist!")
- }
- else{ // status code 200, some other error
- showErrorToast("Podcast gagal ditambahkan ke playlist!");
- }
+ xhr.onload = function () {
+ if (xhr.readyState === XMLHttpRequest.DONE) {
+ if (xhr.status === 201) {
+ showSuccessToast("Podcast berhasil ditambahkan ke playlist!");
+ }else if(xhr.status === 203){
+ showInformationToast("Podcast sudah ada dalam playlist!")
+ }
+ else{ // status code 200, some other error
+ showErrorToast("Podcast gagal ditambahkan ke playlist!");
+ }
+ }
}
- }
- xhr.send(data);
+ xhr.send(data);
+ })
})
- })
+ }
}
\ No newline at end of file
diff --git a/src/public/javascript/profile/profile.js b/src/public/javascript/profile/profile.js
index dede16f7187c6d789fd9e88a0504c5f6a11dc12d..019fd6b84d1bcef8a38ac193a846533af0a97973 100644
--- a/src/public/javascript/profile/profile.js
+++ b/src/public/javascript/profile/profile.js
@@ -1,7 +1,7 @@
const profile = document.querySelector(".profile");
const profileMenu = document.querySelector(".profile-menu");
const SaveProfileAlert = document.getElementById("save-profile-alert");
-console.log("masuk");
+
profile &&
profile.addEventListener("click", (e) => {
profileMenu.style.display = "flex";
@@ -19,7 +19,6 @@ const editSection = document.querySelector(".edit-profile-container");
menuProfile &&
menuProfile.addEventListener("click", (e) => {
- console.log("keklik cok");
editProfile.style.display = "flex";
});
@@ -53,10 +52,10 @@ submitProfileButton.addEventListener("click", (e) => {
if (xhr.status === 200) {
nameForm.value = JSON.parse(xhr.responseText).name;
usernameForm.value = JSON.parse(xhr.responseText).username;
- SaveProfileAlert.color = "green";
+ SaveProfileAlert.style.color = "green";
SaveProfileAlert.innerHTML = JSON.parse(xhr.responseText).message;
} else {
- SaveProfileAlert.color = "red";
+ SaveProfileAlert.style.color = "red";
SaveProfileAlert.innerHTML = JSON.parse(xhr.responseText).message;
}
}
diff --git a/src/public/javascript/search/resultSearch.js b/src/public/javascript/search/resultSearch.js
new file mode 100644
index 0000000000000000000000000000000000000000..7374b7afa2e9e41b58423c74f4eeb09d241d599a
--- /dev/null
+++ b/src/public/javascript/search/resultSearch.js
@@ -0,0 +1,22 @@
+export const handleResultSearch = () => {
+ const podcastCardResult = document.querySelectorAll('.podcast-card-result');
+ const mainSection = document.querySelector('#main-section');
+
+ podcastCardResult &&
+ podcastCardResult.forEach(function(podcastCard) {
+ podcastCard.addEventListener('click', () => {
+ console.log(podcastCard.dataset.idPodcast)
+ const xhr = new XMLHttpRequest();
+ xhr.open('GET', `/public/components/podcast?id_podcast=${podcastCard.dataset.idPodcast}`, true);
+
+ xhr.onreadystatechange = () => {
+ if (xhr.readyState == 4 && xhr.status == 200) {
+ mainSection.innerHTML = xhr.responseText;
+ }
+ };
+
+ xhr.send();
+ history.pushState({}, '', `http://localhost:8080/public/podcast?id_podcast=${podcastCard.dataset.idPodcast}`);
+ });
+ });
+}
\ No newline at end of file
diff --git a/src/public/javascript/search/search.js b/src/public/javascript/search/search.js
index 677aa6dc04169a733809b08616a70f6a3ec217d0..2aa18d7ed19fe282a9d718e2e753ea960512c06a 100644
--- a/src/public/javascript/search/search.js
+++ b/src/public/javascript/search/search.js
@@ -1,3 +1,5 @@
+import { handleResultSearch} from "./resultSearch.js";
+
export const handleSearch = () => {
const searchInput = document.getElementById("search-input");
const resultContainer = document.querySelector(".result-container");
@@ -38,7 +40,7 @@ export const handleSearch = () => {
ajax.onreadystatechange = () => {
if (ajax.readyState == 4 && ajax.status == 200) {
resultContainer.innerHTML = ajax.responseText;
- console.log("ajax amsterdam");
+ handleResultSearch();
}
};
@@ -74,6 +76,7 @@ export const handleSearch = () => {
ajax.onreadystatechange = () => {
if (ajax.readyState == 4 && ajax.status == 200) {
resultContainer.innerHTML = ajax.responseText;
+ handleResultSearch();
}
};
@@ -107,6 +110,7 @@ export const handleSearch = () => {
ajax.onreadystatechange = () => {
if (ajax.readyState == 4 && ajax.status == 200) {
resultContainer.innerHTML = ajax.responseText;
+ handleResultSearch();
}
};
@@ -141,6 +145,7 @@ export const handleSearch = () => {
ajax.onreadystatechange = () => {
if (ajax.readyState == 4 && ajax.status == 200) {
resultContainer.innerHTML = ajax.responseText;
+ handleResultSearch();
}
};
diff --git a/src/public/styles/globals.css b/src/public/styles/globals.css
index 030ccbdd3637ad689ffd1fc0b1e30287c6a8dfdc..faa94fe49e8f4c37162386c481aaf7e23fbe02ca 100644
--- a/src/public/styles/globals.css
+++ b/src/public/styles/globals.css
@@ -38,16 +38,14 @@ body {
padding: 0;
margin: 0;
font-family: "DM Sans", sans-serif;
- height: 100vh;
- overflow-y: hidden;
}
main {
min-width: 0;
- width: fit-content;
background-color: var(--BLACK);
+ height: 100vh;
+ overflow-y: hidden;
width: 100%;
- overflow-y: auto;
}
button {
diff --git a/src/public/styles/home/Home.css b/src/public/styles/home/Home.css
deleted file mode 100644
index b8adaf9718f4476d2a687c2bec6e3d0eb8850f49..0000000000000000000000000000000000000000
--- a/src/public/styles/home/Home.css
+++ /dev/null
@@ -1,12 +0,0 @@
-.comedy-content {
- display: flex;
- flex-direction: column;
- padding: 100px 100px;
-}
-
-.home-podcast-list {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: space-between;
-}
\ No newline at end of file
diff --git a/src/public/styles/home/homeStyle.css b/src/public/styles/home/homeStyle.css
new file mode 100644
index 0000000000000000000000000000000000000000..5fc2764635cba7d69881c843b0fab48aefccaedb
--- /dev/null
+++ b/src/public/styles/home/homeStyle.css
@@ -0,0 +1,62 @@
+.home-section {
+ margin-top: 68px;
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100vh;
+ overflow-y: auto;
+ gap: 32px;
+}
+
+.home-content {
+ display: flex;
+ flex-direction: column;
+ padding: 0 100px;
+ gap: 24px;
+}
+
+.home-podcast-container {
+ display: flex;
+ flex-direction: row;
+ justify-content: start;
+ height: 240px;
+ gap: 24px;
+}
+
+.home-podcast-card {
+ display: flex;
+ width: 166px;
+ height: 100%;
+ flex-direction: column;
+ border-radius: 8px;
+ padding: 8px;
+ background-color: var(--GRAY-600);
+ gap: 16px;
+ cursor: pointer;
+}
+
+.home-podcast-card .thumbnail {
+ object-fit: cover;
+ object-position: center;
+ border-radius: 10px;
+ width: 100%;
+ height: 100%;
+}
+
+.home-podcast-card .info {
+ white-space: nowrap;
+ padding: 0 5px;
+ margin-bottom: 10px;
+ width: 145px;
+}
+
+.home-podcast-card .info .sh5 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.home-podcast-card .info .b5 {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ color: var(--GRAY-400);
+}
\ No newline at end of file
diff --git a/src/public/styles/search/search.css b/src/public/styles/search/search.css
index fb307e6fa2b9b13d7ebb4896aaeb909d610d8699..97846eed42edebd3a627b4d4791f4f8f65a4eb86 100644
--- a/src/public/styles/search/search.css
+++ b/src/public/styles/search/search.css
@@ -88,6 +88,7 @@ navbar .dropbtn {
margin-top: 150px;
justify-content: center;
justify-self: auto;
+ overflow-y: auto;
}
.podcast-list {
@@ -98,7 +99,7 @@ navbar .dropbtn {
gap: 20px;
}
-.podcast {
+.podcast-card-result {
display: flex;
width: 166px;
height: 100%;
@@ -107,10 +108,11 @@ navbar .dropbtn {
padding: 8px;
background-color: var(--GRAY-600);
gap: 16px;
+ cursor: pointer;
}
-.podcast .thumbnail {
+.podcast-card-result .thumbnail {
object-fit: cover;
object-position: center;
border-radius: 10px;
@@ -118,19 +120,19 @@ navbar .dropbtn {
height: 80px;
}
-.podcast .info {
+.podcast-card-result .info {
white-space: nowrap;
padding: 0 5px;
margin-bottom: 10px;
width: 145px;
}
-.podcast .info .sh5 {
+.podcast-card-result .info .sh5 {
overflow: hidden;
text-overflow: ellipsis;
}
-.podcast .info .b5 {
+.podcast-card-result .info .b5 {
overflow: hidden;
text-overflow: ellipsis;
color: var(--GRAY-400);
@@ -141,7 +143,7 @@ navbar .dropbtn {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
- .podcast .thumbnail {
+ .podcast-card-result .thumbnail {
object-fit: cover;
object-position: center;
border-radius: 10px;