Added Navigation

pull/18/head^2
Trivernis 6 years ago
parent 1a7cda36f2
commit d68baeae61

@ -52,10 +52,25 @@ function toggleActionMenu() {
} }
} }
/**
* Navigates inside the app
* @param view the targeted view
* @param title the title of the targtet that is displayed
*/
function navigate(view, title) { function navigate(view, title) {
if (view !== 'index.htm') window.location.hash = view;
else window.location.hash = "";
$('.content').load(view); $('.content').load(view);
let sideTitle = title || view.replace(/\.htm/, ''); let sideTitle = title || view.replace(/\.htm/, '');
$('.navigationBar .title').html("<span>" + sideTitle + "</span>"); setTitle(sideTitle);
}
/**
* Sets the title that is displayed for the view
* @param title
*/
function setTitle(title) {
$('.navigationBar .title').html("<span>" + title + "</span>");
} }
// -- Events -- // -- Events --

@ -18,47 +18,3 @@
body body
font-family: ubuntuL font-family: ubuntuL
//a
color: $link-color
//a:hover
color: lighten($link-color, 10%)
//a:visited
color: darken($link-color, 10%)
//h1, h2, h3, h4, h5
line-height: 1.5em
// tag-like classes
//.title
font-size: 30pt
//.content
padding: 0px 10%
margin: auto
line-height: 1.5em
//.footer
position: absolute
width: 100%
bottom: 0px
left: 0px
background: $bar-color
//.header
padding: 1px 1px
position: static
width: 100%
top: 0px
left: 0px
background: $bar-color
//.spacer
height: 50px
// attribute-like classes
//.justify
text-align: justify

@ -42,10 +42,12 @@
background: url("/icons/menu.svg") no-repeat center, $cPrimary background: url("/icons/menu.svg") no-repeat center, $cPrimary
transition-duration: 0.3s transition-duration: 0.3s
cursor: pointer cursor: pointer
border-radius: 0
.menu:hover .menu:hover
background: url("/icons/menu.svg") no-repeat center, darken($cPrimary, 4%) background: url("/icons/menu.svg") no-repeat center, darken($cPrimary, 4%)
.menu:active .menu:active
background: url("/icons/menu.svg") no-repeat center, lighten($cPrimary, 4%) background: url("/icons/menu.svg") no-repeat center, lighten($cPrimary, 4%)
border-radius: 2em
.button .button
background: $cPrimary background: $cPrimary
padding: 1em $sPadding 0 padding: 1em $sPadding 0

@ -16,6 +16,6 @@
</p> </p>
<div class="spacer"> <div class="spacer">
</div> </div>
<p class="justify"> <script type="text/javascript">
setTitle('About')
</p> </script>

@ -1,6 +1,5 @@
<h1> Data </h1> <h1> Data </h1>
<div> <div id="app">
<div style="height: 100px; width: 100%"> <div style="height: 100px; width: 100%">
<svg viewBox="0 0 100 100" style="height: 100%; width: 100%"> <svg viewBox="0 0 100 100" style="height: 100%; width: 100%">
<polygon <polygon
@ -11,3 +10,6 @@
</div> </div>
<script src="/data.js" type="text/javascript"> <script src="/data.js" type="text/javascript">
</script> </script>
<script type="text/javascript">
setTitle('Data')
</script>

@ -19,3 +19,6 @@
<div class="panel"> <div class="panel">
</div> </div>
</div> </div>
<script type="text/javascript">
setTitle('Home')
</script>

@ -3,7 +3,6 @@
<title> Landing 1 </title> <title> Landing 1 </title>
</head> </head>
<body> <body>
<div class="accentBar"></div>
<div class="app"> <div class="app">
<div class="actionList"> <div class="actionList">
<ul> <ul>
@ -28,7 +27,7 @@
</div> </div>
<div class="content"> <div class="content">
<script type="text/javascript"> <script type="text/javascript">
navigate('index.htm', 'Home'); navigate(window.location.hash.replace('#', '') || 'index.htm', window.location.hash || 'Home');
</script> </script>
</div> </div>
</div> </div>

Loading…
Cancel
Save