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

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

@ -9,24 +9,24 @@
<p>{{ initError }}</p> <p>{{ initError }}</p>
<p style="color: var(--fg2);">Please check your configuration and try again.</p> <p style="color: var(--fg2);">Please check your configuration and try again.</p>
</section> </section>
<div v-else-if="dashboard"> <template v-else-if="dashboard">
<section v-if="dashboard.contents.length == 0"> <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> <p style = "text-align: center" class = "padding">This dashboard is empty.</p>
</section> </section>
<section class="transparent" v-else> <section class="transparent" v-else>
<div v-for="component in dashboard.contents" :key="component.title"> <div class = "dashboard-row" v-for="component in dashboard.contents" :key="component.title">
<fieldset> <h2 v-if = "dashboard.title != 'Default'">{{ component.title }}</h2>
<legend v-if = "dashboard.title != 'Default'">{{ component.title }}</legend>
<fieldset>
<template v-for="subcomponent in component.contents"> <template v-for="subcomponent in component.contents">
<DashboardComponent :component="subcomponent" /> <DashboardComponent :component="subcomponent" />
</template> </template>
</fieldset> </fieldset>
</div> </div>
</section> </section>
</div> </template>
</template> </template>
<script setup> <script setup>
@ -154,7 +154,16 @@ onUnmounted(() => {
</script> </script>
<style> <style scoped>
h2 {
font-weight: bold;
text-align: center;
padding: 1em;
padding-top: 1.5em;
grid-column: 1 / -1;
}
fieldset { fieldset {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, 180px); grid-template-columns: repeat(auto-fit, 180px);
@ -163,6 +172,7 @@ fieldset {
place-items: stretch; place-items: stretch;
} }
@keyframes spin { @keyframes spin {
from { from {
transform: rotate(0deg); 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 */ 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 { main {
padding-top: 4em; padding-top: 4em;
} }
@ -25,14 +17,6 @@ dialog {
border-radius: 1em; border-radius: 1em;
} }
legend {
font-weight: bold;
text-align: center;
padding: 1em;
padding-top: 1.5em;
width: 100%;
}
section { section {
padding: 0; padding: 0;
} }