Lägg in komponenterna på Musik Hallandia

[JohannaOlin]

Beskrivning

Till midsommar ska i vara färdiga med den första versionen av Musik Hallandia. Denna story innebär att vi lägger in komponenterna på webbplatsen

Skisser

Acceptanskriterier

[viktor-sarge]

Musik Hallandia är så pass färdig att vi vet att första versionen av all funktionalitet är görbar. Det är några små justeringar på evenemang + en extra meny som skall göras men annars är det mest visuella fixar här och var + bygga komponenter. Med fokus på driftinfo så låter vi Musik Hallandia vila resten av veckan.

[viktor-sarge]

Kvarstående på Musik Hallandia tis 18 juni 2019

Frontend

• [ ] Mobilnavigationen - implementera hela beteendet. Roland gett underlag för att hämta ut och strukturera sidträdet.

• [x] Lås kontaktkortens storlek så att trianglarna hamnar rätt. Nu flyter de omkring en hel del.

• [ ] Huvudnavigation och nivå två - lägg den rosa "aktive"-plattan prick mot botten (vilket iofs är dåligt då det är svårt att se den i vissa lägen med röriga bilder i hero

• [x] Implementera hero-komponenten som har pålagda trianglar och streck (trianglar och streck inte så krångligt egentligen)

• [x] Press och media-mallen med nyheter (vi borde kunna anvädna befintlig plugin) och kontaktkort (räcker att peka ut kontakter i backend men skall bara displaya dem också)

• [ ] Har någon de loggor som skall läggas i "Vi samarbetar med"?

• [x] Skall vi ha med de mystiska rubrikerna på förstasidan i steg1?

• [x] Skall vi dela upp "aktuella" och "alla evenemang" så småningom på förstasidan?

• [ ] Sociala medier-länkarna i sidfoten skall ha ikoner som döljs/visas istället för länkarna beroende på breakpoints. Exportera från figma och anävnd befintliga utility-klasser

• [ ] Hitta bildstorlek som fungerar med gridsystemet och sidstorleken.

• [ ] Dubbelkolla allting i IE och Edge.

• [ ] Gå igenom boxarna så att marginaler och annat ser bra ut både på mobil, 13", stor desktop

• [x] Lägg in "Arial condensed black"

• [x] Pilarna i footern

Backend

• [x] Hur lägger vi puffar i sidfoten - någon inställning för temat som redaktörerna kan använda?

• [x] Vilket plugin skall vi använda för Nyheter?

• [x] Hur får vi archive-evenemang att bli understruken i navigationen? är det enklast att t.ex. skapa en sida som hämtar sitt innehåll från en dold archive (har för mig att vi gjorde något sådant innan)

Styleguide

• [x] Skapa en gul "pill button" till "Köp biljetter"-knappen. Antingen som modifier på rh-button eller som en egen atom.

• [ ] Flytta in all inline-styling till styleguiden

[viktor-sarge]

Hero-komponenten på förstasidan är fixad med notstreck och stora trianglar. Hittade en ganska bra lösning med CSS där man positionerar ut ett element helt utan storlek men bara färgad + transparent border och justerar längderna på dessa för att få rätt form och storlek. Bör fungera i alla browsers.

[viktor-sarge]

Har justerat hero-komponenten lite ytterligare så att den svarta plattan ligger korrekt så som i skissen.

[viktor-sarge]

Pilarna adderade till footern.

[viktor-sarge]

Roland fixat så att archive sidan också blir understruken i navigationen.

[viktor-sarge]

Stylade upp korten i footern med en första variant.

[viktor-sarge]

Lade in typsnittet. Bör kanske tweaka så att rubrikerna får bold-varianten också.

[viktor-sarge]

Roland byggt om kontakt-sidan för att fungera på det nya sättet. Jag stylar upp de nya bitarna.

[viktor-sarge]

Jag har fixat logiken som krävs för att via kommande / alla evenemang på förstasidan. Det är nu olika partials som visas beroende på om man skickar med en parameter i URL eller inte.

[viktor-sarge]

Jag har raderat oanvända mallar, raderat en överflödig mall, gått igenom development.css, application.js, raderat gamla favicons, gjort en ny struktur med grupperade partials och lite generellt städat upp i blade-filerna.

[viktor-sarge]

Musik Hallandia - kvarstående ändringar

Logga i huvudet

• [ ] ta in en aning för att följa vänsterlinjen - kollar efter lansering

• [ ] skala ned i mobilen? - görs i samband med att vi lägger in hamburgermenyn

• [x] Alt-text - efter 20/7 - ligger som en punkt på Viktor nedan

Sidhuvud

• [x] Aria labels för listorna ”Huvudnavigation” och ”Navigation nivå 2” - efter 20/7 - ligger som en punkt på Viktor nedan

• [ ] Logga och navigation nivå 1 skall ligga på varsin rad i mindre breakpoints. - Kollar efter lansering

• [ ] Får alla navigationsval verkligen plats på en rad när de nu lägger till en ytterligare ingång. Tveksamt hur lyckat det blir i tablet eller små fönster med radbruten navigation. - De har redan lagt in ingången så denna är ok.

Mobilnavigation - Frida skissar på hur den ska se ut.

• [x] Mata ut ett korrekt sidträd. Vilket innebär vissa utmaningar pga custom post types där man inte vill lista alla men åtminstone den man stå på i sidträdet. - Roland håller på med denna

• [ ] Skriv CSS för mobilnavigationen (Inte så avancerad design men tar ändå en stund att få det rätt såklart. Bra att veta är att vi har helperklasser som hide-on-sm och liknande som gör det lätt att endast visa på vissa breakpoints.) - Avvakta Fridas skiss, finns egen story på att lägga in den när komponenten är byggd

• [ ] Skriv jQuery för mobilnavigationen (här kan vi kanske låna en del av det jag skrev sist vi hade en mobilmeny som vi raderat från development.css. Minns jag rätt fungerade det ganska bra och var några få rader kod för att göra grundcaset. Notera att vi skall skriva jQuery och CSS så att det fungerar även för de som inte har javascript aktiverat) - Avvakta Fridas skiss, finns egen story på att lägga in den när komponenten är byggd

Tidigare evenemang - efter lansering, Martin får ta en diskussion med dem

• [ ] har vi backend-funktionaliteten beredd?

• [ ] Implementera "Tidigare evenemang"

Hero på evenemangssida

• [x] Hämta info från det aktuella evenemanget, inte nästa kommande evenemang (är så pga att det idag är samma partial som på framsidan - Fixat

• [ ] se om partialen kan skrivas om så den tar indata istället och logiken inte ligger i hero-widget.blade.php utan i templen istället. Provat på andra ställen och det går)

Hero-komponenten på vanliga sidor. - Efter lansering, komponenten ska fixas i stilguiden, sen kan den nya komponenten läggas in även på musikhallandia. Ligger i issue 383, fixas förhoppningsvis innan lanseringen.

• [ ] Se över storleken beteendet vid olika breakpoints. Enligt skissen så visar mobilläget med sin höjd på 230px mer av bilden än vad som visas i desktop på 420px. Det skulle isf kräva att en ännu större bild än 1440 x 420 px laddas upp och beskärs olika i olika breakpoints. Bilderna på hero-komponenten kan beskäras från sidorna eftersom de är collage där kompositionen inte tar så mycket skada av att beskäras till andra proportioner.

Hero-komponenten med trianglar på evenemang

• [ ] Mobilläget skall ha mindre platta, text, trianglar och bild. Det behöver läggas i styleguiden.

• [ ] Sorgebarnet här är i första hand hur vi skall beskära bilderna. Skisserna visar Seina Bosey där hon turligt nog är centrerad i desktop-bilden så att den enkelt kan beskäras för att klara av de ändrade proportionerna som mobilläget innebär. Det här kommer dock långt ifrån alltid att vara fallet och oundvikligen så kommer mobilläget att innebära frustrerade redaktörer. Alternativet är väl att manuellt beskära varje bild för alla breakpoints, men det är också mycket merjobb. På de andra webbarna har vi planerat att avhjälpa det genom att låta bilderna skala proportionerligt och att lägga textplattan under, men så är inte designen på den här komponenten idag och det är inte uppenbart hur man skulle kunna ändra på den och ändå behålla identiteten som trianglarna, strecken och plattan utgör idag.

Knappar på evenemangsgrid - Vi tar bort knapparna, lägger ny story när vi vet hur det är tänkt med tidigare evenemang

• [ ] Active/hover-state för den klickbara: Knapparna fungerar dåligt idag för att markera vilken sida man är på, och t.ex. en buttongroup hade fungerat bättre. Godkänd av Frida men vi har inte tid med den just nu. Det skulle dock hjälpa att inkludera en active/hover-state för den knapp som är länkad så att man ser att den aktiva knappen inte leder någonstans. Det är fortfarande en dålig lösning. Skulle man lägga till ”Tidigare arrangemang” skulle man ha tre knappar vilket genast gör det uppenbart vilken som är active state eftersom den avviker från övriga två.

• [ ] Knapparna överlappar varandra i mobil

• [ ] Knapparna radbryter i mobil.

Evenemangsgrid

• [ ] Överväg att låta bilderna skala i en vanlig grid av centrerade kort nu när vi har lika stora bilder istället för att behålla fast storlek. Snyggare om vi får det att fungera. Krux är att t.ex. datum-atomen riskerar att flyta i luften när bilden blir mindre och höjden minskar. Det riskerar också att bli ett fult tomrum mot texten. Se om det kan lösas - text genom att lägga datum i ett övre hörn. - Denna komponent görs om så vi gör så lite som möjligt med den befintliga - Avvakta till riktig komponent är klar

• [x] Gör puffbild tillgänglig i arrayen (backend) - Roland fixar

• [x] Hämta puffbilden istället för hero-bilden till evenemangsgriden. - Roland fixar

Kontakt-griden - denna är ok

• [ ] Låna bästa implementationen från Evenemangsgriden när vi listat ut vad som faktiskt fungerar bra.

”Vi söker” korten i simfoten

• [ ] Understrykning bara som hover/active state. - efter lansering

Sidfot

• [ ] Vid mindre breakpoints skall ikonerna för sociala medier visas i stället. Kan de exporteras som bilder? Frida försökte men de blev väldigt taggiga. Annars får vi lägga dem som SVG vilket iofs är klart bättre, men det har varit lite klurigt att hitta rätt sätt att använda SVG så det fungerar bra överallt. - Efter lansering

• [ ] Var skall vi länka sociala medierna? - Martin kollar upp, läggs in i augusti

Nyhetsvbrev

• [x] Var skall vi länka? - Fixat

Sidan för enskilt evenemang

• [ ] Mobile och tablet har fyra ikonlänkar som inte finns på desktop. Vart leder dessa? - Efter lansering, inte säkert att intressenterna önskat detta

Nyheter

• [ ] Vi behöver ett separat fält för puff-text för nyheter (backend) - Roland fixar

• [ ] Navigationen hamnar på ”Evenemang” när vi länkar till en enskild nyhet (backend) - Roland fixar

Bakåt-knappen

• [ ] Behöver byggas med rätt färger som en inställning i styleguiden. - Görs när detta är klart

Om oss

• [ ] Kan vi få loggorna som skall läggas in här? - Martin kollar upp detta, läggs in i augusti

Styleguiden

• [ ] Gör allting till korrekta komponenter i styleguiden styrda av settings. - Efter lansering

[JohannaOlin]

Vi har gått igenom listan nu och här nedan lägger jag in det som ska fixas innan lansering. Övriga punkter lägger jag som egna kort i backloggen.

Roland fixar

• [x] Gör puffbild tillgänglig i arrayen (backend)
• [x] Hämta puffbilden istället för hero-bilden till evenemangsgriden.
• [x] Ingressfältet ska läggas till på nyheter och det är detta fält som ska visas i listningen. Innehållet i fältet ska också visas som ingresstext på själva nyheten.
• [x] Navigationen hamnar på ”Evenemang” när man är inne på en nyhet. Den ska vara på ”För press”
• [x] Ta bort rubriken Nyheter från Pressidan
• [x] På sidan Vad vi gör så visas undersidorna i navigeringen, dölj dessa

Nedanstående fixas innan lanseringen, men efter 20/7

Khoi fixar

• [x] Mobilmenyn. Ska läggas in i en hamburgermeny. Frida håller på att skissa på denna komponent så det bör byggas efter skissen är klar, finns som en egen story i DevOps
• [x] Vi avvaktar med Tidigare evenemang så ta bort knapparna Aktuella evenemang och Alla evenemang
• [x] Mobilläget (marginaler, herobild mm) Detta borde tittas på ihop med issue 372 för rh.se, samma problematik. Om Herobilden inte blir bra med trianglarna så får den vara utan trianglar i mobil.
• [x] Evenemangspuffar i IE visas endast i 2 –spalt. Texten och plattan ligger för långt från den bild den tillhör – Dessa kanske fixar sig automatiskt när vi använder rätt bild
• [x] Evenemangspuffarna i mobil och tablet är inte responsiva
• [x] Bakåt-knappen ska byggas med rätt färger som en inställning i Styleguiden, för Musikhallandia så ska denna vara rosa och texten ska inte vara Bold
• [x] Cookienotisen har indrag på båda sidorna, den ska täcka hela sajtens bredd

Viktor fixar

• [x] Alt-text på loggan
• [x] Aria labels för listorna ”Huvudnavigation” och ”Navigation nivå 2”
• [x] Se över bold-varianten på typsnittet
• [x] Vi måste koppla på Google Analytics och i alla fall Helena behörighet. Roland måste kunna göra detta i produktion sen. Issue 436
• [x] Prata med Musik Hallandia om att inte använda versaler

Nedanstående får Martin kolla upp när han är tillbaka den 12/8. Får vi inget svar så får vi ta bort funktionerna, alternativt länka allt till startsidan för rh.se så länge

• [ ] Var skall vi länka sociala medierna?
• [ ] Kan vi få loggorna som skall läggas in här?

[RolandHyden]

Hej på er. Nu har jag fixat mina puckar för musikhallandia. Allt är uppladdat på test-www.musikhallandia.se. När jag ända var inne och rotade i filerna så löste jag 3 av Khois puckar. Jag markerade dessa också i listan. Börjar se bra ut nu :) /Roland

[viktor-sarge]

Jag har lagt in Analytics så att den är kopplad. Fungerar på skarp server så fort vi lanserar där utan att något mer behöver göras. Helena får access när hon är tillbaka den 12 augusti - hon behöver skapa ett google-konto först.

[viktor-sarge]

Fixat aria labels och alt-text o pushat till master.

[viktor-sarge]

Jag gissar att "se över bold-varianten på teckensnittet" redan är fixad eftersom jag redan har en regel som sätter rätt typsnitt på följande taggar och klasser strong, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: HelveticaNowText-Bold; }

Sätter den som avklarad tills vidare - säg till om jag missuppfattat!

[viktor-sarge]

(Jag satte cookienotisen till samma indrag som övriga delar av sajten för att det skulle se lite rimligare ut när Helena bad att hela sajten skulle ha indrag)

[viktor-sarge]

Flaggat för Helena att användningen av versaler drar ned läshastigheten för alla och gör livet extra svårt för dyslektiker. Då är min sista puck på musikhallandia just nu levererad och jag övergår till tillgänglighets-bitarna.

[viktor-sarge]

Gick igenom och markerade det som är klart i listorna här ovanför. Jag av-assignar mig så länge eftersom jag är färdig med det som låg på mig.

[viktor-sarge]

@nguyenkhois Pluginet som skapar sidträdet till mobilmenyn finns på https://github.com/RegionHalland/region-halland-tree-all-levels-musik-hallandia Observera: I .php-filen finns ett antal variabler som måste vara satta i .env-filen. De fyra första är nog säkert redan fixade, men de två sista behöver du lägga till baserat på värdena i din lokala databas:

    $servername = ENV('DB_HOST');
    $username = ENV('DB_USER');
    $password = ENV('DB_PASSWORD');
    $dbname = ENV('DB_NAME');

    // Variabler för att knyta kontakter & nyheter till rätt nod
    $myKontaktID = ENV('TREE_KONTAKT_ID');
             $myNyhetID = ENV('TREE_NYHET_ID');

Det är alltså ID för sidorna "Kontakt" och "Press och Media" som behövs och de går att hitta i admin-gränssnittet.

Klart enklast är att alltid lägga ut både mobilmenyn och desktop-menyn men att använda klasserna hidden-sm och only-sm för att styra vilken som visas beroende på breakpoint.

Som vi pratade om behöver du kanske positionera alla element som inte redan har position:relative för att det skall fungera med overlay.

CSS för menyn finns inte sedan tidigare utan du behöver bygga den. Jag noterar att det inte är specificerat hur nivå 3 skall visas i menyn, men jag gissar att det är ytterligare lite mer padding-left på nivå3.

[viktor-sarge]

@nguyenkhois Lite feedback på mobilmenyn såhär långt. Börjar med det som användarna möter eftersom det är prio just nu:

• [x] Man behöver kunna ge alla toggle-knappar fokus med tangentbordet och öppna/stänga dem + tabba till länkar i menyn

• [x] Toggle skall bara trigga på den runda knappen. (Annars kan man inte öppna själva länken för den sida som har en toggle-knapp)

• [x] Menyn bör täcka hela bredden på devicen.

• [x] Lägg gärna till några <a class=”rh-link--navigation”> på menyvalen så att man ser hur det fungerar med länkar i menyn.

• [ ] Man kan tänka sig två beteenden för den rosa ”active” baren. 1) Att den markerar den nod som är öppen och inte ändras även om man klickar upp andra noder i menyn eller 2) att den som idag flyttar med när man öppnar andra noder i menyn.

• Fortsätter vi som idag att låta den rosa highlighten flytta runt behöver den återställas när man stänger menyn och öppnar den nästa gång. Annars blir det svårt att se var i sidträdet man faktiskt befinner sig med den sida som är laddad.

[viktor-sarge]

(Uppdaterade kommentaren ovan eftersom Khoi fixat två saker direkt idag efter feedback)