Version 1.4.6 Collapse Navigation, standard content, landingpage intro and fixes

cache/cyanine-custom.css

@@ -0,0 +1,13 @@
+.landingpageintro h1{
+display: inline-block;
+background: white;
+padding: 4px 10px;
+margin: 5px;
+}
+
+.landingpageintro p{
+display: inline;
+background: white;
+line-height: 2.1rem;
+padding: 6px 4px 4px;
+}

content/02-cyanine-theme/00-landingpage.yaml

@@ -1,13 +0,0 @@
-meta:
-    title: 'The Landingpage'
-    description: "Cyanine provides an optional landingpage with six segments: \nIntro with the content of the home page and an additional link/button.\nInfo with individual markdown content.\nTeaser with two elements. Each element has a headline, a text and a button/link.\nContrast with a headline, text-input and a"
-    author: trendschau
-    created: '2020-06-11'
-    time: 20-05-35
-    navtitle: landingpage
-    modified: '2020-06-11'
-seo:
-    seoimage: ''
-    seoimagealt: null
-    Checkbox: null
-    mycfiel: {  }

content/02-cyanine-theme/01-colors-and-fonts.yaml

@@ -1,13 +0,0 @@
-meta:
-    title: 'Colors and Fonts'
-    description: 'First of all cyanine supports individual logos. If you want to use our logo, then please upload it in the system settings. Cyanine will automatically replace the title text with your logo. '
-    heroimage: null
-    heroimagealt: null
-    owner: null
-    author: trendschau
-    manualdate: null
-    modified: '2020-06-14'
-    created: '2020-06-11'
-    time: 20-37-12
-    navtitle: 'colors and fonts'
-    hide: false

content/02-cyanine-theme/02-footer.yaml

@@ -1,12 +0,0 @@
-meta:
-    title: '3-Column Footer'
-    description: 'Cyanine provides a three column footer at the bottom of each page. You can use markdown for each column. Make sure that you use the correct headline-level (we suggest a headline level 3 or level 4 to keep the logical headline hierarchy in the document). You can, of course, also add link-lists or'
-    heroimage: null
-    heroimagealt: null
-    author: trendschau
-    manualdate: null
-    modified: '2020-06-14'
-    created: '2020-06-11'
-    time: 21-00-20
-    navtitle: ''
-    hide: false

content/02-cyanine-theme/03-content-elements.yaml

@@ -1,13 +0,0 @@
-meta:
-    title: 'Content Elements'
-    description: "There are a lot of other settings for your content area. For example:  \n"
-    heroimage: ''
-    heroimagealt: null
-    owner: testauthor
-    author: trendschau
-    manualdate: null
-    modified: '2020-06-14'
-    created: '2020-06-11'
-    time: 21-05-02
-    navtitle: 'content elements'
-    hide: false

content/02-cyanine-theme/index.yaml

@@ -1,13 +0,0 @@
-meta:
-    title: 'The Theme Cyanine'
-    description: 'Cyanine is the new standard theme for Typemill. It is modern, lightweight and very flexible. You can activate a landingpage, setup different landing-page sections and order them like you want. You can also change the colors, fonts and other details.'
-    heroimage: null
-    heroimagealt: null
-    author: trendschau
-    manualdate: null
-    modified: '2020-06-12'
-    created: '2020-06-11'
-    time: 19-58-04
-    navtitle: cyanine
-    hide: false
-    contains: pages

system/author/css/style.css

@@ -469,6 +469,13 @@ li.menu-item{
 .status.unpublished{
 	background:#cc4146;
 }
+.foldertoggle{
+	position: absolute;
+	left: -55px;
+	padding: 8px 5px 5px;
+	top: 1px;
+	color: #ccc;
+}
 .navi-item .movewrapper {
 	position: absolute;
 	right: 4px;

system/author/js/vue-navi.js

@@ -1,6 +1,6 @@
 const navcomponent = Vue.component('navigation', {
 	template: '#navigation-template',
-	props: ['homepage', 'name', 'hide', 'newItem', 'parent', 'active', 'filetype', 'status', 'elementtype', 'contains', 'element', 'folder', 'level', 'url', 'root', 'freeze'],
+	props: ['homepage', 'name', 'hide', 'newItem', 'parent', 'active', 'filetype', 'status', 'elementtype', 'contains', 'element', 'folder', 'level', 'url', 'root', 'freeze', 'collapse'],
 	data: function () {
 		return {
 			showForm: false,

system/author/partials/editorNavi.twig

@@ -33,6 +33,7 @@
 				:contains="item.contains"
 				:filetype="item.fileType" 
 				:status="item.status"
+				:collapse="false"
 				:folder="item.folderContent"
 			></navigation>
 		</draggable>
@@ -58,9 +59,10 @@
 {% verbatim %}
 	<template id="navigation-template">
 		<li class="navi-item" :class="elementtype">
+			<div v-if="folder" class="foldertoggle" @click="collapse = !collapse"><svg v-if="!collapse" class="icon icon-shrink2"><use xlink:href="#icon-shrink2"></use></svg><svg v-else class="icon icon-enlarge2"><use xlink:href="#icon-enlarge2"></use></svg></div>
 			<div class="status" :class="status"></div>
 			<a v-bind:href="getUrl(root, url)" :class="checkActive(active,parent)"><span class="iconwrapper"><svg class="icon" :class="getIconClass(elementtype, filetype, hide)"><use :xlink:href="getIcon(elementtype, filetype, hide)"></use></svg></span><span :class="getLevel(level)">{{ name }}</span><span class="movewrapper"><span class="movewrapper"><svg class="icon icon-arrows-v"><use xlink:href="#icon-arrows-v"></use></svg></span></a>
-			<draggable v-if="folder" class="navi-list" tag="ul" 
+			<draggable v-if="folder" v-show="!collapse" class="navi-list" tag="ul" 
 				@start="onStart" 
 				@end="onEnd"
 				:list="folder" 
@@ -86,6 +88,7 @@
 					:status="item.status" 
 					:elementtype="item.elementType"
 					:contains="item.contains" 
+					:collapse="false"
 					:folder="item.folderContent"
 				></navigation>
 			</draggable>

system/author/partials/symbols.twig

@@ -167,7 +167,13 @@
 				</symbol>
 				<symbol id="icon-paint-brush" viewBox="0 0 28 28">
 					<path d="M25.234 0c1.422 0 2.734 1.062 2.734 2.547 0 0.828-0.328 1.625-0.703 2.359-1.219 2.312-5.313 9.953-7.266 11.75-0.953 0.891-2.078 1.422-3.406 1.422-2.641 0-4.797-2.25-4.797-4.875 0-1.25 0.516-2.469 1.437-3.313l9.969-9.047c0.547-0.5 1.266-0.844 2.031-0.844zM11.031 16.156c0.812 1.578 2.297 2.766 4.016 3.219l0.016 1.109c0.094 4.453-3 7.516-7.469 7.516-5.297 0-7.594-4.219-7.594-9.016 0.578 0.391 2.594 2 3.25 2 0.391 0 0.719-0.219 0.859-0.578 1.328-3.469 3.406-4.094 6.922-4.25z"></path>
-				</symbol>							
+				</symbol>
+				<symbol id="icon-enlarge2" viewBox="0 0 32 32">
+					<path d="M32 0v13l-5-5-6 6-3-3 6-6-5-5zM14 21l-6 6 5 5h-13v-13l5 5 6-6z"></path>
+				</symbol>
+				<symbol id="icon-shrink2" viewBox="0 0 32 32">
+					<path d="M14 18v13l-5-5-6 6-3-3 6-6-5-5zM32 3l-6 6 5 5h-13v-13l5 5 6-6z"></path>
+				</symbol>
 				{{ assets.renderSvg() }}
 			</defs>
 		</svg>

themes/cyanine/css/style.css

@@ -67,6 +67,7 @@ article h1, article h2, article h3, article h4, article h5, article h6{
 	line-height: 1em; 
 	position: relative;
 }
+h1,h2,h3,h4,h5,h6{ word-wrap: break-word; hyphens: auto; }
 article h1{ font-size: 2.2em; margin: 1.4em 0 0.6em; z-index:1; }
 article h2{ font-size: 1.6em; margin: 1.8em 0 0.6em; }
 article h3{	font-size: 1.3em; margin: 1.6em 0 0.6em; }

themes/cyanine/cyanine.yaml

@@ -28,26 +28,28 @@ forms:
 
     blog:
       type: checkbox
-      checkboxlabel: Activate a List of Posts on Homepage
+      checkboxlabel: Activate a List of Posts on the Homepage
 
     blogdetails:
       type: fieldset
       legend: Configure List of Posts
       fields:
-
         blogintro:
           type: checkbox
           label: Intro Page
           checkboxlabel: Show the content of the homepage before the list of posts
-
         blogfolder:
           type: text
           label: Enter the folder path with the posts
           placeholder: /blog
+        blogimage:
+          type: checkbox
+          label: Post-Images
+          checkboxlabel: Display the hero images from meta in the list of blog-posts
 
     landingpage:
       type: checkbox
-      checkboxlabel: Activate a Landing Page on Homepage
+      checkboxlabel: Activate a Landing Page on the Homepage
 
     landingpageIntro:
       type: fieldset
@@ -74,6 +76,14 @@ forms:
           type: text
           label: Label for startbutton
           placeholder: my label
+        introImage:
+          type: checkbox
+          label: Background Image
+          checkboxlabel: Use the hero-image from the homepage as background image
+        introImageOpacity:
+          type: text
+          label: Opacity for background image
+          placeholder: 0.8
 
     landingpageInfo:
       type: fieldset

themes/cyanine/home/landingpageIntro.twig

@@ -1,30 +1,33 @@
 	<section class="landingpageintro w-100 dib tc bt bl br bb">
 
-		<div class="mw7 pb7 ph3 center">
-			<header class="mt6">
-				{% if logo %}
-					<img src="{{ base_url }}/{{ logo }}" class="logo-image"/>
-				{% elseif settings.themes.cyanine.introTitle %}
-					<h1 class="f-large f-headline-ns lh-title mv2 pt5-ns">{{ settings.themes.cyanine.introTitle }}</h1>
-				{% else %}
-					<h1 class="f-large f-headline-ns lh-title mv2 pt5-ns">{{ title }}</h1>
-				{% endif %}
-			</header>
+  		<div class="cover bg-left bg-center-l" {% if settings.themes.cyanine.introImage %}style="background-image: url({{image.img_url}});background-color:rgba(255,255,255,{{settings.themes.cyanine.introImageOpacity|default('0.8')}});background-blend-mode: lighten;" {% endif%} >
 
-			<div class="f5 f4-ns fw3 lh-copy">
-				{% if settings.themes.cyanine.introMarkdown %}
-					{{ markdown(settings.themes.cyanine.introMarkdown) }}
-				{% else %}
-					{{ content }}
-				{% endif %}
+			<div class="mw7 pb7 pt6 ph3 center">
+				<div class="introbg pa4">
+					<header>
+						{% if logo %}
+							<img src="{{ base_url }}/{{ logo }}" class="logo-image"/>
+						{% elseif settings.themes.cyanine.introTitle %}
+							<h1 class="f-large lh-title mv2">{{ settings.themes.cyanine.introTitle }}</h1>
+						{% else %}
+							<h1 class="f-large lh-title mv2">{{ title }}</h1>
+						{% endif %}
+					</header>
+
+					<div class="f5 f4-ns fw3 lh-copy">
+						{% if settings.themes.cyanine.introMarkdown %}
+							{{ markdown(settings.themes.cyanine.introMarkdown) }}
+						{% else %}
+							{{ content }}
+						{% endif %}
+					</div>
+
+					{% if settings.themes.cyanine.introButtonLink %}
+
+						<a class="button link dim ph4 pv3 mt3 ba dib" href="{{ settings.themes.cyanine.introButtonLink }}">{{ settings.themes.cyanine.introButtonLabel }}</a>
+
+					{% endif %}
+				</div>
 			</div>
-
-			{% if settings.themes.cyanine.introButtonLink %}
-
-				<a class="button link dim ph4 pv3 mt3 ba dib" href="{{ settings.themes.cyanine.introButtonLink }}">{{ settings.themes.cyanine.introButtonLabel }}</a>
-
-			{% endif %}
-
-		</div>
-		
+		</div>		
 	</section>

themes/cyanine/layout.twig

@@ -243,11 +243,12 @@
 			{% if settings.themes.cyanine.collapseNav %}
 				<script>
 					var expandButton 	= document.getElementById("expander");
-					var expandLabel		= expandButton.dataset.expandlabel;
-					var collapseLabel	= expandButton.dataset.collapselabel;
 					
-					if(expandButton)
+					if(expandButton !== null)
 					{
+						var expandLabel		= expandButton.dataset.expandlabel;
+						var collapseLabel	= expandButton.dataset.collapselabel;
+
 						expandButton.addEventListener('click', function(e)
 						{
 							var contentnav = document.getElementById("contentnav");