glib-web 0.2.13 → 0.2.14

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 6f39277110861a205e86572fb7c4e3e25ae8a550
-  data.tar.gz: 1fe363ea9f6186f6275ae2058db85782b4790643
+  metadata.gz: 9af143aaa548fc1fcad92cf73e2b8be4787f593f
+  data.tar.gz: b77e3a12b92a6275f214e0aa4a9d5feceea3821c
 SHA512:
-  metadata.gz: 5d623b172742bb574f9ccd45644d315a73dff76c627766f744a9342bfee59c691cf2c0a37785105cf3444a61a6abe9982744372b87a06493d4d7c275e4592cc1
-  data.tar.gz: 4fa48b1fdbe0d3f971197fdd4cd56c67f38fa5791c4922f5a004ba7e033fd77de4b867181b360fc417e7963f8554a68f92f5b115caf04cdb2666b47d7d3a97f6
+  metadata.gz: df7e7304cf6047e287cbd798a64f62fc9492c2fccda3ae36d90f2fcbbf2b3b9e9867def3c8a54447f3d73eb77a539e258860a60e1ee5e7944efb2d3e64be36f7
+  data.tar.gz: 86f0d9133fcab5dbfcbd13b8e8b53d4b49ee0e439161615e6f6da12ed4cd25237a5aae4ec4e31567deeb26d8dfb6bdcb14af92c0633a2724b03b4dc64e1bc698

data/app/helpers/glib/json_ui/abstract_builder.rb

@@ -208,6 +208,8 @@ module Glib
       end
 
       def self.singleton_array singletonName, arrayName
+        array arrayName
+        
         define_method(singletonName) do |value|
           json.set! arrayName, [value]
         end

data/app/helpers/glib/json_ui/action_builder.rb

@@ -67,6 +67,9 @@ module Glib
         # Consider renaming to ShowSnackbar
         class Snackbar < Action
           string :message
+          string :verticalPosition
+          string :horizontalPosition
+          singleton_array :styleClass, :styleClasses
         end
       
       end
@@ -88,6 +91,7 @@ module Glib
       
         class Open < Action
           string :url, cache: true
+          action :onOpen
         end
       
         class OpenWeb < Action

data/app/helpers/glib/json_ui/page_helper.rb

@@ -41,6 +41,10 @@ module Glib
           end
         end
 
+        def template(template)
+          json.template template
+        end
+
         def leftDrawer(options = {})
           # json.leftDrawer do
           #   json.title options[:title]

data/app/helpers/glib/json_ui/styling_helper.rb

@@ -1,23 +1,19 @@
 module Glib
   module JsonUi
     module StylingHelper
-      def json_padding_body
+      def glib_json_padding_body
         { top: 12, left: 20, right: 20, bottom: 12 }
       end
 
-      def json_padding_list
+      def glib_json_padding_list
         { top: 12, bottom: 12, left: 16, right: 16 }
       end
-      
-      def json_padding_body_this
-        { top: 6, right: 10, bottom: 6, left: 10 }
-      end
 
-      def json_image_standard_url
+      def glib_json_image_standard_url
         'https://cdn-images-1.medium.com/max/1200/1*Qc0XxYm-qAZL-7tjjlNfrg.png'
       end
 
-      def json_image_avatar_url
+      def glib_json_image_avatar_url
         'https://www.wpjournalist.nl/wp-content/uploads/2019/03/avatar-jongen-voorbeeld-1.jpg'
       end
     end

data/app/helpers/glib/json_ui/view_builder.rb

@@ -14,7 +14,7 @@ module Glib
         length :height
         color :backgroundColor
         hash :padding
-        array :styleClasses
+        # array :styleClasses
         singleton_array :styleClass, :styleClasses
 
         def analytics(value)

data/app/helpers/glib/json_ui/view_builder/fields.rb

@@ -38,6 +38,8 @@ class Glib::JsonUi::ViewBuilder
     end
 
     class Number < Text
+      date :min
+      date :max
     end
 
     class Email < Text

data/app/helpers/glib/json_ui/view_builder/panels.rb

@@ -37,18 +37,22 @@ class Glib::JsonUi::ViewBuilder
       end
 
       def model(models)
-        @model = models.is_a?(Array) ? models.last : models
-        @model_name ||= @model.class.model_name.singular
-        @url ||= page.context.polymorphic_url(models)
-        @method ||= if @model.persisted?
-          :patch
-        else
-          :post
-        end
+        @models = models
       end
 
       # Override
       def created
+        if @models
+          @model = @models.is_a?(Array) ? @models.last : @models
+          @model_name ||= @model.class.model_name.singular
+          @url ||= page.context.polymorphic_url(@models)
+          @method ||= if @model.persisted?
+            :patch
+          else
+            :post
+          end
+        end
+
         @method ||= :get
 
         json.url @url
@@ -150,6 +154,7 @@ class Glib::JsonUi::ViewBuilder
       string :distribution
     end
 
+    # TODO: Deprecate in favour of styleClasses
     class Card < View
       views :childViews
     end

data/app/views/json_ui/garage/actions/index.json.jbuilder

@@ -31,9 +31,12 @@ json_ui_page json do |page|
         end
 
         template.thumbnail title: 'dialogs/snackbar', onClick: ->(action) do
-          action.dialogs_snackbar message: 'This is a snackbar'
+          action.dialogs_snackbar message: 'This is a default snackbar'
         end
 
+        template.thumbnail title: 'dialogs/snackbar with styling', onClick: ->(action) do
+          action.dialogs_snackbar message: 'This is a styled snackbar', verticalPosition: 'top', styleClass: 'success'
+        end
       end
     end, ->(section) do
       section.header padding: { top: 12, bottom: 12, left: 16, right: 16 }, childViews: ->(header) do

data/app/views/json_ui/garage/forms/basic.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Forms'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: json_padding_body, childViews: ->(form) do
+  page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
     form.fields_text name: 'user[name]', width: 'matchParent', label: 'Name'
     form.fields_password name: 'user[password]', width: 'matchParent', label: 'Password'
     

data/app/views/json_ui/garage/forms/checkboxes.json.jbuilder

@@ -5,7 +5,7 @@ json_ui_page json do |page|
   
   page.scroll childViews: ->(scroll) do
 
-    scroll.panels_form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: json_padding_body, childViews: ->(form) do
+    scroll.panels_form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
       form.spacer height: 20
       form.h2 text: 'Check Group'
       form.fields_checkGroup name: 'user[skills][]', uncheckValue: 1, childViews: ->(group) do

data/app/views/json_ui/garage/forms/dynamic_select.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Forms'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: json_padding_body, childViews: ->(form) do
+  page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
     form.h2 text: 'Dynamic Select'
     form.spacer height: 6
 

data/app/views/json_ui/garage/forms/get_request.json.jbuilder

@@ -5,7 +5,7 @@ data = params[:user] || {}
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.form url: json_ui_garage_url(path: 'forms/get_request'), method: 'get', padding: json_padding_body, childViews: ->(form) do
+  page.form url: json_ui_garage_url(path: 'forms/get_request'), method: 'get', padding: glib_json_padding_body, childViews: ->(form) do
     # TODO: Potential improvement: 
     # Use `reload` behaviour instead of `open` (i.e. don't keep adding URL to history).
     # Probably introduce a flag to panels_form so developer can enable/disable this behaviour.

data/app/views/json_ui/garage/forms/index.json.jbuilder

@@ -5,7 +5,7 @@ json_ui_page json do |page|
   
   page.list sections: [
     ->(section) do
-      section.header padding: json_padding_list, childViews: ->(header) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
         header.h2 text: 'Submission Logics'
       end
 
@@ -28,7 +28,7 @@ json_ui_page json do |page|
         
       end
     end, ->(section) do
-      section.header padding: json_padding_list, childViews: ->(header) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
         header.h2 text: 'Form Fields'
       end
 
@@ -48,7 +48,7 @@ json_ui_page json do |page|
 
       end
     end, ->(section) do
-      section.header padding: json_padding_list, childViews: ->(header) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
         header.h2 text: 'Web Only'
       end
 
@@ -59,7 +59,7 @@ json_ui_page json do |page|
         
       end
     end, ->(section) do
-      section.header padding: json_padding_list, childViews: ->(header) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
         header.h2 text: 'Experimental (not required yet)'
       end
 

data/app/views/json_ui/garage/forms/pickers.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Forms'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: json_padding_body, childViews: ->(form) do
+  page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
     form.h2 text: 'Radio Group'
     form.spacer height: 6
     form.h4 text: 'Gender'
@@ -17,21 +17,6 @@ json_ui_page json do |page|
     form.fields_check name: 'user[age_range]', value: '16+', uncheckValue: '0-16', label: 'I am over 16 (has default value)'
     form.fields_check name: 'user[employer]', value: 1, label: 'I am an employer (no default value)'
 
-    # form.spacer height: 20
-    # form.h2 text: 'Select'
-    # form.spacer height: 6
-    # languages = {
-    #   'zh-HK' => 'Hong Kong',
-    #   'zh-TW' => 'Taiwan',
-    #   'zh-CN' => 'China',
-    #   'ja-JP' => 'Japan',
-    #   'ko-KR' => 'Korea',
-    #   'ru-RU' => 'Russian',
-    #   'en-PH' => 'Philippines'
-    # }
-    # form.fields_select name: 'user[primary_language]', width: 'matchParent', label: 'Primary Language', options: languages.map { |k, v| { value: k, text: v } }, value: 'ja-JP'
-    # form.fields_select name: 'user[preferred_languages][]', width: 'matchParent', label: 'Preferred Languages', options: languages.map { |k, v| { value: k, text: v } }, value: ['ja-JP', 'ko-KR'], multiple: true
-
     form.spacer height: 20
     form.h2 text: 'Date/Time'
     form.spacer height: 6

data/app/views/json_ui/garage/forms/selects.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Forms'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: json_padding_body, childViews: ->(form) do
+  page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
 
     form.spacer height: 20
     form.h2 text: 'Basic select fields'

data/app/views/json_ui/garage/forms/text_validation.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Forms'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: json_padding_body, childViews: ->(form) do
+  page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
     form.fields_email name: 'user[email]', width: 'matchParent', label: 'Email'
     form.fields_url name: 'user[url]', width: 'matchParent', label: 'URL'
     form.fields_number name: 'user[number]', width: 'matchParent', label: 'Number'

data/app/views/json_ui/garage/home/blank.json.jbuilder

@@ -5,7 +5,7 @@ json.title 'Menu'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: true
 
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.label text: 'Blank page'
   end
 end

data/app/views/json_ui/garage/lists/fab.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Lists'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
 
-  # page.body height: 'matchParent', padding: json_padding_body, childViews: ->(body) do
+  # page.body height: 'matchParent', padding: glib_json_padding_body, childViews: ->(body) do
   page.body childViews: ->(body) do
     body.fab icon: 'add', onClick: ->(action) { action.dialogs_alert message: 'Perform action' }
 

data/app/views/json_ui/garage/lists/templating.json.jbuilder

@@ -13,8 +13,8 @@ json_ui_page json do |page|
         action.windows_open url: json_ui_garage_url(path: 'home/blank')
       end
       template.thumbnail title: 'Item with subtitle', subtitle: 'Item subtitle'
-      template.thumbnail title: 'Item with thumbnail image', subtitle: 'Item subtitle', imageUrl: json_image_standard_url
-      template.featured title: 'Featured with featured image', subtitle: 'Item subtitle', imageUrl: json_image_standard_url
+      template.thumbnail title: 'Item with thumbnail image', subtitle: 'Item subtitle', imageUrl: glib_json_image_standard_url
+      template.featured title: 'Featured with featured image', subtitle: 'Item subtitle', imageUrl: glib_json_image_standard_url
     end
   end
 end

data/app/views/json_ui/garage/pages/flat_centered.json.jbuilder

@@ -0,0 +1,29 @@
+json.title 'Pages'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+
+  page.template 'flatCentered'
+  
+  page.header childViews: ->(header) do
+    header.panels_card width: 'matchParent', padding: glib_json_padding_body, childViews: ->(card) do
+      card.h1 text: 'Header'
+    end
+    header.spacer height: 20
+  end
+
+  page.footer childViews: ->(footer) do
+    footer.spacer height: 20
+    footer.panels_card width: 'matchParent', padding: glib_json_padding_body, childViews: ->(card) do
+      card.h1 text: 'Footer'
+    end
+  end
+
+  page.body childViews: ->(scroll) do
+    scroll.panels_card width: 'matchParent', padding: glib_json_padding_body, childViews: ->(card) do
+      (1..100).each do |index|
+        scroll.label text: 'Content'
+      end
+    end
+  end
+end

data/app/views/json_ui/garage/pages/full_width.json.jbuilder

@@ -0,0 +1,29 @@
+json.title 'Pages'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+
+  page.template 'fullWidth'
+  
+  page.header childViews: ->(header) do
+    header.panels_card width: 'matchParent', padding: glib_json_padding_body, childViews: ->(card) do
+      card.h1 text: 'Header'
+    end
+    header.spacer height: 10
+  end
+
+  page.footer childViews: ->(footer) do
+    footer.spacer height: 10
+    footer.panels_card width: 'matchParent', padding: glib_json_padding_body, childViews: ->(card) do
+      card.h1 text: 'Footer'
+    end
+  end
+
+  page.body childViews: ->(scroll) do
+    scroll.panels_card width: 'matchParent', padding: glib_json_padding_body, childViews: ->(card) do
+      (1..100).each do |index|
+        scroll.label text: 'Content'
+      end
+    end
+  end
+end

data/app/views/json_ui/garage/pages/full_width_height.json.jbuilder

@@ -3,15 +3,15 @@ json.title 'Pages'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
 
-  page.header padding: json_padding_body, backgroundColor: '#b3bac2', childViews: ->(header) do
+  page.header padding: glib_json_padding_body, backgroundColor: '#b3bac2', childViews: ->(header) do
     header.h1 text: 'Header'
   end
 
-  page.body height: 'matchParent', padding: json_padding_body, childViews: ->(body) do
+  page.body height: 'matchParent', padding: glib_json_padding_body, childViews: ->(body) do
     body.button width: 'matchParent', height: 'matchParent', text: 'Full Width/Height'
   end
 
-  page.footer height: 80, padding: json_padding_body, backgroundColor: '#b3bac2', childViews: ->(footer) do
+  page.footer height: 80, padding: glib_json_padding_body, backgroundColor: '#b3bac2', childViews: ->(footer) do
     footer.h1 text: 'Footer'
   end
 end

data/app/views/json_ui/garage/pages/index.json.jbuilder

@@ -3,24 +3,41 @@ json.title 'Pages'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: true
   
-  page.list firstSection: ->(section) do
-    section.rows builder: ->(template) do
-      template.thumbnail title: 'Hamburger Layout', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'pages/layout')
-      end
-      
-      template.thumbnail title: 'Full Width/Height', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'pages/full_width_height')
+  page.list sections: [
+    ->(section) do
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Hamburger Layout', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/layout')
+        end
+        
+        template.thumbnail title: 'Full Width/Height', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/full_width_height')
+        end
+        
+        template.thumbnail title: 'Tab Bar', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/tab_bar')
+        end
+
+        template.thumbnail title: 'Nav Buttons', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/nav_buttons')
+        end
       end
-      
-      template.thumbnail title: 'Tab Bar', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'pages/tab_bar')
+    end,
+    ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Templates (Web Only)'
       end
 
-      template.thumbnail title: 'Nav Buttons', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'pages/nav_buttons')
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Flat Centered', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/flat_centered')
+        end
+        
+        template.thumbnail title: 'Full Width', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/full_width')
+        end
       end
     end
+  ]
     
-  end
 end

data/app/views/json_ui/garage/pages/layout.json.jbuilder

@@ -3,15 +3,15 @@ json.title 'Pages'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.header padding: json_padding_body, backgroundColor: '#b3bac2', childViews: ->(header) do
+  page.header padding: glib_json_padding_body, backgroundColor: '#b3bac2', childViews: ->(header) do
     header.h1 text: 'Header'
   end
 
-  page.footer padding: json_padding_body, backgroundColor: '#b3bac2', childViews: ->(footer) do
+  page.footer padding: glib_json_padding_body, backgroundColor: '#b3bac2', childViews: ->(footer) do
     footer.h1 text: 'Footer'
   end
 
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     (1..100).each do |index|
       scroll.label text: 'Content'
     end

data/app/views/json_ui/garage/pages/nav_buttons.json.jbuilder

@@ -15,7 +15,7 @@ json_ui_page json do |page|
     end
   end
 
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.label text: 'See the right menu buttons on the nav bar'
   end
 end

data/app/views/json_ui/garage/pages/tab_bar.json.jbuilder

@@ -14,7 +14,7 @@ json_ui_page json do |page|
     end
   end
 
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.label text: "Tab index #{params[:tab].to_i} selected"
 
     scroll.spacer height: 10

data/app/views/json_ui/garage/panels/card.json.jbuilder

@@ -3,24 +3,93 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll backgroundColor: '#fafafa', padding: json_padding_body_this, childViews: ->(scroll) do
-    scroll.panels_card width: 'matchParent', padding: json_padding_body, childViews: ->(card) do
-      card.h1 text: 'With Default Layout'
-      card.spacer height: 6
-      card.button text: 'Button1'
-      card.button text: 'Button2'
-      card.button text: 'Button3'
-    end
+  page.scroll backgroundColor: '#fafafa', padding: { top: 10, right: 10, bottom: 10, left: 10 }, childViews: ->(scroll) do
+
+    
+    # TODO: Deprecate in favour of styleClasses
+    # scroll.panels_card width: 'matchParent', padding: glib_json_padding_body, childViews: ->(card) do
+    #   card.h1 text: 'With Default Layout'
+    #   card.spacer height: 6
+    #   card.button text: 'Button1'
+    #   card.button text: 'Button2'
+    #   card.button text: 'Button3'
+    # end
 
-    scroll.spacer height: 10
+    # scroll.spacer height: 10
     
-    scroll.panels_card width: 'matchParent', padding: json_padding_body, childViews: ->(card) do
-      card.h1 text: 'With Child Panel'
-      card.spacer height: 6
-      card.panels_horizontal backgroundColor: '#b3bac2', childViews: ->(panel) do
-        panel.button text: 'Button1'
-        panel.button text: 'Button2'
-        panel.button text: 'Button3'
+    # scroll.panels_card width: 'matchParent', padding: glib_json_padding_body, childViews: ->(card) do
+    #   card.h1 text: 'With Child Panel'
+    #   card.spacer height: 6
+    #   card.panels_horizontal backgroundColor: '#b3bac2', childViews: ->(panel) do
+    #     panel.button text: 'Button1'
+    #     panel.button text: 'Button2'
+    #     panel.button text: 'Button3'
+    #   end
+    # end
+    
+    scroll.h2 text: 'Vertical panel'
+    scroll.spacer height: 6
+    scroll.panels_vertical styleClass: 'card', padding: glib_json_padding_body, width: 'matchParent', childViews: ->(panel) do
+      panel.button text: 'Button1'
+      panel.button text: 'Button2'
+      panel.button text: 'Button3'
+    end
+
+    scroll.spacer height: 20
+    scroll.h2 text: 'Horizontal panel'
+    scroll.spacer height: 6
+    scroll.panels_horizontal styleClass: 'card', padding: glib_json_padding_body, width: 'matchParent', childViews: ->(panel) do
+      panel.button text: 'Button1'
+      panel.button text: 'Button2'
+      panel.button text: 'Button3'
+    end
+
+    scroll.spacer height: 20
+    scroll.h2 text: 'Split panel'
+    scroll.spacer height: 6
+    scroll.panels_split styleClass: 'card', padding: glib_json_padding_body, width: 'matchParent', leftViews: ->(panel) do
+      panel.button text: '1'
+    end, centerViews: ->(panel) do
+      panel.button width: 'matchParent', text: '2'
+    end, rightViews: ->(panel) do
+      panel.button text: '3'
+    end
+
+    scroll.spacer height: 20
+    scroll.h2 text: 'Responsive panel'
+    scroll.spacer height: 6
+    scroll.panels_responsive styleClass: 'card', padding: glib_json_padding_body, childViews: ->(horizontal) do
+      horizontal.panels_column lg: 8, backgroundColor: '#c3cad2', childViews: ->(column) do
+        column.button text: '1'
+      end
+      horizontal.panels_column lg: 4, backgroundColor: '#b3bac2', childViews: ->(column) do
+        column.button text: '2'
+      end
+    end
+
+    scroll.spacer height: 20
+    scroll.h2 text: 'Grid-like layout'
+    scroll.spacer height: 6
+    scroll.panels_responsive childViews: ->(horizontal) do
+      horizontal.panels_column lg: 4, padding: glib_json_padding_body, childViews: ->(column) do
+        column.panels_vertical styleClass: 'card', width: 'matchParent', childViews: ->(column) do
+          column.button text: '1'
+        end
+      end
+      horizontal.panels_column lg: 4, padding: glib_json_padding_body, childViews: ->(column) do
+        column.panels_vertical styleClass: 'card', width: 'matchParent', childViews: ->(column) do
+          column.button text: '2'
+        end
+      end
+      horizontal.panels_column lg: 4, padding: glib_json_padding_body, childViews: ->(column) do
+        column.panels_vertical styleClass: 'card', width: 'matchParent', childViews: ->(column) do
+          column.button text: '3'
+        end
+      end
+      horizontal.panels_column lg: 4, padding: glib_json_padding_body, childViews: ->(column) do
+        column.panels_vertical styleClass: 'card', width: 'matchParent', childViews: ->(column) do
+          column.button text: '4'
+        end
       end
     end
 

data/app/views/json_ui/garage/panels/carousel.json.jbuilder

@@ -6,7 +6,7 @@ image_url2 = 'https://s.abcnews.com/images/International/Guam03-gty-jrl-170809_1
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.h1 text: 'Carousel panel'
     scroll.panels_carousel width: 'matchParent', childViews: ->(carousel) do
       carousel.image url: image_url1, width: 'matchParent'

data/app/views/json_ui/garage/panels/custom.json.jbuilder

@@ -3,11 +3,11 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.h2 text: 'Thumbnail Template'
     scroll.spacer height: 6
     scroll.panels_custom template: 'thumbnail', width: 'matchParent', backgroundColor: '#fafafa',
-      data: { imageUrl: json_image_standard_url, title: 'Title', subtitle: 'Use the same template from list templates' }
+      data: { imageUrl: glib_json_image_standard_url, title: 'Title', subtitle: 'Use the same template from list templates' }
     
     scroll.spacer height: 20
     scroll.h2 text: 'Non-existent Template'

data/app/views/json_ui/garage/panels/horizontal.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.h1 text: 'Horizontal panel'
     scroll.panels_horizontal backgroundColor: '#b3bac2', childViews: ->(panel) do
       panel.button text: '1'

data/app/views/json_ui/garage/panels/index.json.jbuilder

@@ -5,7 +5,7 @@ json_ui_page json do |page|
   
   page.list sections: [
     ->(section) do
-      section.header padding: json_padding_list, childViews: ->(header) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
         header.h2 text: 'Layout for child components'
       end
 
@@ -25,7 +25,7 @@ json_ui_page json do |page|
         
       end
     end, ->(section) do
-      section.header padding: json_padding_list, childViews: ->(header) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
         header.h2 text: 'Layout with sub-panels'
         header.spacer height: 6
         header.label text: 'Each sub-panel is a vertical panel'
@@ -41,9 +41,10 @@ json_ui_page json do |page|
         template.thumbnail title: 'List', subtitle: 'Sub-panels: header, footer', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'lists/index')
         end
+
       end
     end, ->(section) do
-      section.header padding: json_padding_list, childViews: ->(header) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
         header.h2 text: 'Layout with uniform rows'
       end
 
@@ -57,7 +58,7 @@ json_ui_page json do |page|
         
       end
     end, ->(section) do
-      section.header padding: json_padding_list, childViews: ->(header) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
         header.h2 text: 'Non-layout'
         header.spacer height: 6
         header.label text: 'Adds functionality to a vertical layout'
@@ -70,16 +71,13 @@ json_ui_page json do |page|
         template.thumbnail title: 'Form', subtitle: 'Adds form functionality', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'forms/index')
         end
-        template.thumbnail title: 'Card', subtitle: 'Adds card-like bevel', onClick: ->(action) do
-          action.windows_open url: json_ui_garage_url(path: 'panels/card')
-        end
         template.thumbnail title: 'Column', subtitle: 'Adds control over layout inside a responsive panel', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'panels/responsive')
         end
         
       end
     end, ->(section) do
-      section.header padding: json_padding_list, childViews: ->(header) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
         header.h2 text: 'Child-less Layout'
       end
 
@@ -88,6 +86,17 @@ json_ui_page json do |page|
           action.windows_open url: json_ui_garage_url(path: 'panels/custom')
         end
         
+      end
+    end, ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Styling'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Card', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'panels/card')
+        end
+        
       end
     end, 
   ]

data/app/views/json_ui/garage/panels/responsive.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.label text: 'Shrink the browser\'s width to see how the column panels are rearranged. On mobile screens, they are always arranged vertically'
 
     scroll.spacer height: 20

data/app/views/json_ui/garage/panels/split.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
 
     # TODO: Consider moving towards this
     # scroll.panels_split width: 'matchParent', builder: ->(builder) do

data/app/views/json_ui/garage/panels/vertical.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Panels'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.h1 text: 'Vertical panel'
     scroll.panels_vertical backgroundColor: '#b3bac2', childViews: ->(panel) do
       panel.button text: 'Button1'

data/app/views/json_ui/garage/views/images.json.jbuilder

@@ -3,10 +3,10 @@ json.title 'Views'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.h2 text: 'Avatar'
     scroll.spacer height: 6
-    scroll.avatar url: json_image_avatar_url
+    scroll.avatar url: glib_json_image_avatar_url
 
     scroll.spacer height: 20
     scroll.h2 text: 'Icon'
@@ -16,7 +16,7 @@ json_ui_page json do |page|
     scroll.spacer height: 20
     scroll.h2 text: 'Image with URL'
     scroll.spacer height: 6
-    scroll.image width: 100, url: json_image_standard_url
+    scroll.image width: 100, url: glib_json_image_standard_url
 
     scroll.spacer height: 20
     scroll.h2 text: 'Image with base64 data'

data/app/views/json_ui/garage/views/links.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Views'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
 
     scroll.h2 text: 'Standard button'
     scroll.spacer height: 6
@@ -43,7 +43,7 @@ json_ui_page json do |page|
     scroll.h2 text: 'Avatar with onClick'
     # TODO: Make sure "open in new tab" works
     scroll.spacer height: 10
-    scroll.avatar url: json_image_avatar_url, styleClass: 'link', onClick: ->(action) do
+    scroll.avatar url: glib_json_image_avatar_url, styleClass: 'link', onClick: ->(action) do
       action.windows_open url: json_ui_garage_url(path: 'home/blank')
     end
 
@@ -51,7 +51,7 @@ json_ui_page json do |page|
     scroll.h2 text: 'Image with onClick'
     # TODO: Make sure "open in new tab" works
     scroll.spacer height: 10
-    scroll.image width: 100, url: json_image_standard_url, styleClass: 'link', onClick: ->(action) do
+    scroll.image width: 100, url: glib_json_image_standard_url, styleClass: 'link', onClick: ->(action) do
       action.windows_open url: json_ui_garage_url(path: 'home/blank')
     end
 

data/app/views/json_ui/garage/views/misc.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Views'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.spacer height: 20
     scroll.h2 text: 'Map'
     scroll.spacer height: 6

data/app/views/json_ui/garage/views/texts.json.jbuilder

@@ -3,7 +3,7 @@ json.title 'Views'
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
   
-  page.scroll padding: json_padding_body, childViews: ->(scroll) do
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     scroll.h1 text: 'Heading 1'
 
     scroll.spacer height: 10

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glib-web
 version: !ruby/object:Gem::Version
-  version: 0.2.13
+  version: 0.2.14
 platform: ruby
 authors:
 - ''
@@ -76,6 +76,8 @@ files:
 - app/views/json_ui/garage/lists/index.json.jbuilder
 - app/views/json_ui/garage/lists/infinite_scroll.json.jbuilder
 - app/views/json_ui/garage/lists/templating.json.jbuilder
+- app/views/json_ui/garage/pages/flat_centered.json.jbuilder
+- app/views/json_ui/garage/pages/full_width.json.jbuilder
 - app/views/json_ui/garage/pages/full_width_height.json.jbuilder
 - app/views/json_ui/garage/pages/index.json.jbuilder
 - app/views/json_ui/garage/pages/layout.json.jbuilder