MALIO-DEV/Supervisor
3
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: reduce style loading flash

Browse Source
This commit is contained in:
Kevin Boudet
2026-03-10 10:40:46 +01:00
parent 8fd4aba63e
commit 4e393dd5e9
6 changed files with 876 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
assets/css/main.css
View File

@@ -20,14 +20,18 @@
--font-mono: "JetBrains Mono", "Fira Code", monospace;
}
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
@layer base {
html {
background: rgb(var(--m-bg));
color-scheme: dark;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
font-family: var(--font-display);
background: rgb(var(--m-bg));
color: rgb(var(--m-text));
@@ -35,6 +39,10 @@
-moz-osx-font-smoothing: grayscale;
transition: background-color 0.4s ease, color 0.4s ease;
}
img {
display: block;
}
}
@layer utilities {

4
assets/css/malio.css
View File

@@ -1,7 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--m-primary: 15 20 40;

141
layouts/default.vue
View File

@@ -4,50 +4,48 @@
<div class="sidebar-header">
<div class="logo-container">
<img
:src="logoSrc"
alt="Logo Malio"
class="logo"
:src="logoSrc"
alt="Logo Malio"
class="logo"
/>
</div>
<div class="brand-copy">
<p class="brand-title">Supervisor</p>
</div>
<div class="sidebar-divider" />
<div class="sidebar-divider"/>
</div>
<div class="sidebar-content">
<slot name="sidebar" />
<slot name="sidebar"/>
<nav class="sidebar-nav" aria-label="Sections">
<p class="nav-label">Navigation</p>
<NuxtLink
v-for="item in navItems"
:key="item.to"
v-slot="{ href, navigate, isExactActive }"
:to="item.to"
custom
>
<a
:href="href"
class="nav-link"
:class="{ 'nav-link-active': isExactActive }"
:aria-current="isExactActive ? 'page' : undefined"
@click="navigate(); isMenuOpen = false"
>
<span class="nav-link-main">
<span class="nav-icon">
<IconifyIcon :icon="item.icon" class="text-lg" />
</span>
<span>
<span class="nav-title">{{ item.label }}</span>
<span class="nav-caption">{{ item.caption }}</span>
</span>
</span>
<span class="nav-pill">{{ item.short }}</span>
</a>
</NuxtLink>
<div class="flex flex-col gap-2">
<div class="bg-m-tertiary rounded-lg border border-m-accent/6">
<NuxtLink
to="/"
class="flex items-center gap-3 px-4 py-2 rounded-lg text-white hover:bg-m-tertiary/80 transition-colors"
>
<IconifyIcon
icon="mdi:home"
class="text-lg"/>
<p>Home</p>
</NuxtLink>
</div>
<div class="bg-m-tertiary rounded-lg border border-m-accent/6">
<NuxtLink
to="/backup"
class="flex items-center gap-3 px-4 py-2 rounded-lg text-white hover:bg-m-tertiary/80 transition-colors"
>
<IconifyIcon
icon="mdi:data"
class="text-lg"/>
<p>Backup</p>
</NuxtLink>
</div>
</div>
</nav>
</div>
<div class="sidebar-footer">
<div class="sidebar-divider" />
<div class="sidebar-divider"/>
<div class="footer-row">
<p class="font-mono text-[10px] tracking-widest uppercase text-white/40">
Supervisor {{ appVersion }}
@@ -57,18 +55,18 @@
</aside>
<button class="mobile-menu-button" type="button" @click="isMenuOpen = true">
<IconifyIcon icon="mdi:menu" class="text-2xl" />
<IconifyIcon icon="mdi:menu" class="text-2xl"/>
</button>
<div v-if="isMenuOpen" class="mobile-menu-backdrop" @click="isMenuOpen = false" />
<div v-if="isMenuOpen" class="mobile-menu-backdrop" @click="isMenuOpen = false"/>
<aside v-if="isMenuOpen" class="mobile-sidebar" aria-label="Navigation mobile">
<div class="sidebar-header">
<div class="logo-container">
<img
:src="logoSrc"
alt="Logo Malio"
class="logo"
:src="logoSrc"
alt="Logo Malio"
class="logo"
/>
</div>
<div class="brand-copy">
@@ -78,29 +76,29 @@
Tableau de bord interne pour le monitoring et les sauvegardes.
</p>
</div>
<div class="sidebar-divider" />
<div class="sidebar-divider"/>
</div>
<div class="sidebar-content">
<slot name="sidebar" />
<slot name="sidebar"/>
<nav class="sidebar-nav" aria-label="Sections mobiles">
<p class="nav-label">Navigation</p>
<NuxtLink
v-for="item in navItems"
:key="`mobile-${item.to}`"
v-slot="{ href, navigate, isExactActive }"
:to="item.to"
custom
v-for="item in navItems"
:key="`mobile-${item.to}`"
v-slot="{ href, navigate, isExactActive }"
:to="item.to"
custom
>
<a
:href="href"
class="nav-link"
:class="{ 'nav-link-active': isExactActive }"
:aria-current="isExactActive ? 'page' : undefined"
@click="navigate(); isMenuOpen = false"
:href="href"
class="nav-link"
:class="{ 'nav-link-active': isExactActive }"
:aria-current="isExactActive ? 'page' : undefined"
@click="navigate(); isMenuOpen = false"
>
<span class="nav-link-main">
<span class="nav-icon">
<IconifyIcon :icon="item.icon" class="text-lg" />
<IconifyIcon :icon="item.icon" class="text-lg"/>
</span>
<span>
<span class="nav-title">{{ item.label }}</span>
@@ -113,7 +111,7 @@
</nav>
</div>
<div class="sidebar-footer">
<div class="sidebar-divider" />
<div class="sidebar-divider"/>
<div class="status-card">
<p class="status-label">Environnement</p>
<p class="status-value">Production</p>
@@ -126,25 +124,25 @@
Supervisor {{ appVersion }}
</p>
<button class="close-button" type="button" @click="isMenuOpen = false">
<IconifyIcon icon="mdi:close" class="text-xl" />
<IconifyIcon icon="mdi:close" class="text-xl"/>
</button>
</div>
</div>
</aside>
<main class="content bg-noise">
<slot />
<slot/>
</main>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue"
import { Icon as IconifyIcon } from "@iconify/vue"
import {ref} from "vue"
import {Icon as IconifyIcon} from "@iconify/vue"
import logoSrc from '~/assets/LOGO_CARRE_BLANC.png'
const {
public: { appVersion }
public: {appVersion}
} = useRuntimeConfig()
const isMenuOpen = ref(false)
const navItems = [
@@ -175,9 +173,9 @@ const navItems = [
.sidebar,
.mobile-sidebar {
background: linear-gradient(
180deg,
rgb(var(--m-sidebar-from)) 0%,
rgb(var(--m-sidebar-to)) 100%
180deg,
rgb(var(--m-sidebar-from)) 0%,
rgb(var(--m-sidebar-to)) 100%
);
color: white;
display: flex;
@@ -259,10 +257,10 @@ const navItems = [
height: 1px;
margin: 0.75rem 1.5rem;
background: linear-gradient(
90deg,
transparent,
var(--m-sidebar-divider),
transparent
90deg,
transparent,
var(--m-sidebar-divider),
transparent
);
}
@@ -299,11 +297,10 @@ const navItems = [
border: 1px solid transparent;
color: white;
text-decoration: none;
transition:
background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
transition: background-color 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
.nav-link:hover {
@@ -319,8 +316,7 @@ const navItems = [
}
.nav-link-active {
background:
linear-gradient(135deg, rgb(var(--m-accent) / 0.16), rgb(255 255 255 / 0.04));
background: linear-gradient(135deg, rgb(var(--m-accent) / 0.16), rgb(255 255 255 / 0.04));
border-color: rgb(var(--m-accent) / 0.24);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}
@@ -378,9 +374,8 @@ const navItems = [
padding: 1rem;
border-radius: 16px;
border: 1px solid rgb(var(--m-accent) / 0.14);
background:
radial-gradient(circle at top right, rgb(var(--m-accent) / 0.14), transparent 30%),
rgb(255 255 255 / 0.04);
background: radial-gradient(circle at top right, rgb(var(--m-accent) / 0.14), transparent 30%),
rgb(255 255 255 / 0.04);
}
.status-label {

12
nuxt.config.ts
View File

@@ -22,6 +22,18 @@ export default defineNuxtConfig({
compatibilityDate: "2025-07-15",
devtools: { enabled: true },
css: ["~/assets/css/main.css"],
app: {
head: {
link: [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{ rel: "preconnect", href: "https://fonts.gstatic.com", crossorigin: "" },
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap"
}
]
}
},
runtimeConfig: {
public: {
appVersion: getRepoVersion()

786
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -11,6 +11,7 @@
},
"dependencies": {
"@iconify/vue": "^5.0.0",
"iconify": "^1.4.0",
"nuxt": "^4.3.1",
"vue": "^3.5.29",
"vue-router": "^4.6.4"