Skip to content
Snippets Groups Projects
Commit 77867daa authored by Liliana Sanfilippo's avatar Liliana Sanfilippo
Browse files

Created sidebar

parent 50ecb30f
No related branches found
No related tags found
1 merge request!1Bfh branch
Pipeline #377589 failed
Stage: build
Hide whitespace changes
Inline Side-by-side
js_log.txt 0 → 100644
+ 0
− 0
View file @ 77867daa
static/javascript.js
+ 0
− 21
View file @ 77867daa
var TopDistance = 120;
let elements = [document.getElementById('one'),
document.getElementById('two'),
document.getElementById('three')];
window.goTo = function(el){
document.documentElement.scrollTop += el.getBoundingClientRect().top - TopDistance;
}
function Highlight(el, subtitle){
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
subtitle.style.color = "#18E9EE";
}
else{
subtitle.style.color = "#F8F0E8";
}
}
function HighlightCheck(){
Highlight(elements[0], document.getElementById('subtitle1'));
Highlight(elements[1], document.getElementById('subtitle2'));
Highlight(elements[2], document.getElementById('subtitle3'));
}
window.addEventListener("scroll", HighlightCheck);
static/style.css
+ 15
− 6
View file @ 77867daa
......@@ -94,18 +94,25 @@ footer a:hover { color: white; text-decoration: underline; }
/* Style the sidenav */
.sidebar{
border-left: 8px solid;
border-left-color: currentcolor;
border-left-color: var(--darkpurple);
border-color: var(--highlight);
color: var(--darkpurple);
list-style-type: none;
line-height: 280%;
margin: 0px 0px;
padding: 0px 0px;
}
.sidebarEntry {
font-size: 20px;
color: #191308;
background: linear-gradient(var(--highlight) 0 0) var(--p, 0) / var(--p, 0) no-repeat;
transition: .2s, background-position 0s;
.sidebar>div {
overflow: hidden;
text-align: center;
cursor: pointer;
}
.sidebar>div>span{
padding: 1rem;
}
.sidebar>div>span:hover{
font-size: 1.2rem;
transition: all 0.1s linear;
}
/*galleries */
......@@ -212,3 +219,5 @@ svg text{
fill-opacity: 1;
}
}
wiki/layout.html
+ 51
− 3
View file @ 77867daa
<!doctype html>
<html lang="en">
<html lang="en" >
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
......@@ -19,7 +19,7 @@
<script src="{{ url_for('static', filename = 'd3.min.js') }}"></script>
<script src="{{ url_for('static', filename = 'javascript.js') }}"></script>
<!--script src="{{ url_for('static', filename = 'javascript.js') }}"></script-->
<script type="text/javascript" src="{{ url_for('static', filename = 'vis-network.min.js') }}"></script>
......@@ -28,7 +28,7 @@
</head>
<body>
<body >
<script> AOS.init(); </script>
<!-- Navigation -->
{% include 'menu.html' %}
......@@ -61,5 +61,53 @@
<!-- Bootstrap Bundle with Popper -->
<script src="{{ url_for('static', filename = 'bootstrap.bundle.min.js') }}"></script>
<script>
/*for sidebar animation - must stay here in layout or else it doesn not work!! */
var TopDistance = 100;
/*Elements of the sidebar*/
let elements = [document.getElementById('one'),
document.getElementById('two'),
document.getElementById('three')];
/* */
window.goTo = function(el){
document.documentElement.scrollTop += el.getBoundingClientRect().top - TopDistance;
}
/* */
function Highlight(el, subtitle){
/*getBoundingClientRect -> get the position of an element relative to the browser's viewport */
/* el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance */
if (el.getBoundingClientRect().top < TopDistance + 1 && el.getBoundingClientRect().bottom > TopDistance){
subtitle.style.color = "#F4CC1E";
subtitle.style.backgroundColor = "#850F78";
subtitle.style.borderRadius = "15px";
console.log("subtitle: ",subtitle)
console.log("style: ", subtitle.style)
console.log("color: ",subtitle.style.color)
console.log("backcolor: ",subtitle.style.backgroundColor)
border-radius
}
else{
subtitle.style.color = "#850F78";
subtitle.style.backgroundColor = "";
}
}
/* */
function HighlightCheck(){
Highlight(elements[0], document.getElementById('subtitle1'));
Highlight(elements[1], document.getElementById('subtitle2'));
Highlight(elements[2], document.getElementById('subtitle3'));
console.log("function HighlightCheck")
}
/* */
window.addEventListener("scroll", HighlightCheck);
// To check correct function
console.log("The Script runs") //Shoul dbe visible on console
console.log(window.frames) //Should be the url
console.log(window.document.getElementById('subtitle1')) //should not be "null" !
</script>
</body>
</html>
wiki/pages/example.html
+ 25
− 16
View file @ 77867daa
......@@ -5,7 +5,7 @@
{% block sidebar %}
<div class="pagenav">
<div class="sidebar">
<div onclick="goTo(document.getElementById('one'))"><span id="subtitle1">Untertitel Eins</span></div>
<div onclick="goTo(document.getElementById('two'))"><span id="subtitle2">Untertitel Zwei</span></div>
<div onclick="goTo(document.getElementById('three'))"><span id="subtitle3">Untertitel Drei</span></div>
......@@ -20,25 +20,34 @@
</text>
</svg>
<div class="h">
<h2 id="one">Untertitel Eins </h2>
<hr>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div id="one">
<h2>Untertitel Eins</h2>
<hr>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="h">
<h2 id="two">Untertitel Zwei </h2>
<hr>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div id="two">
<h2>Untertitel Zwei</h2>
<hr>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="h">
<h2 id="three">Untertitel Drei </h2>
<hr>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<div id="three"> <h2>Untertitel Drei</h2>
<hr>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</div>
</div>
<div class="col">
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment