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:
parent
2c00571cb5
commit
e5ec51161d
6 changed files with 60 additions and 49 deletions
|
@ -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)}
|
||||
|
|
|
@ -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}">
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -2,6 +2,7 @@ body.LayoutContent {
|
|||
article {
|
||||
@extend .row;
|
||||
@extend .col-12;
|
||||
@extend .order-xl-2;
|
||||
|
||||
& > header {
|
||||
@extend .col-12;
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue