Skip to content

Commit

Permalink
FEAT: added the restyricted screen size query
Browse files Browse the repository at this point in the history
  • Loading branch information
@SANKALP1011
SANKALP1011 committed Feb 22, 2024
1 parent 4788d20 commit e082129
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 116 deletions.
12 changes: 12 additions & 0 deletions src/Styles/Dashboard/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,16 @@ h2 , h3 , span ,p{
}
.y{
font-size: 17px;
}
.screenSizeDiv{

margin-top: 55%;
width: 100%;
height: 100px;


}
.screenTitle{
font-family: "Shantell Sans", cursive;
font-size: 30px;
}
242 changes: 131 additions & 111 deletions src/app/Dashboard/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,19 @@ const VersionDashboard: React.FC = () => {
const [oldestRepoCard, setShowOldestRepoCard] = useState(true);
const [newestRepoCard, setNewRepoCard] = useState(false);
const [show, setShow] = useState(true);
const [smallScreen , setSmallScreen] = useState(false)

const checkScreenSize = ()=>{

const isMobile = typeof window !== 'undefined' && window.matchMedia("(max-width:1024px)").matches;
if (isMobile) {
setSmallScreen(true)
}
else{
setSmallScreen(false)
}

}

const getFollowerAnalysisData = async () => {
try {
Expand Down Expand Up @@ -284,6 +297,7 @@ const VersionDashboard: React.FC = () => {
};

useEffect(() => {
checkScreenSize()
getFollowerAnalysisData();
getFollowingAnalysisData();
getLanguageCountAnalysisData();
Expand All @@ -297,91 +311,99 @@ const VersionDashboard: React.FC = () => {
getTotalStarData();
}, []);

return followerAnlData.followerCount !== 0 &&
followingAnlData.followingCount !== 0 ? (
return smallScreen ? (
<div className="text-center screenSizeDiv">
<h1 className="text-white screenTitle font-extrabold">
For the perfect view, kindly visit this website on the desktop.
</h1>
</div>
) : (
<div>
<div className="flex flex-row basis-20 mt-10">
<div className="drop-shadow-2xl">
<Grid numItems={1} numItemsSm={1} numItemsLg={2} className="gap-3">
<FollowerProgress
followerCount={followerAnlData.followerCount}
increaseOrDecrease={followerAnlData.increaseOrDecrease}
/>
<FollowingProgress
followingCount={followingAnlData.followingCount}
increaseOrDecrease={followerAnlData.increaseOrDecrease}
<div className="flex flex-row basis-20 mt-10">
<div className="drop-shadow-2xl">
<Grid numItems={1} numItemsSm={1} numItemsLg={2} className="gap-3">
<FollowerProgress
followerCount={followerAnlData.followerCount}
increaseOrDecrease={followerAnlData.increaseOrDecrease}
/>
<FollowingProgress
followingCount={followingAnlData.followingCount}
increaseOrDecrease={followerAnlData.increaseOrDecrease}
/>
</Grid>
<Grid numItems={1} numItemsLg={2} numItemsSm={1}>
<div>
<TotalStarProgress TotalStarsCount={totalStar.TotalStarsCount} />
</div>
<div>
<RepoProgress
RepoCount={repoCount.RepoCount}
increaseOrDecrease={repoCount.increaseOrDecrease}
/>
</Grid>
<Grid numItems={1} numItemsLg={2} numItemsSm={1}>
<div>
<TotalStarProgress TotalStarsCount={totalStar.TotalStarsCount} />
</div>
<div>
<RepoProgress
RepoCount={repoCount.RepoCount}
increaseOrDecrease={repoCount.increaseOrDecrease}
/>
</div>

<div>
<TopRepoStatus topRepo={topRepo} />

</div>
<div className="notationDiv">
<Image src={NotationImage} alt="demo" className="demo ml-5"/>
</div>
</Grid>

<div>
{mostRecCommit && (
<RecentCommitProgress mostRecentCommit={mostRecCommit} />
)}
</div>
</div>

</div>
<div className="langCountCardContainer drop-shadow-2xl">
<div>
<LanguageCount languageCounts={langCount} />
<TopRepoStatus topRepo={topRepo} />
</div>
<div className="heroTitleDiv mt-10 ml-20">
<RoughNotation
type="box"
strokeWidth={5}
color="yellow"
show={show}
multiline={true}
>
<h2 className="heroTitle text-white">Welcomeeeee <span> <p className="text-orange-500 y">Crafted By - Sankalp's Github Profile </p></span></h2>
</RoughNotation>
</div>
<div className="repoFlexBox ml-10 relative group items-start justify-center">
<div className="repoGradinetBack w-full absolute -inset-0.5 bg-gradient-to-r from-violet-600 to-red-600 blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
<Card className="bg-black repoFlexCard ">
<div className="flex flex-row gap-5 mb-5 repoFlexHeading">
<RoughNotation
type="box"
strokeWidth={5}
color="red"
show={show}
>
{" "}
<h3
onClick={() => {
setNewRepoCard(false), setShowOldestRepoCard(true);
}}
className="text-blue-600 font-extrabold font-mono hover:text-yellow-300 hover:cursor-pointer"
>
Oldest Repo

</h3>
</RoughNotation>
<span className="borderLeft ml-3"></span>
<RoughNotation
type="box"
strokeWidth={5}
color="yellow"
show={show}
<div className="notationDiv">
<Image src={NotationImage} alt="demo" className="demo ml-5" />
</div>
</Grid>

<div>
{mostRecCommit && <RecentCommitProgress mostRecentCommit={mostRecCommit} />}
</div>
</div>
<div className="langCountCardContainer drop-shadow-2xl">
<div>
<LanguageCount languageCounts={langCount} />
</div>
<div className="heroTitleDiv mt-10 ml-20">
<RoughNotation
type="box"
strokeWidth={5}
color="yellow"
show={show}
multiline={true}
>
<h2 className="heroTitle text-white">
Welcomeeeee{" "}
<span>
{" "}
<p className="text-orange-500 y">
Crafted By - Sankalp's Github Profile{" "}
</p>
</span>
</h2>
</RoughNotation>
</div>
<div className="repoFlexBox ml-10 relative group items-start justify-center">
<div className="repoGradinetBack w-full absolute -inset-0.5 bg-gradient-to-r from-violet-600 to-red-600 blur opacity-75 group-hover:opacity-100 transition duration-1000 group-hover:duration-500 animate-pulse"></div>
<Card className="bg-black repoFlexCard ">
<div className="flex flex-row gap-5 mb-5 repoFlexHeading">
<RoughNotation
type="box"
strokeWidth={5}
color="red"
show={show}
>
{" "}
<h3
onClick={() => {
setNewRepoCard(false), setShowOldestRepoCard(true);
}}
className="text-blue-600 font-extrabold font-mono hover:text-yellow-300 hover:cursor-pointer"
>
Oldest Repo
</h3>
</RoughNotation>
<span className="borderLeft ml-3"></span>
<RoughNotation
type="box"
strokeWidth={5}
color="yellow"
show={show}
>
<h3
onClick={() => {
setNewRepoCard(true), setShowOldestRepoCard(false);
Expand All @@ -390,41 +412,39 @@ const VersionDashboard: React.FC = () => {
>
Newest Repo
</h3>
</RoughNotation>
</div>
<div className="">
{oldestRepoCard && (
<div>{oldRepo && <OldRepoProgress repoData={oldRepo} />}</div>
)}
{newestRepoCard && (
<div>
<div>
{oldRepo && <NewRepoProgress repoData={oldRepo} />}
</div>
</div>
)}
</div>
</Card>
</div>
</RoughNotation>
</div>
<div className="">
{oldestRepoCard && (
<div>{oldRepo && <OldRepoProgress repoData={oldRepo} />}</div>
)}
{newestRepoCard && (
<div>
<div>{oldRepo && <NewRepoProgress repoData={oldRepo} />}</div>
</div>
)}
</div>
</Card>
</div>
</div>

<div>
<PullRequestProgress
OpenCount={issueCount.OpenCount}
ClosedCount={issueCount.ClosedCount}
/>
<TopicProgress topicCounts={topicCount} />
<TotalLangProgress
TotalCodePushedSinceJoingingGit={
totalCount.TotalCodePushedSinceJoingingGit
}
/>
</div>
<div>
<PullRequestProgress
OpenCount={issueCount.OpenCount}
ClosedCount={issueCount.ClosedCount}
/>
<TopicProgress topicCounts={topicCount} />
<TotalLangProgress
TotalCodePushedSinceJoingingGit={
totalCount.TotalCodePushedSinceJoingingGit
}
/>
</div>
</div>
) : (
<></>
</div>
);
};
};


export default VersionDashboard

export default VersionDashboard;
12 changes: 7 additions & 5 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import Image from "next/image";

import "../Styles/Dashboard/followerProgress.css"

import React from 'react';
import "../Styles/Dashboard/followerProgress.css";

export default function Home() {
return (
<h1>nkn</h1>


return (
<div>
<h1>Welcome to Desktop Version</h1>
<h1>Other Content</h1>
</div>
);
}

0 comments on commit e082129

Please sign in to comment.