medlogic
/
olivetin
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chore: Improve dashboard markup and layout

This commit is contained in:
jamesread 2025-11-26 22:57:26 +00:00
parent b47cf7cab3
commit 695ad65d3e
2 changed files with 23 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/resources/vue/Dashboard.vue
View File

@ -9,24 +9,24 @@
<p>{{ initError }}</p>
<p style="color: var(--fg2);">Please check your configuration and try again.</p>
</section>
<div v-else-if="dashboard">
<template v-else-if="dashboard">
<section v-if="dashboard.contents.length == 0">
<legend>{{ dashboard.title }}</legend>
<h2>{{ dashboard.title }}</h2>
<p style = "text-align: center" class = "padding">This dashboard is empty.</p>
</section>
<section class="transparent" v-else>
<div v-for="component in dashboard.contents" :key="component.title">
<fieldset>
<legend v-if = "dashboard.title != 'Default'">{{ component.title }}</legend>
<div class = "dashboard-row" v-for="component in dashboard.contents" :key="component.title">
<h2 v-if = "dashboard.title != 'Default'">{{ component.title }}</h2>
<fieldset>
<template v-for="subcomponent in component.contents">
<DashboardComponent :component="subcomponent" />
</template>
</fieldset>
</div>
</section>
</div>
</template>
</template>
<script setup>
@ -154,15 +154,25 @@ onUnmounted(() => {
</script>
<style>
fieldset {
display: grid;
grid-template-columns: repeat(auto-fit, 180px);
grid-auto-rows: 1fr;
justify-content: center;
place-items: stretch;
<style scoped>
h2 {
font-weight: bold;
text-align: center;
padding: 1em;
padding-top: 1.5em;
grid-column: 1 / -1;
}
fieldset {
display: grid;
grid-template-columns: repeat(auto-fit, 180px);
grid-auto-rows: 1fr;
justify-content: center;
place-items: stretch;
}
@keyframes spin {
from {
transform: rotate(0deg);

16
frontend/style.css
View File

@ -9,14 +9,6 @@ aside {
z-index: 3; /* Make sure the sidebar is on top of the terminal */
}
fieldset {
display: grid;
grid-template-columns: repeat(auto-fit, 180px);
grid-auto-rows: 1fr;
justify-content: center;
place-items: stretch;
}
main {
padding-top: 4em;
}
@ -25,14 +17,6 @@ dialog {
border-radius: 1em;
}
legend {
font-weight: bold;
text-align: center;
padding: 1em;
padding-top: 1.5em;
width: 100%;
}
section {
padding: 0;
}