From aa1d46389a8cc9635f4354b3e7be70a8361ed7ed Mon Sep 17 00:00:00 2001
From: Javan Makhmali <javan@javan.us>
Date: Wed, 3 Oct 2018 16:35:12 -0400
Subject: Fix image gallery styles

---
 lib/templates/actiontext.css  |  7 -------
 lib/templates/actiontext.scss | 36 ++++++++++++++++++++++++++++++++++++
 lib/templates/installer.rb    |  6 +++---
 3 files changed, 39 insertions(+), 10 deletions(-)
 delete mode 100644 lib/templates/actiontext.css
 create mode 100644 lib/templates/actiontext.scss

(limited to 'lib/templates')

diff --git a/lib/templates/actiontext.css b/lib/templates/actiontext.css
deleted file mode 100644
index 97c083c24b..0000000000
--- a/lib/templates/actiontext.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/*
- * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
- * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
- * inclusion directly in any other asset bundle and remove this file.
- *
- *= require trix/dist/trix 
-*/
diff --git a/lib/templates/actiontext.scss b/lib/templates/actiontext.scss
new file mode 100644
index 0000000000..58a197e1e9
--- /dev/null
+++ b/lib/templates/actiontext.scss
@@ -0,0 +1,36 @@
+//
+// Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
+// the trix-editor content (whether displayed or under editing). Feel free to incorporate this
+// inclusion directly in any other asset bundle and remove this file.
+//
+//= require trix/dist/trix
+
+// We need to override trix.css’s image gallery styles to accomodate the
+// <active-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,
+    > .attachment {
+      flex: 1 0 33%;
+      padding: 0 0.5em;
+      max-width: 33%;
+    }
+
+    &.attachment-gallery--2,
+    &.attachment-gallery--4 {
+      > action-text-attachment,
+      > .attachment {
+        flex-basis: 50%;
+        max-width: 50%;
+      }
+    }
+  }
+
+  action-text-attachment {
+    .attachment {
+      padding: 0 !important;
+      max-width: 100% !important;
+    }
+  }
+}
diff --git a/lib/templates/installer.rb b/lib/templates/installer.rb
index 03ba0722cd..100b0a96a8 100644
--- a/lib/templates/installer.rb
+++ b/lib/templates/installer.rb
@@ -1,11 +1,11 @@
-say "Copying actiontext.css to app/assets/stylesheets"
-copy_file "#{__dir__}/actiontext.css", "app/assets/stylesheets/actiontext.css"
+say "Copying actiontext.scss to app/assets/stylesheets"
+copy_file "#{__dir__}/actiontext.scss", "app/assets/stylesheets/actiontext.scss"
 
 say "Copying fixtures to test/fixtures/action_text/rich_texts.yml"
 copy_file "#{__dir__}/fixtures.yml", "test/fixtures/action_text/rich_texts.yml"
 
 say "Copying blob rendering partial to app/views/active_storage/blobs/_blob.html.erb"
-copy_file "#{__dir__}/../../app/views/active_storage/blobs/_blob.html.erb", 
+copy_file "#{__dir__}/../../app/views/active_storage/blobs/_blob.html.erb",
   "app/views/active_storage/blobs/_blob.html.erb"
 
 # FIXME: Replace with release version on release
-- 
cgit v1.2.3