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

Short links

Browse Source
This commit is contained in:
Daniel Kluge 2022-10-23 14:58:10 +02:00
parent d280515d1e
commit 8dfc43cb02
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
components/Blog/DiaryPageSelector.tsx
View File

@ -43,8 +43,8 @@ const PageSelectorBar: NextPage<IContentNavBar> = ({ pages, name, title, pageSel
await router.push(link); await router.push(link);
}; };
const prev = <span className={styles.leftSelectSpace}>{prevLink ? <Link href={prevLink}><a className={styles.barLink}>&lt; {pageSelected - 1 === 0 ? `${title} (Main Page)` : pages[pageSelected - 2]}</a></Link> : null}</span>; const prev = <span className={styles.leftSelectSpace}>{prevLink ? <Link href={prevLink}><a>&lt;<span className={styles.longLink}> {pageSelected - 1 === 0 ? "Main Page" : pages[pageSelected - 2]}</span><span className={styles.shortLink}>&lt;</span></a></Link> : null}</span>;
const next = <span className={styles.rightSelectSpace}>{nextLink ? <Link href={nextLink}><a className={styles.barLink}>{pages[pageSelected]} &gt;</a></Link> : null}</span>; const next = <span className={styles.rightSelectSpace}>{nextLink ? <Link href={nextLink}><a><span className={styles.longLink}>{pages[pageSelected]} </span><span className={styles.shortLink}>&gt;</span>&gt;</a></Link> : null}</span>;
const select = ( const select = (
<select onChange={onSelection} value={pageSelected}> <select onChange={onSelection} value={pageSelected}>
@ -77,12 +77,12 @@ const PageSelector: NextPage<IContentNav> = (content) => {
<div className={styles.nav}> <div className={styles.nav}>
<PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} mobile /> <PageSelectorBar pages={entries} name={content.name} title={content.title} pageSelected={content.pageSelected} mobile />
<div className={`${styles.sideNav} ${styles.desktop}`}> <aside className={`${styles.sideNav} ${styles.desktop}`}>
<Link href={`/blog/diary/${content.name}`}><a><h4 className={content.pageSelected === 0 ? styles.thisPage : undefined}>{content.title}</h4></a></Link> <Link href={`/blog/diary/${content.name}`}><a><h4 className={content.pageSelected === 0 ? styles.thisPage : undefined}>{content.title}</h4></a></Link>
<ol> <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>)} {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> </ol>
</div> </aside>
</div> </div>
); );
}; };

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

@ -58,7 +58,6 @@
padding: 10px; padding: 10px;
select { select {
font-size: 110%;
padding: 5px; padding: 5px;
border-radius: 1em; border-radius: 1em;
border: 1px solid var(--blog_content-border); border: 1px solid var(--blog_content-border);
@ -79,10 +78,27 @@
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
font-weight: bold; font-weight: bold;
text-overflow: clip;
} }
a:hover { a:hover {
text-decoration: underline; text-decoration: underline;
} }
.longLink {
display: inline;
}
.shortLink {
display: none;
}
@media screen and (max-width: 599px) {
.longLink {
display: none;
}
.shortLink {
display: inline;
}
}
} }
/* TODO: Move to asciidoc footer in Content.module.scss */ /* TODO: Move to asciidoc footer in Content.module.scss */