Mark Pinkster 5d4a591de6 Restyling UI

2026-01-16 12:43:16 +01:00

13 KiB

Raw Blame History

Planner Redesign Plan - Uniforme UI & Typografie

Overzicht

Redesign van de planner interface om een cleane, uniforme uitstraling te creëren met consistente knoppen, typografie en kleurgebruik. Focus op het verminderen van visuele ruis en het verbeteren van de gebruiksvriendelijkheid.

Huidige Problemen

Planner Interface (`planner.php`)

Inconsistente knoppen: Mix van verschillende button stijlen en groottes
- "Gepland" badge, "Leeg" badge, "Niet Gepland" badge (verschillende kleuren)
- "Starttijd aanpassen" knop met tekst + icoon
- "Kopieer Blok" knop met tekst + icoon
- "Sync naar Talpa" knop met tekst + icoon
- Omhoog/omlaag/verwijder knoppen in tabel (klein formaat)
- "Toevoegen" knop in dropdown rij
Drukke header van blokken: Te veel informatie en knoppen naast elkaar
Inconsistente spacing: Verschillende marges en paddings
Te veel tekst op knoppen: Kan compacter met alleen iconen waar duidelijk

Andere Schermen

calendar.php: Sidebar met infomercials, zoom controls, block info
blocks.php: Template management met formulieren
index.php: Dashboard met statistieken en snelle acties
infomercials.php: Lijst met infomercials en upload status

Design System

1. Kleurenpalet (Rustig & Consistent)

Brand Colors (Behouden)

--brand-primary: #32327D;    /* Paars - hoofdkleur */
--brand-accent: #32B4AA;     /* Turquoise - accent */

UI Kleuren (Nieuw - Rustig Palet)

/* Neutrale basis */
--ui-bg-primary: #FFFFFF;
--ui-bg-secondary: #F8F9FA;
--ui-bg-tertiary: #E9ECEF;
--ui-border: #DEE2E6;
--ui-border-light: #E9ECEF;

/* Tekst */
--text-primary: #212529;
--text-secondary: #6C757D;
--text-muted: #ADB5BD;

/* Status kleuren (gedempter) */
--status-success: #28A745;
--status-success-light: #D4EDDA;
--status-warning: #FFC107;
--status-warning-light: #FFF3CD;
--status-danger: #DC3545;
--status-danger-light: #F8D7DA;
--status-info: #17A2B8;
--status-info-light: #D1ECF1;

/* Interactie */
--hover-bg: #F1F3F5;
--active-bg: #E9ECEF;
--focus-ring: rgba(50, 50, 125, 0.25);

Infomercial Kleuren

Blijven zoals ze zijn - dynamisch toegewezen per infomercial

2. Typografie Hiërarchie

/* Headings */
--font-h1: 2rem;      /* 32px - Page titles */
--font-h2: 1.5rem;    /* 24px - Section titles */
--font-h3: 1.25rem;   /* 20px - Card headers */
--font-h4: 1.125rem;  /* 18px - Subsections */
--font-h5: 1rem;      /* 16px - Small headers */
--font-h6: 0.875rem;  /* 14px - Tiny headers */

/* Body */
--font-base: 0.9375rem;  /* 15px - Base text */
--font-small: 0.875rem;  /* 14px - Small text */
--font-tiny: 0.8125rem;  /* 13px - Tiny text */

/* Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* Line heights */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.75;

3. Button System

Button Sizes

/* Extra Small - Voor tabel acties */
.btn-xs {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  min-width: 32px;
  height: 28px;
}

/* Small - Voor compacte UI */
.btn-sm {
  padding: 0.375rem 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  min-width: 36px;
  height: 32px;
}

/* Medium (default) - Standaard knoppen */
.btn {
  padding: 0.5rem 1rem;
  font-size: 0.9375rem;
  border-radius: 0.5rem;
  min-width: 40px;
  height: 38px;
}

/* Large - Call-to-action knoppen */
.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  border-radius: 0.5rem;
  min-width: 48px;
  height: 44px;
}

Button Variants

Icon-Only Buttons (Geen tekst, alleen icoon)

Verwijderen: <button class="btn-icon btn-icon-danger"><i class="bi bi-trash"></i></button>
Bewerken: <button class="btn-icon btn-icon-primary"><i class="bi bi-pencil"></i></button>
Omhoog: <button class="btn-icon btn-icon-secondary"><i class="bi bi-arrow-up"></i></button>
Omlaag: <button class="btn-icon btn-icon-secondary"><i class="bi bi-arrow-down"></i></button>
Kopiëren: <button class="btn-icon btn-icon-info"><i class="bi bi-files"></i></button>
Sync: <button class="btn-icon btn-icon-success"><i class="bi bi-cloud-upload"></i></button>
Tijd aanpassen: <button class="btn-icon btn-icon-secondary"><i class="bi bi-clock"></i></button>

Text + Icon Buttons (Voor belangrijke acties)

Primaire acties: "Toevoegen", "Opslaan", "Synchroniseren"
Gebruik alleen waar context nodig is

Ghost Buttons (Subtiele acties)

Transparante achtergrond, alleen border
Voor secundaire acties

Button States

/* Default state */
.btn-icon {
  background: transparent;
  border: 1px solid var(--ui-border);
  color: var(--text-secondary);
  transition: all 0.15s ease;
}

/* Hover state */
.btn-icon:hover {
  background: var(--hover-bg);
  border-color: var(--ui-border);
  color: var(--text-primary);
  transform: translateY(-1px);
}

/* Active state */
.btn-icon:active {
  background: var(--active-bg);
  transform: translateY(0);
}

/* Focus state */
.btn-icon:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

4. Spacing System

/* Consistent spacing scale */
--space-xs: 0.25rem;   /* 4px */
--space-sm: 0.5rem;    /* 8px */
--space-md: 1rem;      /* 16px */
--space-lg: 1.5rem;    /* 24px */
--space-xl: 2rem;      /* 32px */
--space-2xl: 3rem;     /* 48px */

5. Badges & Status Indicators

/* Sync status badges */
.badge-sync {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.badge-sync-complete {
  background: var(--status-success-light);
  color: var(--status-success);
}

.badge-sync-partial {
  background: var(--status-warning-light);
  color: #856404;
}

.badge-sync-none {
  background: var(--status-danger-light);
  color: var(--status-danger);
}

.badge-sync-empty {
  background: var(--ui-bg-tertiary);
  color: var(--text-secondary);
}

Implementatie Plan

Fase 1: Core Design System (`assets/css/custom.css`)

Voeg CSS variabelen toe
- Kleurenpalet
- Typografie schaal
- Spacing systeem
Creëer button system
- .btn-icon classes
- Size variants (xs, sm, md, lg)
- Color variants (primary, secondary, success, danger, info, warning)
- States (hover, active, focus, disabled)
Creëer badge system
- Status badges
- Sync indicators
- Count badges
Typography utilities
- Heading classes
- Text size utilities
- Weight utilities

Fase 2: Planner Redesign (`planner.php`)

Block Header Redesign

Voor:

<div class="block-header">
  <span class="badge">Gepland</span>
  <button class="btn btn-sm">Starttijd aanpassen</button>
  <button class="btn btn-sm">Kopieer Blok</button>
  <button class="btn btn-sm">Sync naar Talpa</button>
</div>

Na:

<div class="block-header">
  <div class="block-header-left">
    <h6 class="block-title">SBS9 Nachtblok</h6>
    <span class="badge-sync badge-sync-complete">
      <i class="bi bi-check-circle-fill"></i>
      Gepland
    </span>
  </div>
  <div class="block-header-actions">
    <button class="btn-icon btn-icon-sm btn-icon-secondary" title="Starttijd">
      <i class="bi bi-clock"></i>
    </button>
    <button class="btn-icon btn-icon-sm btn-icon-info" title="Kopieer">
      <i class="bi bi-files"></i>
    </button>
    <button class="btn-icon btn-icon-sm btn-icon-success" title="Sync">
      <i class="bi bi-cloud-upload"></i>
    </button>
  </div>
  <div class="block-header-time">
    02:00 - 04:30 | <strong>24 min</strong> resterend
  </div>
</div>

Table Actions Redesign

Voor:

<div class="btn-group btn-group-sm">
  <button class="btn btn-outline-secondary"><i class="bi bi-arrow-up"></i></button>
  <button class="btn btn-outline-secondary"><i class="bi bi-arrow-down"></i></button>
  <button class="btn btn-outline-danger"><i class="bi bi-trash"></i></button>
</div>

Na:

<div class="action-buttons">
  <button class="btn-icon btn-icon-xs btn-icon-secondary">
    <i class="bi bi-arrow-up"></i>
  </button>
  <button class="btn-icon btn-icon-xs btn-icon-secondary">
    <i class="bi bi-arrow-down"></i>
  </button>
  <button class="btn-icon btn-icon-xs btn-icon-danger">
    <i class="bi bi-trash"></i>
  </button>
</div>

Infomercial Sidebar Cleanup

Compactere items
Betere spacing
Duidelijkere hover states

Fase 3: Calendar View (`calendar.php`)

Block info cards: Compacter design met icon-only buttons
Zoom controls: Icon-only buttons
Sidebar: Consistente styling met planner
Modals: Uniforme button styling

Fase 4: Blocks Management (`blocks.php`)

Form styling: Consistente input styling
Table actions: Icon-only buttons
Status badges: Nieuwe badge system

Fase 5: Dashboard (`index.php`)

Stat cards: Cleaner design met betere typografie
Quick actions: Consistente card styling
Tables: Uniforme button styling

Fase 6: Infomercials (`infomercials.php`)

List view: Compacter met icon-only actions
Upload status: Nieuwe badge system
Forms: Consistente styling

Visuele Voorbeelden

Button Groepen

┌─────────────────────────────────────────┐
│ Block Header                            │
├─────────────────────────────────────────┤
│ SBS9 Nachtblok  [✓ Gepland]            │
│                                         │
│ [🕐] [📋] [☁️]    02:00-04:30 | 24 min │
└─────────────────────────────────────────┘

Table Actions

┌──────────────────────────────────────────┐
│ Product         | Duur | Acties          │
├──────────────────────────────────────────┤
│ Clever Cane     | 30m  | [↑] [↓] [🗑️]   │
│ Sani Skin       | 15m  | [↑] [↓] [🗑️]   │
└──────────────────────────────────────────┘

Status Badges

[✓ Gepland]        - Groen (alle items gesynchroniseerd)
[⚠ Deels (2/5)]   - Geel (sommige items gesynchroniseerd)
[✗ Niet Gepland]  - Rood (geen items gesynchroniseerd)
[○ Leeg]          - Grijs (geen items in blok)

Implementatie Volgorde

✅ Design System Documentatie (dit document)
CSS Updates (assets/css/custom.css)
- Voeg CSS variabelen toe
- Creëer button system
- Creëer badge system
- Typography utilities
Planner Redesign (planner.php)
- Block headers
- Table actions
- Sidebar
Calendar View (calendar.php)
Blocks Management (blocks.php)
Dashboard (index.php)
Infomercials (nog niet in codebase, maar voorbereiden)

Mermaid Diagram: Component Hiërarchie

graph TD
    A[Design System] --> B[Colors]
    A --> C[Typography]
    A --> D[Spacing]
    A --> E[Components]
    
    E --> F[Buttons]
    E --> G[Badges]
    E --> H[Cards]
    E --> I[Tables]
    
    F --> F1[Icon-Only]
    F --> F2[Text + Icon]
    F --> F3[Ghost]
    
    G --> G1[Status]
    G --> G2[Sync]
    G --> G3[Count]
    
    B --> B1[Brand Colors]
    B --> B2[UI Colors]
    B --> B3[Status Colors]
    
    C --> C1[Headings]
    C --> C2[Body Text]
    C --> C3[Weights]

Mermaid Diagram: Implementatie Flow

graph LR
    A[CSS Variables] --> B[Button System]
    B --> C[Badge System]
    C --> D[Typography]
    D --> E[Planner PHP]
    E --> F[Calendar PHP]
    F --> G[Blocks PHP]
    G --> H[Index PHP]
    H --> I[Testing]
    I --> J[Refinement]

Belangrijke Overwegingen

Toegankelijkheid

Voldoende contrast ratios (WCAG AA)
Focus states voor keyboard navigatie
Duidelijke hover states
Geen tooltips nodig (iconen zijn duidelijk genoeg)

Performance

Gebruik CSS variabelen voor snelle theming
Minimale JavaScript voor interacties
Hergebruik van classes

Consistentie

Alle knoppen gebruiken hetzelfde systeem
Alle badges gebruiken hetzelfde systeem
Alle spacing gebruikt de spacing scale
Alle kleuren komen uit het palet

Responsive Design

Buttons blijven bruikbaar op kleine schermen
Stack buttons verticaal op mobiel indien nodig
Behoud touch-friendly sizes (min 44x44px)

Volgende Stappen

Review dit plan met het team
Goedkeuring voor implementatie
Start met CSS updates
Implementeer per scherm
Test en verfijn
Documenteer voor toekomstig gebruik

13 KiB Raw Blame History