New: Aanmelden bedrijven

2026-01-27 08:20:30 +01:00
parent 2661f00ac5
commit a1af2e4928
46 changed files with 4899 additions and 145 deletions
--- a/themes/godocs-1/assets/scss/_common.scss
+++ b/themes/godocs-1/assets/scss/_common.scss
@@ -391,7 +391,7 @@ $quote-color: #918e91;
 }

 .color-warning {
-  color: $warning-color;
+  color: $warning-color !important;
 }

 .header-row {
@@ -420,4 +420,64 @@ $quote-color: #918e91;
 .footnote-ref::after {
  content: "]";
  margin-left: 0.05em;
+}
+
+.builder-card {
+  transition: opacity 150ms ease-in-out;
+}
+.builder-card.is-filtered-out {
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* Container voor filters */
+#builder-filters {
+  --primary-color: #4c9e81; /* Komt overeen met je 'Bezoek de website' knop */
+  --checkbox-size: 24px;    /* Ongeveer 50% groter dan standaard */
+}
+
+/* De checkbox groter maken en kleur geven */
+.filter-checkbox {
+  width: var(--checkbox-size);
+  height: var(--checkbox-size);
+  margin-top: 0;
+  cursor: pointer;
+  border: 2px solid #ced4da;
+  transition: all 0.2s ease-in-out;
+}
+
+/* Kleur bij actieve/checked status */
+.filter-checkbox:checked {
+  background-color: var(--primary-color);
+  border-color: var(--primary-color);
+}
+
+/* Focus staat voor toegankelijkheid */
+.filter-checkbox:focus {
+  box-shadow: 0 0 0 0.25 margin rgba(76, 158, 129, 0.25);
+  border-color: var(--primary-color);
+}
+
+/* De labels beter uitlijnen en leesbaarder maken */
+.form-check-label {
+  padding-left: 10px;
+  cursor: pointer;
+  font-size: 1.1rem; /* Iets groter voor leesbaarheid */
+  line-height: var(--checkbox-size);
+  vertical-align: middle;
+  display: inline-block;
+}
+
+/* Groepering van de checkbox en label */
+.form-check {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem !important; /* Meer witruimte tussen de opties */
+}
+
+/* De "Filters wissen" link ook iets duidelijker maken */
+#clear-filters {
+  font-size: 1rem;
+  text-decoration: underline;
+  margin-top: 15px;
 }
--- a/themes/godocs-1/assets/scss/_typography.scss
+++ b/themes/godocs-1/assets/scss/_typography.scss
@@ -90,4 +90,9 @@ h6,
  font-size: 0.8em;
  font-style: italic;
  color: lighten($color: $text-color, $amount: 30);
+}
+
+.font-pill {
+  font-size: 0.5em;
+  font-weight: 600;
 }
--- a/themes/godocs-1/assets/scss/templates/_main.scss
+++ b/themes/godocs-1/assets/scss/templates/_main.scss
@@ -359,10 +359,12 @@

 .badge {
  margin-bottom: 20px;
-  font-weight: 500;
-  font-size: 15px;
-  padding: 5px 10px;
-  border-radius: 4px;
+  font-weight: 800;
+  font-size: 12px;
+  min-width: 22px;
+  min-height: 22px;
+  padding: 5px;
+  border-radius: 8px;
  display: block;
  width: fit-content;

--- a/themes/godocs-1/layouts/_default/overview.html
+++ b/themes/godocs-1/layouts/_default/overview.html
@@ -0,0 +1,200 @@
+{{ define "main" }}
+<section class="section">
+  <div class="container">
+    <div class="row">
+      <div class="col-12">
+        <div class="py-2 px-4 px-lg-5">
+          <h1 class="mb-4 fw-bold">{{ .Title }}</h1>
+          <p class="lead">{{ .Params.Description | markdownify }}</p>
+          
+          <div class="row mt-5">
+            <div class="col-md-4 col-lg-3">
+              <div class="sticky-top" style="top: 150px;">
+                <h2 class="h4 fw-bold">Filters</h2>
+                <hr>
+                <p class="text-muted">Filter op kenmerken van de bedrijven.</p>
+
+                <div id="builder-filters">
+                  <div class="form-check mb-2">
+                    <input class="form-check-input filter-checkbox" type="checkbox" value="eigen" id="filter-fabriek" data-filter="fabriek">
+                    <label class="form-check-label small" for="filter-fabriek">
+                      {{ i18n "label_filter_eigen_fabriek" | default "Eigen fabriek" }}
+                    </label>
+                  </div>
+
+                  <div class="form-check mb-2">
+                    <input class="form-check-input filter-checkbox" type="checkbox" value="mogelijk" id="filter-huur" data-filter="huur">
+                    <label class="form-check-label small" for="filter-huur">
+                      {{ i18n "label_filter_huur" | default "Huur mogelijk" }}
+                    </label>
+                  </div>
+
+                  <div class="form-check mb-2">
+                    <input class="form-check-input filter-checkbox" type="checkbox" value="mogelijk" id="filter-onderhoud" data-filter="onderhoud">
+                    <label class="form-check-label small" for="filter-onderhoud">
+                      {{ i18n "label_filter_onderhoud" | default "Onderhoud mogelijk" }}
+                    </label>
+                  </div>
+                  
+                  <button class="btn btn-sm btn-primary text-white mt-3" id="clear-filters" style="display:none;">
+                    {{ i18n "clear_filters" | default "Filters wissen" }}
+                  </button>
+                </div>
+              </div>
+            </div>
+            
+            <div class="col-md-8 col-lg-9">
+              <div class="row masonry-wrapper" id="builders-grid">
+              {{ range .Params.builders }}
+              <div class="mb-4 builder-card"
+                data-fabriek="{{ .fabriek.type | default "onbekend" | plainify }}" 
+                data-huur="{{ .huur.type | default "onbekend" | plainify }}" 
+                data-onderhoud="{{ .onderhoud.type | default "onbekend" | plainify }}">
+
+                <div class="card h-100 shadow-sm rounded border-0">
+                  <div class="card-body d-flex flex-column">
+                    
+                    <div class="mb-1">
+                      <h2 class="h3 card-title h5 fw-bold mb-1">{{ .name }}</h3>
+                      <span class="badge bg-light text-primary border mt-2">{{ .specialty }}</span>
+                    </div>
+                    
+                    <p class="card-text text-muted flex-grow-1">
+                      {{ .description }}
+                    </p>
+
+                    <div class="bg-light rounded p-3 mt-2 mb-4">
+                      <div class="row g-2">
+                        
+                        <div class="col-md-6 d-flex align-items-center">
+                          <div class="position-relative me-3">
+                            {{ $f := .fabriek }}
+                            {{ $fColor := "text-muted opacity-25" }}
+                            {{ if eq $f.type "eigen" }}{{ $fColor = "text-success" }}
+                            {{ else if eq $f.type "partner" }}{{ $fColor = "text-success opacity-50" }}{{ end }}
+                            
+                            <i class="fas fa-industry {{ $fColor }} fa-fw"></i>
+                            {{ if gt (int $f.aantal) 0 }}
+                              <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">
+                                {{ $f.aantal }}
+                              </span>
+                            {{ end }}
+                          </div>
+                          <span class="small text-muted">{{ i18n (printf "label_fabriek_%s" ($f.type | default "onbekend")) }}</span>
+                        </div>
+
+                        <div class="col-md-6 d-flex align-items-center">
+                          <i class="fas fa-file-contract fa-fw me-3 {{ if .vergunning }}text-success{{ else }}text-muted opacity-25{{ end }}"></i>
+                          <span class="small text-muted">{{ i18n "label_vergunning" }}</span>
+                        </div>
+
+                        <div class="col-md-6 d-flex align-items-center">
+                          {{ $o := .onderhoud }}
+                          {{ $oColor := "text-muted opacity-25" }}
+                          {{ if eq $o.type "mogelijk" }}{{ $oColor = "text-success" }}{{ end }}
+                          
+                          <i class="fas fa-tools fa-fw me-3 {{ $oColor }}"></i>
+                          <span class="small text-muted">{{ i18n (printf "label_onderhoud_%s" ($o.type | default "onbekend")) }}</span>
+                        </div>
+
+                        <div class="col-md-6 d-flex align-items-center">
+                          {{ $h := .huur }}
+                            {{ $hColor := "text-muted opacity-25" }}
+                            {{ if eq $h.type "mogelijk" }}{{ $hColor = "text-success" }}{{ end }}
+                          <i class="fas fa-key fa-fw me-3 {{ $hColor }}"></i>
+                          <span class="small text-muted">{{ i18n (printf "label_huur_%s" ($h.type | default "onbekend")) }}</span>
+                        </div>
+
+                      </div>
+                    </div>
+                    <div class="mt-auto">
+                      <a class="btn btn-primary text-white py-2" href="{{ .url }}?source=mantelzorgwoning.info" target="_blank" rel="noopener">
+                        {{ i18n "visit_website" }}
+                      </a>
+                      <a class="btn btn-outline py-2" href="mailto:{{ .email }}?subject={{ i18n "mail_subject" }}">
+                        <i class="fas fa-envelope pe-1"></i> {{ i18n "send_email" }}
+                      </a>
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+            {{ end }}
+          </div>
+
+          <div class="mt-5 pt-4 border-top">
+            {{ .Content }}
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  const grid = document.querySelector('#builders-grid');
+  const msnry = new Masonry(grid, {
+      itemSelector: '.builder-card',
+      percentPosition: true,
+      transitionDuration: '0.2s'
+  });
+
+  const checkboxes = document.querySelectorAll('.filter-checkbox');
+  const cards = document.querySelectorAll('.builder-card');
+  const clearBtn = document.getElementById('clear-filters');
+
+  function norm(v) {
+    return (v || "").trim().replace(/^"+|"+$/g, "").toLowerCase();
+  }
+
+  function filterCards() {
+  let activeFilters = {};
+  let hasActiveFilters = false;
+
+  checkboxes.forEach(checkbox => {
+      if (checkbox.checked) {
+          activeFilters[checkbox.dataset.filter] = checkbox.value.trim();
+          hasActiveFilters = true;
+      }
+  });
+
+  cards.forEach(card => {
+      let shouldShow = true;
+      
+      for (let filter in activeFilters) {
+          const cardValue = norm(card.dataset[filter]);
+          const filterValue = norm(activeFilters[filter]);
+
+          if (cardValue !== filterValue) {
+            shouldShow = false;
+            break;
+          }
+      }
+
+      if (shouldShow) {
+          card.style.display = "block";
+          card.classList.remove('is-filtered-out');
+      } else {
+          card.classList.add('is-filtered-out');
+          card.style.display = "none";
+      }
+  });
+
+  msnry.layout();
+  
+  clearBtn.style.display = hasActiveFilters ? "block" : "none";
+}
+
+  checkboxes.forEach(checkbox => {
+      checkbox.addEventListener('change', filterCards);
+  });
+
+  clearBtn.addEventListener('click', function() {
+      checkboxes.forEach(cb => cb.checked = false);
+      filterCards();
+  });
+});
+</script>
+{{ end }}
--- a/themes/godocs-1/layouts/partials/header.html
+++ b/themes/godocs-1/layouts/partials/header.html
@@ -19,8 +19,8 @@
        <i class="fa-solid fa-xmark"></i>
      </button>

-      <div class="collapse navbar-collapse text-center" id="navigation">
-        <ul class="navbar-nav mx-auto align-items-center">
+      <div class="collapse navbar-collapse" id="navigation">
+        <ul class="navbar-nav ms-md-4 my-md-2">
          {{ range site.Menus.main }}
          {{ if .HasChildren }}
          <li class="nav-item dropdown">
@@ -39,9 +39,19 @@
          </li>
          {{ end }}
          {{ end }}
-          <li class="nav-link d-none d-lg-block">
-            <!-- Language List -->
-            {{ if .IsTranslated }}
+        </ul>
+
+        <!-- for mobile -->
+        <div class="d-lg-none d-block">
+          {{ range site.Params.nav_button }}
+          <a href="{{ .link | absLangURL }}"
+            class="btn btn-sm {{if eq .style `outline`}}btn-outline-primary{{else}}btn-primary{{end}} ms-lg-4">{{ i18n .label }}</a>
+          {{ end }}
+        </div>
+      <!-- /for mobile -->
+
+      <div class="navbar-nav ms-auto d-lg-block pt-md-2 me-4">
+          {{ if .IsTranslated }}
            <select class="nav-item" id="select-language" onchange="location = this.value;" aria-label="Taalkeuze">
              {{ $siteLanguages := site.Languages}}
              {{ $pageLang := .Page.Lang}}
@@ -61,17 +71,7 @@
              {{ end }}
            </select>
            {{ end }}
-          </li>
-        </ul>
-
-        <!-- for mobile -->
-        <div class="d-lg-none d-block">
-          {{ range site.Params.nav_button }}
-          <a href="{{ .link | absLangURL }}"
-            class="btn btn-sm {{if eq .style `outline`}}btn-outline-primary{{else}}btn-primary{{end}} ms-lg-4">{{ i18n .label }}</a>
-          {{ end }}
        </div>
-      <!-- /for mobile -->
      </div>

      {{if not .IsHome }}