Visning av skjermformater i Jøkul

[Steinop]

I forbindelse med Feedback-komponenten ble det laget et forslag i kode til hvordan denne kan vises for ulike skjermstørrelser.
Vi har jobbet videre med hvordan den kan se ut visuelt. Var innom varianter der vi brukte en silhuett av ulike devicer. Etter drodling i designsystemforum kom det innspill om en enda enklere løsning basert på dagens eksempelvisning:

1. Vi lar det hvite feltet i den grå eksempelboksen vise de ulike skjermstørrelsene (bør vurdere ha en tynn sort outline for å oppfylle konstrastkrav)

2. Vi flytter valgene over til venstre side for alle eksempler i portalen. (Det kan samtidig være en fordel i forhold til UU og brukere med tunnelsyn)

3. Hvis man ønsker å utvide funksjonaliteten kan man f. eks gjøre det grå feltet responsivt slik at innholdet tilpasser seg størrelsen til boksen og brekker om til layout for mobil, nettbrett og desktop. Dette vil først og fremst være aktuelt når vi presenterer eksempler på organismer som f. eks feedbackmodulen. Da kan man f. eks også legge inn en teller som viser skjermformatet i pixler.

Her er en ikke-pixel-perfect grovskisse uten riktig innhold:
https://www.figma.com/file/dWhCsnlMAmJEBPyGnRrse5RM/J%C3%B8kul-portalen?node-id=5101%3A298

[lfbergee]

Koden ligger klar for dette i ResponsiveExample, kan taes i bruk ved å sette responsive={true} i en eksempel som bruker DevExample

[piofinn]

Det viser seg at det er ganske enkelt å få til responsivitet som vist i skissen til @Steinop med CSS-attributten resize!

Skjermopptak.2021-01-05.kl.13.29.16.mov

Det vil imidlertid ikke vise endrineger basert på media queries på skjermstørrelse, siden den ikke endrer seg. Men hvis man kombinerer det med noe av funksjonaliteten fra ResponsiveExample bør man være ganske godt dekket!

[wkillerud]

Med CSS Container Queries kan det på sikt bli mulig å få til, men som Pio er inne på hjelper det ikke å bare endre på bredden på eksempelboksen nå i dag. Alt av responsivitet baserer seg på bredden til hele vinduet.

Flytter dette inn i en diskusjonstråd.