[gnome-software/1851-source-chooser-breaks-layout-on-mobile: 4/5] gs-details-page: Re-position the buttons and the source chooser in the narrow mode

[Milan Crha <mcrha src gnome org>]

commit 976ac9a9a71c02103419f306c390757ae7089b67
Author: Milan Crha <mcrha redhat com>
Date:   Tue Aug 9 12:46:32 2022 +0200

    gs-details-page: Re-position the buttons and the source chooser in the narrow mode
    
    Let the buttons with the source chooser be below the app name in the narrow mode.
    Also use a smaller gap between the buttons and the source chooser.
    
    Closes https://gitlab.gnome.org/GNOME/gnome-software/-/issues/1851

 src/gs-details-page.c  | 15 +++++++++++++++
 src/gs-details-page.ui |  4 +++-
 src/style.css          |  4 ++++
 3 files changed, 22 insertions(+), 1 deletion(-)
---
diff --git a/src/gs-details-page.c b/src/gs-details-page.c
index e59b602db..f83d96bff 100644
--- a/src/gs-details-page.c
+++ b/src/gs-details-page.c
@@ -144,6 +144,7 @@ struct _GsDetailsPage
        GtkWidget               *scrolledwindow_details;
        GtkWidget               *spinner_details;
        GtkWidget               *stack_details;
+       GtkWidget               *box_with_source;
        GtkWidget               *origin_popover;
        GtkWidget               *origin_popover_list_box;
        GtkWidget               *origin_box;
@@ -2460,6 +2461,7 @@ gs_details_page_class_init (GsDetailsPageClass *klass)
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, scrolledwindow_details);
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, spinner_details);
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, stack_details);
+       gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, box_with_source);
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, origin_popover);
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, origin_popover_list_box);
        gtk_widget_class_bind_template_child (widget_class, GsDetailsPage, origin_box);
@@ -2506,6 +2508,17 @@ narrow_to_spacing (GBinding *binding, const GValue *from_value, GValue *to_value
        return TRUE;
 }
 
+static gboolean
+narrow_to_halign (GBinding *binding, const GValue *from_value, GValue *to_value, gpointer user_data)
+{
+       if (g_value_get_boolean (from_value))
+               g_value_set_enum (to_value, GTK_ALIGN_START);
+       else
+               g_value_set_enum (to_value, GTK_ALIGN_FILL);
+
+       return TRUE;
+}
+
 static void
 gs_details_page_init (GsDetailsPage *self)
 {
@@ -2542,6 +2555,8 @@ gs_details_page_init (GsDetailsPage *self)
 
        g_object_bind_property_full (self, "is-narrow", self->box_details_header, "spacing", 
G_BINDING_SYNC_CREATE,
                                     narrow_to_spacing, NULL, NULL, NULL);
+       g_object_bind_property_full (self, "is-narrow", self->box_with_source, "halign", 
G_BINDING_SYNC_CREATE,
+                                    narrow_to_halign, NULL, NULL, NULL);
        g_object_bind_property_full (self, "is-narrow", self->box_details_header_not_icon, "orientation", 
G_BINDING_SYNC_CREATE,
                                     narrow_to_orientation, NULL, NULL, NULL);
        g_object_bind_property_full (self, "is-narrow", self->box_license, "orientation", 
G_BINDING_SYNC_CREATE,
diff --git a/src/gs-details-page.ui b/src/gs-details-page.ui
index fca12edc1..fb10e82fb 100644
--- a/src/gs-details-page.ui
+++ b/src/gs-details-page.ui
@@ -214,7 +214,8 @@
                                           <object class="GtkBox" id="box_with_source">
                                             <property name="orientation">vertical</property>
                                             <property name="valign">center</property>
-                                            <property name="spacing">9</property>
+                                            <property name="margin-top">6</property>
+                                            <property name="spacing">6</property>
                                             <child>
                                               <object class="GtkBox" id="box_install_remove">
                                                 <property name="orientation">horizontal</property>
@@ -345,6 +346,7 @@
                                                     <property name="popover">origin_popover</property>
                                                     <style>
                                                       <class name="flat"/>
+                                                      <class name="origin-button"/>
                                                     </style>
                                                     <child>
                                                       <object class="GtkBox" id="origin_menu_btn_box">
diff --git a/src/style.css b/src/style.css
index 2b7ddf6a5..da4d2fc3c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -49,6 +49,10 @@ screenshot-carousel button,
        background-color: alpha(@window_fg_color, .15);
 }
 
+.origin-button > button {
+       padding: 2px 8px;
+}
+
 /* This mimicks the style of list and row from Adwaita, and of list.content from
  * Libhandy. */