From 6893551f1cf07abaa847165e1d91cb86aa037af5 Mon Sep 17 00:00:00 2001
From: kramo <93832451+kra-mo@users.noreply.github.com>
Date: Wed, 5 Jul 2023 11:03:08 +0200
Subject: [PATCH] Adaptive layout for mobile - closes #66
---
data/gtk/window.blp | 297 ++++++++++++-----------
data/hu.kramo.Cartridges.metainfo.xml.in | 2 +-
src/window.py | 6 +-
3 files changed, 164 insertions(+), 141 deletions(-)
diff --git a/data/gtk/window.blp b/data/gtk/window.blp
index 7dcd740..92cdfc2 100644
--- a/data/gtk/window.blp
+++ b/data/gtk/window.blp
@@ -179,174 +179,197 @@ Adw.NavigationPage details_page {
name: "details_view";
[overlay]
- Box details_view_box {
- orientation: vertical;
+ Adw.ToolbarView details_view_toolbar_view {
+ [top]
Adw.HeaderBar {
- styles [
- "flat",
- ]
}
- Adw.Bin {
+ Adw.BreakpointBin {
hexpand: true;
vexpand: true;
+ width-request: 229;
+ height-request: 54;
- Box {
- halign: center;
- valign: center;
- margin-start: 24;
- margin-end: 24;
- margin-top: 24;
- margin-bottom: 24;
-
- Adw.Clamp {
- maximum-size: 200;
-
- Overlay {
- [overlay]
- Spinner details_view_spinner {
- margin-start: 72;
- margin-end: 72;
- }
-
- Picture details_view_cover {
- halign: end;
- valign: start;
- width-request: 200;
- height-request: 300;
-
- styles [
- "card",
- ]
- }
- }
+ Adw.Breakpoint {
+ condition ("max-width: 564px")
+ setters {
+ details_view_box.orientation: vertical;
+ details_view_box.margin-top: 12;
+ details_view_box.margin-start: 12;
+ details_view_box.margin-end: 12;
+ details_view_details_box.margin-start: 0;
+ details_view_details_box.margin-end: 0;
+ details_view_title.margin-top: 30;
+ details_view_title.halign: center;
+ details_view_developer.halign: center;
+ details_view_date_box.halign: center;
+ details_view_toolbar.halign: center;
+ details_view_toolbar.orientation: vertical;
+ details_view_play_button.halign: center;
+ details_view_toolbar_buttons.margin-start: 0;
}
+ }
- Box {
- orientation: vertical;
- margin-start: 48;
- vexpand: true;
+ ScrolledWindow {
+ Box details_view_box {
+ halign: center;
valign: center;
+ margin-start: 24;
+ margin-end: 24;
+ margin-top: 24;
+ margin-bottom: 24;
- Label details_view_title {
- label: _("Game Title");
- hexpand: true;
- halign: start;
- max-width-chars: 24;
- wrap: true;
- wrap-mode: word_char;
- natural-wrap-mode: word;
+ Adw.Clamp {
+ maximum-size: 200;
- styles [
- "title-1",
- ]
- }
+ Overlay {
+ [overlay]
+ Spinner details_view_spinner {
+ margin-start: 72;
+ margin-end: 72;
+ }
- Label details_view_developer {
- margin-top: 6;
- hexpand: true;
- halign: start;
- max-width-chars: 36;
- wrap: true;
- wrap-mode: word_char;
- natural-wrap-mode: word;
+ Picture details_view_cover {
+ halign: end;
+ valign: start;
+ width-request: 200;
+ height-request: 300;
- styles [
- "heading",
- ]
- }
-
- Box {
- orientation: horizontal;
- margin-top: 15;
- hexpand: true;
- halign: start;
-
- Label details_view_added {
- wrap: true;
- wrap-mode: word_char;
- natural-wrap-mode: word;
- }
-
- Label details_view_last_played {
- margin-start: 12;
- wrap: true;
- wrap-mode: word_char;
- natural-wrap-mode: word;
+ styles [
+ "card",
+ ]
+ }
}
}
- Box {
- hexpand: true;
+ Box details_view_details_box {
+ orientation: vertical;
+ margin-start: 48;
vexpand: true;
valign: center;
- Button details_view_play_button {
- name: "details_view_play_button";
- action-name: "app.launch_game";
- label: _("Play");
+ Label details_view_title {
+ label: _("Game Title");
+ hexpand: true;
halign: start;
- margin-top: 24;
+ max-width-chars: 24;
+ wrap: true;
+ wrap-mode: word_char;
+ natural-wrap-mode: word;
styles [
- "opaque",
- "pill",
+ "title-1",
]
}
- Box {
+ Label details_view_developer {
+ margin-top: 6;
+ hexpand: true;
halign: start;
- valign: center;
- margin-top: 24;
- margin-start: 9;
-
- Button {
- icon-name: "document-edit-symbolic";
- action-name: "app.edit_game";
- tooltip-text: _("Edit");
-
- styles [
- "raised",
- "circular",
- ]
- }
-
- Button details_view_hide_button {
- action-name: "app.hide_game";
-
- styles [
- "raised",
- "circular",
- ]
- }
-
- Button {
- icon-name: "user-trash-symbolic";
- action-name: "app.remove_game";
- tooltip-text: _("Remove");
-
- styles [
- "raised",
- "circular",
- ]
- }
-
- MenuButton {
- icon-name: "system-search-symbolic";
- menu-model: search;
- tooltip-text: _("Search");
-
- styles [
- "raised",
- "circular",
- ]
- }
+ max-width-chars: 36;
+ wrap: true;
+ wrap-mode: word_char;
+ natural-wrap-mode: word;
styles [
- "toolbar",
+ "heading",
]
}
+
+ Box details_view_date_box {
+ orientation: horizontal;
+ margin-top: 15;
+ hexpand: true;
+ halign: start;
+
+ Label details_view_added {
+ wrap: true;
+ wrap-mode: word_char;
+ natural-wrap-mode: word;
+ justify: center;
+ }
+
+ Label details_view_last_played {
+ margin-start: 12;
+ wrap: true;
+ wrap-mode: word_char;
+ natural-wrap-mode: word;
+ justify: center;
+ }
+ }
+
+ Box details_view_toolbar {
+ hexpand: true;
+ vexpand: true;
+ valign: center;
+
+ Button details_view_play_button {
+ name: "details_view_play_button";
+ action-name: "app.launch_game";
+ label: _("Play");
+ halign: start;
+ margin-top: 24;
+
+ styles [
+ "opaque",
+ "pill",
+ ]
+ }
+
+ Box details_view_toolbar_buttons {
+ halign: start;
+ valign: center;
+ margin-top: 24;
+ margin-start: 9;
+
+ Button {
+ icon-name: "document-edit-symbolic";
+ action-name: "app.edit_game";
+ tooltip-text: _("Edit");
+
+ styles [
+ "raised",
+ "circular",
+ ]
+ }
+
+ Button details_view_hide_button {
+ action-name: "app.hide_game";
+
+ styles [
+ "raised",
+ "circular",
+ ]
+ }
+
+ Button {
+ icon-name: "user-trash-symbolic";
+ action-name: "app.remove_game";
+ tooltip-text: _("Remove");
+
+ styles [
+ "raised",
+ "circular",
+ ]
+ }
+
+ MenuButton {
+ icon-name: "system-search-symbolic";
+ menu-model: search;
+ tooltip-text: _("Search");
+
+ styles [
+ "raised",
+ "circular",
+ ]
+ }
+
+ styles [
+ "toolbar",
+ ]
+ }
+ }
}
}
}
diff --git a/data/hu.kramo.Cartridges.metainfo.xml.in b/data/hu.kramo.Cartridges.metainfo.xml.in
index c6b57d4..c43227f 100644
--- a/data/hu.kramo.Cartridges.metainfo.xml.in
+++ b/data/hu.kramo.Cartridges.metainfo.xml.in
@@ -22,7 +22,7 @@
touch
- 545
+ 229
diff --git a/src/window.py b/src/window.py
index 33b7786..8986ceb 100644
--- a/src/window.py
+++ b/src/window.py
@@ -43,7 +43,7 @@ class CartridgesWindow(Adw.ApplicationWindow):
search_button = Gtk.Template.Child()
details_page = Gtk.Template.Child()
- details_view_box = Gtk.Template.Child()
+ details_view_toolbar_view = Gtk.Template.Child()
details_view_cover = Gtk.Template.Child()
details_view_spinner = Gtk.Template.Child()
details_view_title = Gtk.Template.Child()
@@ -75,8 +75,8 @@ class CartridgesWindow(Adw.ApplicationWindow):
def __init__(self, **kwargs):
super().__init__(**kwargs)
- self.details_view.set_measure_overlay(self.details_view_box, True)
- self.details_view.set_clip_overlay(self.details_view_box, False)
+ self.details_view.set_measure_overlay(self.details_view_toolbar_view, True)
+ self.details_view.set_clip_overlay(self.details_view_toolbar_view, False)
self.library.set_filter_func(self.filter_func)
self.hidden_library.set_filter_func(self.filter_func)