Merge branch 'feature/12-baselayout' into 'development'

Clean base layout

Closes #12

See merge request denbi/object-storage-access-ui!8

src/App.vue

@@ -32,7 +32,7 @@ onBeforeMount(() => {
 
 <template>
   <NavbarTop />
-  <div class="container-fluid" style="min-height: 90vh">
+  <div class="container">
     <router-view></router-view>
   </div>
 </template>

src/assets/main.css

@@ -2,4 +2,5 @@
 body {
     padding-top: 4rem;
     max-height: 100vh;
+    background: #181818;
 }

src/components/BucketView.vue

@@ -15,18 +15,6 @@ const props = defineProps<{
   subFolders: string[] | string;
 }>();
 
-const currentSubFolders: ComputedRef<string[]> = computed(() => {
-  /**
-   * Transform a single sub folder from a string to an array containing the string and
-   * replace an empty string with an empty list
-   */
-  return props.subFolders instanceof Array
-    ? props.subFolders
-    : props.subFolders.length > 0
-    ? [props.subFolders]
-    : [];
-});
-
 // Typescript types
 // -----------------------------------------------------------------------------
 interface S3ObjectWithFolder extends S3ObjectMetaInformation {
@@ -135,6 +123,18 @@ const objectsWithFolders: ComputedRef<S3ObjectWithFolder[]> = computed(() => {
   });
 });
 
+const currentSubFolders: ComputedRef<string[]> = computed(() => {
+  /**
+   * Transform a single sub folder from a string to an array containing the string and
+   * replace an empty string with an empty list
+   */
+  return props.subFolders instanceof Array
+    ? props.subFolders
+    : props.subFolders.length > 0
+    ? [props.subFolders]
+    : [];
+});
+
 const subFolderInUrl: ComputedRef<boolean> = computed(
   () => currentSubFolders.value.length > 0
 );
@@ -270,7 +270,7 @@ function isS3Object(
           }"
           >{{ props.bucketName }}
         </router-link>
-        <span v-else>{{ props.bucketName }}</span>
+        <span v-else class="text-secondary">{{ props.bucketName }}</span>
       </li>
       <li
         class="breadcrumb-item"
@@ -289,7 +289,7 @@ function isS3Object(
           }"
           >{{ folder }}
         </router-link>
-        <span v-else>{{ folder }}</span>
+        <span v-else class="text-secondary">{{ folder }}</span>
       </li>
     </ol>
   </nav>

src/components/CreateBucketComponent.vue

@@ -28,7 +28,6 @@ let createBucketModal: Modal | null = null;
 
 onMounted(() => {
   createBucketModal = new Modal("#" + props.modalID);
-  console.log("Modal ID", props.modalID);
 });
 
 function createBucket() {

src/components/NavbarTop.vue

@@ -3,12 +3,14 @@ import BootstrapIcon from "@/components/BootstrapIcon.vue";
 import { reactive, onBeforeUnmount, onMounted } from "vue";
 import { MiscellaneousService } from "@/client";
 import { useAuthStore } from "@/stores/auth";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { useCookies } from "vue3-cookies";
+import { watch, ref } from "vue";
 
 const router = useRouter();
 const store = useAuthStore();
 const { cookies } = useCookies();
+const route = useRoute();
 
 const api_connection = reactive({ connected: true, timer: null });
 let timer: ReturnType<typeof setInterval> | undefined = undefined;
@@ -28,6 +30,25 @@ function logout() {
   router.push({ name: "login" });
 }
 
+const activeRoute = ref("");
+
+watch(
+  () => route.name,
+  (to) => {
+    if (typeof to === "string") {
+      if (to.startsWith("bucket")) {
+        activeRoute.value = "buckets";
+      } else if (to.startsWith("s3_keys")) {
+        activeRoute.value = "s3_keys";
+      } else {
+        activeRoute.value = "";
+      }
+    } else {
+      activeRoute.value = "";
+    }
+  }
+);
+
 onMounted(() => {
   checkApiHealth();
   timer = setInterval(checkApiHealth, 10000);
@@ -38,9 +59,9 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <nav class="navbar fixed-top navbar-expand-lg text-bg-dark">
-    <div class="container-fluid">
-      <router-link class="navbar-brand ms-3 text-light" to="/">
+  <nav class="navbar navbar-dark fixed-top navbar-expand-lg bg-dark">
+    <div class="container-fluid text-light">
+      <router-link class="navbar-brand ms-3" to="/">
         <img
           src="/src/assets/images/denbi.svg"
           alt=""
@@ -50,6 +71,43 @@ onBeforeUnmount(() => {
         />
         S3 Proxy
       </router-link>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarNavAltMarkup"
+        aria-controls="navbarNavAltMarkup"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+        v-if="store.authenticated && store.user != null"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div
+        class="collapse navbar-collapse"
+        id="navbarNavAltMarkup"
+        v-if="store.authenticated && store.user != null"
+      >
+        <div class="navbar-nav">
+          <router-link
+            class="nav-link"
+            :aria-current="activeRoute === 'buckets' ? 'page' : null"
+            :to="{ name: 'buckets' }"
+            :class="{ active: activeRoute === 'buckets' }"
+          >
+            Buckets
+          </router-link>
+          <router-link
+            class="nav-link"
+            :to="{ name: 's3_keys' }"
+            :aria-current="activeRoute === 's3_keys' ? 'page' : null"
+            :class="{ active: activeRoute === 's3_keys' }"
+          >
+            S3 Keys
+          </router-link>
+        </div>
+      </div>
+
       <span
         v-if="!api_connection.connected"
         class="navbar-text text-bg-danger p-1"

src/components/SidebarLeft.vue

-<script setup lang="ts"></script>
-
-<template>
-  <div
-    class="d-flex flex-column flex-shrink-0 p-3 text-white bg-dark position-fixed top-50 start-0 translate-middle-y min-vh-90"
-    style="width: 200px"
-  >
-    <ul class="nav nav-pills flex-column mb-auto">
-      <li class="nav-item mb-1">
-        <button
-          class="btn btn-lg btn-toggle align-items-center rounded collapsed text-white"
-          data-bs-toggle="collapse"
-          data-bs-target="#os-collapse"
-          aria-expanded="true"
-        >
-          Object Storage
-        </button>
-        <div class="collapse show fs-5" id="os-collapse">
-          <ul class="btn-toggle-nav list-unstyled fw-normal pb-1 small">
-            <li>
-              <router-link :to="{ name: 'buckets' }" class="link-light rounded"
-                >Buckets</router-link
-              >
-            </li>
-            <li>
-              <router-link :to="{ name: 's3_keys' }" class="link-light rounded"
-                >S3 Keys</router-link
-              >
-            </li>
-          </ul>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style scoped>
-a {
-  text-decoration: none;
-}
-
-.min-vh-90 {
-  min-height: 90vh;
-}
-</style>

src/views/DashboardView.vue

-<script setup lang="ts">
-import SidebarLeft from "@/components/SidebarLeft.vue";
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <div class="row">
-    <SidebarLeft class="col-2" />
-    <div class="col-10 offset-md-2">
-      <router-view />
-    </div>
-  </div>
+  <router-view />
 </template>
 
 <style scoped></style>

src/views/LoginView.vue

@@ -18,12 +18,14 @@ onBeforeMount(() => {
 
 <template>
   <div
-    class="card text-center bg-dark ms-md-auto position-absolute top-50 start-50 translate-middle"
+    class="card text-center bg-dark ms-md-auto position-fixed top-50 start-50 translate-middle"
   >
     <div class="card-header text-dark bg-light">LoginView</div>
     <div class="card-body p-5">
-      <h5 class="card-title">Login</h5>
-      <p class="card-text">Login to this service with LifeScience</p>
+      <h5 class="card-title text-light">Login</h5>
+      <p class="card-text text-secondary">
+        Login to this service with LifeScience
+      </p>
       <a :href="OpenAPI.BASE + '/auth/login'" class="m-2">
         <img src="/src/assets/images/ls-login.png" alt="[LS Login]" />
       </a>

src/views/NotFoundView.vue

@@ -2,13 +2,20 @@
 
 <template>
   <div
-    class="container p-3 top-50 left-50 translate-middle position-fixed text-center"
+    class="card min-w-25 text-center bg-dark ms-md-auto position-fixed top-50 start-50 translate-middle"
   >
-    <span class="fs-1 mb-5">Page Not Found</span><br />
-    <span class="fs-3"
-      >Back to the <router-link to="/">HomePage</router-link></span
-    >
+    <div class="card-header text-dark bg-light fs-4">Something went wrong</div>
+    <div class="card-body p-5">
+      <h1 class="card-title text-light mb-5">Page Not Found</h1>
+      <p class="card-text text-secondary fs-4">
+        Back to the <router-link to="/">HomePage</router-link>
+      </p>
+    </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.min-w-25 {
+  min-width: 25%;
+}
+</style>

src/views/object-storage/BucketsView.vue

@@ -47,12 +47,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="row m-2 border-bottom border-light">
+  <div class="row m-2 border-bottom border-light mt-4">
     <div class="col-12"></div>
-    <h1 class="mb-2">Buckets</h1>
+    <h1 class="mb-2 text-light">Buckets</h1>
   </div>
   <div class="row m-2 mt-4">
-    <div class="col-2">
+    <div class="col-3">
       <div class="d-flex justify-content-between">
         <button
           type="button"
@@ -116,7 +116,7 @@ onMounted(() => {
         </div>
       </div>
     </div>
-    <div class="col-8">
+    <div class="col-9">
       <router-view></router-view>
     </div>
   </div>