From 9343d2ffeab592f9b246a65903db13d0b30eac65 Mon Sep 17 00:00:00 2001 From: David Rodenkirchen Date: Tue, 28 May 2024 07:09:18 +0200 Subject: [PATCH] add temporary workaround for mobile resolutions --- ezgg_website/components/header.py | 31 ++++++++++++++++++++++++++++-- ezgg_website/pages/about.py | 2 +- ezgg_website/pages/constitution.py | 2 +- ezgg_website/pages/home.py | 2 +- ezgg_website/pages/imprint.py | 2 +- ezgg_website/pages/join.py | 2 +- ezgg_website/pages/member.py | 2 +- ezgg_website/pages/page_builder.py | 29 +++++++++++++++++++++++++++- ezgg_website/pages/pics.py | 2 +- ezgg_website/pages/privacy.py | 2 +- 10 files changed, 65 insertions(+), 11 deletions(-) diff --git a/ezgg_website/components/header.py b/ezgg_website/components/header.py index 0f58051..7b23c61 100644 --- a/ezgg_website/components/header.py +++ b/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" diff --git a/ezgg_website/pages/about.py b/ezgg_website/pages/about.py index 8721fc1..e8535c6 100644 --- a/ezgg_website/pages/about.py +++ b/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) diff --git a/ezgg_website/pages/constitution.py b/ezgg_website/pages/constitution.py index 23668f6..586cefd 100644 --- a/ezgg_website/pages/constitution.py +++ b/ezgg_website/pages/constitution.py @@ -151,4 +151,4 @@ späteren Zeitpunkt erneut angesetzt. """, date="29.10.2023" ) - )) + ), window_width=self.session.window_width) diff --git a/ezgg_website/pages/home.py b/ezgg_website/pages/home.py index 9d9ea40..f2ca5a5 100644 --- a/ezgg_website/pages/home.py +++ b/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) diff --git a/ezgg_website/pages/imprint.py b/ezgg_website/pages/imprint.py index a297319..8ebfe18 100644 --- a/ezgg_website/pages/imprint.py +++ b/ezgg_website/pages/imprint.py @@ -48,4 +48,4 @@ Registernummer: - folgt - """, date="" ) - )) + ), window_width=self.session.window_width) diff --git a/ezgg_website/pages/join.py b/ezgg_website/pages/join.py index 5da0af5..70ca9d5 100644 --- a/ezgg_website/pages/join.py +++ b/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) diff --git a/ezgg_website/pages/member.py b/ezgg_website/pages/member.py index da9e45d..65c938d 100644 --- a/ezgg_website/pages/member.py +++ b/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) diff --git a/ezgg_website/pages/page_builder.py b/ezgg_website/pages/page_builder.py index 01ef13f..9e3fed1 100644 --- a/ezgg_website/pages/page_builder.py +++ b/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() diff --git a/ezgg_website/pages/pics.py b/ezgg_website/pages/pics.py index d831cdf..2dc7491 100644 --- a/ezgg_website/pages/pics.py +++ b/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( diff --git a/ezgg_website/pages/privacy.py b/ezgg_website/pages/privacy.py index e550b34..d95b83c 100644 --- a/ezgg_website/pages/privacy.py +++ b/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)