Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Responsive for all screen sizes #510

Merged
merged 1 commit into from
Aug 10, 2024
Merged

Responsive for all screen sizes #510

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions frontend/src/components/Auth/firebase.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,25 @@ import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";

// Your web app's Firebase configuration
// const firebaseConfig = {
// apiKey: import.meta.env.VITE_API_KEY,
// authDomain: import.meta.env.VITE_AUTH_DOMAIN,
// projectId: import.meta.env.VITE_PROJECT_ID,
// storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
// messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
// appId: import.meta.env.VITE_APP_ID,
// databaseURL: import.meta.env.VITE_DATABASE_URL,
// };


const firebaseConfig = {
apiKey: import.meta.env.VITE_API_KEY,
authDomain: import.meta.env.VITE_AUTH_DOMAIN,
projectId: import.meta.env.VITE_PROJECT_ID,
storageBucket: import.meta.env.VITE_STORAGE_BUCKET,
messagingSenderId: import.meta.env.VITE_MESSAGING_SENDER_ID,
appId: import.meta.env.VITE_APP_ID,
databaseURL: import.meta.env.VITE_DATABASE_URL,
apiKey: "AIzaSyBNZqJmtwAqYuE0zrtdSMdgcoXZSoRdMew",
authDomain: "opensource-2faad.firebaseapp.com",
projectId: "opensource-2faad",
storageBucket: "opensource-2faad.appspot.com",
messagingSenderId: "1060453831050",
appId: "1:1060453831050:web:4e94554bd4ec6e9f37f873",
measurementId: "G-QL0FTXFWEH"
};

// Initialize Firebase
Expand All @@ -19,12 +30,3 @@ export const auth = getAuth(app);
export const db = getFirestore(app);
export default app;

// const firebaseConfig = {
// apiKey: "AIzaSyBNZqJmtwAqYuE0zrtdSMdgcoXZSoRdMew",
// authDomain: "opensource-2faad.firebaseapp.com",
// projectId: "opensource-2faad",
// storageBucket: "opensource-2faad.appspot.com",
// messagingSenderId: "1060453831050",
// appId: "1:1060453831050:web:4e94554bd4ec6e9f37f873",
// measurementId: "G-QL0FTXFWEH"
// };
39 changes: 27 additions & 12 deletions frontend/src/components/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,10 @@ import { Link } from "react-router-dom";
const Footer = () => {
const currentYear = new Date().getFullYear();
return (

<div className="h-[300px] w-full flex flex-col bgfooter sm:h-full" style={{padding:"66px",marginTop:"13rem"}}>



<div
className="h-[300px] w-screen flex flex-col bgfooter sm:h-full"
style={{ padding: "66px", marginTop: "13rem" }}
>
{/* //for logo and social links */}
<div className="sec1 xs:text-[36px]">
<div>SPRING</div>
Expand All @@ -26,22 +25,34 @@ const Footer = () => {
<div className="sec2 ">
<ul className="company sm:gap-[10px] sm:grid sm:grid-cols-1 sm:p-[10px] sm:text-center">
<li>
<Link to="/aboutus" className="hov" >About Us</Link>
<Link to="/aboutus" className="hov">
About Us
</Link>
</li>
<li>
<Link to="/culture" className="hov" >Culture</Link>
<Link to="/culture" className="hov">
Culture
</Link>
</li>
<li>
<Link to="/blog" className="hov" >Blogs</Link>
<Link to="/blog" className="hov">
Blogs
</Link>
</li>
<li>
<Link to="/terms" className="hov" >Terms and Policy</Link>
<Link to="/terms" className="hov">
Terms and Policy
</Link>
</li>
<li>
<Link to="/contactus" className="hov" >Help and Support</Link>
<Link to="/contactus" className="hov">
Help and Support
</Link>
</li>
<li>
<Link to="/contributors" className="hov">Our Contributors</Link>
<Link to="/contributors" className="hov">
Our Contributors
</Link>
</li>
</ul>
</div>
Expand All @@ -52,7 +63,11 @@ const Footer = () => {
<span className="icons">
<a href="/" target="_blank" rel="noopener noreferrer">
{" "}
<AiOutlineInstagram color="white" fontSize={25} className="ico " />
<AiOutlineInstagram
color="white"
fontSize={25}
className="ico "
/>
</a>
</span>
<span className="icons">
Expand Down
87 changes: 39 additions & 48 deletions frontend/src/components/Home/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,38 +58,39 @@ function Main() {
}, []);

return (
<div className="flex flex-col h-full gap-4 w-full">
<div
className="flex flex-col h-auto gap-4 w-full"
style={{ maxWidth: "calc(100vw - 80px)" }}
>
{/* Top user section */}
<UserIconSection />
{/* Middle */}
<div className="w-full mb-6 h-[25%]">
<div className="w-full mb-6 h-auto">
<RecentlyPlayed
setCurrentSong={setCurrentSong}
recentlyPlayedSongs={recentlyPlayedSongs}
/>
</div>

{/* Bottom */}
<div className="h-[75%] w-full">
<div className="flex h-full gap-4">
{/* Left section */}
<div className="flex flex-col gap-4 w-full h-full">
<div className="h-[40%]">
<TopArtists setCurrentArtist={setCurrentArtist} />
</div>
<div className="flex h-[60%] gap-4 w-full">
<Genres />
<TopSongs
currentArtist={currentArtist}
setCurrentSong={setCurrentSong}
/>
</div>
<div className="flex flex-row xs:flex-col-reverse h-auto w-full gap-4 ">
{/* Left section */}
<div className="flex flex-col gap-4 w-auto sm:w-[50%] xs:w-full ">
<div className=" w-full h-auto">
<TopArtists setCurrentArtist={setCurrentArtist} />
</div>
{/* Right section */}
<div className="w-[30%] min-w-[300px] h-[80%] relative">
<MusicPlayer currSong={currentSong} shouldAutoPlay={true} />
<div className="flex h-auto flex-row sm:flex-col gap-4 w-full">
<Genres />
<TopSongs
currentArtist={currentArtist}
setCurrentSong={setCurrentSong}
/>
</div>
</div>
{/* Right section */}
<div className="w-[30%] md:w-[40%] sm:w-[50%] max-w-[300px] sm:max-w-none xs:w-full ">
<MusicPlayer currSong={currentSong} shouldAutoPlay={true} />
</div>
</div>
</div>
);
Expand Down Expand Up @@ -147,16 +148,16 @@ function RecentlyPlayedElement({ setCurrentSong, song, name, image, singer }) {

function Genres() {
return (
<div className="bg-[#18181D] w-full h-full rounded-lg" style={{marginTop:"50px"}}>
<div className="h-full w-full flex flex-col p-2">
<div className="flex h-[15%] justify-between items-center text-center pl-4 pr-4">
<div className="bg-[#18181D] w-[45%] sm:w-full max-h-fit rounded-lg">
<div className="w-full flex flex-col p-4">
<div className="flex justify-between items-center ">
<h1 className="text-2xl text-white font-medium">Genres</h1>
<h3 className="text-white text-lg">See all</h3>
</div>
<div className="h-full p-2">
<div className="flex gap-4 h-full flex-col flex-1 p-2 pl-4 pr-4">
<div className="flex w-full">
<div className="flex gap-4 w-full flex-col pt-4">
{/* Genre boxes */}
<div className="flex h-full gap-4">
<div className="flex w-full gap-4">
<div className="bg-[#E76E67] flex flex-1 justify-center text-xl font-medium items-center rounded-lg">
Dance/Electric
</div>
Expand Down Expand Up @@ -206,7 +207,7 @@ export function TopSongsElement({
>
<div className="flex gap-4 justify-start">
<div className="text-center m-auto">{index}</div>
<div className="flex gap-4">
<div className="flex gap-2">
<img src={img} className="w-10 h-10 object-cover rounded-sm" />
<div className="text-sm text-start">
<div>{song.name}</div>
Expand Down Expand Up @@ -244,18 +245,14 @@ function TopSongs({ currentArtist, setCurrentSong }) {
// console.log(topSongs)

return (

<div className="bg-[#18181D] w-full h-full rounded-lg" style={{marginTop:"50px"}}>



<div className="bg-[#18181D] w-full max-h-80 py-4 px-1 rounded-lg">
<div className="w-full h-full flex flex-col">
<div className="flex h-[15%] justify-between items-center text-center p-1 ml-4 mr-4 mt-2">
<div className="flex justify-between items-center px-4 mb-2">
<h1 className="text-2xl text-white font-medium">{title}</h1>
<h3 className="text-white text-lg">See all</h3>
</div>
{/* Top chart list */}
<div className="flex flex-col gap-2 overflow-scroll p-2">
<div className="flex flex-col gap-2 overflow-y-auto ">
{topSongs.slice(0, 10).map((song, index) => (
<TopSongsElement
key={index}
Expand Down Expand Up @@ -285,14 +282,12 @@ function TopArtistElement({
return (
<div
key={id}
className="flex flex-1 p-2 flex-col gap-2 hover:cursor-pointer"
className="flex p-2 flex-col gap-2 hover:cursor-pointer"
onClick={() => onClick(name)}
>
<img src={img} className="h-[60%] aspect-square rounded-lg object-fill" />
<img src={img} className=" w-14 h-14 object-cover rounded-lg " />
<div className="flex h-[20%] flex-col gap-1">
<h2 className="font-medium text-white text-[1em]">
{name.toUpperCase()}
</h2>
<h2 className="font-medium text-white text-sm">{name.toUpperCase()}</h2>
{/* <h4 className="text-white font-medium text-[0.9em]">top charts: {weeks_on_chart} </h4> */}
</div>
</div>
Expand All @@ -315,17 +310,13 @@ function TopArtists({ setCurrentArtist }) {
}, []);

return (

<div className="bg-[#18181D] w-full h-full rounded-lg" style={{height:"14rem",padding:"2rem",marginTop:"2rem"}}>



<div className="flex flex-col h-[100%] pl-4 pr-4 gap-2 pt-2">
<div className="flex h-[15%] justify-between items-center text-center p-1">
<div className="bg-[#18181D] w-full h-auto rounded-lg mt-8 p-4">
<div className="flex flex-col gap-2 ">
<div className="flex justify-between items-center">
<h1 className="text-2xl text-white font-medium">Top Artists</h1>
<h3 className="text-white text-lg">See all</h3>
</div>
<div className="flex h-[85%] gap-4">
<div className="flex overflow-x-auto w-full gap-4">
{artists &&
artists.songs
.slice(0, 8)
Expand All @@ -348,8 +339,8 @@ function TopArtists({ setCurrentArtist }) {

function Home({ setCurrPage }) {
return (
<div className="w-screen h-screen p-4 text-center">
<div className="w-full h-full flex gap-4">
<div className="max-w-screen h-auto p-4 text-center">
<div className="max-w-screen h-auto flex gap-4">
<Navbar setCurrPage={setCurrPage} />
<Main />
</div>
Expand Down
23 changes: 17 additions & 6 deletions frontend/src/components/MusicPlayer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,15 +40,22 @@ function MusicPlayer({ currSong, shouldAutoPlay, setSongHasEnded }) {
};

return (
<div className="bg-[#18181D] w-full h-full rounded-lg" style={{ marginTop: "2rem", height: "34.8rem" }}>
<div className="bg-[#18181D] w-full h-full rounded-lg mt-8 ">
<div className="flex flex-col h-full justify-between p-2">
{/* Image and like details */}
<div className="flex h-full pt-6">
<div className={`flex justify-center likeIconOuter w-[20%] h-[20%] ${isLiked ? "clicked" : ""}`}>
<div
className={`flex justify-center likeIconOuter w-[20%] h-[20%] ${
isLiked ? "clicked" : ""
}`}
>
<AiFillLike
className={` mt-2 likeIcon ${isLiked ? "clicked" : ""}`}
onClick={handleLikeClick}
style={{ color: isLiked ? 'red' : 'currentColor', fontSize: '27px' }}
onClick={handleLikeClick}
style={{
color: isLiked ? "red" : "currentColor",
fontSize: "27px",
}}
/>
<div className="vertical-line vertical-line-1"></div>
<div className="vertical-line vertical-line-2"></div>
Expand All @@ -58,7 +65,11 @@ function MusicPlayer({ currSong, shouldAutoPlay, setSongHasEnded }) {
</div>
{/* Song Image */}
<div className="flex flex-col justify-start gap-4 h-full w-[60%]">
<img src={songImage} alt="song image" className="rounded-2xl w-full aspect-square" />
<img
src={songImage}
alt="song image"
className="rounded-2xl w-full aspect-square"
/>
<div className="flex flex-col gap-1">
<h2 className="text-white font-medium text-2xl">{songName}</h2>
<h3 className="text-white">{artistName}</h3>
Expand All @@ -78,7 +89,7 @@ function MusicPlayer({ currSong, shouldAutoPlay, setSongHasEnded }) {
src={audioUrl}
customIcons={customIcons}
onEnded={() => {
setSongHasEnded(true)
setSongHasEnded(true);
}}
/>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/Navbar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { RiHome5Fill } from "react-icons/ri";
function Navbar() {

return (
<div className="w-[5%] min-w-[70px] max-w-[80px] h-full rounded-lg">
<div className="min-w-[70px] max-w-[80px] h-full rounded-lg">
<div className="flex flex-col gap-3 w-full h-full">
<div className="flex p-4 flex-col gap-6 rounded-lg items-center justify-center hover:bg-gray-800">
<IoReorderThreeOutline className="w-full h-full scale-[1.2] hover:cursor-pointer" />
Expand Down
6 changes: 3 additions & 3 deletions frontend/tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,10 @@ export default {
extend: {
screens: {
"h-md": { raw: "(max-height: 768px)" },
sm: { max: "690px" },
lg: { max: "1800px" },
sm: { max: "769px" },
lg: { max: "1280px" },
lgm: { max: "1140px" },
md: { max: "990px" },
md: { max: "1080px" },
xs: { max: "480px" },
minmd: "1700px",
minlg: "2100px",
Expand Down
Loading