Quellcode durchsuchen

P1-9: visuele polish PUitgaanPage + HorecagelegenhedenOverzicht

- PUitgaanSliderKaartComponent: schaduw verzacht (blur 6->4, offset
  12,12 -> 0,12) en hoekafronding uniform gemaakt (was asymmetrisch),
  minder afwijkend van PUitgaantabelKaartComponent
- PUitgaanPage: padding toegevoegd tussen advertentiebanner en
  tabellijst (plakten tegen elkaar aan)
- HorecagelegenheidoverzichtKaart: titel maxLines:2 (voorkomt ongelijke
  kaarthoogtes), categorie-tag kleur gelijkgetrokken naar huisstijlrood
  #9A141D (was #CC4B39EF, afweek van gedeeld TagCategorieComponentWidget)

TASKS.md: P1-9 bijgewerkt met restpunten (Offset Y schaduw, TabBar-
scheiding, Event-pagina nog open), nieuwe P1-13 (overflow-fouten
horeca-overzicht-grid, live gevonden, vermoedelijk niet gerelateerd)
CLAUDE.md: builder-workflow-bevinding toegevoegd (properties-zoekbalk
als clipping-workaround, risico rond rechtsboven-iconenrij)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
bob vor 1 Monat
Ursprung
Commit
a46b27bc61

+ 39 - 0
CLAUDE.md

@@ -160,6 +160,45 @@ dat al bevestigd werkt.
 
 ## FlutterFlow-builder: bekende problemen & patronen
 
+**Rechterpaneel-clipping: gebruik de "Search properties..."-zoekbalk
+i.p.v. scrollen.** Het rechterpaneel (Widget Tree → property-editor)
+scrollt via browser-automation vaak niet (muiswiel-events lijken geen
+effect te hebben op die specifieke sectie) — de bekende
+breedte-clipping (zie hieronder) geldt dus ook verticaal. Werkende
+workaround: het zoekveld bovenaan het paneel ("Search properties...")
+filtert op eigenschapsnaam (bv. "blur", "offset", "radius", "padding",
+"shadow") en toont dan alléén die eigenschap, ongeacht scrollpositie —
+vrijwel altijd binnen het zichtbare/klikbare gebied. Bij een
+samengestelde eigenschap met 2 velden naast elkaar (bv. Offset X/Y)
+kan het tweede veld nog steeds net buiten beeld vallen; een
+Tab-naar-volgend-veld-workaround is **niet betrouwbaar** gebleken (de
+waarde bleef soms op de oude staan zonder foutmelding, 2026-08-06
+bevestigd op `PUitgaanSliderKaartComponent`'s schaduw-offset). Voor
+sliders zonder zichtbaar numeriek veld (bv. "Uniform Radius/Padding"
+na het omzetten van per-hoek naar uniform): klikpositie op de track
+geeft alleen een grove benadering, geen exacte waarde — prima voor
+"ruwweg kleiner/groter", niet voor een precieze doelwaarde.
+- **Na een edit altijd verifiëren met een screenshot van het
+  gefilterde veld** — een schijnbaar geslaagde `Ctrl+A` + typen +
+  `Return`/`Tab` bleek meermaals niet vast te houden. Werkte
+  betrouwbaarder: triple-click op het veld → `Delete` → typen (i.p.v.
+  `Ctrl+A` → typen).
+- **Zekerste verificatie: "View Code"-paneel**, maar bereik dat via
+  directe navigatie naar
+  `https://app.flutterflow.io/code/<project>?component=<Naam>` (of
+  `?page=<Naam>`) i.p.v. te klikken op het `</>`-icoon rechtsboven —
+  die iconenrij verschuift afhankelijk van app-state (een
+  commit-icoon verschijnt/verdwijnt), waardoor een vast coördinaat
+  soms een heel ander icoon raakt. **Bevestigd 2026-08-06:** 2x per
+  ongeluk een "Create Commit"-dialoog geopend, 1x een "Make Project
+  Public"-dialoog (met een `Make Public`-knop — nooit klikken), 1x de
+  app-preview. Geen van alle bevestigd/doorgeklikt, maar wel
+  tijdverlies — **klik in die iconenrij rechtsboven nooit blind op een
+  onthouden coördinaat, altijd eerst een screenshot ná de vorige
+  actie.** In de code-view zelf: gewoon muiswiel-scrollen werkt daar
+  evenmin betrouwbaar, gebruik `Ctrl+F` (opent een echte
+  browser-find-balk, werkt wel).
+
 **Geneste "Set Variable"-dialoog lijkt vast te zitten.** Bij een
 conditie (`ConditionalBuilder`, Visibility → Conditional) op een
 niet-triviaal type (JSON Path, API-response-veld, `List<DataType>`

+ 68 - 19
TASKS.md

@@ -273,25 +273,74 @@ RangeError op deze en de `horecagelegenheidCurrent`-pagina bij een
 niet-bestaande `nid` is al gedekt door P1-1 punt 4 — live bevestigd,
 zie daar.)
 
-**P1-9 · Eigenaar: Claude — bezig (sessie 2026-08-06).** Visuele polish
-(los, per pagina): Uitgaan-pagina (typografie/contrast/spacing),
-Event-pagina, HorecagelegenhedenOverzicht, tabel-kaartje-afstemming met
-slider-kaartje, categorie-tag mag titel/datum niet overstemmen.
-**2026-08-06, in uitvoering (Claude, builder):**
-1. `PUitgaanSliderKaartComponent` — schaduw/hoekafronding gelijktrekken
-   met `PUitgaantabelKaartComponent` (subtielere schaduw, uniforme
-   radius) i.p.v. de zware diagonale schaduw + asymmetrische afronding.
-2. `PUitgaanPage` — padding toevoegen tussen advertentiebanner en
-   tabellijst (plakten tegen elkaar aan).
-3. `HorecagelegenheidoverzichtKaart` — `maxLines`/ellipsis op de
-   titel-Text (ontbrak, liet kaarten in de grid ongelijk hoog worden).
-4. `HorecagelegenheidoverzichtKaart` — categorie-tag kleur gelijktrekken
-   naar huisstijlrood (`0xFF9A141D`, was `0xCC4B39EF` paars-blauw,
-   afweek van het gedeelde `TagCategorieComponentWidget` elders).
-5. `HorecagelegenhedenOverzicht` — visuele scheiding (divider/schaduw)
-   toevoegen tussen TabBar en content eronder.
-- Event-pagina-polish nog niet opgepakt in deze sessie (buiten scope
-  van dit werkblok) — blijft open voor een volgende sessie.
+**P1-13 · Eigenaar: Onbepaald.** Nieuw gevonden (2026-08-06, Claude,
+live emulator-check ná de P1-9-builderwijzigingen): op
+`HorecagelegenhedenOverzicht` → tab "Activiteiten" gooit de kaartjesgrid
+herhaaldelijk `RenderFlex overflowed`-fouten — zowel "on the right"
+(oplopend van 16 tot 243 pixels, tientallen keren) als één keer "on the
+bottom" (2653 pixels, zichtbaar als gele/zwarte streep-overlay op
+scherm). **Vermoedelijk niet veroorzaakt door de P1-9-wijzigingen van
+vandaag** (de `maxLines: 2`-toevoeging op de titel kan een
+bottom-overflow verklaren maar geen right-overflow, en de
+right-overflows traden al op vóórdat de horeca-pagina zelfs bezocht
+werd in de log) — sluit eerder aan bij de al bekende
+missende-Flexible-wrap-patronen (zie P1-6/P1-11). **Niet verder
+gediagnosticeerd deze sessie** (geen volledige stack trace met
+bestandsnaam gelogd voor de herhaalde fouten, alleen voor de eerste
+niet-gerelateerde crash op `home_uitgaantabel_kaart_component_widget.dart`)
+— exacte kaart/component nog te herleiden, bv. via Flutter DevTools
+tijdens een live sessie.
+
+**P1-9 · Eigenaar: Onbepaald.** Visuele polish (los, per pagina) —
+resterend na sessie 2026-08-06:
+1. **Nog niet opgepakt:** Event-pagina (typografie/contrast/spacing).
+2. **Nog niet opgepakt:** `HorecagelegenhedenOverzicht` — visuele
+   scheiding (divider/schaduw) tussen TabBar en de lijst eronder;
+   content plakt nu bijna tegen de tabs bij scrollen. Vraagt een
+   nieuwe widget-insertie (Divider of subtiele schaduw), niet geprobeerd
+   deze sessie i.v.m. tijd.
+3. **Restpunt `PUitgaanSliderKaartComponent`-schaduw** (builder → Widget
+   Tree → beide `Container`s binnen de root-Row, rechterpaneel-
+   eigenschappenzoekbalk "offset"): `Offset Y` staat op beide containers
+   nog op 12 (target: 2, zelfde als `PUitgaantabelKaartComponent`).
+   Blur (nu 4) en Offset X (nu 0, bevestigd via geëxporteerde code) staan
+   al goed — alleen Offset Y bleek herhaaldelijk niet via Claude's
+   browser-automation in te stellen (rechterveld rendert buiten het
+   klikbare venster, en een Tab-naar-volgend-veld-workaround liet de
+   waarde niet altijd vasthouden). Hoekafronding is al prima opgelost
+   (uniform 24px op de afbeelding-Container, 12px — exact gelijk aan het
+   tabel-kaartje — op de tekst-Container). Bob: `Offset Y` typen via het
+   gewone rechterpaneel-veld lukt in eigen browser vermoedelijk gewoon
+   (geen bekende clipping bij hem).
+- **Al afgerond deze sessie (Claude, builder):** `PUitgaanSliderKaartComponent`
+  schaduw verzacht (blur 6→4, offsetX 12→0, hoekafronding
+  asymmetrisch→uniform) zodat die minder afwijkt van het tabel-kaartje;
+  `PUitgaanPage` padding toegevoegd tussen advertentiebanner en
+  tabellijst; `HorecagelegenheidoverzichtKaart` titel kreeg `maxLines: 2`
+  (voorkomt ongelijke kaarthoogtes in de grid); categorie-tag-kleur op
+  datzelfde kaartje gelijkgetrokken naar huisstijlrood `#9A141D` (was
+  paars-blauw `#CC4B39EF`, afweek van het gedeelde
+  `TagCategorieComponentWidget` elders in de app).
+- **Bevinding voor volgende sessies (builder-workflow):** de
+  "Search properties..."-zoekbalk bovenaan het rechterpaneel is een
+  betrouwbare workaround voor het bekende clipping/scroll-probleem —
+  filtert eigenschappen op naam (bv. "blur", "offset", "radius",
+  "padding") i.p.v. moeten scrollen door een niet-scrollende paneel-
+  sectie. Voor een enkel numeriek veld: klik veld → Ctrl+A → typen →
+  Tab/Enter werkt niet altijd betrouwbaar (soms blijft de oude waarde
+  staan zonder foutmelding) — controleer na elke edit met een
+  screenshot van het gefilterde veld; bij twijfel triple-click + Delete
+  + typen i.p.v. Ctrl+A gebruiken, werkte in deze sessie consistenter.
+  Verificatie via **View Code** (rechtsboven `</>`-icoon) is nuttig maar
+  risicovol te bereiken: de icoontjes rechtsboven verschuiven
+  afhankelijk van app-state (commit-icoon verschijnt/verdwijnt) — 3x
+  per ongeluk een ander icoon geraakt (2x "Create Commit"-dialoog, 1x
+  "Make Project Public"-dialoog, 1x app-preview) door te gokken op
+  vaste coördinaten. **Veiliger:** direct navigeren naar
+  `https://app.flutterflow.io/code/uitgaanskrant-1qhvtd?component=<Naam>`
+  i.p.v. op het icoon te klikken, en binnen die code-view Ctrl+F
+  gebruiken (werkt als browser-find) i.p.v. handmatig scrollen (scroll-
+  wheel-events op die pagina reageren nauwelijks).
 
 **P1-10 · Eigenaar: Bob (10 sec-klusje, geblokkeerd voor Claude —
 clipping).** Performance — resterend werk (audit

+ 4 - 4
ios/Runner.xcodeproj/project.pbxproj

@@ -44,8 +44,8 @@
 		97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
 		97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
 		97C147001CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
-		6436409327A31CDD00820AF7 /* nl */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = nl; path = nl.lproj/InfoPlist.strings; sourceTree = "<group>"; };
-		6436409127A31CD100820AF7 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/InfoPlist.strings; sourceTree = "<group>"; };
+		6436409D27A31CD300820AF7 /* nl */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = nl; path = nl.lproj/InfoPlist.strings; sourceTree = "<group>"; };
+		6436409727A31CD900820AF7 /* en */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = en; path = en.lproj/InfoPlist.strings; sourceTree = "<group>"; };
 		97C147021CF9000F007C117D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
@@ -225,8 +225,8 @@
 		6436409C27A31CD800820AF7 /* InfoPlist.strings */ = {
 			isa = PBXVariantGroup;
 			children = (
-				6436409327A31CDD00820AF7 /* nl */,
-				6436409127A31CD100820AF7 /* en */,
+				6436409D27A31CD300820AF7 /* nl */,
+				6436409727A31CD900820AF7 /* en */,
 			);
 			name = InfoPlist.strings;
 			sourceTree = "<group>";

+ 2 - 1
lib/horecagelegenhedenoverzicht/horecagelegenheidoverzicht_kaart/horecagelegenheidoverzicht_kaart_widget.dart

@@ -222,7 +222,7 @@ class _HorecagelegenheidoverzichtKaartWidgetState
                                             6.0, 0.0, 6.0, 0.0),
                                         child: Container(
                                           decoration: BoxDecoration(
-                                            color: Color(0xCC4B39EF),
+                                            color: Color(0xFF9A141D),
                                             borderRadius:
                                                 BorderRadius.circular(12.0),
                                           ),
@@ -358,6 +358,7 @@ class _HorecagelegenheidoverzichtKaartWidgetState
                           widget!.titel,
                           'titel',
                         ),
+                        maxLines: 2,
                         style:
                             FlutterFlowTheme.of(context).titleMedium.override(
                                   font: GoogleFonts.interTight(

+ 17 - 14
lib/uitgaanspaginas/p_uitgaan_page/p_uitgaan_page_widget.dart

@@ -205,20 +205,23 @@ class _PUitgaanPageWidgetState extends State<PUitgaanPageWidget>
                   androidAdUnitID: 'ca-app-pub-2431417692812232/6657143691',
                 ),
               ),
-              Container(
-                decoration: BoxDecoration(),
-                child: wrapWithModel(
-                  model: _model.pUitgaantabelKaartComponentModel,
-                  updateCallback: () => safeSetState(() {}),
-                  child: Builder(builder: (_) {
-                    return DebugFlutterFlowModelContext(
-                      rootModel: _model.rootModel,
-                      child: PUitgaantabelKaartComponentWidget(
-                        towndid: widget!.plaats!,
-                        displayid: widget!.services!,
-                      ),
-                    );
-                  }),
+              Padding(
+                padding: EdgeInsets.all(10.0),
+                child: Container(
+                  decoration: BoxDecoration(),
+                  child: wrapWithModel(
+                    model: _model.pUitgaantabelKaartComponentModel,
+                    updateCallback: () => safeSetState(() {}),
+                    child: Builder(builder: (_) {
+                      return DebugFlutterFlowModelContext(
+                        rootModel: _model.rootModel,
+                        child: PUitgaantabelKaartComponentWidget(
+                          towndid: widget!.plaats!,
+                          displayid: widget!.services!,
+                        ),
+                      );
+                    }),
+                  ),
                 ),
               ),
             ],

+ 6 - 12
lib/uitgaanspaginas/p_uitgaan_slider_kaart_component/p_uitgaan_slider_kaart_component_widget.dart

@@ -123,18 +123,15 @@ class _PUitgaanSliderKaartComponentWidgetState
                   color: Colors.white,
                   boxShadow: [
                     BoxShadow(
-                      blurRadius: 6.0,
+                      blurRadius: 4.0,
                       color: Color(0x33000000),
                       offset: Offset(
-                        12.0,
+                        0.0,
                         12.0,
                       ),
                     )
                   ],
-                  borderRadius: BorderRadius.only(
-                    topLeft: Radius.circular(25.0),
-                    bottomLeft: Radius.circular(25.0),
-                  ),
+                  borderRadius: BorderRadius.circular(24.0),
                 ),
                 child: Align(
                   alignment: AlignmentDirectional(1.0, 0.0),
@@ -221,18 +218,15 @@ class _PUitgaanSliderKaartComponentWidgetState
                   color: FlutterFlowTheme.of(context).secondaryBackground,
                   boxShadow: [
                     BoxShadow(
-                      blurRadius: 6.0,
+                      blurRadius: 4.0,
                       color: Color(0x33000000),
                       offset: Offset(
-                        12.0,
+                        0.0,
                         12.0,
                       ),
                     )
                   ],
-                  borderRadius: BorderRadius.only(
-                    topRight: Radius.circular(20.0),
-                    bottomRight: Radius.circular(20.0),
-                  ),
+                  borderRadius: BorderRadius.circular(12.0),
                 ),
                 alignment: AlignmentDirectional(0.0, 0.0),
                 child: Column(