Enhance mobile UI by adding background color to side pane and refining mobile info bin structure

Author: lainsce

data/style.css

@@ -83,6 +83,7 @@
 }
 .side-pane {
     border-radius: 12px;
+    background: @surface_container_low_bg_color;
     margin: 0 8px 8px 8px;
     box-shadow: 0 0 0 1px @outline;
 }

data/ui/window.blp

@@ -110,17 +110,25 @@ template $VictrolaMainWindow : He.ApplicationWindow {
                 }
               }
 
-            Box info_box_mobile {
-              orientation: vertical;
-              visible: bind album.folded;
-            }
-            He.NavigationRail {
-              stack: stack;
-              orientation: horizontal;
-              visible: bind album.folded;
-              styles [
-                "music-navrail"
-              ]
+            He.Bin mobile_infobin {
+              child:
+                Box {
+                  orientation: vertical;
+
+                  Box info_box_mobile {
+                    orientation: vertical;
+                    visible: bind album.folded;
+                  }
+                  He.NavigationRail {
+                    stack: stack;
+                    orientation: horizontal;
+                    visible: bind album.folded;
+                    styles [
+                      "music-navrail"
+                    ]
+                  }
+                }
+              ;
             }
           };
         }

src/Widgets/play-bar-mobile.vala

@@ -48,13 +48,15 @@ namespace Victrola {
             cover_art = new Gtk.Image ();
             cover_art.width_request = 64;
             cover_art.height_request = 64;
+            cover_art.pixel_size = 64;
             cover_art.halign = Gtk.Align.CENTER;
             cover_art.valign = Gtk.Align.CENTER;
             cover_art.add_css_class ("cover-art");
 
             cover_blur = new Gtk.Image ();
             cover_blur.width_request = 64;
             cover_blur.height_request = 64;
+            cover_blur.pixel_size = 64;
             cover_blur.halign = Gtk.Align.CENTER;
             cover_blur.valign = Gtk.Align.CENTER;
             cover_blur.add_css_class ("cover-art-blur");

src/window.vala

@@ -58,6 +58,8 @@ namespace Victrola {
         public unowned Gtk.Overlay about_overlay;
         [GtkChild]
         public unowned He.Bin infobin;
+        [GtkChild]
+        public unowned He.Bin mobile_infobin;
 
         private string _search_text = "";
         private string _search_property = "";
@@ -214,6 +216,7 @@ namespace Victrola {
             });
 
             infobin.content_color_override = true;
+            mobile_infobin.content_color_override = true;
         }
 
         private async void on_bind_item (Gtk.SignalListItemFactory factory, Object item) {
@@ -419,10 +422,12 @@ namespace Victrola {
                     Gdk.RGBA accent_color = { 0 };
                     accent_color.parse (He.hexcode_argb (top));
                     infobin.content_source_color = { accent_color.red, accent_color.green, accent_color.blue };
+                    mobile_infobin.content_source_color = { accent_color.red, accent_color.green, accent_color.blue };
                 } else {
                     Gdk.RGBA accent_color = { 0 };
                     accent_color.parse ("#f99e5c");
                     infobin.content_source_color = { accent_color.red, accent_color.green, accent_color.blue };
+                    mobile_infobin.content_source_color = { accent_color.red, accent_color.green, accent_color.blue };
                 }
                 loop.quit ();
             });