Skip to content

Commit

Permalink
Merge pull request #510 from Utsavladia/responsive
Browse files Browse the repository at this point in the history 
Responsive for all screen sizes
  • Loading branch information
@saurabhsingh720
saurabhsingh720 authored Aug 10, 2024
2 parents 9784879 + 15e6fb0 commit 0df5d1d
Show file tree
Hide file tree
Showing 6 changed files with 105 additions and 86 deletions.
34 changes: 18 additions & 16 deletions frontend/src/components/Auth/firebase.js
View file
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
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
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
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
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
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

0 comments on commit 0df5d1d

Please sign in to comment.