katalyst-content 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4798cc863b36eafa2627fcf3172aa243050f1e1ffc82b5d1c097b167018f8556
-  data.tar.gz: d4c8f004f08ed4ad1916f396a7909798bbea2e6d70666858ed7f2e32fdb7ce63
+  metadata.gz: 15c10b4886c26310eb6a15c64f9b3c31b1b2dc312d9b4088bf530e6610ec3599
+  data.tar.gz: 2dd1d7e5179ff4d9f53d66b8ea99cd3d19f497e078d6234da4c8525e13a25ba1
 SHA512:
-  metadata.gz: 7bd099c031625c6ac55355009377e5b3f58ea2c0a1b0859d988dbf3cc7e069bd7a4c12315df905c917604be0cd58642e091889781a1928c981db577c7ab50f0c
-  data.tar.gz: 30047b03e2baedc76652e6e4864f61538423f4930d433e083cbf43708a004940ec984e7dd16b5ec92e781ac7708bceb56a1501d67b439822ee6cbec56721b432
+  metadata.gz: 89a50df67af76c48e7978be76eee21da5100a8bf7fb69c6f580dc1868f4f644300f7d782b7cab61c2897717577e1cf4cc865a8b1f437c7d559c9b321f66b0bf0
+  data.tar.gz: c5dbc2983e3438642f38a58351010f7b110715ed865fb5851f1c43d4e8801a8c5a0e9bc0e371f5555cad72c976a3fc53d1bbc88cb6efc260d9403f1d0751f26c

data/app/assets/stylesheets/katalyst/content/_index.scss

@@ -1,31 +1 @@
 @use "editor";
-@use "trix";
-
-/*
- * We need to override trix.css’s image gallery styles to accommodate the
- * <action-text-attachment> element we wrap around attachments. Otherwise,
- * images in galleries will be squished by the max-width: 33%; rule.
-*/
-.trix-content .attachment-gallery > action-text-attachment,
-.trix-content .attachment-gallery > .attachment {
-  flex: 1 0 33%;
-  padding: 0 0.5em;
-  max-width: 33%;
-}
-
-.trix-content
-  .attachment-gallery.attachment-gallery--2
-  > action-text-attachment,
-.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
-.trix-content
-  .attachment-gallery.attachment-gallery--4
-  > action-text-attachment,
-.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
-  flex-basis: 50%;
-  max-width: 50%;
-}
-
-.trix-content action-text-attachment .attachment {
-  padding: 0 !important;
-  max-width: 100% !important;
-}

data/app/assets/stylesheets/katalyst/content/editor/_index.scss

@@ -4,6 +4,8 @@
 @use "item-rules";
 @use "new-items";
 @use "status-bar";
+@use "trix";
+@use "trix-rails";
 
 $grey-light: #f4f4f4 !default;
 $grey: #ececec !default;
@@ -99,8 +101,7 @@ $status-dirty-color: #aaa !default;
       align-items: center;
     }
 
-    .title,
-    .url {
+    .heading {
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
@@ -111,12 +112,39 @@ $status-dirty-color: #aaa !default;
 [data-controller="content--editor--container"] [role="rowheader"],
 [data-controller="content--editor--item"] {
   display: grid;
-  grid-template-columns: 40% 2fr auto;
+  grid-template-columns: minmax(10rem, calc(100% - 12rem)) 1fr 10rem;
   padding: 0.25rem 0.5rem;
   gap: 1rem;
   align-items: center;
 }
 
+[data-controller="content--editor--item"] {
+  .item-background::before {
+    content: "A";
+    font-family: cursive;
+    display: inline-block;
+    min-height: 1rem;
+    min-width: 1rem;
+    text-align: center;
+    color: var(--theme-text-color);
+    background-color: var(--theme-background-color);
+    border: 1px solid var(--theme-border-color);
+    border-radius: 2px;
+  }
+
+  .item-background.light {
+    --theme-text-color: black;
+    --theme-border-color: black;
+    --theme-background-color: white;
+  }
+
+  .item-background.dark {
+    --theme-text-color: white;
+    --theme-border-color: white;
+    --theme-background-color: black;
+  }
+}
+
 // Ensures vertical alignment of header with rows
 [data-controller="content--editor--container"] {
   [role="rowheader"] {

data/app/assets/stylesheets/katalyst/content/editor/_trix-rails.scss

@@ -0,0 +1,30 @@
+// Rails-provided customizations to trix editor
+
+/*
+ * We need to override trix.css’s image gallery styles to accommodate the
+ * <action-text-attachment> element we wrap around attachments. Otherwise,
+ * images in galleries will be squished by the max-width: 33%; rule.
+*/
+.trix-content .attachment-gallery > action-text-attachment,
+.trix-content .attachment-gallery > .attachment {
+  flex: 1 0 33%;
+  padding: 0 0.5em;
+  max-width: 33%;
+}
+
+.trix-content
+.attachment-gallery.attachment-gallery--2
+> action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
+.trix-content
+.attachment-gallery.attachment-gallery--4
+> action-text-attachment,
+.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
+  flex-basis: 50%;
+  max-width: 50%;
+}
+
+.trix-content action-text-attachment .attachment {
+  padding: 0 !important;
+  max-width: 100% !important;
+}

data/app/views/katalyst/content/editor/_item.html.erb

@@ -7,7 +7,7 @@
     <span role="img" value="invisible" title="Hidden"></span>
   </div>
 
-  <div class="item-background-<%= item.background %>">
+  <div class="item-background <%= item.background %>">
   </div>
 
   <%= builder.item_actions %>

data/lib/katalyst/content/version.rb

@@ -2,6 +2,6 @@
 
 module Katalyst
   module Content
-    VERSION = "0.1.1"
+    VERSION = "0.1.2"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: katalyst-content
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Katalyst Interactive
@@ -35,6 +35,7 @@ files:
 - app/assets/stylesheets/katalyst/content/editor/_item-rules.scss
 - app/assets/stylesheets/katalyst/content/editor/_new-items.scss
 - app/assets/stylesheets/katalyst/content/editor/_status-bar.scss
+- app/assets/stylesheets/katalyst/content/editor/_trix-rails.scss
 - app/controllers/katalyst/content/application_controller.rb
 - app/controllers/katalyst/content/items_controller.rb
 - app/helpers/katalyst/content/application_helper.rb