info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-08-21 00:21:35 +02:00
Code Issues Releases Wiki Activity

Responsiveness

Browse Source
This commit is contained in:
Kamran Ahmed
2023-07-28 18:46:36 +01:00
parent 5b541dfb3d
commit 35148cb8a3
10 changed files with 148 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/AccountSidebar.astro
View File

@@ -66,17 +66,17 @@ const sidebarLinks = [
id='settings-menu-dropdown' id='settings-menu-dropdown'
class='absolute left-0 right-0 z-10 mt-1 hidden space-y-1.5 bg-white p-2 shadow-lg' class='absolute left-0 right-0 z-10 mt-1 hidden space-y-1.5 bg-white p-2 shadow-lg'
> >
<!--<li>--> <li>
<!-- <a--> <a
<!-- href='/team'--> href='/team'
<!-- class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${--> class={`flex w-full items-center rounded px-3 py-1.5 text-sm text-slate-900 hover:bg-slate-200 ${
<!-- activePageId === 'team' ? 'bg-slate-100' : ''--> activePageId === 'team' ? 'bg-slate-100' : ''
<!-- }`}--> }`}
<!-- >--> >
<!-- <AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />--> <AstroIcon icon={'users'} class={`h-4 w-4 mr-2`} />
<!-- Teams--> Teams
<!-- </a>--> </a>
<!--</li>--> </li>
{ {
sidebarLinks.map((sidebarLink) => { sidebarLinks.map((sidebarLink) => {
const isActive = activePageId === sidebarLink.id; const isActive = activePageId === sidebarLink.id;

10
src/components/CreateTeam/CreateTeamForm.tsx
View File

@@ -190,14 +190,14 @@ export function CreateTeamForm() {
} }
return ( return (
<div className={'mx-auto max-w-[700px] py-6'}> <div className={'mx-auto max-w-[700px] py-1 md:py-6'}>
<div className={'mb-8 flex flex-col items-center'}> <div className={'mb-3 md:mb-8 pb-3 md:pb-0 border-b md:border-b-0 flex flex-col items-start md:items-center'}>
<h1 className={'text-4xl font-bold'}>Create Team</h1> <h1 className={'text-xl md:text-4xl font-bold'}>Create Team</h1>
<p className={'mt-2 text-gray-500'}> <p className={'mt-1 md:mt-2 text-sm md:text-base text-gray-500'}>
Complete the steps below to create your team Complete the steps below to create your team
</p> </p>
</div> </div>
<div className="mb-8 mt-8 flex w-full"> <div className="mb-8 mt-8 hidden sm:flex w-full">
<Stepper <Stepper
activeIndex={stepIndex} activeIndex={stepIndex}
completeSteps={completedSteps} completeSteps={completedSteps}

2
src/components/CreateTeam/RoadmapSelector.tsx
View File

@@ -163,7 +163,7 @@ export function RoadmapSelector(props: RoadmapSelectorProps) {
)} )}
{teamResourceConfig.length > 0 && ( {teamResourceConfig.length > 0 && (
<div className="mt-4 grid grid-cols-3 flex-wrap gap-2.5"> <div className="mt-4 grid grid-cols-1 sm:grid-cols-3 flex-wrap gap-2.5">
{teamResourceConfig.map(({ resourceId, removed: removedTopics }) => { {teamResourceConfig.map(({ resourceId, removed: removedTopics }) => {
const roadmapTitle = const roadmapTitle =
allRoadmaps.find((roadmap) => roadmap.id === resourceId)?.title || allRoadmaps.find((roadmap) => roadmap.id === resourceId)?.title ||

6
src/components/CreateTeam/Step0.tsx
View File

@@ -70,7 +70,7 @@ export function Step0(props: Step0Props) {
return ( return (
<> <>
<div className={'flex flex-row gap-3'}> <div className={'flex flex-col sm:flex-row gap-3'}>
{validTeamTypes.map((validTeamType) => ( {validTeamTypes.map((validTeamType) => (
<button <button
className={`flex flex-grow flex-col items-center rounded-lg border px-5 py-12 ${ className={`flex flex-grow flex-col items-center rounded-lg border px-5 py-12 ${
@@ -100,11 +100,11 @@ export function Step0(props: Step0Props) {
{/*Error message*/} {/*Error message*/}
{error && <div className="mt-4 text-sm text-red-500">{error}</div>} {error && <div className="mt-4 text-sm text-red-500">{error}</div>}
<div className="mt-4 flex flex-row items-center justify-between gap-2"> <div className="mt-4 flex flex-col md:flex-row items-stretch md:items-center justify-between gap-2">
<a <a
href="/account" href="/account"
className={ className={
'rounded-md border border-red-400 bg-white px-8 py-2 text-red-500' 'rounded-md border border-red-400 bg-white px-8 py-2 text-red-500 text-center'
} }
> >
Cancel Cancel

2
src/components/CreateTeam/Step1.tsx
View File

@@ -237,7 +237,7 @@ export function Step1(props: Step1Props) {
</div> </div>
)} )}
<div className="mt-4 flex flex-row items-center justify-between gap-2"> <div className="mt-4 flex flex-col md:flex-row items-center justify-between gap-2">
<button <button
type="button" type="button"
onClick={onBack} onClick={onBack}

16
src/components/CreateTeam/Step2.tsx
View File

@@ -17,7 +17,7 @@ export function Step2(props: Step2Props) {
<> <>
<div className="mt-4 flex w-full flex-col"> <div className="mt-4 flex w-full flex-col">
<div className="mb-1 mt-2"> <div className="mb-1 mt-2">
<h2 className="mb-1.5 text-2xl font-bold">Select Roadmaps</h2> <h2 className="mb-1 md:mb-1.5 text-lg md:text-2xl font-bold">Select Roadmaps</h2>
<p className="text-sm text-gray-700"> <p className="text-sm text-gray-700">
You can always add and customize your roadmaps later. You can always add and customize your roadmaps later.
</p> </p>
@@ -30,7 +30,7 @@ export function Step2(props: Step2Props) {
/> />
</div> </div>
<div className="mt-4 flex flex-row items-center justify-between gap-2"> <div className="mt-4 flex flex-col md:flex-row items-stretch md:items-center justify-between gap-2">
<button <button
type="button" type="button"
onClick={onBack} onClick={onBack}
@@ -41,6 +41,17 @@ export function Step2(props: Step2Props) {
<span className="mr-1">&larr;</span> <span className="mr-1">&larr;</span>
Previous Step Previous Step
</button> </button>
<div className={'flex gap-2'}>
<button
type="button"
onClick={onNext}
className={
'flex-grow rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black md:flex-auto'
}
>
Skip for Now
</button>
<button <button
type="submit" type="submit"
disabled={teamResourceConfig.length === 0} disabled={teamResourceConfig.length === 0}
@@ -53,6 +64,7 @@ export function Step2(props: Step2Props) {
<span className="ml-1">&rarr;</span> <span className="ml-1">&rarr;</span>
</button> </button>
</div> </div>
</div>
</> </>
); );
} }

8
src/components/CreateTeam/Step3.tsx
View File

@@ -76,7 +76,7 @@ export function Step3(props: Step3Props) {
return ( return (
<form className="mt-4 flex w-full flex-col" onSubmit={onSubmit}> <form className="mt-4 flex w-full flex-col" onSubmit={onSubmit}>
<div class="mb-1 mt-2"> <div class="mb-1 mt-2">
<h2 class="mb-2 text-2xl font-bold">Invite your Team</h2> <h2 class="mb-1 md:mb-2 text-lg md:text-2xl font-bold">Invite your Team</h2>
<p class="text-sm text-gray-700"> <p class="text-sm text-gray-700">
Use the form below to invite your team members to your team. You can Use the form below to invite your team members to your team. You can
also invite them later. also invite them later.
@@ -85,7 +85,7 @@ export function Step3(props: Step3Props) {
<div className="mt-4 flex flex-col gap-1"> <div className="mt-4 flex flex-col gap-1">
{users.map((user, userCounter) => { {users.map((user, userCounter) => {
return ( return (
<div className="flex flex-row gap-2" key={user.id}> <div className="flex flex-col sm:flex-row gap-2" key={user.id}>
<input <input
ref={userCounter === users.length - 1 ? emailInputRef : null} ref={userCounter === users.length - 1 ? emailInputRef : null}
autofocus={true} autofocus={true}
@@ -163,7 +163,7 @@ export function Step3(props: Step3Props) {
</div> </div>
)} )}
<div className="mt-4 flex flex-row items-center justify-between gap-2"> <div className="mt-4 flex flex-col sm:flex-row items-stretch md:items-center justify-between gap-2">
<button <button
type="button" type="button"
onClick={onBack} onClick={onBack}
@@ -179,7 +179,7 @@ export function Step3(props: Step3Props) {
type="button" type="button"
onClick={onNext} onClick={onNext}
className={ className={
'rounded-md border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black' 'rounded-md flex-grow md:flex-auto border border-gray-300 bg-white px-4 py-2 text-gray-500 hover:border-gray-400 hover:text-black'
} }
> >
Skip for Now Skip for Now

8
src/components/Navigation/AccountDropdown.astro
View File

@@ -30,6 +30,14 @@ import Icon from '../AstroIcon.astro';
Profile Profile
</a> </a>
</li> </li>
<li class='px-1'>
<a
href='/team'
class='block rounded px-4 py-2 text-sm font-medium text-slate-100 hover:bg-slate-700'
>
Teams
</a>
</li>
<li class='px-1'> <li class='px-1'>
<button <button
class='block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700' class='block w-full rounded px-4 py-2 text-left text-sm font-medium text-slate-100 hover:bg-slate-700'

22
src/components/TeamDropdown/TeamDropdown.tsx
View File

@@ -9,7 +9,7 @@ import { $currentTeam, $teamList } from '../../stores/team';
import { useStore } from '@nanostores/preact'; import { useStore } from '@nanostores/preact';
import { useTeamId } from '../../hooks/use-team-id'; import { useTeamId } from '../../hooks/use-team-id';
import { useToast } from '../../hooks/use-toast'; import { useToast } from '../../hooks/use-toast';
import type {ValidTeamType} from "../CreateTeam/Step0"; import type { ValidTeamType } from '../CreateTeam/Step0';
const allowedStatus = ['invited', 'joined', 'rejected'] as const; const allowedStatus = ['invited', 'joined', 'rejected'] as const;
export type AllowedMemberStatus = (typeof allowedStatus)[number]; export type AllowedMemberStatus = (typeof allowedStatus)[number];
@@ -81,12 +81,17 @@ export function TeamDropdown() {
if ( if (
!user?.email.endsWith('@insightpartners.com') && !user?.email.endsWith('@insightpartners.com') &&
!user?.email.endsWith('@roadmap.sh') && !user?.email.endsWith('@roadmap.sh') &&
!['arikchangma@gmail.com', 'kamranahmed.se@gmail.com', 'stephen.chetcuti@gmail.com'].includes(user?.email!) ![
'arikchangma@gmail.com',
'kamranahmed.se@gmail.com',
'stephen.chetcuti@gmail.com',
].includes(user?.email!)
) { ) {
return null; return null;
} }
return ( return (
<>
<div className="relative mr-2"> <div className="relative mr-2">
<button <button
className="flex w-full cursor-pointer items-center justify-between rounded border p-2 text-sm hover:bg-gray-100" className="flex w-full cursor-pointer items-center justify-between rounded border p-2 text-sm hover:bg-gray-100"
@@ -97,13 +102,14 @@ export function TeamDropdown() {
{pendingTeamIds.length} {pendingTeamIds.length}
</span> </span>
)} )}
<div className="inline-grid grid-cols-[16px_auto] items-center gap-1.5 mr-1.5"> <div className="mr-1.5 inline-grid grid-cols-[16px_auto] items-center gap-1.5">
{isLoading && <Spinner className="h-4 w-4" isDualRing={false} />} {isLoading && <Spinner className="h-4 w-4" isDualRing={false} />}
{!isLoading && ( {!isLoading && (
<img <img
src={ src={
selectedAvatar selectedAvatar
? `${import.meta.env.PUBLIC_AVATAR_BASE_URL ? `${
import.meta.env.PUBLIC_AVATAR_BASE_URL
}/${selectedAvatar}` }/${selectedAvatar}`
: '/images/default-avatar.png' : '/images/default-avatar.png'
} }
@@ -147,7 +153,9 @@ export function TeamDropdown() {
className="flex w-full cursor-pointer items-center gap-2 rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700" className="flex w-full cursor-pointer items-center gap-2 rounded p-2 text-sm font-medium text-slate-100 hover:bg-slate-700"
href={`${pageLink}`} href={`${pageLink}`}
> >
<span className="flex-grow min-w-0 truncate">{team.name}</span> <span className="min-w-0 flex-grow truncate">
{team.name}
</span>
{pendingTeamIds.includes(team._id) && ( {pendingTeamIds.includes(team._id) && (
<span className="flex rounded-md bg-red-500 px-2 text-xs text-white"> <span className="flex rounded-md bg-red-500 px-2 text-xs text-white">
Invite Invite
@@ -167,8 +175,8 @@ export function TeamDropdown() {
</a> </a>
</div> </div>
)} )}
<hr class='my-4' />
</div> </div>
<hr class="my-4" />
</>
); );
} }

2
src/components/TeamSidebar.tsx
View File

@@ -76,7 +76,7 @@ export const TeamSidebar: FunctionalComponent<{
}`} }`}
> >
<img alt={'teams'} src={GroupIcon} class={`mr-2 h-4 w-4`} /> <img alt={'teams'} src={GroupIcon} class={`mr-2 h-4 w-4`} />
Teams Personal Account / Teams
</a> </a>
</li> </li>
{sidebarLinks.map((sidebarLink) => { {sidebarLinks.map((sidebarLink) => {