diff --git a/README.md b/README.md index 990352d..58530e5 100644 --- a/README.md +++ b/README.md @@ -213,6 +213,26 @@ Viser ett enkelt filmkort med plakat, tittel, rating og skuespillere. Tar imot m ###### MovieList.tsx + MovieList.css Tar imot en liste med filmer (movies: Movie[]) og rendrer ett MovieCard per film med .map(). Den vet ingenting om TMDB eller fetching – det ansvaret ligger i hookene og i Section-komponenten (laster/feilhåndtering). Bygger plakat-URL fra TMDB sin poster_path, med fallback til tom streng hvis filmen mangler plakat. Regner om TMDB sin vote_average (0–10) til prosent (0–100). Layouten er et responsivt grid (repeat(auto-fill, minmax(320px, 1fr))) som går til én kolonne på mobil. +###### Sidebar.tsx + Sidebar.css +Dette kan også tenkes som venstremenyen på dekstop og den nedre menyen i på mobilview. Den rendrer søkefeltet øverst og deretter enten en utslåbar meny(desktop) eller en fast bunnlinje (mobil). Tar imot onSearch og searchValue for søkefeltet, samt view og onViewChange for å lese og endre hvilke visning appen står i nå. Komponenten eier en egen state, isOpen som styrer om undermenyen er slått ut. Alt det andre vil komme utenfra. + +HOME og pila er to separate knapper i samme rad. I CSS vil det være visuelt det samme da Det er bevisst da den ene vil bli brukt til navigasjon og den andre åpner og lukker. Tidigere hadde vi HOME, både som en navigasjons knapp og åpner. Dette førte til at den ikke kunne lukkes og var litt uintuitivt. Pilen som er brukt er tegnet i CSS, og roasjonen styres direkte av aria-expanded. Dette er smart fordi da vil skjermleseren og det visuelle ikke kunne komme ut av sync. Fordi knappen ikke har tekst i seg, har den aria-label som veksler mellom å vise og skjule undermenyen. + +Menypunktene ligger i to arrays øvest i fula i stedet for i JSXen. Så nye punkter kan legge sved i ett seperat sted. Mobiletikettene er kortet ned med vilje. Fire knapper i stedet for en dropdown førte til fin symetrisk visning og var lettere å implementere i tilegg. Vi vurderte også å ha symboler, men tok oss ikke tiden for å designe disse knappene. + +###### SearchField.tsx + SearchField.css +Søkefeltet, tatt ut av Sidebaren(venstremenyen) fordi den hadde to ansvar samtidig. Komponenten har ingen egen state, teksten kommer inn som en value og sendes ut igjen via onChange, slik at App.tsx eier verdien. Det kalles et kontrollert felt og er grunnen til at menyen kan tømmen søket ved å kalle onSearch. Poppene heter value og onChange med vilje slik t de har samme navn som et vanlig input. + +Labelen er skult visuelt med .visually-hidden. Ikke display:noen. Det siste fjerner elementet fra tilgjenelighetstreet også, og da forsvinner hele hensikten med labelen. htmlFor matcher inputens id. selve søklogikken er laget av en annen i gruppa og er uendret. + + +###### Section.tsx + Section.css +Section e rrammen rundt her seksjon på forsiden Den tar seg av overskriften, id'en som menyen scroller til, g hba som skal vises mens data lastes eller hvis noe går galt. Selve innholdet sendes inn som children. + +Grunnen til at den finnes er at MovieList eller har måttet håndtere lasting og feil selv. I tillegg til å vise filmer. nå gjør Section det en gang, og listene kan holde seg til det de er gode på. Mens data hentes vises en grå skeletonboks i stedet for en tom side, og feiler kallet, kommet det en melding. + +Overskriften rendres bare hvis title faktisk har innhold. Banner-seksjonen øverst sendes inn uten tittel, og uten den sjekken ville den laget en tom `

`. Det er ikke bare stygt da tomme overskrifter havner i overskriftoversikten en skjermleser navigerer etter, og da står det bare "overskrifter" uten noe mer. + #### hooks ###### useMovieCredits.ts En React Query-hook som henter skuespillerlisten for én bestemt film via fetchMovieCredits i api/tmdb.ts. Caches per movieId i én time (staleTime), slik at samme film ikke hentes på nytt unødvendig når flere kort viser samme data. @@ -220,6 +240,11 @@ En React Query-hook som henter skuespillerlisten for én bestemt film via fetchM ###### useSessionStorage.ts En generisk, gjenbrukbar hook som fungerer som `useState`, men som leser fra og skriver til `sessionStorage` automatisk. Brukes til både sorteringsvalg og minimumsvurdering, og kan gjenbrukes til andre ting senere ved behov. Lesing og skriving er pakket inn i try/catch i tilfelle storage er utilgjengelig (f.eks. i privat nettlesing), og faller da tilbake til en gitt standardverdi. +###### useMediaQuery.ts +Vil returnere true eller false for en media query, i mine tilfeller var dette ved bruk av (max-width:700px), som lar meg si at hvis noen åpner ned en brudde under 700px så rendre den riktige menyen. useState passer her på at riktig verdi settes før første render, slik at det ikke skal vises feil visning først. useEffect henger på via window.matchMedia, og return funksjonen fjerner lytteren igjen. uten det hoper lytterne seg opp for hver rendring. + +Da desktop og mobil har ulik DOM struktur trenger vi dette både i JSX og CSS og ikke bar ei CSS. I desktop som sagt tidligere ligger undermenyen i HOME og på mobil ligger alle fire knappene flatt på bunnen ved siden av hverandre. Dette vil ikke CSS kunne gjøre. + #### layout @@ -254,6 +279,25 @@ Kjente begrensninger/mulige forbedringer - Range-slideren for minimumsvurdering kunne fått `aria-valuetext` for bedre skjermleserstøtte (f.eks. "minst 7 av 10" i stedet for kun tallet). - sessionStorage-nøklene (`sortBy`, `minRating`) er generiske. Ved videre utvikling av appen kan det være lurt å prefikse dem (f.eks. `movieApp:sortBy`) for å unngå navnekollisjon med annen bruk av sessionStorage. +## Responsivt design og tilgjengelighet + +Sidelayouten er flexbasert. Hovedinnholdet har flex: 2 1 0 og sidekolonnene har fast bredde, slik at innholdet får mest plass uten at menyen blir uleselig bred på store skjermer. min-width: 0 på hovedinnholdet er nødvendig fordi flex-elementer ellers nekter å bli smalere enn innholdet sitt, noe som ga horisontal scrolling ved lange filmtitler. + +Breakpointet er 700px. Under det byttes sidefeltet ut med en fast bunnlinje med fire knapper, som er mønsteret folk kjenner fra apper. Første forsøk var en dropdown også på mobil, men den dyttet de andre knappene sidelengs, og position: absolute la den oppå sorteringsfeltet. Knappene er minst 48px høye da WCAG anbefaler 44px som minimum for touch-mål og baren har padding-bottom: env(safe-area-inset-bottom) så den ikke havner under +hjemindikatoren på nyere iPhone. Fordi position: fixed tar elementet ut av dokumentflyten, har innholdet tilsvarende padding-bottom, ellers blir siste filmkort liggende skjult under menyen. + +Detaljvisningen bruker max-height i dvh og ikke vh på mobil. Vanlig vh +regner som om adresselinja i mobilnettleseren ikke finnes, så bunnen av kortet havner utenfor skjermen. + +På tilgjengelighet... + + +### Kjente begrensninger + +- Breakpointet 700px er definert to steder: som streng i useMediaQuery-kallet og i media queries i CSS. Endres det ene uten det andre, blir DOM-struktur og styling ute av synk. +- padding-bottom på innholdet er hardkodet til høyden på bunnlinja. +- Scroll til seksjon bruker setTimeout(..., 0) for å vente på at seksjonene er rendret etter et visningsbytte. Det fungerer, men er avhengig av timing – en useEffect som kjører når visningen faktisk har endret seg ville vært riktigere. +- Hvert MovieCard gjør sitt eget kall til /credits. Caching på én time gjør at samme film ikke hentes på nytt, men første lasting av forsiden gir ett kall per kort i tillegg til filmlista. En samlet henting ville vært bedre. ## Bruk av KI @@ -274,6 +318,9 @@ KI ble også brukt til å: 5. Foreslå omregningen fra TMDB sin vote_average (skala 0–10) til prosent (0–100) som vises i UI 6. Sette opp det responsive grid-oppsettet i MovieList.css (repeat(auto-fill, minmax(320px, 1fr))), som går til én kolonne på mobil + +#### Clemens + #### Albert Oversikten under er generert av Claude basert på all chat-historikken min fra autust-september (17.09.2026). Utover det Claude har lagt inn i oversikten er KI generelt brukt til feilsøking, forklaring av teknologier vi bruker som react og typescript. I tillegg er KI brukt for å effektivisere enkelte oppgaver slik som å søke gjennom historikk i github, o.l. diff --git a/src/components/MovieDetails.css b/src/components/MovieDetails.css index 34cf23e..1da461a 100644 --- a/src/components/MovieDetails.css +++ b/src/components/MovieDetails.css @@ -104,7 +104,7 @@ det er bestemt prosent når du åpner, jeg vil gjøre den større, MEN bare på height: 180px } - .details-close + .details-close, .details-favorite { width: 2.75rem; height: 2.75rem;