Use detail and summary for make TOC and stuff collapsable

This provides info on mobile and desktop, but allows mobile users to
easily collapse to jump to content.
This commit is contained in:
Daniel Siepmann 2021-12-08 11:55:27 +01:00
parent 2c00571cb5
commit e5ec51161d
6 changed files with 60 additions and 49 deletions

View file

@ -8,13 +8,13 @@
<h1>{data.title}</h1>
</header>
<section>
{f:render(section: 'Content', arguments: _all) -> f:spaceless()}
</section>
<aside>
{f:render(section: 'Aside', arguments: _all) -> f:spaceless()}
</aside>
<section>
{f:render(section: 'Content', arguments: _all) -> f:spaceless()}
</section>
</main>
{f:render(partial: 'Footer', arguments: _all)}

View file

@ -1,7 +1,7 @@
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
<nav>
<h1>{headline}</h1>
<h3>{headline}</h3>
<ul>
<f:for each="{topics}" as="topic">
<f:if condition="{topic.data.title}">

View file

@ -7,23 +7,30 @@ body > main {
& > header {
@extend .col-12;
@extend .order-xl-1;
margin-bottom: $spacer * 2;
}
& > section {
@extend .col-xl-8;
@extend .col-12;
}
& > aside {
@extend .col-xl-4;
@extend .col-12;
@extend .order-xl-3;
nav ul {
list-style: none;
padding-left: 0;
}
}
& > section {
@extend .col-xl-8;
@extend .col-12;
@extend .order-xl-2;
}
& article > aside {
margin-bottom: $spacer * 2;
}
}
aside,
@ -77,21 +84,15 @@ main article h1 {
padding-top: 0;
}
aside {
h1 {
font-size: 1.5em;
}
nav {
h1 {
font-size: 1.25em;
}
aside,
nav {
details > summary > h2 {
display: inline;
}
}
@media (max-width: 1439px) {
body > main > aside {
margin-top: $spacer * 4;
padding-bottom: 0;
h1, h2, h3, h4, h5, h6 {
@ -116,6 +117,7 @@ aside {
}
}
}
@media (max-width: 768px) {
body > main > aside {
nav li {

View file

@ -2,6 +2,7 @@ body.LayoutContent {
article {
@extend .row;
@extend .col-12;
@extend .order-xl-2;
& > header {
@extend .col-12;

View file

@ -46,29 +46,33 @@
<f:section name="Aside">
<nav>
<h1>Table of Content</h1>
<ol>
<li>
<a href="#introduction">Introduction</a>
</li>
<f:for each="{pageContent}" as="contentEntry">
<f:if condition="{contentEntry.data.header}">
<details open>
<summary>
<h2>Table of Content</h2>
</summary>
<ol>
<li>
<a href="#introduction">Introduction</a>
</li>
<f:for each="{pageContent}" as="contentEntry">
<f:if condition="{contentEntry.data.header}">
<li>
<a href="#{contentEntry.data.header -> f:format.id()}">{contentEntry.data.header}</a>
</li>
</f:if>
</f:for>
<f:if condition="{acknowledgements}">
<li>
<a href="#{contentEntry.data.header -> f:format.id()}">{contentEntry.data.header}</a>
<a href="#acknowledgements">Acknowledgements</a>
</li>
</f:if>
</f:for>
<f:if condition="{acknowledgements}">
<li>
<a href="#acknowledgements">Acknowledgements</a>
</li>
</f:if>
<f:if condition="{furtherReading}">
<li>
<a href="#furtherReading">Further reading</a>
</li>
</f:if>
</ol>
<f:if condition="{furtherReading}">
<li>
<a href="#furtherReading">Further reading</a>
</li>
</f:if>
</ol>
</details>
</nav>
</f:section>
</html>

View file

@ -8,16 +8,20 @@
</f:section>
<f:section name="Aside">
<h1>Blog Posts by</h1>
<details open>
<summary>
<h2>Blog Posts by</h2>
</summary>
{f:render(partial: 'TopicList', arguments: {
headline: 'Compatibility with TYPO3',
topics: allTypo3Compatible
})}
{f:render(partial: 'TopicList', arguments: {
headline: 'Compatibility with TYPO3',
topics: allTypo3Compatible
})}
{f:render(partial: 'TopicList', arguments: {
headline: 'Topic',
topics: allTopics
})}
{f:render(partial: 'TopicList', arguments: {
headline: 'Topic',
topics: allTopics
})}
</details>
</f:section>
</html>