Front page forum entry nowrap, layout fixes

This commit is contained in:
mrfry 2021-12-03 13:02:52 +01:00
parent 2b491e6bec
commit 09c45f7209
3 changed files with 96 additions and 59 deletions

View file

@ -19,6 +19,82 @@ const renderSnow = () => {
return date.getMonth() === 11 && date.getDate() > 5
}
function TopBar({
setSidebarOpen,
sidebarOpen,
closeSideBar,
href,
unreads,
userId,
}) {
return (
<>
<MenuIcon setSidebarOpen={setSidebarOpen} sidebarOpen={sidebarOpen} />
<Link href="/">
<a>
<img
src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
alt="FryLabs"
/>
</a>
</Link>
<div className={styles.topBarLinks}>
{Object.keys(topBarLinks).map((key) => {
const item = topBarLinks[key]
return (
<Link key={key} href={item.href}>
<a
onClick={closeSideBar}
className={href.includes(key) ? styles.active : undefined}
>
{item.text}
</a>
</Link>
)
})}
</div>
<div className={'seperator'} />
<UserStatus onClick={closeSideBar} unreads={unreads} userId={userId} />
</>
)
}
function SideBar({ sidebarOpen, closeSideBar, href, setDonateShowing }) {
return sidebarOpen ? (
<>
<div id="sideBarLinks" className={styles.sidebarLinks}>
{Object.keys(tabs).map((key) => {
const item = tabs[key]
if (item.seperator) {
return <hr key={key} />
}
return (
<Link href={item.href} key={key}>
<a
onClick={closeSideBar}
className={href.includes(key) ? styles.active : undefined}
id={item.id || undefined}
>
{item.text}
</a>
</Link>
)
})}
<a
onClick={() => {
closeSideBar()
setDonateShowing(true)
}}
>
Donate
</a>
</div>
</>
) : null
}
function Donate() {
return (
<div>
@ -165,67 +241,22 @@ export default function Layout({ children, router, globalData }) {
</div>
)}
<div className={styles.topBar}>
<MenuIcon setSidebarOpen={setSidebarOpen} sidebarOpen={sidebarOpen} />
<Link href="/">
<a>
<img
src={`${constants.siteUrl}img/frylabs-logo_small_transparent.png`}
alt="FryLabs"
/>
</a>
</Link>
<div className={styles.topBarLinks}>
{Object.keys(topBarLinks).map((key) => {
const item = topBarLinks[key]
return (
<Link key={key} href={item.href}>
<a
onClick={closeSideBar}
className={href.includes(key) ? styles.active : undefined}
>
{item.text}
</a>
</Link>
)
})}
</div>
<div className={'seperator'} />
<UserStatus onClick={closeSideBar} unreads={unreads} userId={userId} />
<TopBar
setSidebarOpen={setSidebarOpen}
sidebarOpen={sidebarOpen}
closeSideBar={closeSideBar}
href={href}
unreads={unreads}
userId={userId}
/>
</div>
<div className={styles.sidebar}>
{sidebarOpen ? (
<>
<div id="sideBarLinks" className={styles.sidebarLinks}>
{Object.keys(tabs).map((key) => {
const item = tabs[key]
if (item.seperator) {
return <hr key={key} />
}
return (
<Link href={item.href} key={key}>
<a
onClick={closeSideBar}
className={href.includes(key) ? styles.active : undefined}
id={item.id || undefined}
>
{item.text}
</a>
</Link>
)
})}
<a
onClick={() => {
closeSideBar()
setDonateShowing(true)
}}
>
Donate
</a>
</div>
</>
) : null}
<SideBar
sidebarOpen={sidebarOpen}
closeSideBar={closeSideBar}
href={href}
setDonateShowing={setDonateShowing}
/>
</div>
{donateShowing ? (
<Modal

View file

@ -69,6 +69,10 @@
margin-bottom: 12px;
}
.userinfo a {
white-space: nowrap;
}
.newsRoot {
background-color: var(--dark-color);
margin-left: 8px;

View file

@ -26,8 +26,10 @@ body {
}
#__next {
display: flex;
min-height: calc(100vh);
width: 1200px;
max-width: 1200px;
/* offset-x | offset-y | blur-radius | spread-radius | color */
background-color: var(--background-color);
box-shadow: 0px 0px 29px 19px #222426;