diff --git a/src/App.vue b/src/App.vue
index ee38def700b86df8d60622b6e70351fca57d9035..4dfdc27af9d079a2986cb3c6489fe62d804edac1 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/assets/main.css b/src/assets/main.css
index 745a8c92f1343cbf79e4b42d9556c8ba21423e44..5bd056873b89260a36fcf27829e57b40738217d5 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -2,4 +2,5 @@
body {
padding-top: 4rem;
max-height: 100vh;
+ background: #181818;
}
diff --git a/src/components/BucketView.vue b/src/components/BucketView.vue
index ba9ad1c03ccd147af7f1b91763f9423854e71477..e6c60116e0b5b51e4fa53543cea96e25cb6fdfdc 100644
--- a/src/components/BucketView.vue
+++ b/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>
diff --git a/src/components/CreateBucketComponent.vue b/src/components/CreateBucketComponent.vue
index b63873ea42d8b4cd55e38fa7dc41a9ab90f449c8..941f0a59d697626a8284ec51346049659ccec209 100644
--- a/src/components/CreateBucketComponent.vue
+++ b/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() {
diff --git a/src/components/NavbarTop.vue b/src/components/NavbarTop.vue
index 83dc01fb8afc6d6ab03c45a8c158f9c824907064..429ffab8c058cb954747f2d66c745e923bb9dcd6 100644
--- a/src/components/NavbarTop.vue
+++ b/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"
diff --git a/src/components/SidebarLeft.vue b/src/components/SidebarLeft.vue
deleted file mode 100644
index 4053d27d9b6870fc1969db2d3085f081cc8bd9b2..0000000000000000000000000000000000000000
--- a/src/components/SidebarLeft.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<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>
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index 6945df994d979e9a93d704de3dae704d84838cd5..86643068a1375e4447a445adbfa36a96fe8ac32c 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -1,14 +1,7 @@
-<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>
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 59b872d9c9fff0beaf44653bf091b2d245c69b2d..1a68764147fb333a3b6650b06641c4ff0cb2c2d2 100644
--- a/src/views/LoginView.vue
+++ b/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>
diff --git a/src/views/NotFoundView.vue b/src/views/NotFoundView.vue
index 51fd974e003e61c5d42fdb71ba6814d2b12994f0..1bf21c077823b5aaf6135081d3e15e30045037a5 100644
--- a/src/views/NotFoundView.vue
+++ b/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>
diff --git a/src/views/object-storage/BucketsView.vue b/src/views/object-storage/BucketsView.vue
index 3a630ac15685232c004730d8855e16c7a118eb32..c3ba42229a60933f5ccb32f15d9de39d9a8a6c80 100644
--- a/src/views/object-storage/BucketsView.vue
+++ b/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>