add temporary workaround for mobile resolutions

ezgg_website/components/header.py

@@ -7,6 +7,33 @@ from ezgg_website.components.ticker import Ticker
 
 class Header(rio.Component):
     def build(self) -> rio.Component:
+        # FixMe: Temporary fix for low screen widths. Fixable once Rio offers better mobile-targeted layouting
+        if self.session.window_width < 67.125:
+            return rio.Column(
+                rio.Rectangle(
+                    content=rio.Column(
+                        rio.Row(
+                            rio.Link(
+                                rio.Image(from_root("ezgg_website/assets/placeholder_logo_grey.png"), align_x=0,
+                                          width=8),
+                                "/"
+                            )
+                        ),
+                        margin=1
+                    ),
+                    fill=self.session.theme.neutral_color,
+                    corner_radius=self.session.theme.corner_radius_medium,
+                    shadow_radius=0.5,
+                    shadow_color=self.session.theme.hud_color,
+                    shadow_offset_y=0
+                ),
+                align_y=0,
+                margin_top=1,
+                margin_left=1,
+                margin_right=1,
+                height=4
+            )
+
         return rio.Column(
                 rio.Rectangle(
                     content=rio.Column(
@@ -18,13 +45,13 @@ class Header(rio.Component):
                             rio.Text("Sinnlose Infos aus dem Vereinskern:", justify="left", width="grow", margin_left=0.8),
                             Ticker(
                                 texts=[
-                                    "Ganz im Geiste der EZ GG wurde der Verein in einer schlecht beleuchteten Kellerbar gegründet",
+                                    "Die EZ GG wurde in einer schlecht beleuchteten Kellerbar gegründet",
                                     "Aktuelle hat der EZ GG e.V. sieben Mitglieder",
                                     "Bist du auch ein Genießer? Dann tritt uns doch bei!",
                                     "Auch Wasser wird zum edlen Tropfen, mischt man es mit Malz und Hopfen."
                                 ],
                                 refresh_interval=30,
-                                tick_in_order=True,
+                                tick_in_order=False,
                                 style=TextStyle(italic=True),
                                 width="grow",
                                 justify="right"

ezgg_website/pages/about.py

@@ -39,4 +39,4 @@ Unser Vorstand steht als Ansprechpartner zur Verfügung und kann über die Mitgl
                 """,
                 date=""
             )
-        ))
+        ), window_width=self.session.window_width)

ezgg_website/pages/constitution.py

@@ -151,4 +151,4 @@ späteren Zeitpunkt erneut angesetzt.
                 """,
                 date="29.10.2023"
             )
-        ))
+        ), window_width=self.session.window_width)

ezgg_website/pages/home.py

@@ -31,4 +31,4 @@ class Home(rio.Component):
                 article_text=from_root("ezgg_website/assets/news_27_05_24.md"),
                 date="24.05.2024"
             )
-        ))
+        ), window_width=self.session.window_width)

ezgg_website/pages/imprint.py

@@ -48,4 +48,4 @@ Registernummer: - folgt -
                 """,
                 date=""
             )
-        ))
+        ), window_width=self.session.window_width)

ezgg_website/pages/join.py

@@ -31,4 +31,4 @@ Bei Fragen oder weiteren Informationen kannst du dich jederzeit an unseren Vorst
                 """,
                 date=""
             )
-        ))
+        ), window_width=self.session.window_width)

ezgg_website/pages/member.py

@@ -26,4 +26,4 @@ class Member(rio.Component):
                 row=i // 2,
                 column=i % 2,
             )
-        return build_page(grid)
+        return build_page(grid, window_width=self.session.window_width)

ezgg_website/pages/page_builder.py

@@ -9,7 +9,34 @@ import rio
 from .. import components as comps
 
 
-def build_page(main_component: rio.Component) -> rio.Component:
+def build_page(main_component: rio.Component, window_width: float) -> rio.Component:
+    # FixMe: Temporary fix for low screen widths. Fixable once Rio offers better mobile-targeted layouting
+    if window_width < 55.625:
+        return rio.Column(
+            rio.Row(
+                comps.Header()
+            ),
+            rio.Column(
+                rio.Column(
+                    comps.Navigation(),
+                    width="natural",
+                    align_y=0
+                ),
+                rio.Column(
+                    main_component,
+                    width="grow",
+                    align_y=0,
+                    margin_left=1
+                ),
+                width="grow",
+                height="grow"
+            ),
+            spacing=2,
+            margin=0,
+            width="grow",
+            height="grow"
+        )
+
     return rio.Column(
         rio.Row(
             comps.Header()

ezgg_website/pages/pics.py

@@ -37,7 +37,7 @@ class Pics(rio.Component):
                     row=i // 3,
                     column=i % 3,
                 )
-            return build_page(grid)
+            return build_page(grid, window_width=self.session.window_width)
         return rio.Overlay(
             rio.Column(
                 rio.Button(

ezgg_website/pages/privacy.py

@@ -184,4 +184,4 @@ Sofern wir in dieser Datenschutzerklärung Adressen und Kontaktinformationen von
                 """,
                 date=""
             )
-        ))
+        ), window_width=self.session.window_width)