Wippidu UI Specification

Streamlined UI design guidelines for consistent user experience across all roles and devices. Based on Issue #172 requirements and current state analysis (2026-01-18).

Current State Summary

Screenshots Captured (38 total)

Role	Desktop	Mobile	Key Pages
Parent	10	3	home, child detail, news, messages, parental letters, calendar, notify, settings
Employee	4	-	home, notifications, news, parental letters
GroupLead	6	-	home, news (with create), parental letters, registrations, bulk invitations, news create form
LocationLead	4	-	home, location settings, access times, global letters
Admin	8	-	home, users, children, news, tokens, sync, email settings, legal settings
Dual-role	2	-	parent view, employee view

Current UI Issues Identified

Issue	Current State	Target State (per #172)
Main menu icons	Text only, no icons	Icons with text on hover (desktop), icons before text (mobile)
Messages location	In main menu	Move to secondary/sidebar menu
Admin/Settings gear	Not present	Gear icon near logout button
Admin menu grouping	Flat list (11 items)	Grouped into 4 categories
Resources menu	Visible	Hidden (per issue #173)
Daily business focus	All items visible	Hide Registrierungen, QR-Codes behind gear icon
Search button	Separate line from input	Same line as search field
Create button	In header (mostly good)	Upper right of page (standardize)

Target UI Design

Desktop (>768px):

[Logo] [Icon][Icon][Icon][Icon][Icon] ... [Lang] [Theme] [Gear] [User] [Logout]
         ^    ^    ^    ^    ^
        Home News PL  Cal  ...
        (text shown on hover)

Mobile (<=768px):

[Logo]                    [Hamburger]
       ↓ (when open)
[Icon] Home
[Icon] News (badge)
[Icon] Elternbriefe (badge)
[Icon] Kalender
---
[Sidebar content]

Item	Icon Suggestion	Badge	Notes
Home	`house` / `home`	-	Always visible
News	`newspaper` / `megaphone`	Unread count	Always visible
Elternbriefe	`envelope-open-text` / `mail`	Unread count	Always visible
Kalender	`calendar`	-	Always visible

Removed from main menu: - Nachrichten (Messages) - moved to sidebar under "Konto" or standalone section

Located: Left of user name, right of theme toggle

All Users: - Einstellungen (Settings) - Passwort ändern (Change password)

GroupLead/LocationLead (additional): - Registrierungen (Registrations) - QR-Codes erstellen (Bulk invitations)

Admin (additional): - All administration items (grouped)

Parent Role

Eltern-Menü
├── Abwesenheit melden
├── Benachrichtigungsverlauf
└── Betreuungstage

Nachrichten
└── Nachrichten (moved from main menu)

Konto
└── (handled by gear icon)

Sprache
├── Deutsch
└── English

Employee Role

Mitarbeiter-Menü
├── Kind-Benachrichtigungen
└── Alle Kinder am Standort (if permitted)

Nachrichten
└── Nachrichten

Konto
└── (handled by gear icon)

Sprache
├── Deutsch
└── English

GroupLead Role

Mitarbeiter-Menü
├── Kind-Benachrichtigungen
└── Alle Kinder am Standort

Nachrichten
└── Nachrichten

Konto
└── (handled by gear icon - includes Registrierungen, QR-Codes)

Sprache
├── Deutsch
└── English

LocationLead Role

Mitarbeiter-Menü
├── Kind-Benachrichtigungen
└── Alle Kinder am Standort

Standort-Verwaltung
├── Eltern-Zugriffszeiten
├── Standort-Einstellungen
└── Eltern-Zugangskontrolle

Nachrichten
└── Nachrichten

Konto
└── (handled by gear icon)

Sprache
├── Deutsch
└── English

App-Einstellungen
├── E-Mail-Einstellungen
├── Rechtliche Seiten
├── Daten-Synchronisation
└── API Tokens

Datenverwaltung
├── Benutzerverwaltung
├── Kinderverwaltung
├── Registrierungen
└── Mitarbeiter-Einladungen

Globale Kommunikation
├── Globale News
└── QR-Codes erstellen

Standort-Einstellungen
├── (Location selector)
└── Standort-Einstellungen (when location selected)

Button Placement Standards

Create/Action Buttons

Standard: Upper right of page header

<div class="page-header">
    <h1>Page Title</h1>
    <div class="page-header-actions">
        <a href="..." class="btn btn-primary">Create New</a>
    </div>
</div>

CSS:

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.page-header-actions {
    display: flex;
    gap: var(--space-sm);
}

Form Submit Buttons

Standard: Bottom of form, left-aligned with primary action first

<div class="form-actions">
    <button type="submit" class="btn btn-primary">Save</button>
    <a href="..." class="btn btn-secondary">Cancel</a>
</div>

Inline Action Buttons (Tables/Lists)

Standard: Right side of row, icon buttons

<td class="row-actions">
    <a href="..." class="btn-icon btn-icon-edit" title="Edit">...</a>
    <button class="btn-icon btn-icon-delete" title="Delete">...</button>
</td>

Form Design Standards

Search Forms

Standard: Input and button on same line

<form class="search-form">
    <div class="search-input-group">
        <input type="text" name="q" placeholder="Search..." class="search-input">
        <button type="submit" class="btn btn-primary">Search</button>
    </div>
</form>

CSS:

.search-input-group {
    display: flex;
    gap: var(--space-xs);
    max-width: 500px;
}

.search-input {
    flex: 1;
}

Standard Form Layout

<form class="standard-form">
    <div class="form-group">
        <label for="field">Label *</label>
        <input type="text" id="field" name="field" required>
        <small class="form-hint">Helper text</small>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Submit</button>
        <a href="..." class="btn btn-secondary">Cancel</a>
    </div>
</form>

Responsive Design

Breakpoints

Name	Width	Usage
Mobile	<= 768px	Single column, hamburger menu, stacked layouts
Tablet	769px - 1024px	Two column where appropriate
Desktop	> 1024px	Full layout, sidebar visible

Mobile Adaptations

Header: Logo + Hamburger only, hide language/theme toggles in menu
Main Menu: Collapse to hamburger, show icons before text
Sidebar: Hidden by default, slides in from left
Forms: Full width inputs, stacked buttons
Tables: Horizontal scroll or card view conversion

Icon Specifications

Recommended Icon Set

Use inline SVG icons for consistency and styling flexibility.

<!-- Home -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
    <polyline points="9 22 9 12 15 12 15 22"/>
</svg>

<!-- News -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M19 20H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v1"/>
    <path d="M21 16V8a2 2 0 0 0-2-2h-1"/>
    <line x1="3" y1="10" x2="17" y2="10"/>
</svg>

<!-- Parental Letters / Mail -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
    <polyline points="22,6 12,13 2,6"/>
</svg>

<!-- Calendar -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
    <line x1="16" y1="2" x2="16" y2="6"/>
    <line x1="8" y1="2" x2="8" y2="6"/>
    <line x1="3" y1="10" x2="21" y2="10"/>
</svg>

<!-- Gear/Settings -->
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
    <circle cx="12" cy="12" r="3"/>
    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
</svg>

Implementation Checklist

[ ] Add icons to main menu items
[ ] Implement icon-only with hover text for desktop
[ ] Implement icon + text for mobile hamburger menu
[ ] Move "Nachrichten" from main menu to sidebar
[ ] Add gear icon to header (left of user name)
[ ] Create gear icon dropdown menu component
[ ] Move Registrierungen/QR-Codes to gear menu for GroupLead/LocationLead
[ ] Group Admin menu items into categories

Phase 2: Hide Resources (Issue #173)

[ ] Remove Resources section from sidebar
[ ] Or conditionally show based on feature flag

Phase 3: UI Consistency

[ ] Standardize create button placement (upper right)
[ ] Fix search button to be on same line as input
[ ] Review all forms for consistent button placement
[ ] Ensure all pages use page-header pattern

Phase 4: Testing

[ ] Test all roles (Parent, Employee, GroupLead, LocationLead, Admin)
[ ] Test dual-role switching
[ ] Test mobile responsiveness
[ ] Verify no functionality lost

Files to Modify

File	Changes
`templates/layouts/base.html`	Main menu icons, gear icon, header restructure
`templates/includes/menus.html`	Sidebar menu restructuring, grouping
`static/style.css`	New styles for icons, gear menu, search layout
Various page templates	Standardize page-header pattern

Reference

Issue #172: https://gitea.wippidu.net/Wippidu/app/issues/172
Issue #173: Resources hiding (referenced in #172)
Screenshots: /tmp/wippidu-ui-catalog/ (temporary, for analysis)

Last Updated: 2026-01-18