Restructure ordering of blog post view
This commit is contained in:
parent
47eba384e3
commit
1193914f8b
15 changed files with 209 additions and 115 deletions
|
@ -15,18 +15,6 @@ lib.parseFunc {
|
|||
pre {
|
||||
userFunc = DanielSiepmann\DsSite\UserFunction\CodeHighlighting->preTag
|
||||
}
|
||||
a = TEXT
|
||||
a {
|
||||
current = 1
|
||||
typolink {
|
||||
parameter.data = parameters:href
|
||||
title.data = parameters:title
|
||||
ATagParams.data = parameters:allParams
|
||||
target.data = parameters:target
|
||||
extTarget = {$styles.content.links.extTarget}
|
||||
extTarget.override.data = parameters:target
|
||||
}
|
||||
}
|
||||
}
|
||||
allowTags = a, abbr, acronym, address, b, bdo, big, blockquote, br, caption, center, cite, code, dd, del, dfn, dl, div, dt, em, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, link, ol, p, pre, q, s, samp, sdfield, small, span, strike, strong, sub, sup, title, tt, u, ul, var
|
||||
denyTags = *
|
||||
|
|
|
@ -8,17 +8,16 @@ page {
|
|||
viewport = width=device-width, initial-scale=1
|
||||
}
|
||||
|
||||
# Just an idea to add layout based class, if necessary
|
||||
# bodyTagCObject = COA
|
||||
# bodyTagCObject {
|
||||
# 10 = COA
|
||||
# 10 {
|
||||
# 10 =< page.10.templateName.cObject
|
||||
# 10.wrap = Layout|
|
||||
# wrap = class="|"
|
||||
# }
|
||||
# stdWrap.noTrimWrap = |<body |>|
|
||||
# }
|
||||
bodyTagCObject = COA
|
||||
bodyTagCObject {
|
||||
10 = COA
|
||||
10 {
|
||||
10 =< page.10.templateName.cObject
|
||||
10.wrap = Layout|
|
||||
wrap = class="|"
|
||||
}
|
||||
stdWrap.noTrimWrap = |<body |>|
|
||||
}
|
||||
|
||||
10 = FLUIDTEMPLATE
|
||||
10 {
|
||||
|
|
29
Resources/Private/Layouts/Page/BlogPost.html
Normal file
29
Resources/Private/Layouts/Page/BlogPost.html
Normal file
|
@ -0,0 +1,29 @@
|
|||
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
|
||||
data-namespace-typo3-fluid="true">
|
||||
|
||||
{f:render(partial: 'Header', arguments: _all)}
|
||||
|
||||
<main>
|
||||
<header>
|
||||
<h1>Blog Post</h1>
|
||||
</header>
|
||||
|
||||
<article>
|
||||
{f:render(partial: 'BlogPostHeader', arguments: {
|
||||
title: data.title,
|
||||
blogPost : data,
|
||||
compatibleWith: compatibleWith,
|
||||
topics: assignedTopics,
|
||||
addLinks: 1
|
||||
})}
|
||||
|
||||
<aside>
|
||||
{f:render(section: 'Aside', arguments: _all)}
|
||||
</aside>
|
||||
|
||||
{f:render(section: 'Content', arguments: _all)}
|
||||
</article>
|
||||
</main>
|
||||
|
||||
{f:render(partial: 'Footer', arguments: _all)}
|
||||
</html>
|
|
@ -1,20 +1,21 @@
|
|||
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
|
||||
data-namespace-typo3-fluid="true">
|
||||
<header>
|
||||
<a href="/">{settings.websiteTitle}</a>
|
||||
</header>
|
||||
|
||||
{f:render(partial: 'Header', arguments: _all)}
|
||||
|
||||
<main>
|
||||
<aside>
|
||||
{f:render(section: 'Aside', arguments: _all)}
|
||||
</aside>
|
||||
<header>
|
||||
<h1>{data.title}</h1>
|
||||
</header>
|
||||
|
||||
<section>
|
||||
{f:render(section: 'Content', arguments: _all)}
|
||||
</section>
|
||||
|
||||
<aside>
|
||||
{f:render(section: 'Aside', arguments: _all)}
|
||||
</aside>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
{f:render(partial: 'FooterMenu', arguments: {pages: footerMenu.0.children})}
|
||||
<p>ⓒ by Daniel Siepmann 2016 - {f:format.date(format: 'Y', date: 'now')}</p>
|
||||
</footer>
|
||||
{f:render(partial: 'Footer', arguments: _all)}
|
||||
</html>
|
||||
|
|
|
@ -12,14 +12,41 @@
|
|||
Updated: <time>{blogPost.SYS_LASTCHANGED -> f:format.date(format: 'Y-m-d')}</time>
|
||||
</p>
|
||||
<p>Tested with TYPO3:
|
||||
<f:for each="{compatibleWith}" as="version" iteration="i">
|
||||
{version.data.title}{f:if(condition: '!{i.isLast}', then: ',')}
|
||||
</f:for>
|
||||
{f:render(section: 'TopicList', arguments: {
|
||||
topics: compatibleWith,
|
||||
addLinks: addLinks
|
||||
})}
|
||||
</p>
|
||||
<p>Topics:
|
||||
<f:for each="{topics}" as="topic" iteration="i">
|
||||
{topic.data.title}{f:if(condition: '!{i.isLast}', then: ',')}
|
||||
</f:for>
|
||||
{f:render(section: 'TopicList', arguments: {
|
||||
topics: topics,
|
||||
addLinks: addLinks
|
||||
})}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<f:section name="TopicList">
|
||||
<f:for each="{topics}" as="topic" iteration="i">
|
||||
<f:render section="TopicLink"
|
||||
contentAs="content"
|
||||
arguments="{
|
||||
addLinks: addLinks,
|
||||
topicUid: topic.data.uid
|
||||
}"
|
||||
>
|
||||
{topic.data.title}{f:if(condition: '!{i.isLast}', then: ',')}
|
||||
</f:render>
|
||||
</f:for>
|
||||
</f:section>
|
||||
|
||||
<f:section name="TopicLink">
|
||||
<f:if condition="{addLinks}">
|
||||
<f:then>
|
||||
<a href="{f:uri.page(pageUid: 11, additionalParams: {topic: topicUid})}">{content -> f:spaceless()}</a>
|
||||
</f:then>
|
||||
<f:else>
|
||||
{content}
|
||||
</f:else>
|
||||
</f:if>
|
||||
</f:section>
|
||||
</html>
|
||||
|
|
|
@ -8,11 +8,13 @@
|
|||
topics: page.topics
|
||||
})}
|
||||
|
||||
{page.data.abstract -> f:format.html()}
|
||||
<main>
|
||||
{page.data.abstract -> f:format.html()}
|
||||
|
||||
<f:if condition="{page.media.0}">
|
||||
{f:render(partial: 'Image', arguments: {image: page.media.0})}
|
||||
</f:if>
|
||||
<f:if condition="{page.media.0}">
|
||||
{f:render(partial: 'Image', arguments: {image: page.media.0})}
|
||||
</f:if>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p><a href="{page.link}">Read more …</a></p>
|
||||
|
|
7
Resources/Private/Partials/Page/Footer.html
Normal file
7
Resources/Private/Partials/Page/Footer.html
Normal file
|
@ -0,0 +1,7 @@
|
|||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
|
||||
data-namespace-typo3-fluid="true">
|
||||
<footer>
|
||||
{f:render(partial: 'FooterMenu', arguments: {pages: footerMenu.0.children})}
|
||||
<p>ⓒ by Daniel Siepmann 2016 - {f:format.date(format: 'Y', date: 'now')}</p>
|
||||
</footer>
|
||||
</html>
|
6
Resources/Private/Partials/Page/Header.html
Normal file
6
Resources/Private/Partials/Page/Header.html
Normal file
|
@ -0,0 +1,6 @@
|
|||
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
|
||||
data-namespace-typo3-fluid="true">
|
||||
<header>
|
||||
<a href="/">{settings.websiteTitle}</a>
|
||||
</header>
|
||||
</html>
|
|
@ -1,7 +1,8 @@
|
|||
@import "layout/header";
|
||||
@import "layout/content";
|
||||
@import "layout/footer";
|
||||
@import "layout/elements";
|
||||
@import "layout/header";
|
||||
@import "layout/footer";
|
||||
@import "layout/content";
|
||||
@import "layout/page/blogPost";
|
||||
|
||||
body {
|
||||
@extend .container;
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
@import "layout";
|
||||
|
||||
@import "components/codeHighlighting";
|
||||
@import "components/feedit";
|
||||
// Does not work with 10 master yet
|
||||
// @import "components/feedit";
|
||||
@import "components/ckeditor";
|
||||
@import "components/admonition";
|
||||
|
|
|
@ -1,6 +1,10 @@
|
|||
body > main {
|
||||
@extend .row;
|
||||
|
||||
& > header {
|
||||
@extend .col-12;
|
||||
}
|
||||
|
||||
& > section {
|
||||
@extend .col-xl-8;
|
||||
@extend .col-12;
|
||||
|
@ -9,22 +13,34 @@ body > main {
|
|||
& > aside {
|
||||
@extend .col-xl-4;
|
||||
@extend .col-12;
|
||||
@extend .order-xl-2;
|
||||
}
|
||||
}
|
||||
|
||||
aside nav {
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
// For padding
|
||||
@extend article;
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1439px) {
|
||||
aside nav:nth-of-type(2) li {
|
||||
display: inline;
|
||||
margin-right: $spacer;
|
||||
line-height: $spacer * 4;
|
||||
body > main > aside {
|
||||
padding-bottom: 0;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-right: $spacer;
|
||||
line-height: $spacer * 2;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
nav li {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -34,3 +50,46 @@ li {
|
|||
top: $spacer / 2;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
& > header {
|
||||
font-size: 1.5em;
|
||||
padding-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
& > a:first-child + {
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-top: $spacer * 4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
article {
|
||||
padding: {
|
||||
top: $spacer * 2;
|
||||
bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0;
|
||||
padding: {
|
||||
top: $spacer * 2;
|
||||
bottom: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
& > header {
|
||||
font-size: 1.25em;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.75em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -19,33 +19,6 @@ figure {
|
|||
}
|
||||
}
|
||||
|
||||
section > header {
|
||||
font-size: 1.5em;
|
||||
padding-bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
article {
|
||||
padding: {
|
||||
top: $spacer * 2;
|
||||
bottom: $spacer * 2;
|
||||
}
|
||||
|
||||
& > header {
|
||||
font-size: 1.25em;
|
||||
margin-bottom: $spacer * 2;
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.75em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
strong {
|
||||
color: $white;
|
||||
}
|
||||
|
|
22
Resources/Private/Sass/layout/page/_blogPost.scss
Normal file
22
Resources/Private/Sass/layout/page/_blogPost.scss
Normal file
|
@ -0,0 +1,22 @@
|
|||
body.LayoutBlogPost {
|
||||
article {
|
||||
@extend .row;
|
||||
@extend .col-12;
|
||||
|
||||
& > header {
|
||||
@extend .col-12;
|
||||
@extend .order-xl-1;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
& > aside {
|
||||
@extend .col-12;
|
||||
@extend .col-xl-4;
|
||||
@extend .order-xl-3;
|
||||
}
|
||||
& > main {
|
||||
@extend .col-12;
|
||||
@extend .col-xl-8;
|
||||
@extend .order-xl-2;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,20 +1,10 @@
|
|||
<html xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
|
||||
data-namespace-typo3-fluid="true">
|
||||
|
||||
<f:layout name="Default" />
|
||||
<f:layout name="BlogPost" />
|
||||
|
||||
<f:section name="Content">
|
||||
<header>
|
||||
<h1>Blog Post</h1>
|
||||
</header>
|
||||
<article>
|
||||
{f:render(partial: 'BlogPostHeader', arguments: {
|
||||
title: data.title,
|
||||
blogPost : data,
|
||||
compatibleWith: compatibleWith,
|
||||
topics: assignedTopics
|
||||
})}
|
||||
|
||||
<main>
|
||||
<a name="introduction"></a>
|
||||
<h2>Introduction <small><a href="#introduction">¶</a></small></h2>
|
||||
{data.abstract -> f:format.html()}
|
||||
|
@ -37,22 +27,13 @@
|
|||
<h2>Further reading <small><a href="#furtherReading">¶</a></small></h2>
|
||||
{furtherReading -> f:format.raw()}
|
||||
</f:if>
|
||||
</article>
|
||||
</main>
|
||||
</f:section>
|
||||
|
||||
<f:section name="Aside">
|
||||
{f:render(section: 'TOC', arguments: _all)}
|
||||
|
||||
{f:render(partial: 'TopicList', arguments: {
|
||||
headline: 'Related Topics',
|
||||
topics: assignedTopics
|
||||
})}
|
||||
</f:section>
|
||||
|
||||
<f:section name="TOC">
|
||||
<nav>
|
||||
<h1>Table of Content</h1>
|
||||
<ul>
|
||||
<ol>
|
||||
<li>
|
||||
<a href="#introduction">Introduction</a>
|
||||
</li>
|
||||
|
@ -75,7 +56,7 @@
|
|||
<a href="#furtherReading">Further reading</a>
|
||||
</li>
|
||||
</f:if>
|
||||
</ul>
|
||||
</ol>
|
||||
</nav>
|
||||
</f:section>
|
||||
</html>
|
||||
|
|
|
@ -4,21 +4,19 @@
|
|||
<f:layout name="Default" />
|
||||
|
||||
<f:section name="Content">
|
||||
<header>
|
||||
<h1>{data.title}</h1>
|
||||
</header>
|
||||
|
||||
{contentMain -> f:format.raw()}
|
||||
</f:section>
|
||||
|
||||
<f:section name="Aside">
|
||||
<h1>Blog Posts by</h1>
|
||||
|
||||
{f:render(partial: 'TopicList', arguments: {
|
||||
headline: 'Compatible with TYPO3',
|
||||
headline: 'Compatibility with TYPO3',
|
||||
topics: allTypo3Compatible
|
||||
})}
|
||||
|
||||
{f:render(partial: 'TopicList', arguments: {
|
||||
headline: 'Topics',
|
||||
headline: 'Topic',
|
||||
topics: allTopics
|
||||
})}
|
||||
</f:section>
|
||||
|
|
Loading…
Reference in a new issue