Merge branch 'master' of https://git.xpub.nl/XPUB/special-issue-11-wiki2html

4 years ago · bcf1c1a981
parent 68d8715f6f 3acf149c38
commit bcf1c1a981
2 changed files with 146 additions and 24 deletions
--- a/static/orgs.css
+++ b/static/orgs.css
@ -1,28 +1,38 @@
+body {
+	background-color: #D5CDCB;
+}

-.indexlink {
+h1 {
 	position: fixed;
-	top:0%;
-	right:10%;
-	background-color: white;
+	right:0%;
+	top:3%;
+	text-align: right;
+	background-color: #0BEFEB;
+	padding: 10px 85px 35px 30px;
 	z-index: 10;
+	color: black;
+	font-size: 28px;
+	border-right: none;
 }
-
+/*
 h1 {
 	position: fixed;
 	right:0%;
 	top:3%;
 	text-align: right;
-	background-color: grey;
-	padding: 3px 30px 3px 10px;
+	background-color: transparent;
+	padding: 10px 30px 30px 20px;
 	z-index: 10;
 	color: black;
 	font-size: 28px;
+	border: 1px solid blue;
+	border-right: none;
 }
-
+*/
 .collapsible{
 	padding-left: 70px;
 	font-family: monospace;
-	line-height: 1px;
+	line-height: 0%;
 }

 .active, .collapsible:hover {
@ -37,6 +47,7 @@ h1 {
 	padding-left: 85px;
 }

+
 .content {
 	max-height: 0;
   	overflow: hidden;
@ -49,3 +60,93 @@ h1 {
    margin-left: 85px;
 }

+
+.up {
+	position: fixed;
+	font-weight: bolder;
+	bottom: 0%;
+	right: 15.1%; 
+	background-color: blue;
+	z-index: 10;
+	padding: 10px;
+	border: none; 
+}
+
+.down {
+	position: fixed;
+	font-weight: bolder;
+	bottom: 0%;
+	right: 12.8%; 
+	background-color: blue;
+	z-index: 10;
+	padding: 10px;
+	border: none; 
+}
+
+.top {
+	position: fixed;
+	font-weight: bolder;
+	bottom: 0%;
+	right: 17.3%;
+	background-color: blue;
+	z-index: 10;
+	padding: 10px;
+	border: none; 
+}
+
+.bottom {
+	position: fixed;
+	font-weight: bolder;
+	bottom: 0%;
+	right: 10%;
+	background-color: blue;
+	z-index: 10;
+	padding: 10px;
+	border: none; 
+}
+
+
+.indexlink {
+	position: fixed;
+	text-decoration: none;
+	font-size: 40px;
+	bottom: 0%;
+	right: 0%;
+	background-color: transparent;
+	border: none;
+	border-right-color: transparent;
+	z-index: 10;
+	padding: 0px 20px 10px 10px;
+	border: none;
+}
+
+
+.timeline {
+	position: fixed;
+    font-size: 20px;
+	bottom: 0%;
+	right: 3%;
+	background-color: transparent;
+	border: none;
+	border-right-color: transparent;
+	z-index: 10;
+	padding: 0px 30px 20px 10px;
+	border: none;
+}
+ 
+.timeline a {
+	text-decoration: none;
+}
+
+.indexlink a {
+	text-decoration: none;
+}
+
+#top {
+	padding-top: 42px;
+}
+
+
+.up:hover, .down:hover, .top:hover, .bottom:hover {
+	cursor: pointer;
+}
--- a/templates/orgs.html
+++ b/templates/orgs.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" id="top">
 <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="{{ staticpath }}/static/archive.css" />
@ -8,24 +8,45 @@
    <script type="text/javascript" src="{{ staticpath }}/static/orgs.js"></script>
    <title>{{ page.name }}</title>
 </head>
-    <h1>{{ page.name }}</h1>
+<body>
+    <h1>&#9636; &nbsp; &nbsp;  {{ page.name }}</h1>
+
+    <button onclick="scrollWin(0,5000)" class="down" title="Down">&#8991;</button>
+    <button onclick="scrollWin(0,-5000)" class="up" title="Up">&#8988;</button>
+    <button onclick="scrollToTop()" class="top" title="Top">&#9140;</button>
+    <button onclick="scrollToBottom()" class="bottom" title="Bottom">&#9141;</button>
+
    <div id="body">{{ body|safe }}</div>
      
    <script>
-	var coll = document.getElementsByClassName("collapsible");
-    var i;
+      var coll = document.getElementsByClassName("collapsible");
+      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";
+         } 
+        });
+       }
+
+      function scrollWin(x, y) {
+      window.scrollBy(x, y);
+      } 
+
+      var elmnt = document.getElementById("top");
+
+      function scrollToTop() {
+        elmnt.scrollIntoView(true); // Top
+      }

-    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";
-       } 
-      });
-    }
+      function scrollToBottom() {
+        elmnt.scrollIntoView(false); // Bottom
+      }
    </script>
 </body>
 </html>