kubooboo/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

💄 UI Changes

Browse Source
This commit is contained in:
andreas.dinauer 2025-10-27 18:48:56 +01:00
parent 013a629ad2
commit 74ebe0b925
5 changed files with 53 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
assets/style.css
View File

@ -11,11 +11,12 @@
html {
--primary-color: rgb(87, 75, 255);
background-color: #f1f1f1;
--tile-color: rgb(226, 226, 226);
--tile-color: rgb(255, 255, 255);
background-color: rgb(240, 240, 240);
}
html * {
color: rgb(31, 31, 31);
color: black;
}
html, body, #__nuxt {
@ -27,7 +28,7 @@ html, body, #__nuxt {
display: grid;
grid-template-columns: auto auto auto 1fr auto auto;
align-content: start;
background-color: rgb(228, 228, 228);
background-color: rgb(247, 247, 247);
}
.resource, .header {
display: contents;
@ -45,10 +46,13 @@ html, body, #__nuxt {
display: flex;
align-items: center;
}
.resource:hover > .grid-element {
background-color: #c2c2c2;
}
.resource p {
font-weight: 600;
font-family: "Source Code Pro", monospace;
}
.even > .grid-element {
background-color: rgb(202, 202, 202);
background-color: rgb(233, 233, 233);
}

2
components/ui/UiInput.vue
View File

@ -27,7 +27,7 @@ defineProps<{
.field input, .field .input, .field textarea, .field select {
min-height: 2.5rem;
border-radius: 0.25rem;
background-color: rgb(51, 51, 51);
background-color: rgb(255, 255, 255);
width: 100%;
border: 2px solid #444444;
outline: none;

14
pages/account/inspect/statefulsets.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<p>{{ namespace }}</p>
</template>
<script setup lang="ts">
const namespace = computed(() => {
const namespace = useRoute().params.namespace;
if (namespace)
{
return namespace;
}
return "Alle";
});
</script>

3
pages/account/inspect/statefulsets/[namespace].vue Normal file
View File

@ -0,0 +1,3 @@
<template>
</template>

48
pages/index.vue
View File

@ -1,23 +1,26 @@
<template>
<div class="login-wrapper">
<h2>Kubooboo</h2>
<img class="logo" src="@/assets/logo.png" alt="">
<form class="login content-xl" @submit.prevent="doLogin()">
<div class="center">
<h1>Login</h1>
</div>
<div class="content-l">
<UiInput label="Username">
<input type="text" v-model="loginCredentials.username">
</UiInput>
<UiInput label="Passwort">
<input type="password" v-model="loginCredentials.password">
</UiInput>
</div>
<div class="center">
<UiButton @onclick="() => doLogin()" :loading="loading" icon="login" reverse>Login</UiButton>
</div>
</form>
<div class="tile-l login-window">
<h2>Kubooboo</h2>
<img class="logo" src="@/assets/logo.png" alt="">
<form class="login content-xl" @submit.prevent="doLogin()">
<div class="center">
<h1>Login</h1>
</div>
<div class="content-l">
<UiInput label="Username">
<input type="text" v-model="loginCredentials.username">
</UiInput>
<UiInput label="Passwort">
<input type="password" v-model="loginCredentials.password">
</UiInput>
</div>
<div class="center">
<UiButton @onclick="() => doLogin()" :loading="loading" icon="login" reverse>Login</UiButton>
</div>
</form>
</div>
</div>
</template>
@ -61,12 +64,13 @@ function setSessionCookie(session: Session, exp: number)
justify-content: center;
align-items: center;
flex-direction: column;
}
.login {
.login-window {
display: flex;
flex-direction: column;
align-items: center;
width: 640px;
background-color: #f1f1f1;
padding: 2rem;
border-radius: 0.5rem;
}
.logo {
width: 10rem;