Improved breadcrumb navigation

Co-authored-by: LarsVomMars <lars@kroenner.eu>

10 files changed, 71 insertions, 5 deletions

diff --git a/src/main/resources/css/files.css b/src/main/resources/css/files.css
index ba47202..9037d3a 100644
--- a/src/main/resources/css/files.css
+++ b/src/main/resources/css/files.css
@@ -2,6 +2,11 @@
     transition: all .2s linear;
 }
 
+.navigation {
+    position: relative;
+    padding: 0;
+}
+
 .navigation a {
     text-decoration: none;
     color: inherit;
diff --git a/src/main/resources/css/fileview.css b/src/main/resources/css/fileview.css
index bc30926..06b5778 100644
--- a/src/main/resources/css/fileview.css
+++ b/src/main/resources/css/fileview.css
@@ -2,6 +2,10 @@ html, body {
     overflow: visible;
 }
 
+.navigation {
+    position: relative;
+}
+
 .modify, .switch, .settings, .preview {
     display: none;
 }
diff --git a/src/main/resources/css/layout.css b/src/main/resources/css/layout.css
index b319e24..a0a8f37 100644
--- a/src/main/resources/css/layout.css
+++ b/src/main/resources/css/layout.css
@@ -22,6 +22,18 @@ button {
     color: #424242;
 }
 
+.navigation {
+    padding: 8px;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.navigation a {
+    text-decoration: none;
+    color: inherit;
+}
+
 .flex {
     display: flex;
     flex-flow: wrap column;
diff --git a/src/main/resources/views/admin.rocker.html b/src/main/resources/views/admin.rocker.html
index 7bd25a9..aa4fff6 100644
--- a/src/main/resources/views/admin.rocker.html
+++ b/src/main/resources/views/admin.rocker.html
@@ -2,6 +2,12 @@
 @args (String message, Context ctx)
 
 @layout.template("Index", ctx, RockerContent.NONE, RockerContent.NONE) -> {
+<div class="navigation">
+    <h3>
+        <a href="/"><i class="icon ion-md-home"></i></a>
+        <a href="">Admin</a>
+    </h3>
+</div>
 <div class="flex">
     <div>
         <h1>Add new user</h1>
diff --git a/src/main/resources/views/files.rocker.html b/src/main/resources/views/files.rocker.html
index 8e75ac2..2392928 100644
--- a/src/main/resources/views/files.rocker.html
+++ b/src/main/resources/views/files.rocker.html
@@ -17,20 +17,27 @@
 
 @layout.template(files.size() + " Files", ctx, css, js) -> {
 <div class="drop" id="drop">
-    <h2 class="navigation">
-        <i class="icon ion-md-home"></i>
+    <h3 class="navigation">
+        <a href="/"><i class="icon ion-md-home"></i></a>
+        <a href="/files/">Files</a>
+
+        @if (!path.isEmpty()) {
+        <i class='icon ion-ios-arrow-forward'></i>
+        }
+
         @if (!isShared) {
         @for (int i = 0; i < path.split("/").length - 1; i++) {
         <a href='@(new String(new char[path.split("/").length - i - 1]).replace("\0", "../"))'>@path.split("/")[i]</a>
         <i class='icon ion-ios-arrow-forward'></i>
         }
         @if (path.split("/").length > 0) {
+        <!-- TEST 2 -->
         <a href="">@(path.split("/")[path.split("/").length - 1])</a>
         }
-        } else {
+        } else { <!-- is shared -->
         <a href="">@(path.split("/")[path.split("/").length - 1])</a>
         }
-    </h2>
+    </h3>
 
     <table id="table">
         <colgroup>
diff --git a/src/main/resources/views/fileview.rocker.html b/src/main/resources/views/fileview.rocker.html
index 30e0caf..62ae1b5 100644
--- a/src/main/resources/views/fileview.rocker.html
+++ b/src/main/resources/views/fileview.rocker.html
@@ -22,6 +22,14 @@
 }
 
 @layout.template("File " + filename, ctx, css, js) -> {
+<div class="navigation">
+    <h3>
+        <a href="/"><i class="icon ion-md-home"></i></a>
+        <a href="../">Files</a>
+        <i class='icon ion-ios-arrow-forward'></i>
+        <a href="">@filename</a>
+    </h3>
+</div>
 <button class="switch" id="raw">Show preview</button>
 <span class="settings" id="settings">
     <label for="code">Linecount</label><input id="code" type="checkbox">
diff --git a/src/main/resources/views/index.rocker.html b/src/main/resources/views/index.rocker.html
index ee681f8..5f71ea1 100644
--- a/src/main/resources/views/index.rocker.html
+++ b/src/main/resources/views/index.rocker.html
@@ -12,6 +12,12 @@
 }
 
 @layout.template("Index", ctx, css, js) -> {
+<div class="navigation">
+    <h3>
+        <a href="/"><i class="icon ion-md-home"></i></a>
+        <a href="">Home</a>
+    </h3>
+</div>
 <div class="flex">
     @if (username.length() > 0) {
     <button class="toggle" id="toggle">
@@ -23,7 +29,7 @@
     </button>
     }
 
-    <h1>Welcome to Kloud<span class="username">@(username == "" ? "" : " " + username)</span>!</h1>
+    <h1>Welcome to Kloud<span class="username">@(username == "" ? "" : ", " + username)</span>!</h1>
 
     <div>
         @if(username.length() > 0) {
diff --git a/src/main/resources/views/login.rocker.html b/src/main/resources/views/login.rocker.html
index 1e2adc4..b811025 100644
--- a/src/main/resources/views/login.rocker.html
+++ b/src/main/resources/views/login.rocker.html
@@ -7,6 +7,12 @@
 }
 
 @layout.template("Login", ctx, RockerContent.NONE, js) -> {
+<div class="navigation">
+    <h3>
+        <a href="/"><i class="icon ion-md-home"></i></a>
+        <a href="">Login</a>
+    </h3>
+</div>
 <div class="flex">
     <h1>Login</h1>
 
diff --git a/src/main/resources/views/register.rocker.html b/src/main/resources/views/register.rocker.html
index 8516561..c89eef3 100644
--- a/src/main/resources/views/register.rocker.html
+++ b/src/main/resources/views/register.rocker.html
@@ -2,6 +2,12 @@
 @args (String username, String token, String message, Context ctx)
 
 @layout.template("Register", ctx, RockerContent.NONE, RockerContent.NONE) -> {
+<div class="navigation">
+    <h3>
+        <a href="/"><i class="icon ion-md-home"></i></a>
+        <a href="">Register</a>
+    </h3>
+</div>
 <div class="flex">
     <h1>Register</h1>
 
diff --git a/src/main/resources/views/setup.rocker.html b/src/main/resources/views/setup.rocker.html
index 3601817..7fa312c 100644
--- a/src/main/resources/views/setup.rocker.html
+++ b/src/main/resources/views/setup.rocker.html
@@ -2,6 +2,12 @@
 @args (String message, Context ctx)
 
 @layout.template("Setup", ctx, RockerContent.NONE, RockerContent.NONE) -> {
+<div class="navigation">
+    <h3>
+        <a href="/"><i class="icon ion-md-home"></i></a>
+        <a href="">Setup</a>
+    </h3>
+</div>
 <div class="flex">
     <h1>Setup</h1>