Refactoring voorbeeldtemplates : Bijstellingen styling en markup

[PieterVerheij]

In de voorbeeldpagina's is het gebruik van .container, .row en .cols-xx-xx niet consequent doorgevoerd. Omdat het voorbeeldpagina's zijn voor de implementatoren, is het juist hier van belang dat de markup juist is.

[MichielDHVD]

Komt voor een deel overeen met dit issue https://github.com/dso-toolkit/dso-toolkit/issues/967

Daarin heb ik nog een vraag gesteld over wat nu de juiste algemene markup is.

[PieterVerheij]

Er lopen nu een paar issues over dit onderwerp langs elkaar heen. Ik stel voor dit als verzamel-issue te gebruiken. Het betreft: https://github.com/dso-toolkit/dso-toolkit/issues/826 https://github.com/dso-toolkit/dso-toolkit/issues/845 https://github.com/dso-toolkit/dso-toolkit/issues/928 https://github.com/dso-toolkit/dso-toolkit/issues/967

[gofix]

Als het over paginabrede stroken gaat, moet altijd .col-xs-12 worden toegepast.

[PieterVerheij]

https://percy.io/dso-toolkit/dso-toolkit/builds/8991993/changed/509814770

alle content in 1 row, tenzij nodig voor responsive gedrag content schuift soms tegen elkaar aan

verzoeken:

• group-static verticale marge (apart issue?)
• ruimte tussen knop 'Ergens anders indienen' en eerste 'hr' (moet knop trouwens niet anders vormgegeven?)
• ontbrekende sluit lijn
• kolombreedte (apart issue?)

verzoeken wijzigen:

• group-static verticale marge (apart issue?)
• kolombreedte (apart issue?)

verzoeken wijzigen bevoegd gezag:

• group-static verticale marge (apart issue?)
• kolombreedte (apart issue?)

omgevingsoverleg

• ruimte tussen highlight-box en definition-list te weinig

verzoek indienen:

• ruimte tussen accordion, confirm en dso-form-buttons (accodrion heeft nu een margin-bottom van 32px)

Wizard stap 2:

• drop down button (komt wat anders voor)
• dso-justify-form-groups geintroduceerd

Wizard stap 3:

• highlight-box is "misbruikt" voor grijze achtergrond searchbar
• geen ruimte tussen de searchbar en formulier (in een responsive row)
• markup correctie voor de legends

Er zitten margin correcties op dso-rich-content en accordion.

[PieterVerheij]

Percy build na aanpassingen:

• markup correcties verzoeken en wizard
• margins hr
• margins form static
• streepje dl + dl
• margin onder highlightbox
• margins heading in legend op 0

https://percy.io/dso-toolkit/dso-toolkit/builds/9038837/changed/512462647

[bramhoosemans]

@PieterVerheij Eerste reactie:

• Form static: waarom margin boven en onder, en niet gelijk aan definition list met margin bottom van 16px?
• Form static: paragrafen in dso-field-container staan slechts 8px van elkaar. Hier lijkt ook iets niet goed te gaan met uitlijning t.o.v. de tertiaire button. Wel of geen <p> gebruiken?
• Streepje dl + dl: volgens mij mag de padding en margin vergroot worden naar 32px. Zo ontstaat er een duidelijke scheiding tussen meerdere definition lists.
• Margin onder highlightbox: ik zie bijv. In de landingspagina of voorbeeld met banner dat er nog een <br> wordt toegepast na de highlightbox. Is dat wenselijk? Of margin-bottom verhogen naar 32px?
• Preview Omgevingsoverleg: graag rekening houden met vaste toelichting bij vraag. De huidige implementatie met highlightbox onder de vraag is niet gewenst.
• Preview Wizard stap 3: Headings aanpassen ‘Mijn activiteiten’ = H3, en filters + ‘aantal activiteiten’ = H4.
• Margin onder tabs toevoegen hadden we volgens mij ook benoemd (mag 32px). Of opnemen in een apart issue?

[PieterVerheij]

• Form static: waarom margin boven en onder, en niet gelijk aan definition list met margin bottom van 16px? Group static gaat mee in de flow van de andere form-groups: die hebben een margin aan de bovenkant. Als je alleen een margin-bottom zou gebruiken, dan zou een group-satic te dicht op zijn voorganger staan.

• Form static: paragrafen in dso-field-container staan slechts 8px van elkaar. Hier lijkt ook iets niet goed te gaan met uitlijning t.o.v. de tertiaire button. Wel of geen <p> gebruiken? Bij voorkeur niet, maar dat is afhankelijk van wat er in de field-container staat. Invoer in een textarea kan eventueel een <p> opleveren tenzij de implementator die escapet.

• Streepje dl + dl: volgens mij mag de padding en margin vergroot worden naar 32px. Zo ontstaat er een duidelijke scheiding tussen meerdere definition lists. aangepast

• Margin onder highlightbox: ik zie bijv. In de landingspagina of voorbeeld met banner dat er nog een <br> wordt toegepast na de highlightbox. Is dat wenselijk? Of margin-bottom verhogen naar 32px? Die <br>s waren door het net geglipt. Maar misschien dat inderdaad highlightbox en ook vaste toelichting een margin-bottom: 32px moeten krijgen.

• Preview Omgevingsoverleg: graag rekening houden met vaste toelichting bij vraag. De huidige implementatie met highlightbox onder de vraag is niet gewenst. aangepast

• Preview Wizard stap 3: Headings aanpassen ‘Mijn activiteiten’ = H3, en filters + ‘aantal activiteiten’ = H4. aangepast

• Margin onder tabs toevoegen hadden we volgens mij ook benoemd (mag 32px). Of opnemen in een apart issue? ik maak wel een los issue aan, dit ticket barst al uit zijn voegen ;-)

[PieterVerheij]

@bramhoosemans hier kunnen we nog wel wat lucht gebruiken (https://www.dso-toolkit.nl/_993.Rowless-paddingless-voorbeeldpaginas/components/detail/omgevingsoverleg.html)

[bramhoosemans]

@PieterVerheij De vaste toelichting mag in de dso-label-container worden geplaatst. Het is immers een toelichting op de vraag. Radio selecties komen er dan onder te staan.

Dat neemt niet weg dat we op één of andere manier ruimte tussen de fieldset en de dl moeten creëren.. Wat daar de beste oplossing is weet ik niet.

[PieterVerheij]

Zie https://github.com/dso-toolkit/dso-toolkit/pull/1020/files

headings mogelijk maken in fieldset (#1032) packages/dso-toolkit/components/Componenten/_form-fieldsets/form-fieldsets.njk packages/dso-toolkit/src/styles/components/_form.scss

definition list mogelijk maken in accordion (#1034) packages/dso-toolkit/components/Componenten/accordion/accordion.njk

langer tekstvoorbeeld en edit mogelijkheid bij group-static (#1036) packages/dso-toolkit/components/Componenten/form-elements/group-static.config.yml packages/dso-toolkit/components/Componenten/form-elements/group-static.njk en ook in form.scss

buttontekst mogelijk maken bij search-bar (#1037) packages/dso-toolkit/components/Componenten/search-bar/search-bar.njk

Aanpasbare titel en heading bij shopping-cart (#1040) packages/dso-toolkit/components/Componenten/shopping-cart/shopping-cart.config.yml packages/dso-toolkit/components/Componenten/shopping-cart/shopping-cart.njk

Correctie markup: link-list homepage (#1041) packages/dso-toolkit/components/Voorbeelden/Homepage.njk

Correctie markup rows: Zoeken in lijst cards (note: kan nog verder aangepast worden door gebruik form-group njks) packages/dso-toolkit/components/Voorbeelden/Zoeken-in-lijst-cards.njk

Correctie markup rows: Aanvragen file upload packages/dso-toolkit/components/Voorbeelden/aanvragen-file-upload.njk

Correctie markup rows: Aanvragen packages/dso-toolkit/components/Voorbeelden/aanvragen.njk

Correctie markup: Accordion table packages/dso-toolkit/components/Voorbeelden/accordion-table.njk

Correctie markup rows: Actieverzoeken packages/dso-toolkit/components/Voorbeelden/actieverzoeken.njk

Correctie markup rows: Beheer basis packages/dso-toolkit/components/Voorbeelden/beheer-basis.njk

Correctie markup rows: Full width packages/dso-toolkit/components/Voorbeelden/full-width.njk (en waarschijnlijk grid.scss)

Correctie markup rows: Landingspagina (br's verwijderd) packages/dso-toolkit/components/Voorbeelden/landingspagina.njk

Correctie markup rows: Pagina met banner (br's verwijderd) packages/dso-toolkit/components/Voorbeelden/pagina-met-banner/pagina-met-banner.njk

Correctie markup rows: Samenwerken (br's verwijderd) packages/dso-toolkit/components/Voorbeelden/samenwerken.njk

Correctie markup rows: Margin onder accordion packages/dso-toolkit/src/styles/components/_accordion.scss

Correctie markup rows: Ruimte tussen dl's packages/dso-toolkit/src/styles/components/_definition-list.scss

Correctie markup rows: Ruimte rond hr's packages/dso-toolkit/src/styles/components/_rich-content.scss packages/dso-toolkit/src/styles/mixins/_typography.scss packages/styling/mixins/rich-content.scss

Correctie markup rows: dso-rich-content standaard margin-bottom dso-featured margin-bottom specifieker packages/dso-toolkit/src/styles/mixins/_grid.scss

Correctie markup rows: Margin onder highlightbox packages/styling/components/highlight-box.scss

Correctie markup rows: -- margins dso-form-button -- margins form-group (ook static en edit) -- margins elementen na form-group packages/dso-toolkit/src/styles/components/_form.scss

Refactoring voorbeeldtemplates : Nieuwe pagina Verzoeken indienen #826 packages/dso-toolkit/components/Voorbeelden/verzoek-indienen/omgevingsoverleg.config.yml packages/dso-toolkit/components/Voorbeelden/verzoek-indienen/omgevingsoverleg.njk packages/dso-toolkit/components/Voorbeelden/verzoek-indienen/verzoeken-indienen.config.yml packages/dso-toolkit/components/Voorbeelden/verzoek-indienen/verzoeken-indienen.njk packages/dso-toolkit/components/Voorbeelden/verzoek-indienen/verzoeken-wijzigen-bevoegd-gezag.config.yml packages/dso-toolkit/components/Voorbeelden/verzoek-indienen/verzoeken-wijzigen-bevoegd-gezag.njk packages/dso-toolkit/components/Voorbeelden/verzoek-indienen/verzoeken-wijzigen.config.yml packages/dso-toolkit/components/Voorbeelden/verzoek-indienen/verzoeken-wijzigen.njk packages/dso-toolkit/components/Voorbeelden/verzoek-indienen/verzoeken.config.yml packages/dso-toolkit/components/Voorbeelden/verzoek-indienen/verzoeken.njk

Refactoring voorbeeldtemplates : Wizard stap 2 (Locatie) #845 packages/dso-toolkit/components/Voorbeelden/wizard/wizard-stap-2.config.yml packages/dso-toolkit/components/Voorbeelden/wizard/wizard-stap-2.njk

Refactoring voorbeeldtemplates : Wizard Stap 3 (Kies activiteiten) #787 packages/dso-toolkit/components/Voorbeelden/wizard/wizard-stap-3.config.yml packages/dso-toolkit/components/Voorbeelden/wizard/wizard-stap-3.njk

Refactoring voorbeeldtemplates : Wizard stap 4 (Resultaat) #967 packages/dso-toolkit/components/Voorbeelden/wizard/wizard-stap-4.njk

Horizontale plaatsing form-groups en dso-form-buttons: .dso-justify-form-groups (#1046) packages/dso-toolkit/src/styles/components/_form.scss

Onnodige clear fix steps weggehaald (#1045) packages/dso-toolkit/src/styles/components/_steps.scss

Units voor verticale marge (#1042) packages/styling/variables/units.scss

---

snap ik niet: components/Componenten/dropdown-button/dropdown-button.config.js (#894 ?) components/Voorbeelden/wizard/wizard-stap-2.njk (doubleure: staat ook in packages/dso-toolkit/components/Voorbeelden/wizard/wizard-stap-2.njk)