Add word wrap widths to the front page categories

- Fonts are changed to be 150px and 48px for ODROID's 1920x1080
  resolution
- Word-wrapping widths are set to approximately reproduce the deck

[endlessm/eos-sdk#394]

[endlessm/eos-sdk#394]

2 files changed, 12 insertions, 4 deletions

diff --git a/wikipedia/PrebuiltCategoryPage.js b/wikipedia/PrebuiltCategoryPage.js
index 31b6366..9934864 100644
--- a/wikipedia/PrebuiltCategoryPage.js
+++ b/wikipedia/PrebuiltCategoryPage.js
@@ -73,7 +73,10 @@ const PrebuiltCategoryPage = new Lang.Class({
             expand: false,
             halign: Gtk.Align.START,
             margin_left: LEFT_MARGIN_FOR_TEXT,
-            wrap: true
+            xalign: 0.0, // deprecated Gtk.Misc property; necessary because
+            wrap: true,  // "wrap" doesn't respect "halign"
+            width_chars: 15,
+            max_width_chars: 18
         });
 
         this._submenu_separator = new ScaledImage.ScaledImage({
@@ -122,7 +125,8 @@ const PrebuiltCategoryPage = new Lang.Class({
             normal_image_uri: "resource://com/endlessm/wikipedia-domain/assets/introduction_back_button_normal.png",
             active_image_uri: "resource://com/endlessm/wikipedia-domain/assets/introduction_back_button_pressed.png",
             prelight_image_uri: "resource://com/endlessm/wikipedia-domain/assets/introduction_back_button_hover.png",
-            label: _("OTHER CATEGORIES")
+            label: _("OTHER CATEGORIES"),
+            margin_right: 10
         });
 
         this._back_button.connect('clicked', Lang.bind(this, function() {
@@ -189,4 +193,4 @@ const PrebuiltCategoryPage = new Lang.Class({
         let context = this.get_style_context();
         context.add_provider(this._category_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
     }
-});
\ No newline at end of file
+});
diff --git a/wikipedia/widgets/category_button.js b/wikipedia/widgets/category_button.js
index 4ca1d90..7044829 100644
--- a/wikipedia/widgets/category_button.js
+++ b/wikipedia/widgets/category_button.js
@@ -77,7 +77,9 @@ const CategoryButton = new Lang.Class({
             hexpand: true,
             halign: Gtk.Align.START,
             xalign: 0.0,  // deprecated Gtk.Misc properties; necessary because
-            wrap: true    // "wrap" doesn't respect "halign"
+            wrap: true,   // "wrap" doesn't respect "halign"
+            width_chars: 18,
+            max_width_chars: 20
         });
         this._arrow = new Gtk.Image({
             resource: _HOVER_ARROW_URI,
@@ -159,6 +161,8 @@ const CategoryButton = new Lang.Class({
             let context = this._label.get_style_context();
             context.add_class(EndlessWikipedia.STYLE_CLASS_MAIN);
             this._label.margin_bottom = 0;
+            this._label.width_chars = 8;
+            this._label.max_width_chars = 9;
         }
     },