frishi/threetwo
1
0
Fork 0
Code Issues 9 Pull Requests 6 Actions Packages Projects Releases 2 Wiki Activity

🏗️ Settings styling tweaks

Browse Source
This commit is contained in:
Rishi Ghan
2024-01-10 21:58:50 -05:00
parent b75862398d
commit 9884da06ef
2 changed files with 105 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
src/client/components/ComicDetail/EditMetadataPanel.tsx
View File

@@ -58,90 +58,59 @@ export const EditMetadataPanel = (props): ReactElement => {
<label className="label">Issue Details</label> <label className="label">Issue Details</label>
</div> </div>
<div className="field-body"> <div className="field-body">
<div className="field"> <Field
<p className="control is-expanded has-icons-left"> name="issue_name"
<Field component="input"
name="issue_name" className="appearance-none w-full dark:bg-slate-400 bg-slate-100 h-10 rounded-md border-none text-gray-700 dark:text-slate-200 py-1 pr-7 pl-3 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
component="input" initialValue={data.name}
className="input" placeholder={"Issue Name"}
initialValue={data.name} />
placeholder={"Issue Name"}
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-user-ninja"></i>
</span>
</p>
</div>
</div> </div>
</div> </div>
{/* Issue Number and year */} {/* Issue Number and year */}
<div className="field is-horizontal"> <div className="mt-4 flex flex-row gap-2">
<div className="field-label"></div> <div>
<div className="field-body"> <div className="text-sm">Issue Number</div>
<div className="field"> <Field
<p className="control has-icons-left"> name="issue_number"
<Field component="input"
name="issue_number" className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
component="input" placeholder="Issue Number"
className="input" />
placeholder="Issue Number" <p className="text-xs">Do not enter the first zero</p>
/> </div>
<span className="icon is-small is-left"> <div>
<i className="fa-solid fa-hashtag"></i>
</span>
</p>
<p className="help">Do not enter the first zero</p>
</div>
{/* year */} {/* year */}
<div className="field"> <div className="text-sm">Issue Year</div>
<p className="control"> <Field
<Field name="issue_year"
name="issue_year" component="input"
component="input" className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
className="input" />
/> </div>
</p>
</div> <div>
<div className="text-sm">Page Count</div>
<Field
name="page_count"
component="input"
className="dark:bg-slate-400 w-20 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
placeholder="Page Count"
/>
</div> </div>
</div> </div>
{/* page count */} {/* page count */}
<div className="field is-horizontal">
<div className="field-label"></div>
<div className="field-body">
<div className="field">
<p className="control has-icons-left">
<Field
name="page_count"
component="input"
className="input"
placeholder="Page Count"
/>
<span className="icon is-small is-left">
<i className="fa-solid fa-note-sticky"></i>
</span>
</p>
</div>
</div>
</div>
{/* Description */} {/* Description */}
<div className="field is-horizontal"> <div className="mt-2">
<div className="field-label is-normal"> <label className="text-sm">Description</label>
<label className="label">Description</label> <Field
</div> name={"description"}
<div className="field-body"> className="dark:bg-slate-400 w-full min-h-24 bg-slate-100 py-2 px-2 rounded-md border-gray-300 h-10 dark:text-slate-200 sm:text-md sm:leading-5 focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
<div className="field"> component={TextareaAutosizeAdapter}
<p className="control is-expanded has-icons-left"> placeholder={"Description"}
<Field />
name={"description"}
className="textarea"
component={TextareaAutosizeAdapter}
placeholder={"Description"}
/>
</p>
</div>
</div>
</div> </div>
<hr size="1" /> <hr size="1" />

121
src/client/components/Settings/Settings.tsx
View File

@@ -11,6 +11,7 @@ interface ISettingsProps {}
export const Settings = (props: ISettingsProps): ReactElement => { export const Settings = (props: ISettingsProps): ReactElement => {
const [active, setActive] = useState("gen-db"); const [active, setActive] = useState("gen-db");
console.log(active);
const settingsContent = [ const settingsContent = [
{ {
id: "adc-hubs", id: "adc-hubs",
@@ -67,67 +68,69 @@ export const Settings = (props: ISettingsProps): ReactElement => {
</div> </div>
</div> </div>
</header> </header>
<div className="flex flex-cols max-w-screen-xl mx-auto"> <div className="flex flex-row">
<aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8"> <div className="inset-y-0 w-80 bg-gray-800 text-white h-screen overflow-y-auto">
{map(settingsObject, (settingObject, idx) => { <aside className="px-4 py-4 sm:px-6 sm:py-8 lg:px-8">
return ( {map(settingsObject, (settingObject, idx) => {
<div return (
className="w-64 py-2 text-slate-700 dark:text-slate-400" <div
key={idx} className="w-64 py-2 text-slate-700 dark:text-slate-400"
> key={idx}
<h3 className="text-l pb-2"> >
{settingObject.category.toUpperCase()} <h3 className="text-l pb-2">
</h3> {settingObject.category.toUpperCase()}
{/* First level children */} </h3>
{!isUndefined(settingObject.children) ? ( {/* First level children */}
<ul key={settingObject.id}> {!isUndefined(settingObject.children) ? (
{map(settingObject.children, (item, idx) => { <ul key={settingObject.id}>
return ( {map(settingObject.children, (item, idx) => {
<li key={idx} className="mb-2"> return (
<a <li key={idx} className="mb-2">
className={ <a
item.id.toString() === active className={
? "is-active flex items-center" item.id.toString() === active
: "flex items-center" ? "is-active flex items-center"
} : "flex items-center"
onClick={() => setActive(item.id.toString())} }
> onClick={() => setActive(item.id.toString())}
{item.displayName} >
</a> {item.displayName}
{/* Second level children */} </a>
{!isUndefined(item.children) ? ( {/* Second level children */}
<ul className="pl-4 mt-2"> {!isUndefined(item.children) ? (
{map(item.children, (item, idx) => ( <ul className="pl-4 mt-2">
<li key={item.id} className="mb-2"> {map(item.children, (item, idx) => (
<a <li key={item.id} className="mb-2">
className={ <a
item.id.toString() === active className={
? "is-active flex items-center" item.id.toString() === active
: "flex items-center" ? "is-active flex items-center"
} : "flex items-center"
onClick={() => }
setActive(item.id.toString()) onClick={() =>
} setActive(item.id.toString())
> }
{item.displayName} >
</a> {item.displayName}
</li> </a>
))} </li>
</ul> ))}
) : null} </ul>
</li> ) : null}
); </li>
})} );
</ul> })}
) : null} </ul>
</div> ) : null}
); </div>
})} );
</aside> })}
</aside>
</div>
{/* content for settings */} {/* content for settings */}
<div className="max-w-screen-xl"> <div className="flex mx-12">
<div className="content"> <div className="">
{map(settingsContent, ({ id, content }) => {map(settingsContent, ({ id, content }) =>
active === id ? content : null, active === id ? content : null,
)} )}