Padded category title and description to approximate designs

Designs specified everything in 32nds of the total window allocation,
which there is no easy way to do at least with standard padding and
margins.

Used EM instead, which means the padding will scale with font size as
the window gets bigger and smaller
[endlessm/eos-sdk#526]

2 files changed, 15 insertions, 1 deletions

diff --git a/data/css/eos-wikipedia-domain.css b/data/css/eos-wikipedia-domain.css
index 3042766..0e834a2 100644
--- a/data/css/eos-wikipedia-domain.css
+++ b/data/css/eos-wikipedia-domain.css
@@ -75,6 +75,10 @@ Gjs_ArticleList .scrollbar.slider {
     font-size: 1.5em;
 }
 
+.category-page #category-description-align {
+    padding: 0em 3.2em 0em 3.7em;
+}
+
 .category-page #category-scrolled-window .scrollbar.slider {
     border-radius: 6px;
     background-color: alpha(white, 0.3);
@@ -83,6 +87,9 @@ Gjs_ArticleList .scrollbar.slider {
 .category-page #category-title {
     font-family: "Lato Light";
     font-size: 4.17em;
+    /* Set the font size in this widget, so the padding below (in ems) is actually
+     * relative to this font size */
+    padding: .5em .75em .2em .75em;
     color: rgba(255, 255, 255, 0.9);
 }
 
diff --git a/wikipedia/PrebuiltCategoryPage.js b/wikipedia/PrebuiltCategoryPage.js
index 43de97f..a41ff4a 100644
--- a/wikipedia/PrebuiltCategoryPage.js
+++ b/wikipedia/PrebuiltCategoryPage.js
@@ -67,6 +67,13 @@ const PrebuiltCategoryPage = new Lang.Class({
         });
         description_scrolled_window.add(this._description_text_view);
 
+        // Would rather have a more lightweight widget here like alignment,
+        // but alignment doesn't seem to respect padding and margin
+        let description_alignment = new Gtk.Frame({
+            name: 'category-description-align'
+        });
+        description_alignment.add(description_scrolled_window);
+
         let vertical_separator = new Gtk.Frame();
         vertical_separator.get_style_context().add_class(
             EndlessWikipedia.STYLE_CLASS_CATEGORY_VERTICAL_SEPARATOR);
@@ -74,7 +81,7 @@ const PrebuiltCategoryPage = new Lang.Class({
         let grid = new Gtk.Grid();
         grid.attach(this._title_label, 0, 0, 1, 1);
         grid.attach(description_separator, 0, 1, 1, 1);
-        grid.attach(description_scrolled_window, 0, 2, 1, 1);
+        grid.attach(description_alignment, 0, 2, 1, 1);
         grid.attach(vertical_separator, 1, 0, 1, 3);
 
         let frame = new Gtk.Frame({