ahmed/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 6 Activity

UI tweaks on admin side
All checks were successful
Publish Docker Image / Publish Docker Image (push) Successful in 11s
Details

Browse Source
This commit is contained in:
Ahmed Al-Taiar
2024-10-23 16:52:10 -04:00
parent 353fb3899e
commit f03faabbee
23 changed files with 259 additions and 248 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/Routes.tsx
View File

@@ -35,7 +35,7 @@ const Routes = () => {
<Route path="/admin/resume" page={ResumeAdminResumePage} name="adminResume" /> <Route path="/admin/resume" page={ResumeAdminResumePage} name="adminResume" />
</Set> </Set>
<Set wrap={ScaffoldLayout} title="Projects" titleTo="projects" buttonLabel="New Project" buttonTo="newProject"> <Set wrap={ScaffoldLayout} title="Projects" titleTo="adminProjects" buttonLabel="New Project" buttonTo="newProject">
<Route path="/admin/projects/new" page={ProjectNewProjectPage} name="newProject" /> <Route path="/admin/projects/new" page={ProjectNewProjectPage} name="newProject" />
<Route path="/admin/projects/{id:Int}/edit" page={ProjectEditProjectPage} name="editProject" /> <Route path="/admin/projects/{id:Int}/edit" page={ProjectEditProjectPage} name="editProject" />
<Route path="/admin/projects/{id:Int}" page={ProjectAdminProjectPage} name="adminProject" /> <Route path="/admin/projects/{id:Int}" page={ProjectAdminProjectPage} name="adminProject" />

90
web/src/components/ColorPicker/ColorPicker.tsx
View File

@@ -9,54 +9,50 @@ interface ColorPickerProps {
setColor: React.Dispatch<React.SetStateAction<string>> setColor: React.Dispatch<React.SetStateAction<string>>
} }
const ColorPicker = ({ color, setColor }: ColorPickerProps) => { const ColorPicker = ({ color, setColor }: ColorPickerProps) => (
return ( <div className="flex flex-col space-y-2 bg-base-100 p-2 rounded-xl">
<div className="flex flex-col space-y-2 bg-base-100 p-2 rounded-xl w-min"> <HexColorPicker color={color} onChange={setColor} />
<section className="w-52"> <div className="flex space-x-2">
<HexColorPicker color={color} onChange={setColor} /> {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
</section> <label className="input input-bordered flex items-center gap-2 input-sm grow">
<div className="flex space-x-2 w-52"> <Icon path={mdiPound} className="size-4 opacity-70" />
{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} <HexColorInput color={color} className="w-16" />
<label className="input input-bordered flex items-center gap-2 input-sm w-full grow"> </label>
<Icon path={mdiPound} className="size-4 opacity-70" /> <button
<HexColorInput color={color} className="w-16" /> type="button"
</label> className="btn btn-square btn-sm"
<button onClick={async () => {
type="button" try {
className="btn btn-square btn-sm" await navigator.clipboard.writeText(color)
onClick={async () => { toast.success('Copied color to clipboard')
try { } catch {
await navigator.clipboard.writeText(color) toast.error(`Failed to copy, please try again`)
toast.success('Copied color to clipboard') }
} catch { }}
toast.error(`Failed to copy, please try again`) >
} <Icon path={mdiContentCopy} className="size-4" />
}} </button>
> <button
<Icon path={mdiContentCopy} className="size-4" /> type="button"
</button> className="btn btn-square btn-sm"
<button onClick={async () => {
type="button" try {
className="btn btn-square btn-sm " const clipboardText = await navigator.clipboard.readText()
onClick={async () => { const hexColorRegex =
try { /^#(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i
const clipboardText = await navigator.clipboard.readText()
const hexColorRegex =
/^#(?:(?:[\da-f]{3}){1,2}|(?:[\da-f]{4}){1,2})$/i
if (!hexColorRegex.test(clipboardText)) if (!hexColorRegex.test(clipboardText))
toast.error(`Text is not a valid hex color`) toast.error(`Text is not a valid hex color`)
else setColor(clipboardText) else setColor(clipboardText)
} catch { } catch {
toast.error(`Failed to paste, please try again`) toast.error(`Failed to paste, please try again`)
} }
}} }}
> >
<Icon path={mdiContentPaste} className="size-4" /> <Icon path={mdiContentPaste} className="size-4" />
</button> </button>
</div>
</div> </div>
) </div>
} )
export default ColorPicker export default ColorPicker

7
web/src/components/Portrait/PortraitForm/PortraitForm.tsx
View File

@@ -127,14 +127,13 @@ const PortraitForm = ({ portrait }: PortraitFormProps) => {
) )
else else
return ( return (
<div className="mx-auto w-fit space-y-2"> <div className="mx-auto max-w-prose space-y-2">
{!fileId ? ( {!fileId ? (
<> <>
<Uploader <Uploader
onComplete={onUploadComplete} onComplete={onUploadComplete}
width="22rem" width="auto"
height="34.5rem" height="30rem"
className="flex justify-center"
/> />
<p className="text-center"> <p className="text-center">
High quality, 4:5 aspect ratio image recommended High quality, 4:5 aspect ratio image recommended

48
web/src/components/Project/AdminProject/AdminProject.tsx
View File

@@ -46,29 +46,28 @@ const AdminProject = ({ project }: Props) => {
} }
return ( return (
<div className="flex w-full justify-center"> <div className="flex justify-center">
<div> <div>
<div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100"> <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
<table className="table"> <table className="table">
<thead className="bg-base-200 font-syne"> <thead className="bg-base-200 font-syne">
<tr> <tr>
<th className="w-0"> <th colSpan={2}>
Project {project.id}: {project.title} Project {project.id}: {project.title}
</th> </th>
<th>&nbsp;</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<th>ID</th> <th className="text-right">ID</th>
<td>{project.id}</td> <td>{project.id}</td>
</tr> </tr>
<tr> <tr>
<th>Title</th> <th className="text-right">Title</th>
<td>{project.title}</td> <td>{project.title}</td>
</tr> </tr>
<tr> <tr>
<th>Description</th> <th className="text-right">Description</th>
<td> <td>
<article className="prose"> <article className="prose">
{parseHtml(project.description)} {parseHtml(project.description)}
@@ -76,11 +75,11 @@ const AdminProject = ({ project }: Props) => {
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Date</th> <th className="text-right">Date</th>
<td>{timeTag(project.date)}</td> <td>{timeTag(project.date)}</td>
</tr> </tr>
<tr> <tr>
<th>Images</th> <th className="text-right">Images</th>
<td> <td>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{project.images.map((image, i) => ( {project.images.map((image, i) => (
@@ -98,7 +97,7 @@ const AdminProject = ({ project }: Props) => {
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Tags</th> <th className="text-right">Tags</th>
<td> <td>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{project.tags.map((tag, i) => ( {project.tags.map((tag, i) => (
@@ -120,19 +119,30 @@ const AdminProject = ({ project }: Props) => {
</td> </td>
</tr> </tr>
<tr> <tr>
<th>Links</th> <th className="text-right">Links</th>
<td> <td>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{project.links.map((link, i) => ( {project.links.map((link, i) => (
<a <>
href={link} <a
target="_blank" href={link}
className="badge badge-ghost text-nowrap" target="_blank"
key={i} className="hidden sm:flex badge badge-ghost text-nowrap"
rel="noreferrer" key={i}
> rel="noreferrer"
{link} >
</a> {link}
</a>
<a
href={link}
target="_blank"
className="btn btn-sm btn-square sm:hidden"
key={i}
rel="noreferrer"
>
{i + 1}
</a>
</>
))} ))}
</div> </div>
</td> </td>

8
web/src/components/Project/EditProjectCell/EditProjectCell.tsx
View File

@@ -73,12 +73,12 @@ export const Success = ({ project }: CellSuccessProps<EditProjectById>) => {
) => updateProject({ variables: { id, input } }) ) => updateProject({ variables: { id, input } })
return ( return (
<div className="flex w-full justify-center"> <div className="flex mx-auto max-w-prose justify-center">
<div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100"> <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
<table className="table w-80"> <table className="table">
<thead className="bg-base-200 font-syne"> <thead className="bg-base-200 font-syne">
<tr> <tr>
<th className="w-0">Edit Project {project.id}</th> <th>Edit Project {project.id}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>

6
web/src/components/Project/NewProject/NewProject.tsx
View File

@@ -38,9 +38,9 @@ const NewProject = () => {
createProject({ variables: { input } }) createProject({ variables: { input } })
return ( return (
<div className="flex w-full justify-center"> <div className="flex mx-auto max-w-prose justify-center">
<div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100"> <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
<table className="table w-80"> <table className="table">
<thead className="bg-base-200 font-syne"> <thead className="bg-base-200 font-syne">
<tr> <tr>
<th>New Project</th> <th>New Project</th>

8
web/src/components/Project/ProjectForm/ProjectForm.tsx
View File

@@ -119,7 +119,7 @@ const ProjectForm = (props: ProjectFormProps) => {
<Form<FormProject> <Form<FormProject>
onSubmit={onSubmit} onSubmit={onSubmit}
error={props.error} error={props.error}
className="space-y-2 w-80" className="space-y-2"
> >
<Label name="title" className="form-control w-full"> <Label name="title" className="form-control w-full">
<Label <Label
@@ -261,9 +261,8 @@ const ProjectForm = (props: ProjectFormProps) => {
{appendUploader && ( {appendUploader && (
<Uploader <Uploader
onComplete={onUploadComplete} onComplete={onUploadComplete}
width="20rem" width="auto"
height="30rem" height="30rem"
className="flex justify-center"
maxFiles={10} maxFiles={10}
disabled={props.loading} disabled={props.loading}
/> />
@@ -272,9 +271,8 @@ const ProjectForm = (props: ProjectFormProps) => {
) : ( ) : (
<Uploader <Uploader
onComplete={onUploadComplete} onComplete={onUploadComplete}
width="20rem" width="auto"
height="30rem" height="30rem"
className="flex justify-center pt-3"
maxFiles={10} maxFiles={10}
disabled={props.loading} disabled={props.loading}
/> />

7
web/src/components/Resume/ResumeForm/ResumeForm.tsx
View File

@@ -123,14 +123,13 @@ const ResumeForm = ({ resume }: ResumeFormProps) => {
) )
else else
return ( return (
<div className="mx-auto w-fit space-y-2"> <div className="mx-auto max-w-prose space-y-2">
{!fileId ? ( {!fileId ? (
<> <>
<Uploader <Uploader
onComplete={onUploadComplete} onComplete={onUploadComplete}
width="22rem" width="auto"
height="11.5rem" height="30rem"
className="flex justify-center"
type="pdf" type="pdf"
/> />
</> </>

224
web/src/components/RichTextEditor/RichTextEditor.tsx
View File

@@ -43,120 +43,122 @@ const RichTextEditor = ({ editor }: RichTextEditorProps) => {
return ( return (
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
<div className="flex flex-wrap gap-2 justify-center"> <div className="flex justify-center flex-wrap gap-2">
<button <div className="flex gap-2 h-min justify-center">
type="button" <button
className={`btn btn-sm btn-square ${editor.isActive('link') ? 'btn-primary' : ''}`} type="button"
onClick={setLink} className={`btn btn-sm btn-square ${editor.isActive('link') ? 'btn-primary' : ''}`}
> onClick={setLink}
<Icon path={mdiLinkVariant} className="size-5" /> >
</button> <Icon path={mdiLinkVariant} className="size-5" />
<button </button>
type="button" <button
className="btn btn-sm btn-square" type="button"
onClick={() => editor.chain().focus().unsetLink().run()} className="btn btn-sm btn-square"
disabled={!editor.isActive('link')} onClick={() => editor.chain().focus().unsetLink().run()}
> disabled={!editor.isActive('link')}
<Icon path={mdiLinkVariantOff} className="size-5" /> >
</button> <Icon path={mdiLinkVariantOff} className="size-5" />
<button </button>
type="button" <button
className={`btn btn-sm btn-square ${editor.isActive('bulletList') ? 'btn-primary' : ''}`} type="button"
onClick={() => editor.chain().focus().toggleBulletList().run()} className={`btn btn-sm btn-square ${editor.isActive('bulletList') ? 'btn-primary' : ''}`}
> onClick={() => editor.chain().focus().toggleBulletList().run()}
<Icon path={mdiFormatListBulleted} className="size-5" /> >
</button> <Icon path={mdiFormatListBulleted} className="size-5" />
<button </button>
type="button" <button
className={`btn btn-sm btn-square ${editor.isActive('orderedList') ? 'btn-primary' : ''}`} type="button"
onClick={() => editor.chain().focus().toggleOrderedList().run()} className={`btn btn-sm btn-square ${editor.isActive('orderedList') ? 'btn-primary' : ''}`}
> onClick={() => editor.chain().focus().toggleOrderedList().run()}
<Icon path={mdiFormatListNumbered} className="size-5" /> >
</button> <Icon path={mdiFormatListNumbered} className="size-5" />
<button </button>
type="button" <button
className="btn btn-sm btn-square" type="button"
onClick={() => editor.chain().focus().unsetAllMarks().run()} className="btn btn-sm btn-square"
> onClick={() => editor.chain().focus().unsetAllMarks().run()}
<Icon path={mdiFormatClear} className="size-5" /> >
</button> <Icon path={mdiFormatClear} className="size-5" />
<button </button>
type="button" <button
className="btn btn-sm btn-square" type="button"
onClick={() => editor.chain().focus().undo().run()} className="btn btn-sm btn-square"
disabled={!editor.can().chain().focus().undo().run()} onClick={() => editor.chain().focus().undo().run()}
> disabled={!editor.can().chain().focus().undo().run()}
<Icon path={mdiUndoVariant} className="size-5" /> >
</button> <Icon path={mdiUndoVariant} className="size-5" />
<button </button>
type="button" <button
className="btn btn-sm btn-square" type="button"
onClick={() => editor.chain().focus().redo().run()} className="btn btn-sm btn-square"
disabled={!editor.can().chain().focus().redo().run()} onClick={() => editor.chain().focus().redo().run()}
> disabled={!editor.can().chain().focus().redo().run()}
<Icon path={mdiRedoVariant} className="size-5" /> >
</button> <Icon path={mdiRedoVariant} className="size-5" />
</div> </button>
<div className="flex flex-wrap gap-2 justify-center"> </div>
<button <div className="flex gap-2 h-min justify-center">
type="button" <button
className={`btn btn-sm btn-square ${editor.isActive('bold') ? 'btn-primary' : ''}`} type="button"
onClick={() => editor.chain().focus().toggleBold().run()} className={`btn btn-sm btn-square ${editor.isActive('bold') ? 'btn-primary' : ''}`}
disabled={!editor.can().chain().focus().toggleBold().run()} onClick={() => editor.chain().focus().toggleBold().run()}
> disabled={!editor.can().chain().focus().toggleBold().run()}
<Icon path={mdiFormatBold} className="size-5" /> >
</button> <Icon path={mdiFormatBold} className="size-5" />
<button </button>
type="button" <button
className={`btn btn-sm btn-square ${editor.isActive('italic') ? 'btn-primary' : ''}`} type="button"
onClick={() => editor.chain().focus().toggleItalic().run()} className={`btn btn-sm btn-square ${editor.isActive('italic') ? 'btn-primary' : ''}`}
disabled={!editor.can().chain().focus().toggleItalic().run()} onClick={() => editor.chain().focus().toggleItalic().run()}
> disabled={!editor.can().chain().focus().toggleItalic().run()}
<Icon path={mdiFormatItalic} className="size-5" /> >
</button> <Icon path={mdiFormatItalic} className="size-5" />
<button </button>
type="button" <button
className={`btn btn-sm btn-square ${editor.isActive('underline') ? 'btn-primary' : ''}`} type="button"
onClick={() => editor.chain().focus().toggleUnderline().run()} className={`btn btn-sm btn-square ${editor.isActive('underline') ? 'btn-primary' : ''}`}
disabled={!editor.can().chain().focus().toggleUnderline().run()} onClick={() => editor.chain().focus().toggleUnderline().run()}
> disabled={!editor.can().chain().focus().toggleUnderline().run()}
<Icon path={mdiFormatUnderline} className="size-5" /> >
</button> <Icon path={mdiFormatUnderline} className="size-5" />
<button </button>
type="button" <button
className={`btn btn-sm btn-square ${editor.isActive('static') ? 'btn-primary' : ''}`} type="button"
onClick={() => editor.chain().focus().toggleStrike().run()} className={`btn btn-sm btn-square ${editor.isActive('static') ? 'btn-primary' : ''}`}
disabled={!editor.can().chain().focus().toggleStrike().run()} onClick={() => editor.chain().focus().toggleStrike().run()}
> disabled={!editor.can().chain().focus().toggleStrike().run()}
<Icon path={mdiFormatStrikethrough} className="size-5" /> >
</button> <Icon path={mdiFormatStrikethrough} className="size-5" />
<button </button>
type="button" <button
className={`btn btn-sm btn-square ${editor.isActive('code') ? 'btn-primary' : ''}`} type="button"
onClick={() => editor.chain().focus().toggleCode().run()} className={`btn btn-sm btn-square ${editor.isActive('code') ? 'btn-primary' : ''}`}
disabled={!editor.can().chain().focus().toggleCode().run()} onClick={() => editor.chain().focus().toggleCode().run()}
> disabled={!editor.can().chain().focus().toggleCode().run()}
<Icon path={mdiXml} className="size-5" /> >
</button> <Icon path={mdiXml} className="size-5" />
<button </button>
type="button" <button
className={`btn btn-sm btn-square ${editor.isActive('codeBlock') ? 'btn-primary' : ''}`} type="button"
onClick={() => editor.chain().focus().toggleCodeBlock().run()} className={`btn btn-sm btn-square ${editor.isActive('codeBlock') ? 'btn-primary' : ''}`}
disabled={!editor.can().chain().focus().toggleCodeBlock().run()} onClick={() => editor.chain().focus().toggleCodeBlock().run()}
> disabled={!editor.can().chain().focus().toggleCodeBlock().run()}
<Icon path={mdiCodeBracesBox} className="size-5" /> >
</button> <Icon path={mdiCodeBracesBox} className="size-5" />
<button </button>
type="button" <button
className={`btn btn-sm btn-square ${editor.isActive('blockquote') ? 'btn-primary' : ''}`} type="button"
onClick={() => editor.chain().focus().toggleBlockquote().run()} className={`btn btn-sm btn-square ${editor.isActive('blockquote') ? 'btn-primary' : ''}`}
> onClick={() => editor.chain().focus().toggleBlockquote().run()}
<Icon path={mdiFormatQuoteClose} className="size-5" /> >
</button> <Icon path={mdiFormatQuoteClose} className="size-5" />
</button>
</div>
</div> </div>
<EditorContent <EditorContent
editor={editor} editor={editor}
className="textarea textarea-bordered font-normal prose" className="textarea textarea-bordered font-normal prose max-w-full"
/> />
</div> </div>
) )

6
web/src/components/Social/EditSocialCell/EditSocialCell.tsx
View File

@@ -71,9 +71,9 @@ export const Success = ({ social }: CellSuccessProps<EditSocialById>) => {
} }
return ( return (
<div className="flex w-full justify-center"> <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
<div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100"> <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
<table className="table w-80"> <table className="table">
<thead className="bg-base-200 font-syne"> <thead className="bg-base-200 font-syne">
<tr> <tr>
<th className="w-0">Edit Social {social.id}</th> <th className="w-0">Edit Social {social.id}</th>

6
web/src/components/Social/NewSocial/NewSocial.tsx
View File

@@ -38,9 +38,9 @@ const NewSocial = () => {
createSocial({ variables: { input } }) createSocial({ variables: { input } })
return ( return (
<div className="flex w-full justify-center"> <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
<div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100"> <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
<table className="table w-80"> <table className="table">
<thead className="bg-base-200 font-syne"> <thead className="bg-base-200 font-syne">
<tr> <tr>
<th>New Social</th> <th>New Social</th>

21
web/src/components/Social/Social/Social.tsx
View File

@@ -44,31 +44,32 @@ const Social = ({ social }: Props) => {
} }
return ( return (
<div className="flex w-full justify-center"> <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
<div className="w-80"> <div className="w-full">
<div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100"> <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
<table className="table"> <table className="table">
<thead className="bg-base-200 font-syne"> <thead className="bg-base-200 font-syne">
<th className="w-0"> <tr>
Social {social.id}: {social.name} <th colSpan={2}>
</th> Social {social.id}: {social.name}
<th>&nbsp;</th> </th>
</tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<th>ID</th> <th className="text-right">ID</th>
<td>{social.id}</td> <td>{social.id}</td>
</tr> </tr>
<tr> <tr>
<th>Type</th> <th className="text-right">Type</th>
<td>{getLogoComponent(social.type)}</td> <td>{getLogoComponent(social.type)}</td>
</tr> </tr>
<tr> <tr>
<th>Name</th> <th className="text-right">Name</th>
<td>{social.name}</td> <td>{social.name}</td>
</tr> </tr>
<tr> <tr>
<th>Username</th> <th className="text-right">Username</th>
<td>{social.username}</td> <td>{social.username}</td>
</tr> </tr>
</tbody> </tbody>

6
web/src/components/Social/SocialCell/SocialCell.tsx
View File

@@ -33,6 +33,6 @@ export const Failure = ({
export const Success = ({ export const Success = ({
social, social,
}: CellSuccessProps<FindSocialById, FindSocialByIdVariables>) => { }: CellSuccessProps<FindSocialById, FindSocialByIdVariables>) => (
return <Social social={social} /> <Social social={social} />
} )

2
web/src/components/Social/SocialForm/SocialForm.tsx
View File

@@ -99,7 +99,7 @@ const SocialForm = (props: SocialFormProps) => {
<Form<FormSocial> <Form<FormSocial>
onSubmit={onSubmit} onSubmit={onSubmit}
error={props.error} error={props.error}
className="h-128 max-w-80 space-y-2" className="h-128 space-y-2"
> >
<Label name="name" className="form-control w-full"> <Label name="name" className="form-control w-full">
<Label <Label

4
web/src/components/Tag/EditTagCell/EditTagCell.tsx
View File

@@ -59,8 +59,8 @@ export const Success = ({ tag }: CellSuccessProps<EditTagById>) => {
updateTag({ variables: { id, input } }) updateTag({ variables: { id, input } })
return ( return (
<div className="flex w-full justify-center"> <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
<div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100"> <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
<table className="table"> <table className="table">
<thead className="bg-base-200 font-syne"> <thead className="bg-base-200 font-syne">
<tr> <tr>

4
web/src/components/Tag/NewTag/NewTag.tsx
View File

@@ -34,8 +34,8 @@ const NewTag = () => {
const onSave = (input: CreateTagInput) => createTag({ variables: { input } }) const onSave = (input: CreateTagInput) => createTag({ variables: { input } })
return ( return (
<div className="flex w-full justify-center"> <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
<div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100"> <div className="overflow-hidden w-full overflow-x-auto rounded-xl bg-base-100">
<table className="table"> <table className="table">
<thead className="bg-base-200 font-syne"> <thead className="bg-base-200 font-syne">
<tr> <tr>

10
web/src/components/Tag/Tag/Tag.tsx
View File

@@ -42,8 +42,8 @@ const Tag = ({ tag }: Props) => {
} }
return ( return (
<div className="flex w-full justify-center"> <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
<div className="w-80"> <div className="w-full">
<div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100"> <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
<table className="table"> <table className="table">
<thead className="bg-base-200 font-syne"> <thead className="bg-base-200 font-syne">
@@ -54,15 +54,15 @@ const Tag = ({ tag }: Props) => {
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<th>ID</th> <th className="text-right">ID</th>
<td>{tag.id}</td> <td>{tag.id}</td>
</tr> </tr>
<tr> <tr>
<th>Tag</th> <th className="text-right">Tag</th>
<td>{tag.tag}</td> <td>{tag.tag}</td>
</tr> </tr>
<tr> <tr>
<th>Color</th> <th className="text-right">Color</th>
<td> <td>
<div <div
className="badge whitespace-nowrap" className="badge whitespace-nowrap"

2
web/src/components/Tag/TagForm/TagForm.tsx
View File

@@ -35,7 +35,7 @@ const TagForm = (props: TagFormProps) => {
<Form<FormTag> <Form<FormTag>
onSubmit={onSubmit} onSubmit={onSubmit}
error={props.error} error={props.error}
className="max-w-56 space-y-2" className="space-y-2"
> >
<Label name="tag" className="form-control w-full"> <Label name="tag" className="form-control w-full">
<Label <Label

2
web/src/components/Tag/Tags/Tags.tsx
View File

@@ -50,7 +50,7 @@ const TagsList = ({ tags }: FindTags) => {
<th className="w-0">&nbsp;</th> <th className="w-0">&nbsp;</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody className="overflow-y-scroll">
{tags.map((tag, i) => { {tags.map((tag, i) => {
const actionButtons = ( const actionButtons = (
<> <>

2
web/src/components/Tag/TagsSelector/TagsSelector.tsx
View File

@@ -26,7 +26,7 @@ const TagsSelector = ({
}, [selectedTags, _tags]) }, [selectedTags, _tags])
return ( return (
<div className="w-80 space-y-2"> <div className="space-y-2">
{tags.length > 0 && ( {tags.length > 0 && (
<> <>
<p className="font-semibold">Tags</p> <p className="font-semibold">Tags</p>

34
web/src/components/Title/AdminTitlesCell/AdminTitlesCell.tsx
View File

@@ -29,22 +29,24 @@ export const Failure = ({
}: CellFailureProps<AdminTitlesQueryVariables>) => <CellFailure error={error} /> }: CellFailureProps<AdminTitlesQueryVariables>) => <CellFailure error={error} />
export const Success = ({ titles }: CellSuccessProps<AdminTitlesQuery>) => ( export const Success = ({ titles }: CellSuccessProps<AdminTitlesQuery>) => (
<div className="flex w-full justify-center"> <div className="flex mx-auto max-w-80 sm:max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl 2xl:max-w-2xl justify-center">
<div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100"> <div className="w-full">
<table className="table w-80"> <div className="overflow-hidden overflow-x-auto rounded-xl bg-base-100">
<thead className="bg-base-200 font-syne"> <table className="table">
<tr> <thead className="bg-base-200 font-syne">
<th className="w-0">Titles</th> <tr>
</tr> <th className="w-0">Titles</th>
</thead> </tr>
<tbody> </thead>
<tr> <tbody>
<th> <tr>
<TitlesForm titles={titles} /> <th>
</th> <TitlesForm titles={titles} />
</tr> </th>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</div> </div>
</div> </div>
) )

4
web/src/components/Title/TitlesForm/TitlesForm.tsx
View File

@@ -55,9 +55,9 @@ const TitlesForm = ({ titles }: TitlesFormProps) => {
}) })
return ( return (
<Form onSubmit={onSubmit} className="max-w-80 space-y-2"> <Form onSubmit={onSubmit} className="space-y-2">
<p className="text-center opacity-70"> <p className="text-center opacity-70">
The first one gets displayed for longer The first title gets displayed for longer
</p> </p>
{Array.from({ length: MAX_TITLES }).map((_, i) => ( {Array.from({ length: MAX_TITLES }).map((_, i) => (
<Label key={i} name={`title${i}`} className="form-control w-full"> <Label key={i} name={`title${i}`} className="form-control w-full">

4
web/src/index.css
View File

@@ -23,3 +23,7 @@
.ProseMirror:focus { .ProseMirror:focus {
outline: none; outline: none;
} }
.w-full .react-colorful {
width: auto;
}