Week 4 - ROEL2407/cmda-smoelenboek GitHub Wiki

Deze week begon met een gesprek met onze coach Sanne. Dit ging goed en hier kregen we ook validatie op onze keuzes. Hierna ben ik gaan kijken of het mogelijk was om een CSV bestand te importeren. Na een tijdje online zoeken hiernaar kwam ik erachter dat dit een premium functie is van Prismic en dit dus niet mogelijk was.

Pop-up

Dinsdag ben ik bezig geweest met de pop-up goed op alle pagina's te krijgen. Nadat dit niet heel soepel ging heb hier donderdag tijdens de design review naar gevraagd hoe ik dit het beste kon doen, kreeg ik de feedback dat ik de pop-up eigenlijk moest redesignen in plaats van een paar kleine aanpassingen. Wanneer de pop-up opent, blokkeert deze de rest van de docenten. Op basis daarvan en het gesprek donderdag met de opdrachtgever heb ik deze aangepast zodat deze van de zijkant inglijdt en de docenten iets samendrukt. Hiervoor heb ik ook de javascript aan moeten passen.

links.forEach((link) => {
  link.addEventListener("click", function (event) {
    event.preventDefault();
    pop_ups.forEach(pop => {
      if (!pop.classList.contains("hidden")) {
        pop.classList.add("hidden");
      }
    })
    this.nextElementSibling.classList.remove("hidden");
    all_teachers.classList.add("openPop");
  });
});

closes.forEach((close) => {
  close.addEventListener("click", function (event) {
    event.preventDefault();
    pop_ups.forEach((pop_up) => {
      pop_up.classList.add("hidden");
      all_teachers.classList.remove("openPop");
    });
  });
});

Code en design reviews

Deze week hadden we de laatste reviews voor dit project. Hier kreeg ik de volgende feedback uit:

Code

• Ga je keuzes valideren bij docenten en studenten
• Je kan nog een grappige styling voor overzicht pagina maken(bijvoorbeeld vulkaan die docenten uitspuwt)
• De pop-up ook op detail pagina
• Maak een timeout die checkt of er iemand al x aantal minuten niks gedaan heeft op het scherm en anders terug gaat naar een overzicht

Keyboard

Ook heb ik nog ervoor gezorgd dat het keyboard weer sluit als ernaast geklikt wordt. Ik had enige moeite met de HTML constructie waardoor ik pointer events in de css moest gebruiken. De wrapper van het keyboard wordt namelijk veranderd qua display attribuut. Hierdoor kreeg ik een reep ter hoogte van het toetsenbord waar geklikt kon worden maar het toetsenbord sloot hierdoor niet. Met behulp van pointer events heb ik ervoor gezorgd dat er nu door de wrapper geklikt kan worden en niet door het toetsenbord aangezien deze nodig is om te zoeken.

Design

• verander de kleur van de achtergrond aangezien wit heel erg fel is
• Maak de pop-up in een ander design pattern , van rechts naar binnen sliden en dan rechts laten staan
• De omhoog/omlaag knoppen moeten verder in de rechterhoek staan
• De omhoog/omlaag knoppen inhouden is laten scrollen totdat losgelaten wordt
• rechtermuisknop functionaliteiten moeten uitgezet worden, net zoals het selecteren als je je je vinger op het scherm vasthoudt

Aan het einde van week 4 zag het prototype er zo uit:

Home

Catalogus

Pop-up

Detail

Zoeken

Geen zoekresultaten

Filteren