[gnome-weather] Render an OSD background on the forecast box

[William Jon McCann <mccann src gnome org>]

commit 0ebc51b698edebfb05c686dce8a2569ac214ba68
Author: William Jon McCann <william jon mccann gmail com>
Date:   Wed Mar 6 12:02:40 2013 -0500

    Render an OSD background on the forecast box
    
    And change the grid packing to ensure box spans the view.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=695313

 data/application.css |    2 --
 src/city.js          |    2 +-
 src/forecast.js      |   26 +++++++++++++++++---------
 3 files changed, 18 insertions(+), 12 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 107a459..b8d63fa 100644
--- a/data/application.css
+++ b/data/application.css
@@ -1,6 +1,4 @@
 #weather-page {
-    padding: 12px;
-    padding-right: 0;
     text-shadow: inset 1px 1px 3px black;
     icon-shadow: inset 1px 1px 3px black;
 }
diff --git a/src/city.js b/src/city.js
index 7d3fb1c..2419f6e 100644
--- a/src/city.js
+++ b/src/city.js
@@ -62,7 +62,7 @@ const WeatherWidget = new Lang.Class({
         outerGrid.attach(alignment, 0, 0, 1, 1);
 
         this._forecasts = new Forecast.ForecastBox({ hexpand: true });
-        outerGrid.attach(this._forecasts, 0, 1, 1, 1);
+        outerGrid.attach(this._forecasts, 0, 1, 2, 1);
 
         this._revealButton = new Gd.HeaderSimpleButton({ symbolic_icon_name: 'go-previous-symbolic',
                                                          halign: Gtk.Align.CENTER,
diff --git a/src/forecast.js b/src/forecast.js
index 75d53f7..90a1ddc 100644
--- a/src/forecast.js
+++ b/src/forecast.js
@@ -26,14 +26,22 @@ const ONE_HOUR = 3600*1000*1000;
 
 const ForecastBox = new Lang.Class({
     Name: 'ForecastBox',
-    Extends: Gtk.Grid,
+    Extends: Gtk.Frame,
 
     _init: function(params) {
-        params = Params.fill({ orientation: Gtk.Orientation.HORIZONTAL,
-                               column_spacing: 24,
-                               row_spacing: 6,
-                               column_homogeneous: true });
+        params = Params.fill(params, { shadow_type: Gtk.ShadowType.NONE });
         this.parent(params);
+
+        this._grid = new Gtk.Grid({ orientation: Gtk.Orientation.HORIZONTAL,
+                                    column_spacing: 24,
+                                    row_spacing: 6,
+                                    margin: 12,
+                                    column_homogeneous: true });
+        this.add(this._grid);
+
+        let context = this.get_style_context();
+        context.add_class('background');
+        context.add_class('osd');
     },
 
     update: function(infos) {
@@ -61,17 +69,17 @@ const ForecastBox = new Lang.Class({
             let label = new Gtk.Label({ label: text,
                                         use_markup: true,
                                         visible: true });
-            this.attach(label, n, 0, 1, 1);
+            this._grid.attach(label, n, 0, 1, 1);
 
             let image = new Gtk.Image({ icon_name: info.get_symbolic_icon_name(),
                                         icon_size: Gtk.IconSize.DIALOG,
                                         use_fallback: true,
                                         visible: true });
-            this.attach(image, n, 1, 1, 1);
+            this._grid.attach(image, n, 1, 1, 1);
 
             let temperature = new Gtk.Label({ label: this._getTemperature(info),
                                               visible: true });
-            this.attach(temperature, n, 2, 1, 1);
+            this._grid.attach(temperature, n, 2, 1, 1);
 
             current = datetime;
             n++;
@@ -79,7 +87,7 @@ const ForecastBox = new Lang.Class({
     },
 
     clear: function() {
-        this.foreach(function(w) { w.destroy(); });
+        this._grid.foreach(function(w) { w.destroy(); });
     },
 
     _hasSubdayResolution: function(dates) {