[gnome-games/wip/exalm/collection: 157/158] WIP: collection

[Alexander Mikhaylenko <alexm src gnome org>]

commit bc1555a6149dc18dbdf346e66b6ef9dfb64a4c30
Author: Alexander Mikhaylenko <exalm7659 gmail com>
Date:   Thu May 23 01:43:36 2019 +0500

    WIP: collection

 data/gtk-style.css              | 22 +++++++++++++++++-----
 data/ui/collection-icon-view.ui |  6 ------
 data/ui/game-icon-view.ui       | 36 ++++++++++++++++++++++--------------
 src/ui/game-icon-view.vala      |  2 +-
 src/ui/game-thumbnail.vala      |  2 +-
 5 files changed, 41 insertions(+), 27 deletions(-)
---
diff --git a/data/gtk-style.css b/data/gtk-style.css
index 85321635..00be8fdb 100644
--- a/data/gtk-style.css
+++ b/data/gtk-style.css
@@ -33,17 +33,29 @@
        border-right: none;
 }
 
+flowboxchild {
+       padding: 0;
+}
+
 gamesgamethumbnail {
-       background-color: mix (@theme_base_color, @theme_bg_color, 0.5);
+       background-color: shade(@theme_base_color, 0.5);
        border-width: 1px;
        border-style: solid;
-       border-radius: 2px;
-       border-color: @theme_bg_color;
-       color: @theme_fg_color;
+       border-color: black;/*@theme_bg_color;*/
+       color: alpha(@theme_fg_color, 0.25);
+}
+
+.game-title {
+       color: white;
+       background: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
+       text-shadow: 0 1px 2px black;
+       font-weight: bold;
+       padding-top: 28px;
+       padding-bottom: 6px;
 }
 
 gamescollectioniconview flowboxchild {
-       min-width: 128px;
+       min-width: 180px;
 }
 
 gamescollectioniconview.large flowboxchild {
diff --git a/data/ui/collection-icon-view.ui b/data/ui/collection-icon-view.ui
index 4bb4c1b4..43e5f8d0 100644
--- a/data/ui/collection-icon-view.ui
+++ b/data/ui/collection-icon-view.ui
@@ -20,13 +20,7 @@
             <property name="can-focus">True</property>
             <property name="halign">center</property>
             <property name="valign">start</property>
-            <property name="margin-start">28</property>
-            <property name="margin-end">28</property>
-            <property name="margin-top">21</property>
-            <property name="margin-bottom">21</property>
             <property name="homogeneous">True</property>
-            <property name="column-spacing">14</property>
-            <property name="row-spacing">14</property>
             <property name="selection-mode">single</property>
             <signal name="child-activated" handler="on_child_activated"/>
           </object>
diff --git a/data/ui/game-icon-view.ui b/data/ui/game-icon-view.ui
index a496cd0d..b1c17804 100644
--- a/data/ui/game-icon-view.ui
+++ b/data/ui/game-icon-view.ui
@@ -1,23 +1,31 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <interface>
   <requires lib="gtk+" version="3.24"/>
-  <template class="GamesGameIconView" parent="GtkBox">
+  <template class="GamesGameIconView" parent="GtkBin">
     <property name="visible">True</property>
-    <property name="orientation">vertical</property>
     <child>
-      <object class="GamesGameThumbnail" id="thumbnail">
+      <object class="GtkOverlay">
         <property name="visible">True</property>
-      </object>
-    </child>
-    <child>
-      <object class="GtkLabel" id="title">
-        <property name="visible">True</property>
-        <property name="ellipsize">middle</property>
-        <property name="justify">center</property>
-        <property name="lines">2</property>
-        <property name="max-width-chars">0</property>
-        <property name="wrap">True</property>
-        <property name="wrap-mode">word-char</property>
+        <child>
+          <object class="GamesGameThumbnail" id="thumbnail">
+            <property name="visible">True</property>
+          </object>
+        </child>
+        <child type="overlay">
+          <object class="GtkLabel" id="title">
+            <property name="visible">True</property>
+            <property name="valign">end</property>
+            <property name="ellipsize">middle</property>
+            <property name="justify">center</property>
+            <property name="lines">2</property>
+            <property name="max-width-chars">0</property>
+            <property name="wrap">True</property>
+            <property name="wrap-mode">word-char</property>
+            <style>
+              <class name="game-title"/>
+            </style>
+          </object>
+        </child>
       </object>
     </child>
   </template>
diff --git a/src/ui/game-icon-view.vala b/src/ui/game-icon-view.vala
index a8e7f273..c08910bf 100644
--- a/src/ui/game-icon-view.vala
+++ b/src/ui/game-icon-view.vala
@@ -1,7 +1,7 @@
 // This file is part of GNOME Games. License: GPL-3.0+.
 
 [GtkTemplate (ui = "/org/gnome/Games/ui/game-icon-view.ui")]
-private class Games.GameIconView : Gtk.Box {
+private class Games.GameIconView : Gtk.Bin {
        private Game _game;
        public Game game {
                get { return _game; }
diff --git a/src/ui/game-thumbnail.vala b/src/ui/game-thumbnail.vala
index 3f53698d..3e3db343 100644
--- a/src/ui/game-thumbnail.vala
+++ b/src/ui/game-thumbnail.vala
@@ -4,7 +4,7 @@ private class Games.GameThumbnail : Gtk.DrawingArea {
        private const Gtk.CornerType[] right_corners = { Gtk.CornerType.TOP_RIGHT, 
Gtk.CornerType.BOTTOM_RIGHT };
        private const Gtk.CornerType[] bottom_corners = { Gtk.CornerType.BOTTOM_LEFT, 
Gtk.CornerType.BOTTOM_RIGHT };
 
-       private const double EMBLEM_SCALE = 0.125;
+       private const double EMBLEM_SCALE = 0.5;
        private const double ICON_SCALE = 0.75;
 
        private Uid _uid;