Some tailwind simplification

This commit is contained in:
DrMint 2022-09-21 18:12:04 +02:00
parent 06c61d0222
commit ee9a9a67fc
5 changed files with 9 additions and 8 deletions

@ -42,6 +42,7 @@ const layout = {
mainMenuReduced: 6, mainMenuReduced: 6,
mainMenu: 20, mainMenu: 20,
subMenu: 20, subMenu: 20,
navbar: 5,
}; };
module.exports = { module.exports = {

@ -167,7 +167,7 @@ export const AppLayout = ({
className={cJoin( className={cJoin(
`fixed inset-0 m-0 grid touch-pan-y bg-light p-0 text-black `fixed inset-0 m-0 grid touch-pan-y bg-light p-0 text-black
[grid-template-areas:'main_sub_content']`, [grid-template-areas:'main_sub_content']`,
cIf(is1ColumnLayout, "grid-rows-[1fr_5rem] [grid-template-areas:'content''navbar']") cIf(is1ColumnLayout, `grid-rows-[1fr_5rem] [grid-template-areas:'content''navbar']`)
)} )}
style={{ style={{
gridTemplateColumns: is1ColumnLayout gridTemplateColumns: is1ColumnLayout
@ -278,13 +278,13 @@ export const AppLayout = ({
{/* Navbar */} {/* Navbar */}
<div <div
className={cJoin( className={cJoin(
`texture-paper-dots grid grid-cols-[5rem_1fr_5rem] place-items-center `texture-paper-dots z-10 grid grid-cols-[5rem_1fr_5rem] place-items-center
border-t-[1px] border-dotted border-black bg-light [grid-area:navbar]`, border-t-[1px] border-dotted border-black bg-light [grid-area:navbar]`,
cIf(!is1ColumnLayout, "hidden") cIf(!is1ColumnLayout, "hidden")
)}> )}>
<Ico <Ico
icon={mainPanelOpen ? Icon.Close : Icon.Menu} icon={mainPanelOpen ? Icon.Close : Icon.Menu}
className="mt-[.1em] cursor-pointer !text-2xl" className="cursor-pointer !text-2xl"
onClick={() => { onClick={() => {
toggleMainPanelOpen(); toggleMainPanelOpen();
setSubPanelOpen(false); setSubPanelOpen(false);
@ -302,7 +302,7 @@ export const AppLayout = ({
{isDefined(subPanel) && !turnSubIntoContent && ( {isDefined(subPanel) && !turnSubIntoContent && (
<Ico <Ico
icon={subPanelOpen ? Icon.Close : subPanelIcon} icon={subPanelOpen ? Icon.Close : subPanelIcon}
className="mt-[.1em] cursor-pointer !text-2xl" className="cursor-pointer !text-2xl"
onClick={() => { onClick={() => {
toggleSubPanelOpen(); toggleSubPanelOpen();
setMainPanelOpen(false); setMainPanelOpen(false);

@ -90,7 +90,7 @@ const WikiPage = ({ page, ...otherProps }: Props): JSX.Element => {
<div <div
className={cJoin( className={cJoin(
"mb-8 overflow-hidden rounded-lg bg-mid text-center", "mb-8 overflow-hidden rounded-lg bg-mid text-center",
cIf(is3ColumnsLayout, "float-right ml-8 w-[25rem]") cIf(is3ColumnsLayout, "float-right ml-8 w-96")
)}> )}>
{page.thumbnail?.data?.attributes && ( {page.thumbnail?.data?.attributes && (
<Img <Img

@ -341,7 +341,7 @@ export const ChronologyEvent = ({ event, id }: ChronologyEventProps): JSX.Elemen
</ToolTip> </ToolTip>
)} )}
<p className="mt-[0.2rem] grid grid-flow-col gap-1 place-self-start text-xs text-dark"> <p className="grid grid-flow-col gap-1 place-self-start text-xs leading-6 text-dark">
{event.source?.data ? ( {event.source?.data ? (
`(${event.source.data.attributes?.name})` `(${event.source.data.attributes?.name})`
) : ( ) : (

@ -211,7 +211,7 @@ const Wiki = ({ pages, ...otherProps }: Props): JSX.Element => {
)} )}
className={cIf( className={cIf(
isContentPanelAtLeast4xl, isContentPanelAtLeast4xl,
"grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))] gap-x-6 gap-y-8", "grid-cols-[repeat(auto-fill,minmax(15rem,1fr))] gap-x-6 gap-y-8",
"grid-cols-2 gap-x-3 gap-y-5" "grid-cols-2 gap-x-3 gap-y-5"
)} )}
searchingTerm={searchName} searchingTerm={searchName}