Start Tailwind UI rebuild
This commit is contained in:
rajchales-monito
@@ -56,6 +56,9 @@ npm.cmd run build:css
|
||||
|
||||
Rules:
|
||||
|
||||
- Treat `src/styles/tailwind.css` as the master style source from now on.
|
||||
- `public/admin.css` is legacy/specialized CSS. Do not add new generic component styling there; migrate repeated UI patterns into Tailwind component classes instead.
|
||||
- New screens and redesigned sections should be built with Tailwind utility classes or reusable classes from `@layer components`.
|
||||
- Prefer reusable Tailwind component classes in `@layer components` over one-off CSS for repeated controls.
|
||||
- Repeated controls should share the same structure: icon before text, centered text, chevron on the right, consistent icon size/color/alignment, height, padding, border, radius, hover, and focus states.
|
||||
- Panel top bars should share height, border, background, text color, and button styling.
|
||||
|
||||
+7
-7
@@ -10,12 +10,12 @@
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section id="loginView" class="login">
|
||||
<form id="loginForm" class="panel">
|
||||
<h1>MaalFlows</h1>
|
||||
<label>Uzivatel <input name="username" autocomplete="username" required></label>
|
||||
<label>Heslo <input name="password" type="password" autocomplete="current-password" required></label>
|
||||
<button type="submit">Prihlasit</button>
|
||||
<section id="loginView" class="login mf-login-shell">
|
||||
<form id="loginForm" class="panel mf-login-card">
|
||||
<h1 class="mf-login-title">MaalFlows</h1>
|
||||
<label class="mf-field">Uzivatel <input class="mf-input" name="username" autocomplete="username" required></label>
|
||||
<label class="mf-field">Heslo <input class="mf-input" name="password" type="password" autocomplete="current-password" required></label>
|
||||
<button class="mf-ui-button-primary" type="submit">Prihlasit</button>
|
||||
<p id="loginError" class="error"></p>
|
||||
</form>
|
||||
</section>
|
||||
@@ -23,7 +23,7 @@
|
||||
<section id="appView" class="app hidden">
|
||||
<aside class="sidebar">
|
||||
<div class="brand">
|
||||
<h1>MaalFlows</h1>
|
||||
<h1 class="mf-toolbar-title">MaalFlows</h1>
|
||||
<div class="brand-actions">
|
||||
<label class="online-dot-toggle" title="Online stav chatu" aria-label="Online stav chatu">
|
||||
<input id="onlineToggle" type="checkbox">
|
||||
|
||||
+19
-37
@@ -6,44 +6,26 @@
|
||||
<title>MaalFlows Preview</title>
|
||||
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
|
||||
<link rel="stylesheet" href="/tailwind.css">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
color: #17211d;
|
||||
background: #f5f7f4;
|
||||
}
|
||||
main {
|
||||
max-width: 980px;
|
||||
margin: 0 auto;
|
||||
padding: 56px 20px;
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
}
|
||||
h1 { margin: 0; font-size: clamp(32px, 5vw, 56px); }
|
||||
p { max-width: 680px; line-height: 1.6; color: #627067; }
|
||||
.demo {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 14px;
|
||||
}
|
||||
.demo div {
|
||||
background: white;
|
||||
border: 1px solid #dfe6e2;
|
||||
border-radius: 8px;
|
||||
padding: 18px;
|
||||
min-height: 120px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>9b-plus test stranka</h1>
|
||||
<p>Tahle stranka simuluje eshop, kam se widget vlozi pres GTM. Otevri bublinu vpravo dole, posli zpravu a sleduj ji v administraci.</p>
|
||||
<section class="demo">
|
||||
<div><strong>Produkt</strong><p>Ukazkova stranka produktu pro sbirani current URL.</p></div>
|
||||
<div><strong>Kosik</strong><p>Referrer, jazyk, timezone a device info se poslou do konverzace.</p></div>
|
||||
<div><strong>Podpora</strong><p>Zakaznik muze napsat hned, kontaktni udaje jsou volitelne.</p></div>
|
||||
<body class="mf-page-shell">
|
||||
<main class="mf-page-main">
|
||||
<header class="grid gap-4">
|
||||
<h1 class="mf-page-title">9b-plus test stranka</h1>
|
||||
<p class="mf-page-copy">Tahle stranka simuluje eshop, kam se widget vlozi pres GTM. Otevri bublinu vpravo dole, posli zpravu a sleduj ji v administraci.</p>
|
||||
</header>
|
||||
<section class="mf-card-grid">
|
||||
<div class="mf-card">
|
||||
<strong class="mf-card-title">Produkt</strong>
|
||||
<p class="mf-card-copy">Ukazkova stranka produktu pro sbirani current URL.</p>
|
||||
</div>
|
||||
<div class="mf-card">
|
||||
<strong class="mf-card-title">Kosik</strong>
|
||||
<p class="mf-card-copy">Referrer, jazyk, timezone a device info se poslou do konverzace.</p>
|
||||
</div>
|
||||
<div class="mf-card">
|
||||
<strong class="mf-card-title">Podpora</strong>
|
||||
<p class="mf-card-copy">Zakaznik muze napsat hned, kontaktni udaje jsou volitelne.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<script>
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -6,13 +6,96 @@
|
||||
--color-surface: #ffffff;
|
||||
--color-ink: #17211d;
|
||||
--color-muted: #647067;
|
||||
--color-line: #dfe6e2;
|
||||
--color-page: #f5f7f4;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-page text-ink antialiased;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.mf-page-shell {
|
||||
@apply min-h-screen bg-page text-ink;
|
||||
}
|
||||
|
||||
.mf-page-main {
|
||||
@apply mx-auto grid w-full max-w-5xl gap-6 px-5 py-12 sm:py-14;
|
||||
}
|
||||
|
||||
.mf-page-title {
|
||||
@apply m-0 text-4xl font-extrabold tracking-normal text-ink sm:text-5xl;
|
||||
}
|
||||
|
||||
.mf-page-copy {
|
||||
@apply max-w-2xl text-base leading-7 text-muted;
|
||||
}
|
||||
|
||||
.mf-card-grid {
|
||||
@apply grid gap-4 md:grid-cols-3;
|
||||
}
|
||||
|
||||
.mf-card {
|
||||
@apply min-h-32 rounded-lg border border-line bg-white p-5 shadow-sm;
|
||||
}
|
||||
|
||||
.mf-card-title {
|
||||
@apply mb-4 block text-sm font-bold text-ink;
|
||||
}
|
||||
|
||||
.mf-card-copy {
|
||||
@apply m-0 text-sm leading-6 text-muted;
|
||||
}
|
||||
|
||||
.mf-login-shell {
|
||||
@apply grid min-h-screen place-items-center bg-page p-6;
|
||||
}
|
||||
|
||||
.mf-login-card {
|
||||
@apply grid w-full max-w-sm gap-4 rounded-lg border border-line bg-white p-6 shadow-sm;
|
||||
}
|
||||
|
||||
.mf-login-title {
|
||||
@apply m-0 pb-1 text-3xl font-extrabold tracking-normal text-ink;
|
||||
}
|
||||
|
||||
.mf-field {
|
||||
@apply grid gap-1.5 text-sm font-medium text-muted;
|
||||
}
|
||||
|
||||
.mf-input {
|
||||
@apply h-10 w-full rounded-md border border-line bg-white px-3 text-sm text-ink shadow-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/25;
|
||||
}
|
||||
|
||||
.mf-textarea {
|
||||
@apply min-h-20 w-full rounded-md border border-line bg-white px-3 py-2 text-sm text-ink shadow-sm outline-none transition focus:border-brand focus:ring-2 focus:ring-brand/25;
|
||||
}
|
||||
|
||||
.mf-ui-button {
|
||||
@apply inline-flex h-10 items-center justify-center gap-2 rounded-md border border-slate-300 bg-white px-3 text-sm font-semibold text-slate-800 shadow-sm transition hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-brand/35;
|
||||
}
|
||||
|
||||
.mf-ui-button-primary {
|
||||
@apply inline-flex h-10 items-center justify-center gap-2 rounded-md border border-brand bg-brand px-4 text-sm font-semibold text-white shadow-sm transition hover:bg-brand/90 focus:outline-none focus:ring-2 focus:ring-brand/35;
|
||||
}
|
||||
|
||||
.mf-icon-button {
|
||||
@apply inline-grid h-8 w-8 place-items-center rounded-md border border-line bg-slate-50 text-ink transition hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-brand/25;
|
||||
}
|
||||
|
||||
.mf-ui-panel-header {
|
||||
@apply flex min-h-14 items-center justify-between border-b border-slate-200 bg-white px-4 text-sm font-semibold text-slate-900;
|
||||
}
|
||||
@@ -20,4 +103,12 @@
|
||||
.mf-ui-select {
|
||||
@apply h-10 rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-800 shadow-sm focus:border-brand focus:outline-none focus:ring-2 focus:ring-brand/25;
|
||||
}
|
||||
|
||||
.mf-toolbar {
|
||||
@apply flex h-14 items-center justify-between gap-3 border-b border-line bg-white px-3;
|
||||
}
|
||||
|
||||
.mf-toolbar-title {
|
||||
@apply m-0 text-lg font-extrabold tracking-normal text-ink;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user