v0.4.1 - fix: @apply anim brak alle Tailwind-styling
All checks were successful
Deploy server-up (prod) / deploy (push) Successful in 51s
Deploy server-up (dev) / deploy (push) Successful in 4s

This commit is contained in:
bes-r 2026-06-06 20:53:14 +02:00
parent 79ab901d9e
commit 9b388af0cc
3 changed files with 16 additions and 4 deletions

View file

@ -1,3 +1,15 @@
# v0.4.1 — Fix: styling werd niet toegepast
## Fix bovenop v0.4.0
De volledige Tailwind-stylesheet faalde stil omdat `.modal` via `@apply` de
eigen CSS-animatieklasse `anim` toepaste. Tailwind's `@apply` accepteert alleen
Tailwind-utilities, geen losse CSS-klassen, waardoor de hele Play-CDN-compilatie
afbrak en de pagina ongestyled (kaal HTML) werd geladen. De animatie staat nu
als gewone CSS-regel (`.anim, .modal { animation: … }`) los van `@apply`.
---
# v0.4.0 — Volledig nieuw UI-ontwerp (Modern SaaS) # v0.4.0 — Volledig nieuw UI-ontwerp (Modern SaaS)
## Nieuw in v0.4.0 ## Nieuw in v0.4.0

View file

@ -18,7 +18,7 @@ from core.modules import Module, CORE, discover
app = Flask(__name__, static_folder="static", template_folder="templates") app = Flask(__name__, static_folder="static", template_folder="templates")
VERSION = os.environ.get("SU_VERSION", "0.4.0") VERSION = os.environ.get("SU_VERSION", "0.4.1")
MODULES: list[Module] = [] MODULES: list[Module] = []
USER_MOD = APP / "modules" USER_MOD = APP / "modules"

View file

@ -56,7 +56,7 @@ tailwind.config = {
::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-track { background: transparent; }
.dark ::-webkit-scrollbar-thumb { background: rgb(48 60 76 / .8); } .dark ::-webkit-scrollbar-thumb { background: rgb(48 60 76 / .8); }
@keyframes fadeup { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } } @keyframes fadeup { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform:none; } }
.anim { animation: fadeup .28s ease both; } .anim, .modal { animation: fadeup .28s ease both; }
.log-ok{color:#4ade80}.log-error{color:#f87171}.log-warn{color:#fbbf24}.log-info{color:#60a5fa}.log-dim{color:#7c8aa0}.log-section{color:#818cf8;font-weight:600} .log-ok{color:#4ade80}.log-error{color:#f87171}.log-warn{color:#fbbf24}.log-info{color:#60a5fa}.log-dim{color:#7c8aa0}.log-section{color:#818cf8;font-weight:600}
</style> </style>
</head> </head>
@ -714,7 +714,7 @@ tailwind.config = {
.empty { @apply text-center py-16 text-dm dark:text-dm-dark; } .empty { @apply text-center py-16 text-dm dark:text-dm-dark; }
.empty span { @apply text-5xl opacity-40 block mb-2; } .empty span { @apply text-5xl opacity-40 block mb-2; }
.empty p { @apply text-sm; } .empty p { @apply text-sm; }
.modal { @apply bg-s1 dark:bg-s1-dark border border-bd dark:border-bd-dark rounded-2xl w-full shadow-pop anim; } .modal { @apply bg-s1 dark:bg-s1-dark border border-bd dark:border-bd-dark rounded-2xl w-full shadow-pop; }
.modal-head { @apply px-5 py-4 text-base font-extrabold text-wh dark:text-wh-dark flex items-center gap-2.5 border-b border-bd dark:border-bd-dark; } .modal-head { @apply px-5 py-4 text-base font-extrabold text-wh dark:text-wh-dark flex items-center gap-2.5 border-b border-bd dark:border-bd-dark; }
.modal-body { @apply px-5 py-4; } .modal-body { @apply px-5 py-4; }
.modal-foot { @apply px-5 py-4 flex justify-end gap-2 border-t border-bd dark:border-bd-dark; } .modal-foot { @apply px-5 py-4 flex justify-end gap-2 border-t border-bd dark:border-bd-dark; }
@ -724,7 +724,7 @@ tailwind.config = {
<script> <script>
function app() { function app() {
return { return {
version: '0.4.0', version: '0.4.1',
page: location.hash.slice(1) || 'dashboard', page: location.hash.slice(1) || 'dashboard',
isMobile: window.innerWidth < 768, isMobile: window.innerWidth < 768,
sidebarOpen: window.innerWidth >= 768 && localStorage.getItem('sidebar') !== 'closed', sidebarOpen: window.innerWidth >= 768 && localStorage.getItem('sidebar') !== 'closed',