keystone_ui-blocks 0.1.0 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a9effabb0c7a22247df585e2f60cf4ec1dfbd2256feeca4cfdeafc108bf170c
-  data.tar.gz: 01d24bf7544dbb1ab376e72edacf336f002b0ee815f13981fbe8cfacd1b196e5
+  metadata.gz: 4af6da6de74f550d80a93db8eb953ec17a7ad9acb51ad2295ca021e069ee32e9
+  data.tar.gz: 1d3505f97f4fdb09138c362d7d7cf6f5ab16f14b2eafd2ae510b239b3307022e
 SHA512:
-  metadata.gz: 8ed0465e1674ddd075da1d207408dbeaa5e8d59c0e071a565efff1f0ddf2e02fc17a089132ed4e2cfdcda225b32a26758e5ffa9057c9e5743e03f38386d4ebd0
-  data.tar.gz: 62885b92e2be83b5a448b1f8c8d816d44ffa7637799270cefc0bc0b6a57b1df432330155be7ec530b6cfcc103f343f86bdc9b1e9f506bcd83e8e4ace0f10da77
+  metadata.gz: 2421f1a2c7252cffe36b8321c3e6d2771ff10f5b90c70fa40bc237cb9f5dbfffc9a108853a887c58a17e5466431cf4bddadd09c68b9c08d4cf88860e53edb835
+  data.tar.gz: 32929b3c447da54908478c183c505dea8e48ea3944793faf318888ee780a5b102d73d33cee8cba2212eb311c06d6f68f1c7fdcecab28a6a629541d9702d536eb

data/app/assets/stylesheets/ks_blocks.css

@@ -4,12 +4,14 @@
   gap: var(--ks-blocks-gap, 10px);
 }
 
-@media (max-width: 640px) {
-  .ks-blocks-layout {
-    display: block;
-  }
+.ks-blocks-layout > * {
+  grid-column: calc(var(--ks-block-x) + 1) / span var(--ks-block-w);
+  grid-row: calc(var(--ks-block-y) + 1) / span var(--ks-block-h);
+}
 
-  .ks-blocks-layout > * + * {
-    margin-top: var(--ks-blocks-gap, 10px);
+@media (max-width: 640px) {
+  .ks-blocks-layout > * {
+    grid-column: span var(--ks-block-narrow-w, var(--ks-blocks-columns, 12));
+    grid-row: span var(--ks-block-narrow-h, 1);
   }
 }

data/lib/keystone_ui/blocks/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module Blocks
-    VERSION = "0.1.0"
+    VERSION = "0.2.0"
   end
 end

data/lib/ks_blocks/block_type.rb

@@ -1,6 +1,6 @@
 module KsBlocks
-  BlockType = Data.define(:key, :name, :width, :height, :min_width, :max_width, :min_height, :max_height, :resizable, :once, :full_width, :fixed, :description, :group, :fields) do
-    def initialize(key:, name:, width:, height:, min_width: 1, max_width: nil, min_height: 1, max_height: nil, resizable: true, once: false, full_width: false, fixed: false, description: nil, group: nil, fields: [])
+  BlockType = Data.define(:key, :name, :width, :height, :min_width, :max_width, :min_height, :max_height, :resizable, :once, :full_width, :fixed, :description, :group, :fields, :narrow_width, :narrow_height) do
+    def initialize(key:, name:, width:, height:, min_width: 1, max_width: nil, min_height: 1, max_height: nil, resizable: true, once: false, full_width: false, fixed: false, description: nil, group: nil, fields: [], narrow_width: nil, narrow_height: nil)
       super
     end
   end

data/lib/ks_blocks/layout_helper.rb

@@ -5,7 +5,7 @@ module KsBlocks
   module LayoutHelper
     def block_layout(blocks, columns: Grid::COLUMNS, gap: Grid::GAP, kind: nil, &block)
       tag.div(class: "ks-blocks-layout", style: "--ks-blocks-columns: #{columns}; --ks-blocks-gap: #{gap}px") do
-        safe_join(block_layout_shown(blocks, kind).map { |placed| block_layout_block(placed, &block) })
+        safe_join(block_layout_shown(blocks, kind).map { |placed| block_layout_block(placed, block_layout_type(placed, kind), &block) })
       end
     end
 
@@ -16,8 +16,23 @@ module KsBlocks
       shown.sort_by { |placed| [ placed["y"], placed["x"] ] }
     end
 
-    def block_layout_block(placed, &block)
-      tag.div(capture(placed, &block), data: { block: placed["id"] }, style: "grid-column: #{placed['x'] + 1} / span #{placed['w']}; grid-row: #{placed['y'] + 1} / span #{placed['h']}")
+    def block_layout_type(placed, kind)
+      KsBlocks.registry.block_types(kind: kind || :blocks).find { |block_type| block_type.key.to_s == placed["type"] }
+    end
+
+    def block_layout_block(placed, block_type, &block)
+      tag.div(capture(placed, &block), data: { block: placed["id"] }, style: block_layout_placing(placed, block_type))
+    end
+
+    def block_layout_placing(placed, block_type)
+      "--ks-block-x: #{placed['x']}; --ks-block-y: #{placed['y']}; --ks-block-w: #{placed['w']}; --ks-block-h: #{placed['h']}" \
+        "#{block_layout_narrow(block_type)}"
+    end
+
+    def block_layout_narrow(block_type)
+      return "" if block_type&.narrow_width.nil?
+
+      "; --ks-block-narrow-w: #{block_type.narrow_width}; --ks-block-narrow-h: #{block_type.narrow_height || 1}"
     end
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-blocks
 version: !ruby/object:Gem::Version
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors:
 - Tyler Schneider