danielsiepmann/ds-site
danielsiepmann/ds-site
1
0
Code Activity

Use detail and summary for make TOC and stuff collapsable

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
Resources/Private/Layouts/Page/BlogSidebar.html
View file

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

2
Resources/Private/Partials/TopicList.html
View file

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

32
Resources/Private/Sass/Frontend/layout/_content.scss
View file

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

1
Resources/Private/Sass/Frontend/layout/page/_content.scss
View file

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

44
Resources/Private/Templates/Page/BlogPost.html
View file

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

22
Resources/Private/Templates/Page/Default.html
View file

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