dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

FIX: Padding Issue on Video Thumbnails, ViewPort Issues in AuthModal

Browse Source
This commit is contained in:
EvanLin3141
2025-02-16 21:46:20 +00:00
parent 4ddcb3e139
commit 19e702a13a
6 changed files with 61 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/Auth/AuthModal.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { ToggleButton } from "../Layout/Button"; import { ToggleButton } from "../Layout/Button";
import { LogIn as LogInIcon, User as UserIcon, CircleHelp as ForgotIcon} from "lucide-react"; import { LogIn as LogInIcon, User as UserIcon, CircleHelp as ForgotIcon } from "lucide-react";
import LoginForm from "./LoginForm"; import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm"; import RegisterForm from "./RegisterForm";
import ForgotPasswordForm from "./ForgotPasswordForm"; import ForgotPasswordForm from "./ForgotPasswordForm";
@@ -23,11 +23,11 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
}; };
const authSwitch = () => { const authSwitch = () => {
const formMap: { [key: string]: JSX.Element} = { const formMap: { [key: string]: JSX.Element } = {
Login: <LoginForm onSubmit={(handleSubmit)} onForgotPassword={() => setSelectedTab("Forgot")}/>, Login: <LoginForm onSubmit={(handleSubmit)} onForgotPassword={() => setSelectedTab("Forgot")} />,
Register: <RegisterForm onSubmit={(handleSubmit)}/>, Register: <RegisterForm onSubmit={(handleSubmit)} />,
Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)}/> Forgot: <ForgotPasswordForm onSubmit={(handleSubmit)} />
}; };
return formMap[selectedTab] || <div>Please select a valid option</div>; return formMap[selectedTab] || <div>Please select a valid option</div>;
{/* {/*
@@ -57,30 +57,31 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem] transition-all animate-floating " h-[95vh] m-auto min-w-[65vw] w-fit py-[80px] rounded-[5rem] transition-all animate-floating "
> >
{/* Login/Register Buttons Container */} {/* Login/Register Buttons Container */}
<div className="absolute top-[60px] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible "> <div className="fixed top-[1em] left-1/2 transform -translate-x-1/2 w-[300px] flex justify-center gap-8 transition-transform overflow-visible ">
{/* Login Toggle */} {/* Login Toggle */}
<ToggleButton <ToggleButton
toggled={selectedTab === "Login"} toggled={selectedTab === "Login"}
extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]" extraClasses={`flex flex-col items-center px-8 "
}`}
onClick={() => setSelectedTab("Login")} onClick={() => setSelectedTab("Login")}
> >
<LogInIcon className="h-[40px] w-[40px] mr-1" /> <LogInIcon className=" w-[3em] sm:w-[1em] mr-1" />
Login Login
</ToggleButton> </ToggleButton>
{/* Register Toggle */} {/* Register Toggle */}
<ToggleButton <ToggleButton
toggled={selectedTab === "Register"} toggled={selectedTab === "Register"}
extraClasses="flex flex-col items-center px-8 duration-250 transition-transform hover:translate-y-[-50px] z-[9001]" extraClasses="flex flex-col items-center px-8 z-[9001]"
onClick={() => setSelectedTab("Register")} onClick={() => setSelectedTab("Register")}
> >
<UserIcon className="h-[40px] w-[40px] mr-1" /> <UserIcon className=" w-[3em] sm:w-[1em] mr-1" />
Register Register
</ToggleButton> </ToggleButton>
</div> </div>
<div <div
className="container fixed inset-0 flex flex-col items-center justify-around z-[9999] className="container fixed inset-0 flex flex-col items-center justify-around z-[9999]
h-auto max-h-[75vh] m-auto max-w-[350px] min-w-[34vw] py-[50px] rounded-[5rem]" h-auto max-h-[75vh] m-auto max-w-[350px] min-w-[34vw] py-[50px] rounded-[5rem]"
@@ -104,17 +105,17 @@ const AuthModal: React.FC<AuthModalProps> = ({ onClose }) => {
</button> </button>
</div> </div>
<> <>
{authSwitch()} {authSwitch()}
</> </>
</div> </div>
</div> </div>
</div> </div>
</> </>
); );
}; };

4
frontend/src/components/Auth/LoginForm.tsx
View File

@@ -101,10 +101,10 @@ const LoginForm: React.FC<SubmitProps> = ({ onSubmit, onForgotPassword }) => {
return ( return (
<> <>
<div className="h-[100%] flex flex-col items-center p-10"> <div className=" flex flex-col items-center p-10">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Login </h1> <h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Login </h1>
<div className="mt-10 bg-white/10 backdrop-blur-md p-6 md:p-16 rounded-xl shadow-lg w-full <div className="mt-10 bg-white/10 backdrop-blur-md p-6 md:p-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[27.5em] border border-white/10"> md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}

14
frontend/src/components/Auth/RegisterForm.tsx
View File

@@ -110,10 +110,10 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
return ( return (
<> <>
<div className="mb-2"> <div className="mb-2">
<div className="h-[100%] flex flex-col items-center p-10"> <div className="flex flex-col items-center p-[2.5rem]">
<h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Register </h1> <h1 className="flex flex-col text-white text-[2.5em] font-[800]"> Register </h1>
<div className="mt-5 bg-white/10 backdrop-blur-md p-10 md:px-16 rounded-xl shadow-lg w-full <div className="mt-5 bg-white/10 backdrop-blur-md p-[2.5rem] md:px-16 rounded-xl shadow-lg w-full
md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] h-[31.5em] border border-white/10"> md:max-w-[20em] lg:max-w-[27.5em] min-w-[10em] border border-white/10">
<form <form
onSubmit={handleSubmit} onSubmit={handleSubmit}
@@ -133,7 +133,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Username" placeholder="Username"
value={formData.username} value={formData.username}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-3 ${errors.username ? "border-red-500" : ""}`} extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.username ? "border-red-500" : ""}`}
/> />
</div> </div>
@@ -147,7 +147,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Email" placeholder="Email"
value={formData.email} value={formData.email}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-3 ${errors.email ? "border-red-500" : ""}`} extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.email ? "border-red-500" : ""}`}
/> />
</div> </div>
@@ -161,7 +161,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Password" placeholder="Password"
value={formData.password} value={formData.password}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-3 ${errors.password ? "border-red-500" : ""}`} extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.password ? "border-red-500" : ""}`}
/> />
</div> </div>
<div className="relative w-full"> <div className="relative w-full">
@@ -175,7 +175,7 @@ const RegisterForm: React.FC<SubmitProps> = ({ onSubmit }) => {
placeholder="Confirm Password" placeholder="Confirm Password"
value={formData.confirmPassword} value={formData.confirmPassword}
onChange={handleInputChange} onChange={handleInputChange}
extraClasses={`w-full mb-[1.5em] p-3 ${errors.confirmPassword ? "border-red-500" : ""}`} extraClasses={`w-full mb-[1.5em] p-[0.5rem] ${errors.confirmPassword ? "border-red-500" : ""}`}
/> />
</div> </div>

57
frontend/src/components/Layout/ListRow.tsx
View File

@@ -52,16 +52,17 @@ const ListRow: React.FC<ListRowProps> = ({
<h2 className="text-2xl font-bold">{title}</h2> <h2 className="text-2xl font-bold">{title}</h2>
<p>{description}</p> <p>{description}</p>
</div> </div>
<div className="relative overflow-hidden flex items-center z-0"> <div className="relative overflow-hidden flex items-center z-0">
<ArrowLeftIcon onClick={slideLeft} size={20} className="absolute mr-1 cursor-pointer z-[999]" /> <ArrowLeftIcon onClick={slideLeft} size={20} className="absolute mr-1 cursor-pointer z-[999]" />
<div <div
ref={slider} ref={slider}
className="flex overflow-x-scroll whitespace-nowrap scroll-smooth scrollbar-hide gap-5" className="flex overflow-x-scroll whitespace-nowrap scroll-smooth scrollbar-hide gap-5 pr-20"
style={{ scrollbarWidth: 'none', paddingLeft: "30px", paddingTop: "10px", paddingBottom: "10px" }} style={{ scrollbarWidth: 'none', paddingLeft: "30px", paddingTop: "10px", paddingBottom: "10px", paddingRight: "50px" }}
> >
{items.map((item) => ( {items.map((item) => (
<ListItem <ListItem
key={`${item.type}-${item.id}`} key={`${item.type}-${item.id}`}
@@ -98,35 +99,35 @@ export const ListItem: React.FC<ListItemProps> = ({
streamCategory, streamCategory,
viewers, viewers,
thumbnail, thumbnail,
onItemClick, onItemClick,
}) => { }) => {
return ( return (
<div className=""> <div className="relative pr-[3]">
<div <div
className="min-w-[430px] overflow-hidden flex-shrink-0 flex flex-col bg-purple-900 rounded-lg className="min-w-[430px] overflow-visible flex-shrink-0 flex flex-col bg-purple-900 rounded-lg
cursor-pointer hover:bg-pink-700 hover:scale-105 transition-all" cursor-pointer hover:bg-pink-700 hover:scale-105 transition-all"
onClick={onItemClick} onClick={onItemClick}
> >
<div className="relative w-full pt-[56.25%] overflow-hidden rounded-t-lg"> <div className="relative w-full pt-[56.25%] overflow-hidden rounded-t-lg">
{thumbnail ? ( {thumbnail ? (
<img <img
src={thumbnail} src={thumbnail}
alt={title} alt={title}
className="absolute top-0 left-0 w-full h-full object-cover" className="absolute top-0 left-0 w-full h-full object-cover"
/> />
) : ( ) : (
<div className="absolute top-0 left-0 w-full h-full bg-gray-600" /> <div className="absolute top-0 left-0 w-full h-full bg-gray-600" />
)} )}
</div>
<div className="p-3">
<h3 className="font-semibold text-lg text-center">{title}</h3>
{type === "stream" && <p className="font-bold">{streamer}</p>}
{type === "stream" && (
<p className="text-sm text-gray-300">{streamCategory}</p>
)}
<p className="text-sm text-gray-300">{viewers} viewers</p>
</div>
</div> </div>
<div className="p-3">
<h3 className="font-semibold text-lg text-center">{title}</h3>
{type === "stream" && <p className="font-bold">{streamer}</p>}
{type === "stream" && (
<p className="text-sm text-gray-300">{streamCategory}</p>
)}
<p className="text-sm text-gray-300">{viewers} viewers</p>
</div>
</div>
</div> </div>
); );
}; };

4
frontend/src/components/Layout/Navbar.tsx
View File

@@ -73,7 +73,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
<> <>
<Button <Button
onClick={() => handleSideBar()} onClick={() => handleSideBar()}
extraClasses={`absolute ${showSideBar extraClasses={`fixed ${showSideBar
? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white ? `fixed top-[20px] left-[20px] p-2 text-[1.5rem] text-white hover:text-white
bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h bg-black/30 hover:bg-purple-500/80 rounded-md border border-gray-300 hover:border-white h
over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all ` over:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all `
@@ -84,7 +84,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
</Button> </Button>
<div <div
className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--bg-color)] text-[var(--text-color)] z-[90] overflow-y-auto scrollbar-hide className={`fixed top-0 left-0 w-[250px] h-screen bg-[var(--bg-color)] text-[var(--text-color)] z-[90] overflow-y-auto scrollbar-hide
transition-transform transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0" transition-opacity duration-500 ease-in-out ${showSideBar ? "translate-x-0 opacity-100" : "-translate-x-full opacity-0"
}`} }`}
> >
<Sidebar /> <Sidebar />

6
frontend/src/components/Layout/Sidebar.tsx
View File

@@ -47,7 +47,7 @@ const Sidebar: React.FC<SideBarProps> = () => {
const shownCategory = Object.entries(testCategory).map(([dummyCategory, { dummyLink, dummyImage }]) => { const shownCategory = Object.entries(testCategory).map(([dummyCategory, { dummyLink, dummyImage }]) => {
return ( return (
<li key={dummyCategory} className="flex items-center border border-7 border-black space-x-3 rounded-md p-0 text-center <li key={dummyCategory} className="flex items-center border border-7 border-black space-x-3 rounded-md p-0 text-center
hover:bg-[#800020] hover:scale-110 hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250 m-[0.25em]"> hover:bg-[#800020] hover:shadow-[-1px_1.5px_10px_white] transition-all duration-250 m-[0.25em]">
<img src={dummyImage} alt={dummyCategory} className="w-[2em] h-[2em] bg-white ml-[0.25em]" /> <img src={dummyImage} alt={dummyCategory} className="w-[2em] h-[2em] bg-white ml-[0.25em]" />
<a href={dummyLink} className="pr-[7.5em] pt-[0.75em] pb-[0.75em]">{dummyCategory}</a> <a href={dummyLink} className="pr-[7.5em] pt-[0.75em] pb-[0.75em]">{dummyCategory}</a>
</li> </li>
@@ -57,13 +57,13 @@ const Sidebar: React.FC<SideBarProps> = () => {
return ( return (
<> <>
<div> <div className="overflow-hidden">
<h1 className="style"> Followed </h1> <h1 className="style"> Followed </h1>
<ul> <ul>
{shownStreamers} {shownStreamers}
</ul> </ul>
<h1 className="category-style pt-[0.50em]"> Your Categories </h1> <h1 className="category-style pt-[0.50em] overflow-hidden"> Your Categories </h1>
<ul> <ul>
{shownCategory} {shownCategory}
</ul> </ul>