github
/
developer-roadmap
mirror of https://github.com/kamranahmedse/developer-roadmap.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Responsiveness

Browse Source
pull/8189/head
Kamran Ahmed 3 months ago
parent f94c11d1ea
commit 96de50e15b
2 changed files with 15 additions and 15 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      src/components/Dashboard/PersonalDashboard.tsx
  2. 2
      src/components/HeroSection/FavoriteRoadmaps.tsx

28
src/components/Dashboard/PersonalDashboard.tsx
Unescape View File

@ -168,15 +168,15 @@ function DashboardStats(props: DashboardStatsProps) {
} = props; } = props;
return ( return (
<div className="container mb-3 flex items-center justify-between gap-2 pb-2 pt-6 text-sm text-slate-400"> <div className="container mb-3 flex flex-col gap-4 pb-2 pt-6 text-sm text-slate-400 sm:flex-row sm:items-center sm:justify-between">
<div className="flex w-full items-center justify-between gap-2"> <div className="flex w-full flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<PersonalProfileButton <PersonalProfileButton
isLoading={isLoading} isLoading={isLoading}
name={profile.name} name={profile.name}
username={profile.username} username={profile.username}
avatar={profile.avatar} avatar={profile.avatar}
/> />
<div className="flex items-center gap-2"> <div className="hidden flex-wrap items-center gap-2 md:flex">
<DashboardStatItem <DashboardStatItem
icon={Zap} icon={Zap}
iconClassName="text-yellow-500" iconClassName="text-yellow-500"
@ -385,12 +385,12 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
<div className="container"> <div className="container">
<h2 <h2
id="role-based-roadmaps" id="role-based-roadmaps"
className="text-md font-regular absolute -top-[17px] flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2" className="text-md font-regular absolute -top-[17px] left-4 flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2"
> >
Role Based Roadmaps Role Based Roadmaps
</h2> </h2>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3"> <div className="grid grid-cols-1 gap-3 px-2 sm:grid-cols-2 sm:px-0 lg:grid-cols-3">
{builtInRoleRoadmaps.map((roadmap) => { {builtInRoleRoadmaps.map((roadmap) => {
const roadmapProgress = learningRoadmapsToShow.find( const roadmapProgress = learningRoadmapsToShow.find(
(lr) => lr.resourceId === roadmap.id, (lr) => lr.resourceId === roadmap.id,
@ -421,11 +421,11 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
<div className="relative mt-12 border-t border-t-[#1e293c] pt-12"> <div className="relative mt-12 border-t border-t-[#1e293c] pt-12">
<div className="container"> <div className="container">
<h2 className="text-md font-regular absolute -top-[17px] flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2"> <h2 className="text-md font-regular absolute -top-[17px] left-4 flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2">
Skill Based Roadmaps Skill Based Roadmaps
</h2> </h2>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3"> <div className="grid grid-cols-1 gap-3 px-2 sm:grid-cols-2 sm:px-0 lg:grid-cols-3">
{builtInSkillRoadmaps.map((roadmap) => { {builtInSkillRoadmaps.map((roadmap) => {
const roadmapProgress = learningRoadmapsToShow.find( const roadmapProgress = learningRoadmapsToShow.find(
(lr) => lr.resourceId === roadmap.id, (lr) => lr.resourceId === roadmap.id,
@ -456,11 +456,11 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
<div className="relative mt-12 border-t border-t-[#1e293c] pt-12"> <div className="relative mt-12 border-t border-t-[#1e293c] pt-12">
<div className="container"> <div className="container">
<h2 className="text-md font-regular absolute -top-[17px] flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2"> <h2 className="text-md font-regular absolute -top-[17px] left-4 flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2">
Project Ideas Project Ideas
</h2> </h2>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3"> <div className="grid grid-cols-1 gap-3 px-2 sm:grid-cols-2 sm:px-0 lg:grid-cols-3">
{projectGroups.map((projectGroup) => { {projectGroups.map((projectGroup) => {
return ( return (
<HeroRoadmap <HeroRoadmap
@ -480,11 +480,11 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
<div className="relative mt-12 border-t border-t-[#1e293c] pt-12"> <div className="relative mt-12 border-t border-t-[#1e293c] pt-12">
<div className="container"> <div className="container">
<h2 className="text-md font-regular absolute -top-[17px] flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2"> <h2 className="text-md font-regular absolute -top-[17px] left-4 flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2">
Best Practices Best Practices
</h2> </h2>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3"> <div className="grid grid-cols-1 gap-3 px-2 sm:grid-cols-2 sm:px-0 lg:grid-cols-3">
{builtInBestPractices.map((roadmap) => { {builtInBestPractices.map((roadmap) => {
const roadmapProgress = learningRoadmapsToShow.find( const roadmapProgress = learningRoadmapsToShow.find(
(lr) => lr.resourceId === roadmap.id, (lr) => lr.resourceId === roadmap.id,
@ -515,11 +515,11 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
<div className="relative mt-12 border-t border-t-[#1e293c] pt-12"> <div className="relative mt-12 border-t border-t-[#1e293c] pt-12">
<div className="container"> <div className="container">
<h2 className="text-md font-regular absolute -top-[17px] flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2"> <h2 className="text-md font-regular absolute -top-[17px] left-4 flex rounded-lg border border-[#1e293c] bg-slate-900 px-3 py-1 text-slate-400 sm:left-1/2 sm:-translate-x-1/2">
Questions Questions
</h2> </h2>
<div className="grid grid-cols-1 gap-2 sm:grid-cols-2 md:grid-cols-3"> <div className="grid grid-cols-1 gap-3 px-2 sm:grid-cols-2 sm:px-0 lg:grid-cols-3">
{questionGroups.map((questionGroup) => { {questionGroups.map((questionGroup) => {
return ( return (
<HeroRoadmap <HeroRoadmap
@ -539,7 +539,7 @@ export function PersonalDashboard(props: PersonalDashboardProps) {
</div> </div>
</div> </div>
<div className="grid grid-cols-1 gap-7 bg-gray-50 py-7 sm:gap-16 sm:py-16"> <div className="grid grid-cols-1 gap-5 bg-gray-50 px-4 py-5 sm:gap-16 sm:px-0 sm:py-16">
<FeaturedGuideList <FeaturedGuideList
heading="Guides" heading="Guides"
guides={guides} guides={guides}

2
src/components/HeroSection/FavoriteRoadmaps.tsx
Unescape View File

@ -199,7 +199,7 @@ export function FavoriteRoadmaps(props: FavoriteRoadmapsProps) {
completedProjects.length > 0 && ( completedProjects.length > 0 && (
<button <button
onClick={() => setShowCompleted(!showCompleted)} onClick={() => setShowCompleted(!showCompleted)}
className="flex items-center gap-2 rounded-md text-xs text-slate-400 hover:text-slate-300" className="hidden items-center gap-2 rounded-md text-xs text-slate-400 hover:text-slate-300 sm:flex"
> >
{showCompleted ? ( {showCompleted ? (
<EyeOff className="h-3.5 w-3.5" /> <EyeOff className="h-3.5 w-3.5" />

Write Preview
Loading…
Cancel
Save