From 44258c51851388f2cf34b0d736e2cb5850ca9297 Mon Sep 17 00:00:00 2001
From: Sandra <you@example.com>
Date: Fri, 17 Apr 2020 15:56:36 +0200
Subject: [PATCH] layout btn

---
 static/title.css     | 255 +++++++++++++++++++++++--------------------
 templates/title.html |  26 ++---
 2 files changed, 141 insertions(+), 140 deletions(-)

diff --git a/static/title.css b/static/title.css
index 0e482cf..3d1a208 100644
--- a/static/title.css
+++ b/static/title.css
@@ -4,35 +4,35 @@ body {
 }
 
 .grid-container {
-  	display: grid;
-  	grid-template-columns: repeat(4, 1fr);
-  	grid-gap: 10px;
-  	position: absolute;
-  	top: 25%;
-	  width: 82%;
-	  height: auto;
-	  left: 7%;
-  	text-align: : center;
-  	z-index: 5;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 10px;
+    position: absolute;
+    top: 25%;
+    width: 82%;
+    height: auto;
+    left: 7%;
+    text-align: : center;
+    z-index: 5;
 
 }
 
 .grid-container > div {
-	position: relative;
-	text-align: center;
-	z-index: 5;
+  position: relative;
+  text-align: center;
+  z-index: 5;
 }
 
 .thumbborder {
-	position: relative;
-	max-width: 100%;
-	max-height: 100%;
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
 }
 
 
 /*links*/
 
-/*a:link {
+a:link {
   text-decoration: none;
   color: #371F10;
 }
@@ -43,58 +43,58 @@ a:visited {
 }
 
 a:hover {
-	text-decoration: none;
-  	color: blue;
-}*/
+  text-decoration: none;
+    color: blue;
+}
 
 
 h1 {
-	/*position: fixed;
-	right:0%;
-	top:5%;
-	text-align: right;
-	background-color: rgba(11,239,235,0.7);
-	padding: 3px 35px 3px 10px;
-	z-index: 10;
-	font-size: 27px;
-	color: #371F10;*/
+  /*position: fixed;
+  right:0%;
+  top:5%;
+  text-align: right;
+  background-color: rgba(11,239,235,0.7);
+  padding: 3px 35px 3px 10px;
+  z-index: 10;
+  font-size: 27px;
+  color: #371F10;*/
   max-width: 90%;
 }
 
 h2{
-	position: fixed;
-	right: 0%;
-	top: 15%;
-	text-align: left;
-	background-color: rgba(11,239,235,0.7);
-	padding: 3px 35px 3px 10px;
-	z-index: 10;
-	font-size: 20px;
+  position: fixed;
+  right: 0%;
+  top: 15%;
+  text-align: left;
+  background-color: rgba(11,239,235,0.7);
+  padding: 3px 35px 3px 10px;
+  z-index: 10;
+  font-size: 20px;
   color: #371F10;
 }
 
-.viewnav {
-	position: fixed;
-	bottom: 1%;
-	right: 1%;
-	background-color: transparent;
-	width: 5%;
-	z-index: 9;
+/*.viewnav {
+  position: fixed;
+  bottom: 1%;
+  right: 1%;
+  background-color: transparent;
+  width: 5%;
+  z-index: 9;
 }
 
 .collapsible2 {
   background-color: transparent;
-	color: #371F10;
-	cursor: pointer;
-	padding: 0px;
-	width: 100%;
-	height: auto;
-	border: none;
-	text-align: center;
-	outline: none;
-	font-size: 40px;
-	z-index: 10;
-	margin-top: 0px;
+  color: #371F10;
+  cursor: pointer;
+  padding: 0px;
+  width: 100%;
+  height: auto;
+  border: none;
+  text-align: center;
+  outline: none;
+  font-size: 40px;
+  z-index: 10;
+  margin-top: 0px;
 }
 
 .collapsible2:hover {
@@ -113,58 +113,63 @@ h2{
   z-index: 10;
   text-align: center;
   bottom: 100%;
-}
+}*/
 
 
 /* Grid buttons */
 
-/*.header {
-	
-	position: absolute;
-  	text-align: center;
-  	padding: 32px;
-  	top: 30%;
-  	right: 0%;
-  	z-index: 9;
-  	width: auto;
-  	height: auto;
-  	background-color: pink;
-}*/
+.header {
+  
+    position: fixed;
+   /* text-align: center;*/
+    bottom: 0%;
+    right: 0%;
+    z-index: 9;
+    width: 110px;
+    height: 50px;
+    background-color: white;
+    color: #371F10;
+
+}
 
 p {
-	display: inline-block;
-	position: relative;
+  display: inline-block;
+  /*position: relative;*/
+  color: #371F10;
 }
 
 .btnov {
+  position: fixed;
+  display: inline;
+  right: 0px;
+  bottom:0px;
   border: none;
-  outline: none;
-  width: 110px;
+  width: 50px;
+  height: 50px;
   text-align: center;
-  padding: 0px 0px;
+ /* padding: 5px 5px;*/
   background-color: transparent;
   cursor: pointer;
   font-size: 20px;
-  margin-right: 5px;
   z-index: 9;
   color: #371F10;
-
-
+  margin-bottom: 3px;
 }
 
 .btn {
+  position: fixed;
+  display: inline;
+  right: 60px;
+  bottom:0px;
   border: none;
-  outline: none;
-  width: 110px;
+  width: 50px;
+  height: 50px;
   text-align: center;
-  padding: 0px 0px;
   background-color: transparent;
   cursor: pointer;
   font-size: 30px;
-  margin-right: 5px;
   z-index: 9;
   color: #371F10;
-
 }
 
 .btn:hover {
@@ -176,25 +181,33 @@ p {
   color:rgba(11,239,235);
 }
 
+.btnov:hover {
+  color:rgba(11,239,235);
+/*  color: blue;*/
+}
+
+.btnov:active {
+  color:rgba(11,239,235);
+}
 
 .metadata{
-	position: fixed;
-	top: 25%;
-	right: 0%;
-	background-color: transparent;
-	width: 60%;
-	z-index: 10;
-	opacity: 1;
-	text-align: right;
-	/*align-items: right;
-	align-content: right;*/
+  position: fixed;
+  top: 25%;
+  right: 0%;
+  background-color: transparent;
+  width: 60%;
+  z-index: 10;
+  opacity: 1;
+  text-align: right;
+  /*align-items: right;
+  align-content: right;*/
 
 }
 
 .collapsible {
-	
-	display: inline-block;
-	right:0%;
+  
+  display: inline-block;
+  right:0%;
   background-color: white;
   color: #371F10;
   cursor: pointer;
@@ -211,8 +224,8 @@ p {
 }
 
 .active, .collapsible:hover {
-  color: blue;
-
+  color: #371F10;
+  background-color:rgba(11,239,235);
 }
 
 .content {
@@ -232,29 +245,29 @@ p {
 }
 
 a.content:link {
-	color:white;
+  color:white;
 }
 
 .metadata_organization {
-	/*font-size: 14px;*/
+  /*font-size: 14px;*/
 }
 
 .fbtn {
-	font-style: italic;
+  font-style: italic;
 }
 
 .smw-template-furtherresults {
-	display: none;
+  display: none;
 }
 /*
 .orglink {
-	position: fixed;
-	top: 30%;
-	left: 0%;
-	background-color: white;
-	z-index: 10;
-	font-size: 30px;
-	padding: 0px 5px 0px 5px;
+  position: fixed;
+  top: 30%;
+  left: 0%;
+  background-color: white;
+  z-index: 10;
+  font-size: 30px;
+  padding: 0px 5px 0px 5px;
 }
 
 .orglink .htext {
@@ -278,13 +291,13 @@ a.content:link {
 }
 
 .timelinelink {
-	position: fixed;
-	top: 20%;
-	left: 0%;
-	background-color: white;
-	z-index: 10;
-	font-size: 30px;
-	padding: 0px 5px 0px 5px; 
+  position: fixed;
+  top: 20%;
+  left: 0%;
+  background-color: white;
+  z-index: 10;
+  font-size: 30px;
+  padding: 0px 5px 0px 5px; 
 }
 
 .timelinelink .htext {
@@ -308,13 +321,13 @@ a.content:link {
 }
 
 .indexlink {
-	position: fixed;
-	top:10%;
-	left:0%;
-	background-color: white;
-	z-index: 10;
-	font-size: 30px;
-	padding: 0px 5px 0px 5px;
+  position: fixed;
+  top:10%;
+  left:0%;
+  background-color: white;
+  z-index: 10;
+  font-size: 30px;
+  padding: 0px 5px 0px 5px;
 }
 
 .indexlink .htext {
diff --git a/templates/title.html b/templates/title.html
index dbd2fdd..5a28054 100644
--- a/templates/title.html
+++ b/templates/title.html
@@ -13,14 +13,15 @@
 
     <h1>{{ page.name }} &#8629;</h1>
 
-<div class="viewnav">
+<!-- <div class="viewnav">
   <div class="collapsible2 viewbtn">&#9634;</div>
-  <div class="content2">
-    <p><button class="btn active" onclick="myFunction()">&#9635;</button></p>
-    <p><button class="btnov active" onclick="myFunction2()">&#9580;&#9580;</button></p>
+  <div class="content2"> -->
+	<div class="header" id="myHeader">
+    <p><button class="btn clicked" onclick="myFunction()">&#9635;</button></p>
+    <p><button class="btnov clicked" onclick="myFunction2()">&#9580;&#9580;</button></p>
     </div>
-  </div> 
-<div>
+<!--   </div> 
+<div> -->
   
 	<div id="body">{{ body|safe }}</div>
   
@@ -40,20 +41,7 @@ for (i = 0; i < coll.length; i++) {
   });
 }
 
-var coll = document.getElementsByClassName("collapsible2");
-var i;
 
-for (i = 0; i < coll.length; i++) {
-  coll[i].addEventListener("click", function() {
-    this.classList.toggle("active");
-    var content = this.nextElementSibling;
-    if (content.style.maxHeight){
-      content.style.maxHeight = null;
-    } else {
-      content.style.maxHeight = content.scrollHeight + "px";
-    } 
-  });
-}
 </script>
 </body>
 </html>