Browse Source

Merkanalyse web-vs-app: 13 nieuwe taken (P0-11/12, P1-32..36, P2-16..21) + merk-DNA van uitgaanskrant.com vastgelegd

Look&feel-review van uitgaanskrant.com naast de app: site-palet en
typografie uitgelezen uit live CSS, app-styling geteld over lib/,
screenshots via profile-build op emulator. Kernbevinding: app-thema
staat nog op FlutterFlow-fabrieksinstellingen (primary #4B39EF) terwijl
er 3 bijna-gelijke roden los hardcoded staan, geen daarvan het logo-rood.

Rapport: https://claude.ai/code/artifact/29f3412a-305f-49f3-971c-cd9bd310beb1
Werklijst: https://claude.ai/code/artifact/0c0c7347-d681-417d-83d7-7feb1de6457d

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
bob 2 weeks ago
parent
commit
858e3a55dc
2 changed files with 180 additions and 0 deletions
  1. 37 0
      CLAUDE.md
  2. 143 0
      TASKS.md

+ 37 - 0
CLAUDE.md

@@ -349,6 +349,23 @@ export PATH="/home/bob/fvm/bin:$HOME/.pub-cache/bin:$PATH" && /home/bob/Projects
   crash van de app zelf. Bouw bij dit toestel bewust een korte
   crash van de app zelf. Bouw bij dit toestel bewust een korte
   `sleep`/wachttijd tussen opeenvolgende input-acties in i.p.v. ze
   `sleep`/wachttijd tussen opeenvolgende input-acties in i.p.v. ze
   direct na elkaar te vuren.
   direct na elkaar te vuren.
+- **Screenshots van de website zelf (voor look&feel-vergelijkingen):
+  headless Chromium werkt, maar met twee valkuilen.** (1) Snap-Chromium
+  mag niet schrijven in `/tmp/claude-*` (Permission denied) — schrijf
+  naar `~/uk-shots/` o.i.d. (2) De homepage opent met een
+  cookiebanner + een JS-modal die het hele scherm vult, en
+  `--blink-settings=scriptEnabled=false` laat `--screenshot` stil
+  falen. Werkend recept: pagina ophalen met Python, `<script>`-tags
+  strippen, `<base href="https://uitgaanskrant.com/">` in de `<head>`
+  zetten, lokaal opslaan en dán `chromium --headless=new
+  --window-size=430,1500 --screenshot=x.png file://...` — CSS en
+  afbeeldingen laden gewoon via de base-href.
+- **Telefoonformaat-screenshots zonder de telefoon-emulator te
+  claimen:** de tablet-AVD (`emulator-5556`) is tijdelijk om te zetten
+  met `adb -s emulator-5556 shell wm size 1080x2160` +
+  `wm density 420`, en daarna terug met `wm size reset` /
+  `wm density reset`. Handig wanneer op `emulator-5554` al een
+  debug-sessie van iemand anders draait die je niet wilt verstoren.
 - **AVD crasht/valt soms zelf uit (los van de app) — diagnose via
 - **AVD crasht/valt soms zelf uit (los van de app) — diagnose via
   `journalctl --user -u android-emulator.service` (telefoon) of
   `journalctl --user -u android-emulator.service` (telefoon) of
   `...-tablet.service` (tablet), niet via `adb logcat`.** Bevestigd
   `...-tablet.service` (tablet), niet via `adb logcat`.** Bevestigd
@@ -1443,6 +1460,26 @@ exacte veldnaam+type-specificatie (kost hem seconden per veld).
 
 
 ## Domein/architectuurcontext
 ## Domein/architectuurcontext
 
 
+- **Merk-DNA van uitgaanskrant.com (bron van waarheid voor look&feel;
+  uitgelezen 2026-08-30 uit de live CSS + berekende stijlen).** Vier
+  kleuren met elk één vaste rol, nergens door elkaar gebruikt:
+  **#9A141D** logo-rood = identiteit, **#FF680D** oranje = actie
+  (links, menubalk, actieve pagina, knoppen), **#3E454C** leisteen =
+  chroom én standaard tekstkleur, **#09B34A** groen = categorielabel.
+  Verder: #EE3338 locatiespeldje, #F2F2F2 kruimelpad/rustvlakken.
+  Typografie: **Roboto** voor interface (body 14px, sectiekoppen 16px
+  600 in kapitalen), **Droid Serif bold** voor inhoudelijke titels
+  (Noto Serif is de directe opvolger in Google Fonts). Componenten:
+  witte kaart met 3px #EEE rand, **geen** afronding en **geen**
+  schaduw; categorielabel is een recht groen blokje (12px, padding
+  `0 7px`), geen pil; Font-Awesome-icoon vóór datum en adres;
+  kruimelpad op elke detailpagina. **Vuistregel bij twijfel: rood is
+  merk en chroom, oranje is wat je aanklikt om verder te komen** — de
+  site gebruikt rood nóóit als knopkleur. Het app-thema staat nog op
+  FlutterFlow-fabrieksinstellingen (`primary` #4B39EF); zie P1-32 t/m
+  P1-34 en het Designbrug-rapport in `TASKS.md` voor de mapping.
+
+
 - **Firebase App Check beschermt alleen Firebase-diensten zelf
 - **Firebase App Check beschermt alleen Firebase-diensten zelf
   (Firestore/Cloud Functions/Storage), niet de eigen Drupal-backend van
   (Firestore/Cloud Functions/Storage), niet de eigen Drupal-backend van
   dit project.** Besproken 2026-08-25 (Bob's vraag n.a.v. FlutterFlow's
   dit project.** Besproken 2026-08-25 (Bob's vraag n.a.v. FlutterFlow's

+ 143 - 0
TASKS.md

@@ -876,6 +876,35 @@ export: `EdgeInsetsDirectional.fromSTEB(0.0, 0.0, 0.0, 48.0)` staat nu
 op regel 1279. `SafeArea` bleek dus niet nodig, gewone vaste padding
 op regel 1279. `SafeArea` bleek dus niet nodig, gewone vaste padding
 volstond. Uit deze lijst verwijderd.)*
 volstond. Uit deze lijst verwijderd.)*
 
 
+
+---
+
+*(Onderstaande taken komen uit de merkanalyse web-vs-app van 2026-08-30.
+Volledige onderbouwing met screenshots: [Designbrug-rapport](https://claude.ai/code/artifact/29f3412a-305f-49f3-971c-cd9bd310beb1).
+Afvinkbare werklijst: [Designbrug werklijst](https://claude.ai/code/artifact/0c0c7347-d681-417d-83d7-7feb1de6457d).)*
+
+**P0-11 · Eigenaar: Bob.** Menu (`drawer_component_widget.dart`)
+scrollt praktisch niet: 21 items, past op geen telefoonscherm, en
+schuift alleen na een lange doelbewuste veeg — een korte veeg doet
+zichtbaar niets. Gevolg: "Thuis bezorgen", "Mijn Account" en de
+terugknop worden door een deel van de gebruikers nooit gezien.
+Vermoedelijke oorzaak: `SingleChildScrollView` binnen
+`SingleChildScrollView` (regel 97 en 124). Fix: buitenste scroll-wrapper
+weg, en Provincie/Gemeente inklapbaar maken of samenvoegen tot één
+lijst met een schakelaar erboven (halveert de lengte én maakt het
+verschil tussen die twee eindelijk zichtbaar).
+
+**P0-12 · Eigenaar: Bob.** Twee identieke hartjes met verschillende
+betekenis op één scherm. Het hartje in de header favoriet de
+**gemeente** (`header_buttons_component_widget.dart`:254,
+`addToFavorieteGemeenteIds`); het hartje op de pagina favoriet de
+**gelegenheid** (`horecagelegenheid_current_widget.dart`:380-427).
+Niets onderscheidt ze. Fix: labels erbij ("Gemeente volgen" tegenover
+"Bewaren"), of het gemeentehartje uit de header halen en één keer bij
+de gemeentekeuze zetten. Voeg bij gemeente-volgen de regel toe die de
+site ook gebruikt: dat je die gemeente donderdags in de agendamail
+krijgt — dat verband is in de app nergens zichtbaar.
+
 ## Minor — non-blockers (launch mag hier niet op wachten)
 ## Minor — non-blockers (launch mag hier niet op wachten)
 
 
 Bob's expliciete categorie (2026-08-14): kleine restpunten uit P0-8 die
 Bob's expliciete categorie (2026-08-14): kleine restpunten uit P0-8 die
@@ -2075,6 +2104,60 @@ incident** — **7 nid's** bevatten hetzelfde kapotte-`?`-patroon
 `?`-patronen) — bedoeld als concrete startlijst voor handmatig herstel
 `?`-patronen) — bedoeld als concrete startlijst voor handmatig herstel
 in Drupal, geen uitputtende audit.
 in Drupal, geen uitputtende audit.
 
 
+
+---
+
+*(Onderstaande taken komen uit de merkanalyse web-vs-app van 2026-08-30.
+Volledige onderbouwing met screenshots: [Designbrug-rapport](https://claude.ai/code/artifact/29f3412a-305f-49f3-971c-cd9bd310beb1).
+Afvinkbare werklijst: [Designbrug werklijst](https://claude.ai/code/artifact/0c0c7347-d681-417d-83d7-7feb1de6457d).)*
+
+**P1-32 · Eigenaar: Bob** (7 velden, ±10 min in zijn eigen browser).
+Merkkleuren in Theme Settings → Colors zetten; het thema staat nog
+volledig op FlutterFlow-fabrieksinstelling. `primary` #4B39EF →
+**#9A141D** (logo-rood), `secondary` #39D2C0 → **#FF680D**
+(actie-oranje van de site), `tertiary` #EE8B60 → **#09B34A**
+(categoriegroen), `primaryText` #14181B → **#3E454C**, `secondaryText`
+#57636C → **#838A8F**, `primaryBackground` #F1F4F8 → **#F2F2F2**,
+`alternate` #E0E3E7 → **#EEEEEE**. **Direct daarna nalopen:** alle nu
+paarse knoppen worden hierdoor rood, maar op de site is rood nooit een
+knopkleur — "Alle evenementen"/"Alle horecagelegenheden" horen oranje
+te worden. Vuistregel: rood = merk en chroom, oranje = wat je aanklikt.
+
+**P1-33 · Eigenaar: Claude** (mechanisch, ±1 sessie; pas ná P1-32).
+Drie bijna-gelijke hardcoded roden vervangen door thema-`primary`:
+`#B1061E` (42×), `#B50808` (15×), `#B12727` (8×) — geen daarvan is het
+logo-rood. Verspreid over 25 bestanden; zwaartepunten:
+`header_buttons_component_widget.dart` (4×, staat op vrijwel elk
+scherm), `horecagelegenheden_overzicht_widget.dart` (7×),
+`..._overzicht_provincie_page_widget.dart` (7×),
+`..._overzicht_page_data_type_widget.dart` (7×),
+`horecagelegenheid_current_widget.dart` (4×). Die drie
+overzicht-varianten zijn onderling kopieën — elke ingreep is er drie
+keer dezelfde; samenvoegen tot één pagina met parameters scheelt bij
+élke volgende taak op die schermen.
+
+**P1-34 · Eigenaar: Bob** (1 instelling). Body-lettertype in Theme
+Settings → Typography van Inter/Inter Tight naar **Roboto**, het
+lettertype van de site. Layoutrisico klein (letters lijken sterk op
+elkaar); daarna wel even de tabbalken nalopen, daar zit de minste
+ruimte.
+
+**P1-35 · Eigenaar: Bob** (klein per pagina). Advertentieblok staat op
+de detailpagina's direct onder de titel en duwt tabs/adres/tijden onder
+de vouw. De site zet advertenties consequent ná de inhoud. Verplaats de
+`AdBanner`-node naar onder de Info-tab of onderaan de pagina, op
+`horecagelegenheid_current` en `event_current`/
+`evenement_horecagelegenheid`.
+
+**P1-36 · Eigenaar: Bob.** In `horecagelegenheidoverzicht_kaart_widget.dart`
+liggen drie groene categoriepillen over het logo van de zaak heen
+(precies over de naam in het beeldmerk), met daarnaast een leeg grijs
+vlak van dezelfde grootte — leest als een kapotte afbeelding. Fix:
+labels uit de `Stack` halen en onder titel/adres plaatsen (zoals de
+site), leeg grijs vlak weg, en meteen labelvorm van pil naar recht
+blokje (radius 8 → 0). Los van P2-12 (blur-hash-laadplaatshouder,
+al afgerond) — dit is een leeg vlak, geen laadprobleem.
+
 ## P2 — features & concept, na livegang
 ## P2 — features & concept, na livegang
 
 
 **P2-1 · Eigenaar: Bob — testen in de API, komt terug.** Datum-filter:
 **P2-1 · Eigenaar: Bob — testen in de API, komt terug.** Datum-filter:
@@ -2908,3 +2991,63 @@ horecagelegenheid-picker gevuld via `mijn_horecagelegenheden`). **Check
 bij het oppakken eerst of de andere, parallelle sessie (zie
 bij het oppakken eerst of de andere, parallelle sessie (zie
 waarschuwing bovenaan deze taak) hier intussen al iets aan gebouwd
 waarschuwing bovenaan deze taak) hier intussen al iets aan gebouwd
 heeft** — nog niet herverifieerd sinds de eerdere check.
 heeft** — nog niet herverifieerd sinds de eerdere check.
+
+---
+
+*(Onderstaande taken komen uit de merkanalyse web-vs-app van 2026-08-30.
+Volledige onderbouwing met screenshots: [Designbrug-rapport](https://claude.ai/code/artifact/29f3412a-305f-49f3-971c-cd9bd310beb1).
+Afvinkbare werklijst: [Designbrug werklijst](https://claude.ai/code/artifact/0c0c7347-d681-417d-83d7-7feb1de6457d).)*
+
+**P2-16 · Eigenaar: Bob** (klein). Tabnamen gelijktrekken met de site.
+Home: app heeft Uitgaan/Activiteiten/Cultuur/Films/Jeugd, site heeft
+Uitgaan/Stadsactiviteiten/Cultuur&Info → "Activiteiten" wordt
+"Stadsactiviteiten", "Cultuur" wordt "Cultuur&Info" (Films en Jeugd
+mogen blijven; de app mag fijnmaziger zijn, zolang gedeelde namen
+kloppen). Gelegenheiddetail: app heeft Info/Links/Bezorgen, site heeft
+Info/Opening/Map → openingstijden en kaart terug als eigen tab, "Links"
+onder Info. Let op: `evenement_horecagelegenheid` noemt dezelfde tab al
+wél "Openingstijden" — die twee schermen spreken elkaar nu tegen.
+
+**P2-17 · Eigenaar: Claude** (mechanisch). Slagschaduw onder
+titelteksten verwijderen (property-zoekbalk → "shadow"). Tien
+componenten: `uitgaantabel_kaart_widget.dart`,
+`kaart_tabel_uitgaan_comp_widget.dart`,
+`kaart_tabel_uitgaan_s_comp_widget.dart`,
+`kaart_slider_uitgaan_s_comp_widget.dart`,
+`home_uitgaantabel_kaart_component`, `p_uitgaan_slider_kaart_component`,
+`p_uitgaantabel_kaart_component_orgineel_met_kaartjeerin`,
+`event_current_widget.dart`, `horecagelegenheid_current_widget.dart`.
+De site gebruikt dit effect nergens.
+
+**P2-18 · Eigenaar: Claude** (mechanisch, ±12 iconen; pas ná P0-11).
+Eén icoon per categorie in het menu: "Cultuur" en "Jeugd" hebben nu
+onder Provincie een ánder icoon dan onder Gemeente. Vervalt grotendeels
+als P0-11 de twee lijsten samenvoegt — daarom pas daarna oppakken.
+
+**P2-19 · Eigenaar: Bob.** `nav.dart`:129 stuurt een ingelogde
+gebruiker naar het provincie/gemeente-keuzescherm en een uitgelogde
+naar Home; de site doet het omgekeerd (iedereen begint landelijk,
+kiezen mag later). Nu voelt inloggen als een drempel i.p.v. een
+voordeel. Fix: altijd Home als startpunt, plus de gekozen gemeente als
+klikbare regel in de header ("Amsterdam · wijzigen") — dat beantwoordt
+meteen de vraag "welke gemeente zie ik hier eigenlijk?", die op de
+lijstschermen nergens beantwoord wordt.
+
+**P2-20 · Eigenaar: Bob** (groter, eigen sessie; pas als het kleurbeeld
+klopt). Serif-koppen invoeren: de site zet elke inhoudelijke titel in
+Droid Serif bold — dát maakt het krantengevoel, en het is het enige
+merkkenmerk dat je niet met kleur kunt namaken. **Noto Serif Bold** is
+de directe opvolger en zit in Google Fonts. Toepassen op kaarttitels en
+detailtitels, interface blijft Roboto. Serif is breder, dus daarna alle
+kaarttitels op afbreken/overlopen nakijken. Ook een legitieme uitkomst:
+niet doen — dan is de app herkenbaar op kleur maar mist hij de
+kranten-uitstraling.
+
+**P2-21 · Eigenaar: Claude.** Tabletweergave herschikken i.p.v.
+uitrekken: op tabletformaat blijven kaarten één kolom en rekken ze mee
+tot volledige schermbreedte (onleesbaar lange regels, sliderband wordt
+een leeg vlak). Fix: boven ±700px twee kolommen in de lijstweergaven +
+de tekstkolom in kaarten begrenzen. Verifiëren op `emulator-5556`
+(tablet) én telefoonformaat. Staat los van P1-11 (labels/overflow, al
+afgerond) — dit gaat puur over kolomindeling.
+