c0ntroller/frontpage
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects 1 Activity

DiaryPageSelector styling

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-18 14:05:45 +02:00
parent 92cbf9c9a5
commit bdf7dfdc3c
4 changed files with 125 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Blog/ContentPage.tsx
View File

@ -4,10 +4,10 @@ import DiaryPageSelector from "./DiaryPageSelector";
const ContentPage: NextPage<{ content: ProjectRender | DiaryRender }> = ({ content }) => {
return (<>
{content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries} /> : null}
{content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={content.pageSelected} name={content.name} pages={content.entries} /> : null}
<div dangerouslySetInnerHTML={{ __html: content.html }}>
</div>
{content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={0} name={content.name} pages={content.entries} bottom /> : null}
{content.type === "diary" ? <DiaryPageSelector title={content.title} pageSelected={content.pageSelected} name={content.name} pages={content.entries} bottom /> : null}
</>);
};

17
components/Blog/DiaryPageSelector.tsx
View File

@ -15,6 +15,7 @@ interface IContent {
interface IContentNavBar extends IContent {
mobile?: boolean;
bottom?: boolean;
pages: string[];
}
@ -23,7 +24,7 @@ interface IContentNav extends IContent {
pages: DiaryEntry[];
}
const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSelected, mobile }) => {
const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSelected, mobile, bottom }) => {
const router = useRouter();
// When we are on the main page no previous page exists, otherwise we need to check if the previous page is the main page
@ -52,15 +53,17 @@ const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSel
</select>
);
const classNames = mobile ? `${styles.barNav} ${styles.mobile}` : styles.barNav;
const classNames = `${styles.barNav} ${mobile ? styles.mobile : ""} ${bottom ? styles.bottom : styles.top}`;
return (
<div className={classNames}>
<span></span> {/* Spacer */}
{prev}
<span style={{visibility: prevLink ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
{select}
<span style={{visibility: nextLink ? "visible" : "hidden"}}>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
{next}
<span></span> {/* Spacer */}
</div>
);
};
@ -68,17 +71,17 @@ const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSel
const PageSelector: NextPage<IContentNav> = (content) => {
const entries = content.pages.map(p => p.title);
if (content.bottom) return <PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} />;
if (content.bottom) return <PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} bottom />;
return (
<div className={styles.nav}>
<PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} mobile />
<div className={`${styles.sideNav} ${styles.desktop}`}>
<Link href={`/blog/diary/${content.name}`}><a><h4>{content.title}</h4></a></Link>
<ul>
{entries.map((e, idx) => <li key={idx}><Link href={`/blog/diary/${content.name}/${idx + 1}`}><a>{e}</a></Link></li>)}
</ul>
<Link href={`/blog/diary/${content.name}`}><a><h4 className={content.pageSelected === 0 ? styles.thisPage : undefined}>{content.title}</h4></a></Link>
<ol>
{entries.map((e, idx) => <li key={idx} className={content.pageSelected - 1 === idx ? styles.thisPage : undefined}><Link href={`/blog/diary/${content.name}/${idx + 1}`}><a>{e}</a></Link></li>)}
</ol>
</div>
</div>
);

2
styles/Blog/Blog.module.scss
View File

@ -15,6 +15,7 @@
border: 1px solid var(--blog_content-border);
background: var(--blog_content-background);
backdrop-filter: blur(var(--blog_content-blur));
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
main {
@ -30,7 +31,6 @@
}
footer {
margin: 5px auto 0;
padding: 20px;
border-bottom-left-radius: 1em;

112
styles/Blog/DiaryPageSelector.module.scss
View File

@ -0,0 +1,112 @@
.sideNav {
float: right;
background: transparent;
/* 50px padding in main */
margin-right: -50px;
margin-top: -50px;
padding: 20px;
border-bottom-left-radius: 1em;
border-top-right-radius: 1em;
border: none;
border-left: 1px solid var(--blog_content-border);
h4 {
margin: 0 0 10px 0;
}
ol {
list-style-type: "\1405\0020\0020";
list-style-position: inside;
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 200px;
}
li:hover {
&::marker {
font-weight: bold;
}
}
a:link, a:visited, a:hover, a:active {
color: inherit;
text-decoration: none;
}
li.thisPage {
font-weight: bold;
}
h4.thisPage, h4:hover {
text-decoration: underline;
}
}
.barNav {
display: grid;
grid-template-columns: 1fr max-content max-content max-content max-content max-content 1fr;
align-items: center;
background: transparent;
padding: 10px;
select {
font-size: 110%;
padding: 5px;
border-radius: 1em;
border: 1px solid var(--blog_content-border);
background: #333;
}
&.top {
margin: -50px -50px 20px;
border-bottom: 1px solid var(--blog_content-border);
}
&.bottom {
margin: 20px -50px -50px;
border-top: 1px solid var(--blog_content-border);
}
a:link, a:visited, a:active {
color: inherit;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
}
/* TODO: Move to asciidoc footer in Content.module.scss */
.bottom {
clear: both;
}
/* To bottom as this should override everything */
.mobile {
display: none;
}
.desktop {
display: block;
}
@media screen and (max-width: 900px) {
.mobile {
display: grid;
}
.desktop {
display: none;
}
}