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/4269/head
Kamran Ahmed 2 years ago
parent 5b541dfb3d
commit 35148cb8a3
10 changed files with 150 additions and 122 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. 22
      src/components/AccountSidebar.astro
  2. 10
      src/components/CreateTeam/CreateTeamForm.tsx
  3. 2
      src/components/CreateTeam/RoadmapSelector.tsx
  4. 6
      src/components/CreateTeam/Step0.tsx
  5. 2
      src/components/CreateTeam/Step1.tsx
  6. 16
      src/components/CreateTeam/Step2.tsx
  7. 8
      src/components/CreateTeam/Step3.tsx
  8. 8
      src/components/Navigation/AccountDropdown.astro
  9. 22
      src/components/TeamDropdown/TeamDropdown.tsx
  10. 2
      src/components/TeamSidebar.tsx

22
src/components/AccountSidebar.astro
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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) => {

Write Preview
Loading…
Cancel
Save