Version 1.4.6 Collapse Navigation, standard content, landingpage intr…

…o 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;
+}

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>
+			<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>
 
-			{% if settings.themes.cyanine.introButtonLink %}
+					<div class="f5 f4-ns fw3 lh-copy">
+						{% if settings.themes.cyanine.introMarkdown %}
+							{{ markdown(settings.themes.cyanine.introMarkdown) }}
+						{% else %}
+							{{ content }}
+						{% endif %}
+					</div>
 
-				<a class="button link dim ph4 pv3 mt3 ba dib" href="{{ settings.themes.cyanine.introButtonLink }}">{{ settings.themes.cyanine.introButtonLabel }}</a>
+					{% if settings.themes.cyanine.introButtonLink %}
 
-			{% endif %}
+						<a class="button link dim ph4 pv3 mt3 ba dib" href="{{ settings.themes.cyanine.introButtonLink }}">{{ settings.themes.cyanine.introButtonLabel }}</a>
 
-		</div>
-
+					{% endif %}
+				</div>
+			</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");