Added Navigation

6 years ago · d68baeae61
parent 1a7cda36f2
commit d68baeae61
7 changed files with 42 additions and 65 deletions
--- a/glob/script.js
+++ b/glob/script.js
@ -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) {
+    if (view !== 'index.htm') window.location.hash = view;
+    else window.location.hash = "";
    $('.content').load(view);
    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 --
--- a/glob/style.sass
+++ b/glob/style.sass
@ -18,47 +18,3 @@

 body
  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
--- a/glob/style/elements.sass
+++ b/glob/style/elements.sass
@ -42,10 +42,12 @@
    background: url("/icons/menu.svg") no-repeat center, $cPrimary
    transition-duration: 0.3s
    cursor: pointer
+    border-radius: 0
  .menu:hover
    background: url("/icons/menu.svg") no-repeat center, darken($cPrimary, 4%)
  .menu:active
    background: url("/icons/menu.svg") no-repeat center, lighten($cPrimary, 4%)
+    border-radius: 2em
  .button
    background: $cPrimary
    padding: 1em $sPadding 0
--- a/res/html/about.htm
+++ b/res/html/about.htm
@ -16,6 +16,6 @@
 </p>
 <div class="spacer">
 </div>
-<p class="justify">
-
-</p>
+<script type="text/javascript">
+    setTitle('About')
+</script>
--- a/res/html/data.htm
+++ b/res/html/data.htm
@ -1,13 +1,15 @@
-
-    <h1> Data </h1>
-    <div>
-      <div style="height: 100px; width: 100%">
-        <svg viewBox="0 0 100 100" style="height: 100%; width: 100%">
-          <polygon
-            v-bind:points="temperatureData">
-          </polygon>
-        </svg>
-      </div>
-    </div>
-    <script src="/data.js" type="text/javascript">
-    </script>
+<h1> Data </h1>
+<div id="app">
+	<div style="height: 100px; width: 100%">
+		<svg viewBox="0 0 100 100" style="height: 100%; width: 100%">
+			<polygon
+					v-bind:points="temperatureData">
+			</polygon>
+		</svg>
+	</div>
+</div>
+<script src="/data.js" type="text/javascript">
+</script>
+<script type="text/javascript">
+	setTitle('Data')
+</script>
--- a/res/html/index.htm
+++ b/res/html/index.htm
@ -19,3 +19,6 @@
 	<div class="panel">
 	</div>
 </div>
+<script type="text/javascript">
+    setTitle('Home')
+</script>
--- a/res/html/index.html
+++ b/res/html/index.html
@ -3,7 +3,6 @@
 		<title> Landing 1 </title>
 	</head>
 	<body>
-	<div class="accentBar"></div>
 	<div class="app">
 		<div class="actionList">
 			<ul>
@ -28,7 +27,7 @@
 			</div>
 			<div class="content">
 				<script type="text/javascript">
-					navigate('index.htm', 'Home');
+					navigate(window.location.hash.replace('#', '') || 'index.htm', window.location.hash || 'Home');
 				</script>
 			</div>
 		</div>