From 8d41136787b60997c9479c6fb3e5947ed0f0ace0 Mon Sep 17 00:00:00 2001
From: Christian Wolf <github@christianwolf.email>
Date: Sun, 7 Jan 2024 14:18:17 +0100
Subject: [PATCH] Make the list of rooms mobile aware

---
 content/page/club/raeume/index.md             | 16 ++++++++++----
 themes/tsc_vfl/assets/css/main.scss           | 21 +++++++++++++++++++
 .../layouts/shortcodes/tsc/rooms/address.html |  1 +
 .../layouts/shortcodes/tsc/rooms/image.html   |  4 ++++
 .../layouts/shortcodes/tsc/rooms/room.html    |  1 +
 5 files changed, 39 insertions(+), 4 deletions(-)
 create mode 100644 themes/tsc_vfl/layouts/shortcodes/tsc/rooms/address.html
 create mode 100644 themes/tsc_vfl/layouts/shortcodes/tsc/rooms/image.html
 create mode 100644 themes/tsc_vfl/layouts/shortcodes/tsc/rooms/room.html

diff --git a/content/page/club/raeume/index.md b/content/page/club/raeume/index.md
index e7b1aff..8fbfe42 100644
--- a/content/page/club/raeume/index.md
+++ b/content/page/club/raeume/index.md
@@ -10,10 +10,14 @@ menu:
 
 ## Vereinsheim vorne und mitte
 
+{{< tsc/rooms/room >}}
+{{< tsc/rooms/image image="vereinsheim.png" >}}
+{{% tsc/rooms/address %}}
 Rudolf-Harbig-Str. 6  
 71063 Sindelfingen
-  
-![Verinsheim vorne](vereinsheim.png)
+{{% /tsc/rooms/address %}}
+{{< /tsc/rooms/room >}}
+
 
 Das Bild zeigt unsere zwei Trainingsräume im Vereinsheim mit geöffneter Trennwand.
 
@@ -21,7 +25,11 @@ Abgeteilt in zwei Räume&nbsp; "VH Mitte" und "VH Vorn"
 
 ## Neuer Saal "VH" neu"
   
+{{< tsc/rooms/room >}}
+{{< tsc/rooms/image image="VH_Neu.jpg" >}}
+{{% tsc/rooms/address %}}
 Rudolf-Harbig-Str. 6  
 71063 Sindelfingen
-  
-![Vereinsheim neu](VH_Neu.jpg)
+{{% /tsc/rooms/address %}}
+{{< /tsc/rooms/room >}}
+
diff --git a/themes/tsc_vfl/assets/css/main.scss b/themes/tsc_vfl/assets/css/main.scss
index e17c224..fd1029b 100644
--- a/themes/tsc_vfl/assets/css/main.scss
+++ b/themes/tsc_vfl/assets/css/main.scss
@@ -612,6 +612,27 @@ h1 {
     max-width: 100%;
 }
 
+.room {
+    .image {
+        max-width: 70%;
+    }
+
+    @include media-large() {
+        display: flex;
+        align-items: start;
+
+        .image {
+            flex: 50% 0 1;
+        }
+        .address {
+            margin-left: 10px;
+        }
+        p {
+            margin: 0;
+        }
+    }
+}
+
 :root {
     --color-vhvorne: #ddcb55;
     --color-vhmitte: #c98879;
diff --git a/themes/tsc_vfl/layouts/shortcodes/tsc/rooms/address.html b/themes/tsc_vfl/layouts/shortcodes/tsc/rooms/address.html
new file mode 100644
index 0000000..e600cbb
--- /dev/null
+++ b/themes/tsc_vfl/layouts/shortcodes/tsc/rooms/address.html
@@ -0,0 +1 @@
+<div class="address">{{ .Inner }}</div>
diff --git a/themes/tsc_vfl/layouts/shortcodes/tsc/rooms/image.html b/themes/tsc_vfl/layouts/shortcodes/tsc/rooms/image.html
new file mode 100644
index 0000000..fc22a6b
--- /dev/null
+++ b/themes/tsc_vfl/layouts/shortcodes/tsc/rooms/image.html
@@ -0,0 +1,4 @@
+<div class="image">
+    {{ $resource := .Page.Resources.GetMatch (.Get "image") }}
+    <img src="{{ $resource.RelPermalink}} ">
+</div>
diff --git a/themes/tsc_vfl/layouts/shortcodes/tsc/rooms/room.html b/themes/tsc_vfl/layouts/shortcodes/tsc/rooms/room.html
new file mode 100644
index 0000000..abb815c
--- /dev/null
+++ b/themes/tsc_vfl/layouts/shortcodes/tsc/rooms/room.html
@@ -0,0 +1 @@
+<div class="room">{{ .Inner }}</div>