Use attachment-group container for spacing attachments evenly

rafalp · Jan 30, 2025 · 46110b8 · 46110b8
1 parent 19f1327
commit 46110b8
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git a/frontend/src/style/misago/rich-text.less b/frontend/src/style/misago/rich-text.less
@@ -55,16 +55,10 @@
   }
 }
 
-.rich-text-attachment-group:last-child {
-  margin-bottom: @line-height-computed * -1;
-}
-
 .rich-text-image {
   display: inline-block;
   position: relative;
 
-  margin-bottom: @line-height-computed;
-
   .rich-text-image-link {
     display: inline-block;
   }
@@ -81,7 +75,6 @@
   overflow: hidden;
 
   height: 0;
-  margin-bottom: @line-height-computed;
   padding: 0 0 56.25% 0;
 
   background-color: #1e1e1e;
@@ -137,7 +130,6 @@
 
 .rich-text-file {
   display: inline-block;
-  margin-bottom: @line-height-computed;
 }
 
 .rich-text-file-body {
@@ -217,7 +209,6 @@
 
 .rich-text-attachment-error {
   display: inline-block;
-  margin-bottom: @line-height-computed;
 
   &:last-child {
     margin-bottom: 0;
@@ -248,4 +239,38 @@
   .rich-text-attachment-error-name {
     word-break: break-all;
   }
+}
+
+.rich-text-image + .rich-text-file,
+.rich-text-image + .rich-text-attachment-error,
+.rich-text-file + .rich-text-image,
+.rich-text-attachment-error + .rich-text-image {
+  clear: left;
+}
+
+.rich-text-attachment-group{
+  overflow: auto;
+
+  margin: 0 -6px;
+
+  .rich-text-image,
+  .rich-text-file,
+  .rich-text-attachment-error {
+    float: left;
+  }
+
+  .rich-text-video {
+    clear: both;
+  }
+
+  .rich-text-image,
+  .rich-text-video,
+  .rich-text-file,
+  .rich-text-attachment-error {
+    margin: 0 6px @line-height-computed 6px;
+  }
+
+  &:last-child {
+    margin-bottom: @line-height-computed * -1;
+  }
 }
diff --git a/misago/static/misago/css/misago.css b/misago/static/misago/css/misago.css
diff --git a/misago/static/misago/css/misago.css.map b/misago/static/misago/css/misago.css.map