Komponent för Hitta på sidan

[JohannaOlin]

Beskrivning

Komponenten Hitta på sidan används av besökarna för att snabbt nå underrubriker på långa sidor

Skisser

• [ ] Desktop -
• [ ] Tablet -

Acceptanskriterier

• [ ] Komponenten ska fungera på desktop och tablet
• [ ] Komponenten ska fungera i IE, Edge och Chrome, Safari
• [ ] Komponenten ska visas enligt skiss
• [ ] Komponenten ska ha ett indrag för rubrik 3, rubrik 4 så att besökarna enkelt ser vad som hör ihop
• [ ] Som besökare vill jag att rubriken på sidan lyser upp en kort stund när jag kommer till den
• [ ] Som besökare vill jag att hitta på sidan följer med när jag scrollar

[viktor-sarge]

Snabb visuell QA ihop m Frida:

• [x] Det skall inte vara några avdelare mellan navigationsvalen (border bottom)

[viktor-sarge]

Släckte punkten om avdelare ovan. Tog en lite bredare koll. Står i koden att den inte är färdig så gör ingen djupdykning. Men några snabba:

• [ ] Byt styling på element mot styling på klassnamn (för att följa BEM). Det enda undantag vi gör är i .article eftersom vi inte kan styra vad TinyMCE skapar för kod. Specifikt gäller det styling av ul, li och a.

• [ ] Använd inte pixelmått för fonter utan relativa mått. (Eller pixelmått alls egentligen om det går att undvika, de skalar nämligen inte)

• [ ] Linta gärna koden om du hinner. Annars tar vi ett svep senare så vi får enhetlig formatering. Vi har faktiskt inte spikat vad som skall gälla, men troligen ganska vanliga regler som en css-regel per rad, 2 eller 4 mellanslag som indentering osv.

• [ ] Ha alla färger i variabler (#E4E4E4 är hårdkodad i .rh-nav-onpage__item)

• [ ] Avstånd och andra återanvända mått lämpar sig också för variabler. Tex padding och border-bredder som återanvänds.

• [ ] Använd relativa mått för padding i en central variabel. Vilket mått man vill använda kan diskuteras. Med padding på 10px blir det alltid just 10px och då ser designen knepig ut om man skalar upp allt på t.ex. en större skärm men padding är fortsatt smal. Bättre är kanske att testa ett mått som ex/em som är relativt fontstorleken. Eller kanske vw/vh som är relativt viewporten och funkar i dagens webbläsare (IE från ver 9 faktiskt)

• [ ] I klassen .rh-nav-onpage__item--link så är inte --link en modifier. Namngivningen behöver ses över här.

[JOHNREGIONHALLAND]

Yes jag vet... alla färgkoder ska in rh-variabel. Detta är bara en grund att få rutin från figma --> scss OK vi kör med em och vh Absolut... det är bara komma med namnen som lämpligt.

[fridabergentoft]

Endast för desktop: https://www.figma.com/proto/CMYZeVSIh8UkD2VUQvu3hAHb/Components-2.0?node-id=150%3A133&viewport=-977%2C-453%2C0.358517&scaling=min-zoom

[brightjennie]

Rh-page-nav

[fridabergentoft]

Jag känner mig nöjd med komponenten!