fix: images

feature: closes search when focusout
fipguide · Feb 5, 2025 · be6c556 · be6c556
1 parent 2ab046f
commit be6c556
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 62 deletions.
diff --git a/themes/fiptheme/assets/images/startpage.webp b/themes/fiptheme/assets/images/startpage.webp
diff --git a/themes/fiptheme/assets/js/main.js b/themes/fiptheme/assets/js/main.js
@@ -2,3 +2,4 @@ import './mobileMenu.js';
 import './countrySelector.js';
 import './resizeObserver.js';
 import './mediaqueries.js';
+import './search.js';
diff --git a/themes/fiptheme/assets/js/search.js b/themes/fiptheme/assets/js/search.js
@@ -0,0 +1,21 @@
+function searchBlur() {
+  const searchContainer = document.querySelector('.pagefind-ui__form');
+
+  searchContainer.addEventListener('focusout', function(event) {
+    if (searchContainer.contains(event.relatedTarget)) {
+      // Der Fokus ist innerhalb des Formulars auf ein anderes Element gesprungen
+      return;
+    }
+
+    // Der Fokus ist außerhalb des Formulars gesprungen
+    const drawer = document.querySelector('.pagefind-ui__drawer');
+    drawer.classList.add('pagefind-ui__hidden');
+    console.log('Das Formular oder ein Element darin hat den Fokus verloren');
+  });
+}
+
+window.onload = function() {
+  searchBlur();
+};
+
+
diff --git a/themes/fiptheme/assets/sass/stage.scss b/themes/fiptheme/assets/sass/stage.scss
@@ -2,11 +2,14 @@
     margin-bottom: 4rem;
 }
 
-.o-stage > img {
+.o-stage > picture {
     width: 100%;
     aspect-ratio: 4/1;
     max-width: 1320px;
-    border-radius: 0 0 1rem 1rem;
+
+    img {
+        border-radius: 0 0 1rem 1rem;
+    }
 }
 
 .o-stage {
@@ -48,7 +51,7 @@
     }
 }
 
-.curtain:has(~ .o-stage .o-stage__search:focus-within)  {
+.curtain:has(~ .o-stage .o-stage__search:focus-within) {
     background-color: rgba(0, 0, 0, .8);
     inset: 0;
     position: fixed;

diff --git a/themes/fiptheme/layouts/_default/_markup/render-image.html b/themes/fiptheme/layouts/_default/_markup/render-image.html
@@ -4,9 +4,7 @@
 {{ if and .Destination (or (strings.HasPrefix .Destination "http://") (strings.HasPrefix .Destination "https://")) }}
   <!-- Remote Bild: Direkt ausgeben ohne Bildverarbeitung -->
   {{ $remoteImage := resources.GetRemote .Destination }}
-  <p class="md-image">
-    <img src="{{ $remoteImage.Permalink }}" alt="{{ .Title }}" title="{{ .Title }}" loading="lazy"/>
-  </p>
+  <img src="{{ $remoteImage.Permalink }}" alt="{{ .Title }}" title="{{ .Title }}" loading="lazy"/>
 {{ else }}
   {{/* Lokales Bild: Mit Bildverarbeitung */}}
   {{ $originalImage := resources.Get "images/glider.png" }}
@@ -23,39 +21,37 @@
       {{ end }}
   {{ end }}
 
-  <p class="md-image">
-      <picture>
-          {{ $width := $originalImage.Width }}
+  <picture>
+      {{ $width := $originalImage.Width }}
 
-          {{ if gt $width 2200 }}
-              {{ with $originalImage.Resize "2200x" }}
-                  <source media="(min-width:2200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
-              {{ end }}
+      {{ if gt $width 2200 }}
+          {{ with $originalImage.Resize "2200x" }}
+              <source media="(min-width:2200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
           {{ end }}
+      {{ end }}
 
-          {{ if gt $width 1500 }}
-              {{ with $originalImage.Resize "1500x" }}
-                  <source media="(min-width:1500px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
-              {{ end }}
+      {{ if gt $width 1500 }}
+          {{ with $originalImage.Resize "1500x" }}
+              <source media="(min-width:1500px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
           {{ end }}
+      {{ end }}
 
-          {{ if gt $width 1200 }}
-              {{ with $originalImage.Resize "1200x" }}
-                  <source media="(min-width:1200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
-              {{ end }}
+      {{ if gt $width 1200 }}
+          {{ with $originalImage.Resize "1200x" }}
+              <source media="(min-width:1200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
           {{ end }}
+      {{ end }}
 
-          {{ if gt $width 800 }}
-              {{ with $originalImage.Resize "800x" }}
-                  <source media="(min-width:800px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
-              {{ end }}
+      {{ if gt $width 800 }}
+          {{ with $originalImage.Resize "800x" }}
+              <source media="(min-width:800px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
           {{ end }}
+      {{ end }}
 
-          {{ $tinyImage := $originalImage }}
-          {{ if gt $width 500 }}
-              {{ $tinyImage = $originalImage.Resize "500x" }}
-          {{ end }}
-          <img src="{{ $tinyImage.RelPermalink | safeURL }}" alt="{{ $myTitle }}" title="{{ $myTitle }}" loading="lazy"/>
-      </picture>
-  </p>
+      {{ $tinyImage := $originalImage }}
+      {{ if gt $width 500 }}
+          {{ $tinyImage = $originalImage.Resize "500x" }}
+      {{ end }}
+      <img src="{{ $tinyImage.RelPermalink | safeURL }}" alt="{{ $myTitle }}" title="{{ $myTitle }}" loading="lazy"/>
+  </picture>
 {{ end }}
diff --git a/themes/fiptheme/layouts/partials/image.html b/themes/fiptheme/layouts/partials/image.html
@@ -1,36 +1,34 @@
 {{ $myTitle := "" }}
-  <p class="md-image">
-      <picture>
-          {{ $width := .Width }}
+<picture>
+  {{ $width := .Width }}
 
-          {{ if gt $width 2200 }}
-              {{ with .Resize "2200x" }}
-                  <source media="(min-width:2200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
-              {{ end }}
-          {{ end }}
+  {{ if gt $width 2200 }}
+      {{ with .Resize "2200x" }}
+          <source media="(min-width:2200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
+      {{ end }}
+  {{ end }}
 
-          {{ if gt $width 1500 }}
-              {{ with .Resize "1500x" }}
-                  <source media="(min-width:1500px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
-              {{ end }}
-          {{ end }}
+  {{ if gt $width 1500 }}
+      {{ with .Resize "1500x" }}
+          <source media="(min-width:1500px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
+      {{ end }}
+  {{ end }}
 
-          {{ if gt $width 1200 }}
-              {{ with .Resize "1200x" }}
-                  <source media="(min-width:1200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
-              {{ end }}
-          {{ end }}
+  {{ if gt $width 1200 }}
+      {{ with .Resize "1200x" }}
+          <source media="(min-width:1200px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
+      {{ end }}
+  {{ end }}
 
-          {{ if gt $width 800 }}
-              {{ with .Resize "800x" }}
-                  <source media="(min-width:800px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
-              {{ end }}
-          {{ end }}
+  {{ if gt $width 800 }}
+      {{ with .Resize "800x" }}
+          <source media="(min-width:800px)" srcset="{{ .RelPermalink | safeURL }}" title="{{ $myTitle }}" loading="lazy"/>
+      {{ end }}
+  {{ end }}
 
-          {{ $tinyImage :=  . }}
-          {{ if gt $width 500 }}
-              {{ $tinyImage = .Resize "500x" }}
-          {{ end }}
-          <img src="{{ $tinyImage.RelPermalink | safeURL }}" alt="{{ $myTitle }}" title="{{ $myTitle }}" loading="lazy"/>
-      </picture>
-  </p>
+  {{ $tinyImage :=  . }}
+  {{ if gt $width 500 }}
+      {{ $tinyImage = .Resize "500x" }}
+  {{ end }}
+  <img src="{{ $tinyImage.RelPermalink | safeURL }}" alt="{{ $myTitle }}" title="{{ $myTitle }}" loading="lazy"/>
+</picture>