Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity

Reduced width for the minimized mainpanel

This commit is contained in:
DrMint 2022-02-20 18:01:50 +01:00
parent 54f8170bac
commit 1a4b73f1f5
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/AppLayout.tsx
View File

@ -67,19 +67,19 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
});
const mainPanelClass = `fixed desktop:left-0 desktop:top-0 desktop:bottom-0 ${
mainPanelReduced ? "desktop:w-[8rem]" : "desktop:w-[20rem]"
mainPanelReduced ? "desktop:w-[6rem]" : "desktop:w-[20rem]"
}`;
const subPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:w-[20rem] ${
mainPanelReduced ? " desktop:left-[8rem]" : "desktop:left-[20rem]"
mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]"
}`;
let contentPanelClass = "";
if (props.subPanel) {
contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
mainPanelReduced ? "desktop:left-[28rem]" : "desktop:left-[40rem]"
mainPanelReduced ? "desktop:left-[26rem]" : "desktop:left-[40rem]"
}`;
} else if (props.contentPanel) {
contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${
mainPanelReduced ? "desktop:left-[8rem]" : "desktop:left-[20rem]"
mainPanelReduced ? "desktop:left-[6rem]" : "desktop:left-[20rem]"
}`;
}
@ -177,7 +177,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
{/* Main panel minimize button*/}
<div
className={`mobile:hidden translate-x-0 fixed top-1/2 z-20 ${
mainPanelReduced ? "left-[6.65rem]" : "left-[18.65rem]"
mainPanelReduced ? "left-[4.65rem]" : "left-[18.65rem]"
}`}
onClick={() => dispatch(setMainPanelReduced(!mainPanelReduced))}
>
@ -232,7 +232,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
delayShow={300}
delayHide={100}
disable={!mainPanelReduced || isMobile}
className="drop-shadow-dark-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left !transition-[top,left,width]"
className="drop-shadow-dark-xl !opacity-100 !bg-light !rounded-lg after:!border-r-light text-left"
/>
</div>
);

4
src/components/Panels/MainPanel.tsx
View File

@ -29,12 +29,12 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
return (
<div
id="mainPanel"
className="flex flex-col justify-center content-start p-8 gap-y-2 justify-items-center text-center"
className={`flex flex-col justify-center content-start gap-y-2 justify-items-center text-center p-8 ${mainPanelReduced && "px-4"}`}
>
{mainPanelReduced && isDesktop ? (
<div className="grid place-items-center gap-4">
<Link href="/" passHref>
<div className="w-8 cursor-pointer transition-[filter] hover:colorize-dark">
<div className="w-12 cursor-pointer transition-[filter] hover:colorize-dark">
<SVG
src={"/icons/accords.svg"}
alt={"Logo of Accord's Library"}