2.4 Sprint 4 - JeanyDeVries/ilojo-bar GitHub Wiki

Our standup with Joost went smoothly. Me and Jorn were doing great and we had no issues. Joost also thought we were doing well and he had no feedback for us this week.

Our talk with Femke got cancelled for this week.

We stilled missed a menu for our site, which would make it easier to go through the site. I made a simple dropdown menu, but we had the discover pages where there are multiple stories. So I made a dropdown in a dropdown. I was not happy with the result. The styling and the navigation was to unhandly. This first image on the left is the dropdown menu.

After showing it to Jorn we came up with a side menu. This was way better in design plus it was more user friendly. For the stories itself, we made it children from the stories header. This way you can see that it isn't one of the main pages plus that it belongs to the stories.

To go through the windows on desktop, we only had the touchbar and the arrows on our keyboard. This was a bit akward for me, because my touchbar on my laptop isn't working perfectly anymore. Plus if you are not on your laptop but on pc, you miss a touchbar as well. So we decided to add grabbing and horizontal scrolling with the mouse. I just made use of eventlisteners and then grab the slider and scroll it to the left or right according to the value.

We added snapping to the discover page. The only issue this gave was that this is not necessary for desktop plus it became in the way with the grabbing and horizontal scrolling I added. So we needed to only enable the snapping on mobile and then disable the other options.

To do this I first made functions that would remove or add the eventlisteners. I then check the screensize and if it is mobile if the screen is resized. If it is mobile, we add a mobile class to the slider. I then check if the slider has the class or not plus see if the settings or not already changed. I used a boolean, because if you resize the screen it counts every little pixel as a resize. This means the function would be called a thousand times. That's why I used the boolean to only change everything once.

function checkScreen() {
  let windowWidth = window.innerWidth;

  if(windowWidth > 756) {
    if(slider.classList.contains("isMobile"))
      slider.classList.remove("isMobile");
  } else {
      slider.className = "isMobile";
  }
}

function changeScrollSettings(){
  if(slider.classList.contains("isMobile") && !settingsSetted){
    setScrolling()
    settingsSetted = true;
  }
  else if(!slider.classList.contains("isMobile")){
    settingsSetted = false;
  }
}

This week we made a big rework in Prismic. We added ID's per story section. We did this because then I could easily add the scrolling elements specifically for one story plus I can place it on a section by my choosing in the story. I check the ID and if it is the one I want then I place the div.

<% if(alinea.alinea_id == "wreckingBall"){ %>
    <div class="wrecker"></div>
<% } %>

We also added images to prismic. We needed to show images in our story page to make it more alive. In prismic you now have the option to add a section for the story plus you can add an image to that section.

<% if(alinea.image.url){ %>
   <div class="alinea_image">
       <img src="<%= alinea.image.url %>">
   </div>
<% } %>