Skip to content

3. Bouwen

Jump to bottom
OniWithTheHoodie edited this page May 30, 2024 · 7 revisions

CODE 16-5-2024

index.ejs

In deze code heb ik kaarten gemaakt de kaarten die zijn gemaakt word data opgehaald vanuit directus uit het tabel f_houses en f_feedback.

  • F_HOUSES haal ik de foto's, prijzen, 4kanten meters etc. Deze data heb ik gebruikt om de kaarten te maken in de index pagina
  • F_feedback gebruik ik voor de ratings waar de users, ratings etc. Deze data heb ik gebruikt om de popup te maken.
HTML 
<%- include('./partials/head') %>
<%- include('./partials/navigation') %>
 
<body>
  <main>
    <header>
      <h1>Favorieten</h1>
      <hr />
      <p>In dit overzicht vind je al jouw favoriete huizen terug.</p>
    </header>
 
    <div class="container">
      <div class="grid-container">
        <% alleHuizen.forEach((huis, index) => { %>
        <div class="card-favorites">
          <picture>
            <source
              srcset="https://fdnd-agency.directus.app/assets/<%= huis.poster_image %>?format=webp"
              type="image/webp" />
            <source
              srcset="https://fdnd-agency.directus.app/assets/<%= huis.poster_image %>?format=avif"
              type="image/avif" />
            <img
              src="https://fdnd-agency.directus.app/assets/<%= huis.poster_image %>"
              alt="foto huis"
              width="400"
              height="400"
              class="card-image" />
          </picture>
 
          <article>
            <ol>
              <h2><a class="card-link" href="./huis/<%= huis.id %>"><%= huis.street %> <%= huis.house_nr %></a></h2>
              <li>€ <%- huis.price %></li>
              <li><%- huis.postal_code %> <%- huis.city %></li>
              <li><%- huis.m2 %> m² • <%- huis.rooms %> Kamers</li>
              <li><%- huis.m2 %></li>
              <li><%- huis.agent %></li>
 
              <div class="btn__container">
                <a class="btn-popup" href="#popup1_<%= huis.id %>">Rate dit huis</a>
              </div>
            </ol>
          </article>
        </div>
 
        <!-- Popup for each house -->
        <div id="popup1_<%= huis.id %>" class="overlay">
          <article class="popup">
            <h2>Rate dit huis</h2>
            <a class="close" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path
                  d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/>
              </svg>
            </a>
            <form action="/" method="post" class="ratingsFavorieten">
              <%- include('./partials/detailed-rating', { huis: huis }) %>
            </form>
            <div class="container__rating">
              <a href="" class="btn__rating"></a>
            </div>
          </article>
        </div>
        <% }) %>
      </div>
    </div>
  </main>
</body>
 
<%- include('./partials/foot') %>
  • Er is een partial in de index.ejs die doorverwijst naar de ratings die ik heb gemaakt met radio buttons. wel heb ik hierin een fout gemaakt omdat ik het in een foreach loop heb geschreven met een object geschreven waarbij ik de data van detailed-ratings.ejs kan gebruiken.

Detailed-ratings.ejs

detailed-ratings.ejs 
<input type="hidden" name="id" value="<%- huis.id %>" />
<input type="radio" id="1star" name="stars" value="1">
<label for="1star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Outer path for star outline -->
  <path fill="none" stroke="var(--ci-primary-color, currentColor)" stroke-width="32" d="M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Z"/>
  <!-- Inner path for star fill -->
  <path fill="var(--ci-secondary-color, currentColor)" d="M461.469,217.37,367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z"/>
</svg></label>
 
<input type="radio" id="2star" name="stars" value="2" checked>
<label for="2star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Outer path for star outline -->
  <path fill="none" stroke="var(--ci-primary-color, currentColor)" stroke-width="32" d="M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Z"/>
  <!-- Inner path for star fill -->
  <path fill="var(--ci-secondary-color, currentColor)" d="M461.469,217.37,367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z"/>
</svg></label>
 
<input type="radio" id="3star" name="stars" value="3">
<label for="3star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Outer path for star outline -->
  <path fill="none" stroke="var(--ci-primary-color, currentColor)" stroke-width="32" d="M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Z"/>
  <!-- Inner path for star fill -->
  <path fill="var(--ci-secondary-color, currentColor)" d="M461.469,217.37,367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z"/>
</svg></label>
 
<input type="radio" id="4star" name="stars" value="4">
<label for="4star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Outer path for star outline -->
  <path fill="none" stroke="var(--ci-primary-color, currentColor)" stroke-width="32" d="M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Z"/>
  <!-- Inner path for star fill -->
  <path fill="var(--ci-secondary-color, currentColor)" d="M461.469,217.37,367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z"/>
</svg></label>
 
<input type="radio" id="5star" name="stars" value="5">
<label for="5star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Outer path for star outline -->
  <path fill="none" stroke="var(--ci-primary-color, currentColor)" stroke-width="32" d="M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Z"/>
  <!-- Inner path for star fill -->
  <path fill="var(--ci-secondary-color, currentColor)" d="M461.469,217.37,367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z"/>
</svg></label>
 
<input type="submit" value="Rate" />
 
<a href="">Bekijk hier de overzicht van de score </a>

styles.css

  • In de styles heb ik de styling voor de button gemaakt en een overlay over de kaarten. Deze overlay is op hidden en de close button ook die alleen getoond word als er op de button geklikt wordt. Door een ID mee te geven is dit mogelijk waarbij je de ratings kunt zien.
CSS 
/****************************************************************
                                                                *
                    Button Pop up index.EJS                     *                        
                                                                *
*****************************************************************/
    .btn__container {
      margin-top: 20px;
    }


    .btn-popup {
      font-size: 1em;
      padding: 10px;
      background-color: var(--regent-blue-primary-color);
      color: var(--color-main-text);
      border: 2px solid var(--web-orange-primary-color);
      border-radius: 20px/50px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease-out;
      position: relative;
      z-index: 1; 
    }


    .btn-popup:hover {
      background-color: var(--web-orange-primary-color);
      z-index: 1;
    }


  




/****************************************************************
                                                                *
                          POPUP RATINGS                         *                        
                                                                *
*****************************************************************/


.overlay { 
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--regent-blue-primary-color);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}


.overlay:target {
  visibility: visible;
  opacity: 1;
}


.popup {
  margin: 70px auto;
  padding: 20px;
  background-color: var(--regent-blue-primary-color);
  border-radius: 5px;
  width: 70%;
  position: relative;
  /* transition: all 5s ease-in-out; */
}


.popup h2 {
  margin-top: 0;
  color: var(--color-main-text);
}


.popup .close {
  position: absolute;
  bottom: 5em;
  left: 110%;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: var(--color-main-text);
}


.popup .close:hover {
  color: var(--web-orange-primary-color);
}


@media (min-width: 45rem) {
  .popup {
    margin: 70px auto;
    padding: 20px;
    background-color: var(--regent-blue-primary-color);
    border-radius: 5px;
    width: 100%;
    position: relative;
  }


  .popup .close {
    position: absolute;
    bottom: 5em;
    left: 90%;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-main-text);
  }
}


@media (min-width:55rem) {
  .popup .close {
    position: absolute;
    bottom: 5em;
    left: 95%;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-main-text);
  }
}

JS

  • In de server.js heb ik een apiURL variable waarbij f_houses of f_feedback meegegeven kan worden met de apiURL
  • let = ratings variable gemaakt waarbij de post rating in wordt opgeslagen
JS 
const apiUrl = 'https://fdnd-agency.directus.app/items/'
const huizenHome = await fetchJson(apiUrl + 'f_houses')
const feedback = await fetchJson(apiUrl + 'f_feedback')


// 
// let ratings = ''
let ratings = []
// Get Route voor de index
app.get('/', function (request, response) {
  // fetch data directus table f_feedback
  fetchJson(apiUrl + 'f_feedback').then((BeoordelingData) => {
    // console.log(BeoordelingData)


    response.render('index', {
      alleHuizen: huizenHome.data,
      alleRatings: feedback.data,
      ratings: ratings,
    })
    // console.log(ratings)
  })
})


app.post('/', function (request, response) {
  console.log(request.body)


  // posten naar directus..
  fetch(`${apiUrl}f_feedback/`, {
    method: 'POST',
    body: JSON.stringify({
      house: request.body.id,
      list: 12,
      user: 7,
      rating: {
        stars: request.body.stars,
      },
    }),
    headers: {
      'Content-Type': 'application/json; charset=UTF-8',
    },
  }).then((postResponse) => {
    console.log(postResponse)
    response.redirect(303, '/')
  })
})

Code 24-5-2024

code dat is gebruikt voor de score pagina progressive enhancement

Code gebruikt voor score pagina 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        form {
            display: flex;
            flex-direction: row;
            gap: 24px;
            justify-content: center;
            align-items: center;
            margin-top: 25%;
        }

        .style__button {
            background-color: rgb(217, 238, 238);
            width: auto;
            height: 50px;
            border-radius: 10px;
            border: 2px solid orange;
            line-height: 2.5;
            font-weight: bold;
            padding: 0 20px;
            font-size: 1rem;
            text-align: center;
            z-index: 1;
            box-shadow: 
                inset 2px 2px 3px rgb(255 255 255 / 60%),
                inset -2px -2px 3px rgb(0 0 0 / 60%);
        }

        .style__button:hover {
            background-color: orange;
        }

        .style__button:active {
            box-shadow:
                inset -2px -2px 3px rgb(217, 238, 238),
                inset 2px 2px 3px rgb(217, 238, 238);
        }

        /* LOADER LOADING STATE */
        .loader {
            width: 50px;
            aspect-ratio: 1;
            border-radius: 50%;
            border: 8px solid #0000;
            border-right-color: #ffa50097;
            position: relative;
            animation: l24 1s infinite linear;
            opacity: 1;
        }

        .loader:before,
        .loader:after {
            content: "";
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: inherit;
            animation: inherit;
            animation-duration: 2s;
        }

        .loader:after {
            animation-duration: 4s;
        }

        @keyframes l24 {
            100% {transform: rotate(1turn)}
        }

        /* SUCCESS STATE */
        .success {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: green;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            animation: none;
        }
    </style>
</head>
<body>
    <form action="">
        <input class="style__button" type="button" value="Druk op dit knop">
        <div></div>
    </form>

    <script>
        let button = document.querySelector(".style__button");
        let element = document.querySelector("div");

        button.addEventListener("click", function() {
            element.classList.add("loader");
            setTimeout(function() {
                element.classList.remove("loader");
                element.classList.add("success");
                element.textContent = "✓";  // Adds  a checkmark
            }, 3000);  // 3sec trigger (3000 is milisceconds)
        });
    </script>
</body>
</html>

Code 29-5-2024

Event Prevent.Default for ratings

ratings refresh prevent 
<form class="ratingsFavorieten" action="/score/<%- huis.id %>" method="POST">
  <input type="hidden" name="id" value="<%- huis.id %>" />
  <fieldset class="fieldsetRatingCard">
    <input class="inputRating" id="algemeen1" name="algemeenNumber" type="radio" value="1">
    <label class="labelRating" aria-label="1 ster" for="algemeen1"></label>

    <input class="inputRating" id="algemeen2" name="algemeenNumber" type="radio" value="2">
    <label class="labelRating" aria-label="2 sterren" for="algemeen2"></label>

    <input class="inputRating" id="algemeen3" name="algemeenNumber" type="radio" value="3">
    <label class="labelRating" aria-label="3 sterren" for="algemeen3"></label>

    <input class="inputRating" id="algemeen4" name="algemeenNumber" type="radio" value="4">
    <label class="labelRating" aria-label="4 sterren" for="algemeen4"></label>

    <input class="inputRating" id="algemeen5" name="algemeenNumber" type="radio" value="5">
    <label class="labelRating" aria-label="5 sterren" for="algemeen5"></label>
  </fieldset>
  <input type="submit" value="Rate" />
</form>

form {
  z-index: 1;
}

input[type="radio"] {
  display: none;
}

input[type="submit"] {
  display: none;
}

.scorefield {
  display: grid;
  grid-template-rows: 5em 5em 5em 5em;
  row-gap: 1em;
}

.fieldsetRatingCard {
  font-weight: bold;
  display: flex;
  border: none;
}

.titleRating {
  font-weight: bold;
}

.labelRating:hover {
  scale: 1.2;
  transition: 0.5s;
  color: var(--web-orange-primary-color);
}

.labelRating::after {
  content: "★";
  font-size: 2em;
  display: grid;
  place-items: center;
}

.labelRating {
  color: #a4a2a2;
}

input[type="radio"]:checked + .labelRating {
  color: #eea02e;
}

/* Highlights the stars behind the checked one */
input[type="radio"]:checked ~ .labelRating {
  color: #eea02e;
  transition: color 1s;
}

/* Change color on hover, but do not affect checked stars */
.fieldsetRatingCard label:hover ~ label,
.fieldsetRatingCard label:hover {
  cursor: pointer;
  color: #eea02e;
}

/* Ensures that hovering only changes colors if not already checked */
.fieldsetRatingCard label:hover ~ label:not(:checked) {
  color: #eea02e;
}

.ratingsFavorieten {
  position: relative;
  z-index: 1;
}

.button__card {
  margin-top: 10px;
}

document.addEventListener('DOMContentLoaded', function () {
  const allRatings = document.querySelectorAll('.ratingsFavorieten');

  if (allRatings) {
    allRatings.forEach(function (formRating) {
      const radioButtons = formRating.querySelectorAll('input[type=radio]');

      // submit eventListener toegevoegd voor de form
      formRating.addEventListener('submit', function (event) {
        event.preventDefault(); // Prevent default voor de form zodat de page niet refreshed

        // opvangen van de form data
        const formData = new FormData(formRating);
        const formDataObj = Object.fromEntries(formData.entries());

        // Debug log voor de form data
        console.log('Form data:', formDataObj);

        // Afhandelen form data postingen het fetchen daar van
        fetch(formRating.action, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(formDataObj),
        })
        .then(response => response.json())
        .then(data => {
          // Handel de respone data af
          console.log('Success:', data);
        })
        .catch(error => {
          console.error('Error:', error);
        });
      });

      // Change event voor de radio button
      radioButtons.forEach(function (radioButton) {
        radioButton.addEventListener('change', function () {
          // handmatige trigger voor het submiten dit is voor het gedrag bij het posten met de radio buttons en het triggeren van prevent default
          formRating.dispatchEvent(new Event('submit', { cancelable: true }));
        });
      });
    });
  }
});

Code 30-5-2024

Update CSS

Polishen van de website en er voor zorgen dat de huistijl meer op dat van Funda lijkt en responsive op verschillende views

Update CSS 
/****************************************************************
                                                                *
                            MAIN STYLING                        *                        
                                                                *
*****************************************************************/
:root {
  --color-main-text: #1B1B1B;
  --white-primary-color: #FFFFFF;
  --web-orange-primary-color: #F7A100;
  --regent-blue-primary-color: #E6F2F7;
  --lochmara-primary-color: #0071B3;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Proxima Nova", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-main-text);
}

//Desktop de content meer naar het midden gebracht net als dat op Funda
@media (min-width: 55rem) {
  .desktopSpacing {
  margin-left: calc(50% - (80% / 2));
  margin-right: calc(50% - (80% / 2));
  }
}

/****************************************************************
                                                                *
                          Head.EJS Navbar                       *                        
                                                                *
*****************************************************************/

/*********** mobile ***********/
@media (min-width: 20rem) {
  .nav--wrapper {
    display: flex;
    align-items: center;

    /* position: relative; */
  }

  .logo {
    width: 4.5em;
  }


  label.hamburger {
    font-size: 1.2rem;
    position: relative;
    fill: var(--color-main-text);
    display: grid;
    justify-items: center;
    align-content: center;
    line-height: 1em;
    margin-left: auto;
  }

  label.hamburger::after {
    content: ' menu';
    font-size: .5em;
    line-height: 1em;
  }


  input[type="checkbox"] {
    display: none;
  }

  .mobile {
    display: flex;
    flex-direction: column;
    display: none;
  }

  nav {
    height: 60px;
    padding: 0.8em;
    background-color: var(--web-orange-primary-color);
    color: var(--white-primary-color);
    position: relative;
  }

    ul.mobile.tablet-desktop {
        display: none;
    }

    ul.nav__icons {
        display: none;
    }

  nav > li {
    list-style-type: none;
    margin-bottom: 0.5em;
    text-align: center;
  }

  li a {
    text-decoration: none;
  }

    ul.mobile.tablet-desktop li a:hover{
        /*background-color: #FFE2FF;*/
    }

    ul.nav__icons li a:hover{
        /*background-color: #FFE2FF;*/
    }

  #toggle:checked ~ ul {
    display: block;
    padding: .5em;
    position: absolute;
    top: 100%;
    background-color: var(--web-orange-primary-color);
  }

  #toggle:checked ~ ul:nth-of-type(1) {
    left: 0;
    right: 0;
  }

  #toggle:checked ~ ul:nth-of-type(2) {
    right: 0;
  }

  .nav__icons a > svg {
    display: none;
  }
}

/********** tablet  **********/
@media (min-width: 38rem) {
    .logo {
      width: 5.5em;
    }

    input[type="checkbox"], label.hamburger {
      display: none;
    }

    nav {
      width: 100%;
      height: 60px;
      padding: 0;
    }

    .nav--wrapper {
      margin-left: calc(50% - (80% / 2));
      margin-right: calc(50% - (80% / 2));
      height: 100%;
    }

    ul.mobile.tablet-desktop li a:hover{
        /*background-color: #FFE2FF;*/
        height: auto;
    }

    ul.nav__icons li a:hover{
        /*background-color: #FFE2FF;*/
        height: auto;
    }
    .nav__icons {
      display: flex;
      flex-direction: row;
      gap: 16px;
      margin-left: auto;
    }

    a > svg {
      width: 30px;
      padding-right: 10px;
    }

    #toggle ~ ul,
    #toggle:checked ~ ul {
      display: flex;
      position: relative;
      top: unset;
      background-color: var(--web-orange-primary-color);
    }
  
    #toggle ~ ul:nth-of-type(1),
    #toggle:checked ~ ul:nth-of-type(1) {
      left: unset;
      right: unset;
    }
  
    #toggle ~ ul:nth-of-type(2),
    #toggle:checked ~ ul:nth-of-type(2) {
      right: unset;
    }

    .nav__icons a {
      color: var(--white-primary-color);
    }

    .tablet-desktop a {
      color: var(--white-primary-color);
    }

    .nav__icons a > svg {
      fill: var(--white-primary-color);
    }

    .nav__icons > a{
      padding-right: auto;
    }

    .nav__icons a > svg {
      display: inline-block;
      gap: 20px;
    }

    .tablet-desktop {
      display: inline-flex;
      flex-direction: row;
      
      gap: 16px;
    }

    input[type="checkbox"], label.hamburger {
      display: none;
    }

  
}


@media (min-width: 55rem) {
    .nav--wrapper {
        margin-left: calc(50% - (80% / 2));
        margin-right: calc(50% - (80% / 2));
    }

}

/****************************************************************
                                                                *
                          Index.EJS Cards                       *                        
                                                                *
*****************************************************************/
  main {
    margin: 16px;
  
    & h1 {
      margin-bottom: 10px;
    }  
  
    & hr {
      background-color: var(--web-orange-primary-color);
      margin-bottom: 10px;
      width: 50px;
      height: 5px;
    }
  }
  
    .container {
      display: flex;
      flex-direction: column;
      margin-top: 1em;
      gap: 16px;
    }
      
    .grid__container {
      display: flex;
      flex-direction: column;
    }

    .card__list{
      /*display: grid;*/
      /*!*grid-row-gap: 1em;*!*/
      /*grid-template-rows: 4em 2em 2em 2em 2em 2em 2em;*/

    }
    .card__image {
      width: 100%;
      height: 276px;
      object-fit: cover;
    }
  
    .card__link:before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: transparent;
      z-index: 0;
    }
    .card__link{
      color: #0071B3;
    }
  
    & article {
      display: flex;
      /* flex-direction: column; */
      /*font-size: 16px;*/
      padding: 10px;
    }
  
    & img {
      border-radius: 5px 5px 0 0;
      object-fit: fill;
    }
  
    &  ul > a {
      text-decoration: none;
    }
  
    & ul > a:hover {
      color: white;
    }
  
    & article > ul,li {
      display: block;
      padding: 3px;
    }

    .card__favorites {
      position: relative;
      border: solid 0.1em var(--regent-blue-primary-color);
      height: auto;
      width: auto;
      border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      background-color: var(--white-primary-color);
      margin-bottom: 20px;
      z-index: 0;
    }
    
    
    article > h2,a {
      text-decoration: none;
      color: var(--color-main-text);
    }

    .card__content {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    .button__card {
      display: inline-block;
      padding: 10px 20px;
      width: auto;
      background-color: var(--lochmara-primary-color);
      color: var(--white-primary-color);
      text-decoration: none;
      border-radius: 5px;
      margin-bottom: 10px;
      position: relative;
      z-index: 1;
    }

    .button__card:hover {
      background-color: var(--web-orange-primary-color);
    }
  
    /* Tablet */
    @media (min-width: 45rem) {
      .grid__container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
      }

      .card__favorites {
        background-color: var(--white-primary-color);
        width: 100%;  /* Use full width available in the grid */
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        height: auto;
      }

      img {
        width: 100%;
        border-radius: 16px;
      }
    }

    /* Desktop */
    @media (min-width: 55rem) {
      .grid__container {
        grid-template-columns: repeat(3, 1fr);
      }

      .card__favorites {
        height: auto;
        border-top-left-radius: 16px;
      border-top-right-radius: 16px;
      }
    }

/****************************************************************
                                                                *
                        Index.EJS Ratings                       *                        
                                                                *
*****************************************************************/
form {
  z-index: 1;
}

input[type="radio"] {
  display: none;
}

input[type="submit"] {
  display: none;
}

.scorefield{
  display: grid;
  grid-template-rows: 5em 5em 5em 5em;
  row-gap: 1em;
  /*place-items: center;*/
}

.fieldsetRatingCard {
  font-weight: bold;
  display: flex;
  border: none;
  /*background-color: deepskyblue;*/
}


.titleRating{
  /*text-align: center;*/
  font-weight: bold;
}

.labelRating:hover{
  scale: 2;
  transition: 0.5s;
  color: var(--web-orange-primary-color);
}

.labelRating:after{
  width: 1.5em;
  content: "★";
  font-size: 2em;
  display: grid;
  place-items: center;
}

.labelRating{
  color: #a4a2a2;
  /*background-color: #0071B3;*/
}
.fieldsetRating:checked{
  border-color: #0071B3;
}

/*hier word gecheckt of de input checked is en het bijbehorende label*/
.fieldsetRating input:checked + label {
  color: #eea02e;
}

/*door deze code worden de andere sterren daarachter ook groen door het sibling selectord */
.fieldsetRating label:has(~ :checked) {
  color: #eea02e;
  transition: 1s;
}

/*hier worden de sterren geel als er op gehoverd word behalve de sterren die gechekt zijn*/
.fieldsetRating label:hover:not(input:checked + label) {
  cursor: pointer;
  color: #eea02e;
}

/*hier worden de sterren geel en overgenomen op label vanwege het sibling selector*/
.fieldsetRating label:has(~ label:hover):not(input:checked + label) {
  color: #eea02e;
}


.ratingsFavorieten {
  position: relative;
  z-index: 1;
}

.button__card {
  margin-top: 10px;
}


/****************************************************************
                                                                *
                        HUIS.EJS CAROUSEL                       *                        
                                                                *
*****************************************************************/
.carousel {
  width: 100%;
  height: 166px;
}

.card-container {
  width: 100%;
  display: flex;
  width: calc(100% - 16px);
  margin: 8px;
  flex: 0 0 calc(100% - 16px);
}

img.card {
  min-width: 250px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-main-text);
  border-radius: 8px;
}

.card:hover {
  background: var(--web-orange-primary-color);
}

.card-container::-webkit-scrollbar {
  display: none;
}

.card-container {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  gap: 8px;
}

.card {
  scroll-snap-align: start;
}

/****************************************************************
                                                                *
                          HUIS.EJS TEKST                        *                        
                                                                *
*****************************************************************/
article.detail {
  border-top: solid 0.2em var(--color-main-text);
  margin-top: 8em;
  padding-top: 2em;
}

.detail > ul {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.detail, .description {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 1em;
  gap: 1em;
}

.description-line {
  border-top: solid 0.2em var(--web-orange-primary-color);
  margin-top: 1em;
  padding-top: 1em;
  width: 100%;
  text-align: center;
}

.description {
  font-size: 1em;
  line-height: 1.5;
}

.agent {
  border: solid 0.2em var(--color-main-text);
  padding: 5em;
  text-align: center;
  background: var(--secondary-bg-color);
  
  & p {
    padding-bottom: 1em;
  }
}
Clone this wiki locally