From 4b9badc3e8fcd41c98519c3ae1d463d650c349f1 Mon Sep 17 00:00:00 2001 From: Alan Cornthwaite Date: Fri, 13 Jun 2025 10:54:56 +0930 Subject: [PATCH 1/4] Column --- .../katalyst/content/frontend/frontend.css | 74 ++++++++++++++++--- app/models/katalyst/content/item.rb | 2 +- .../katalyst/content/columns/_column.html.erb | 8 +- lib/katalyst/content/config.rb | 1 + 4 files changed, 71 insertions(+), 14 deletions(-) diff --git a/app/assets/stylesheets/katalyst/content/frontend/frontend.css b/app/assets/stylesheets/katalyst/content/frontend/frontend.css index 7e5ef9c..eec2b5c 100644 --- a/app/assets/stylesheets/katalyst/content/frontend/frontend.css +++ b/app/assets/stylesheets/katalyst/content/frontend/frontend.css @@ -1,19 +1,46 @@ /* Spacing */ -.content-item { - --flow-space: var(--space-m); - margin-block: var(--block-space, var(--space-m)); +:root { + /* + The container width at which the component switches between a horizontal and vertical layout. + */ + --content-gap: var(--space-l); + --content-gutter: var(--space-m); + --content-block-gutter: var(--content-gutter); + --content-block-gap: var(--content-gap); + --content-inline-gutter: var(--content-gutter); + --content-inline-gap: var(--content-gap); } -/* Themes */ +.content-items { + /* gutters where the theme changes */ -[data-content-theme] { - display: flow-root; + &[data-content-theme] { + padding-block: var(--content-block-gutter); + } + + /* gaps between items with the same theme */ + + > * + * { + margin-block-start: var(--content-block-gap); + } + + /* add gutters to non themed siblings */ + + &[data-content-theme] + .content-items:not([data-content-theme]), + .content-items:not([data-content-theme]) + &[data-content-theme] { + margin-block-start: var(--content-block-gutter); + } } -[data-content-theme] [data-content-theme] { - margin-inline: calc(-1 * var(--gutter)); - padding-inline: var(--gutter); +/* + If a content item has children with a theme applied, we want to steal some space + from the item to give to the children for a gutter. This makes content line up + between items with and without a theme. + */ +.content-item [data-content-theme] { + margin-inline: calc(-1 * var(--content-inline-gutter)); + padding-inline: var(--content-inline-gutter); } [data-content-theme="light"] { @@ -44,3 +71,32 @@ margin-inline: auto; } } + +/* + Columns + + A two-column horizontal layout that switches to vertical layout on narrow screens. + Based on https://every-layout.dev/layouts/switcher/ +*/ + +:root { + /* + The container width at which the component switches between a horizontal and vertical layout. + */ + --content-column-threshold-width: var(--mobile-breakpoint, 37.5rem); +} + +.content-columns { + display: flex; + flex-wrap: wrap; + gap: var(--content-inline-gap) calc(2 * var(--content-inline-gap)); + + > * { + flex-grow: 1; + flex-basis: calc((var(--content-column-threshold-width) - 100%) * 999); + } +} + +.content-column { + display: grid; /* equal height columns */ +} diff --git a/app/models/katalyst/content/item.rb b/app/models/katalyst/content/item.rb index 194021f..4e9d7b9 100644 --- a/app/models/katalyst/content/item.rb +++ b/app/models/katalyst/content/item.rb @@ -60,7 +60,7 @@ def item_type end def theme - super.presence || parent&.theme + super.presence || parent&.theme || Config.default_theme end private diff --git a/app/views/katalyst/content/columns/_column.html.erb b/app/views/katalyst/content/columns/_column.html.erb index 9b2d2f7..063425e 100644 --- a/app/views/katalyst/content/columns/_column.html.erb +++ b/app/views/katalyst/content/columns/_column.html.erb @@ -1,17 +1,17 @@ -<%= content_item_tag column do %> +<%= content_item_tag(column, class: "flow") do %> <%= tag.h3 column.heading, class: column.heading_style_class if column.show_heading? %> <% items = column.children.select(&:visible?) %> <% last = items.pop %> -
-
+
+
<% if items.any? %> <%= render_content_items(*items, theme: column.theme, class: "flow") %> <% elsif last %> <%= render_content_items(last, theme: column.theme) %> <% end %>
-
+
<%= render_content_items(last, theme: column.theme) if last && items.any? %>
diff --git a/lib/katalyst/content/config.rb b/lib/katalyst/content/config.rb index 7de805c..2df563d 100644 --- a/lib/katalyst/content/config.rb +++ b/lib/katalyst/content/config.rb @@ -8,6 +8,7 @@ class Config include ActiveSupport::Configurable config_accessor(:themes) { %w[light dark] } + config_accessor(:default_theme) { themes.first } alias_method :backgrounds, :themes alias_method :backgrounds=, :themes= From 81d81354efd8f1edb89f6715d4c85400758472cc Mon Sep 17 00:00:00 2001 From: Alan Cornthwaite Date: Fri, 13 Jun 2025 10:54:34 +0930 Subject: [PATCH 2/4] Flow component heading and contents --- app/views/katalyst/content/columns/_column.html.erb | 2 +- app/views/katalyst/content/groups/_group.html.erb | 4 ++-- app/views/katalyst/content/sections/_section.html.erb | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/app/views/katalyst/content/columns/_column.html.erb b/app/views/katalyst/content/columns/_column.html.erb index 063425e..286c628 100644 --- a/app/views/katalyst/content/columns/_column.html.erb +++ b/app/views/katalyst/content/columns/_column.html.erb @@ -6,7 +6,7 @@
<% if items.any? %> - <%= render_content_items(*items, theme: column.theme, class: "flow") %> + <%= render_content_items(*items, theme: column.theme) %> <% elsif last %> <%= render_content_items(last, theme: column.theme) %> <% end %> diff --git a/app/views/katalyst/content/groups/_group.html.erb b/app/views/katalyst/content/groups/_group.html.erb index 0fe8870..4e1d7b4 100644 --- a/app/views/katalyst/content/groups/_group.html.erb +++ b/app/views/katalyst/content/groups/_group.html.erb @@ -1,5 +1,5 @@ -<%= content_item_tag group do %> +<%= content_item_tag(group, class: "flow") do %> <%= tag.h3 group.heading, class: group.heading_style_class if group.show_heading? %> - <%= render_content_items(*group.children, theme: group.theme, class: "flow") %> + <%= render_content_items(*group.children, theme: group.theme) %> <% end %> diff --git a/app/views/katalyst/content/sections/_section.html.erb b/app/views/katalyst/content/sections/_section.html.erb index b7e5b78..2252783 100644 --- a/app/views/katalyst/content/sections/_section.html.erb +++ b/app/views/katalyst/content/sections/_section.html.erb @@ -1,5 +1,5 @@ <%= content_item_tag(section, tag: :section, class: "flow") do %> <%= tag.h2(section.heading, class: section.heading_style_class) if section.show_heading? %> - <%= render_content_items(*section.children, theme: section.theme, class: "flow") %> + <%= render_content_items(*section.children, theme: section.theme) %> <% end %> From 08d201f9c4b253ad8aecebd8c0bd7c71fa504847 Mon Sep 17 00:00:00 2001 From: Alan Cornthwaite Date: Fri, 13 Jun 2025 10:55:05 +0930 Subject: [PATCH 3/4] Aside --- .../katalyst/content/frontend/frontend.css | 22 +++++++++++++++++++ .../katalyst/content/asides/_aside.html.erb | 14 +++++++----- 2 files changed, 30 insertions(+), 6 deletions(-) diff --git a/app/assets/stylesheets/katalyst/content/frontend/frontend.css b/app/assets/stylesheets/katalyst/content/frontend/frontend.css index eec2b5c..68ddb6a 100644 --- a/app/assets/stylesheets/katalyst/content/frontend/frontend.css +++ b/app/assets/stylesheets/katalyst/content/frontend/frontend.css @@ -100,3 +100,25 @@ .content-column { display: grid; /* equal height columns */ } + +.content-aside { + display: flex; + flex-wrap: wrap; + gap: var(--content-inline-gap) calc(2 * var(--content-inline-gap)); + align-items: start; + + > :last-child { + flex-basis: max(var(--content-aside-min-width, 16rem), 33%); + flex-grow: 1; + } + + > :first-child { + flex-basis: 0; + flex-grow: 999; + min-inline-size: 55%; + } + + &[data-wrap-reverse] { + flex-wrap: wrap-reverse; + } +} diff --git a/app/views/katalyst/content/asides/_aside.html.erb b/app/views/katalyst/content/asides/_aside.html.erb index 6db0118..d4c516d 100644 --- a/app/views/katalyst/content/asides/_aside.html.erb +++ b/app/views/katalyst/content/asides/_aside.html.erb @@ -1,14 +1,16 @@ -<%= content_item_tag(aside, data: { aside_reverse: ("" if aside.reverse) }) do %> +<%= content_item_tag(aside, class: "flow") do %> <%= tag.h3 aside.heading, class: aside.heading_style_class if aside.show_heading? %> <% if aside.children.any? %> <% items = aside.children.select(&:visible?) %> <% last = items.pop %> -
-
- <%= render_content_items(*items, theme: aside.theme, class: "flow") %> + <%= tag.div(class: "content-aside", data: { wrap_reverse: ("" if aside.reverse) }) do %> +
+ <%= render_content_items(*items, theme: aside.theme) %>
- <%= render_content_items(last, tag: :aside, class: "aside--sidebar", theme: aside.theme) %> -
+
+ <%= render_content_items(last, tag: :aside, theme: aside.theme) %> +
+ <% end %> <% end %> <% end %> From d97a8f57c5f2874cb920bef9819731cc988fe7bb Mon Sep 17 00:00:00 2001 From: Alan Cornthwaite Date: Wed, 18 Jun 2025 10:19:51 +0930 Subject: [PATCH 4/4] v3.0.0.alpha6 --- Gemfile.lock | 2 +- katalyst-content.gemspec | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 1a0ee5f..f62cf58 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - katalyst-content (3.0.0.alpha.5) + katalyst-content (3.0.0.alpha.6) active_storage_validations activerecord katalyst-html-attributes diff --git a/katalyst-content.gemspec b/katalyst-content.gemspec index 202e2c7..be7e3c5 100644 --- a/katalyst-content.gemspec +++ b/katalyst-content.gemspec @@ -2,7 +2,7 @@ Gem::Specification.new do |spec| spec.name = "katalyst-content" - spec.version = "3.0.0.alpha.5" + spec.version = "3.0.0.alpha.6" spec.authors = ["Katalyst Interactive"] spec.email = ["developers@katalyst.com.au"]