title css

5 years ago · bb72f56f57
parent dcf3228373
commit bb72f56f57
2 changed files with 109 additions and 16 deletions
--- a/static/title.css
+++ b/static/title.css
@ -1,4 +1,7 @@
-
+body {
+    background-color: #aaa4a0;
+    font-family: Arial, Helvetica, sans-serif;
+}
 .grid-container {
  	display: grid;
  	grid-template-columns: repeat(4, 1fr);
@ -8,7 +11,6 @@
 	width: 96%;
 	height: auto;
 	left:2%;
-  	/*background-color: blue;*/
  	text-align: : center;
  	z-index: 5;

@ -16,21 +18,18 @@

 .grid-container > div {
 	position: relative;
-	/*background-color: green;*/
 	text-align: center;
-	/*padding-bottom: 1%;*/
 	z-index: 5;
 }

-a:image {
+.thumbborder {
 	position: relative;
 	max-width: 100%;
 	max-height: 100%;

-	/*align-content: center;*/
-
 }

+
 /*links*/

 a:link {
@ -40,7 +39,7 @@ a:link {

 a:visited {
  text-decoration: none;
-  color: blue;
+  color: black;
 }

 a:hover {
@ -72,9 +71,51 @@ h2{
 	font-size: 20px;
 }

-.indexlist {
+/*.indexlist {
  position: absolute;
  top:20%;
+}*/
+
+.viewnav {
+	position: fixed;
+	top:0%;
+	right:0%;
+	background-color: red ;
+	width: 40%;
+	z-index: 10;
+	opacity: 0.7;
+}
+
+.collapsible2 {
+  	background-color: #777;
+	color: white;
+	cursor: pointer;
+	padding: 0px;
+	width: 100%;
+	height: px;
+	border: none;
+	text-align: left;
+	outline: none;
+	font-size: 40px;
+	z-index: 10;
+	margin-top: 0px;
+}
+
+.active, .collapsible2:hover {
+  background-color: #555;
+}
+
+.content2 {
+  position: relative;
+  padding: 0px 18px;
+  max-height: 0;
+  overflow: hidden;
+  width: 50%;
+  transition: max-height 0.2s ease-out;
+  background-color: grey;
+  color: white;
+  z-index: 10;
+  text-align: left;
 }


@ -90,6 +131,7 @@ h2{
  	z-index: 9;
  	width: auto;
  	height: auto;
+  	background-color: pink;
 }

 p {
@ -163,6 +205,10 @@ p {
  text-align: right;
 }

+a.content:link {
+	color:white;
+}
+
 .metadata_links {
 	display: block;
 	width: 100%;
@ -172,6 +218,7 @@ p {
 	text-align: left;
 	/*background-color: blue;*/
 	font-size: 18px;
+
 }

 .metadata_organization {
@ -179,8 +226,6 @@ p {
 }


-
-
 .fbtn {
 	font-style: italic;
 }
@ -192,15 +237,40 @@ p {
 .indexlink {
 	position: fixed;
 	bottom:0%;
-	right:10%;
+	right:3%;
 	background-color: white;
 	z-index: 10;
+	font-size: 30px;
 }

 .timelinelink {
 	position: fixed;
 	bottom:0%;
-	right:5%;
+	right:10%;
 	background-color: white;
 	z-index: 10;
+	font-size: 30px;
+}
+
+.orglink {
+	position: fixed;
+	bottom:0%;
+	left:10%;
+	background-color: white;
+	z-index: 10;
+	font-size: 30px;
+}
+
+.orglink:hover .hiddentext {
+	visibility: visible;
+}
+
+.hiddentext {
+	visibility: hidden;
+	  width: 120px;
+	  background-color: black;
+	  color: #fff;
+	  text-align: center;
+	  padding: 5px 0;
+	  border-radius: 6px;
 }
--- a/templates/title.html
+++ b/templates/title.html
@ -10,18 +10,41 @@
 </head>
 <body class="title">

-    <h1>{{ page.name }}</h1>
-    
-	<div class="header" id="myHeader">
+    <h1>{{ page.name }} &#8629;</h1>
+
+<div class="viewnav">
+  <div class="collapsible2 viewbtn">&#8632;</div>
+  <div class="content2">
+	<!-- <div class="header" id="myHeader"> -->
    <p><button class="btn" onclick="myFunction()">100%</button></p>
    <p><button class="btn" onclick="myFunction2()">overview</button></p>
    </div>
+  </div> 
+<div>
+
+<span class="hiddentext">All Organizations</span>

 	<div id="body">{{ body|safe }}</div>
+  
 <script>
 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";
+    } 
+  });
+}
+
+var coll = document.getElementsByClassName("collapsible2");
+var i;
+
 for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");