css, m.images: delimit image grid rows with a wrapper <div>.

Allows me to remove the ugly hack from m-grid.css, fixes misalignment
in some browsers (IE, Edge, FF) and makes the images properly span the
full content width in *all* cases now.

diff --git a/css/m-components.css b/css/m-components.css
index 0884126e8a19cfe3e687183b3e2655ce86f378c0..c0d0c8b1c268f4aca4ff1eb679e90dbe33d24e3b 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -866,16 +866,19 @@ article section:target figure.m-code-figure {
 }
 
 /* Image grid */
-.m-imagegrid > figure {
+.m-imagegrid > div {
+  background-color: var(--background-color); /* to avoid section HL shining through */
+}
+.m-imagegrid > div > figure {
   display: block;
   float: left;
   position: relative;
   margin: 0;
 }
-.m-imagegrid > figure > div,
-.m-imagegrid > figure > figcaption,
-.m-imagegrid > figure > a > div,
-.m-imagegrid > figure > a > figcaption {
+.m-imagegrid > div > figure > div,
+.m-imagegrid > div > figure > figcaption,
+.m-imagegrid > div > figure > a > div,
+.m-imagegrid > div > figure > a > figcaption {
   position: absolute;
   top: 0;
   left: 0;
@@ -886,65 +889,82 @@ article section:target figure.m-code-figure {
   border-width: 0.25rem;
   padding: 0.5rem;
 }
-.m-imagegrid > figure > figcaption,
-.m-imagegrid > figure > a > figcaption {
+.m-imagegrid > div > figure:first-child > div,
+.m-imagegrid > div > figure:first-child > figcaption,
+.m-imagegrid > div > figure:first-child > a > div,
+.m-imagegrid > div > figure:first-child > a > figcaption {
+  border-left-width: 0;
+}
+.m-imagegrid > div > figure:last-child > div,
+.m-imagegrid > div > figure:last-child > figcaption,
+.m-imagegrid > div > figure:last-child > a > div,
+.m-imagegrid > div > figure:last-child > a > figcaption {
+  border-right-width: 0;
+}
+.m-imagegrid > div > figure > figcaption,
+.m-imagegrid > div > figure > a > figcaption {
   color: transparent;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.75rem;
 }
-.m-imagegrid > figure > div::before,
-.m-imagegrid > figure > figcaption::before,
-.m-imagegrid > figure > a > div::before,
-.m-imagegrid > figure > a > figcaption::before {
+.m-imagegrid > div > figure > div::before,
+.m-imagegrid > div > figure > figcaption::before,
+.m-imagegrid > div > figure > a > div::before,
+.m-imagegrid > div > figure > a > figcaption::before {
   content: '';
   display: inline-block;
   height: 100%;
   vertical-align: bottom;
   width: 0;
 }
-.m-imagegrid > figure:hover > figcaption,
-.m-imagegrid > figure:hover > a > figcaption {
+.m-imagegrid > div > figure:hover > figcaption,
+.m-imagegrid > div > figure:hover > a > figcaption {
   background: linear-gradient(transparent 0%, transparent 75%, rgba(0, 0, 0, 0.85) 100%);
   color: #ffffff;
 }
-.m-imagegrid > figure > img,
-.m-imagegrid > figure > a > img {
+.m-imagegrid > div > figure > img,
+.m-imagegrid > div > figure > a > img {
   width: 100%;
   height: 100%;
 }
-.m-imagegrid::after {
+.m-imagegrid > div::after {
   display: block;
   content: ' ';
   clear: both;
 }
 
 @media screen and (max-width: 767px) {
-  .m-imagegrid > figure {
+  .m-imagegrid > div > figure {
     float: none;
     width: 100% !important;
   }
+  .m-imagegrid > div > figure > div,
+  .m-imagegrid > div > figure > figcaption,
+  .m-imagegrid > div > figure > a > div,
+  .m-imagegrid > div > figure > a > figcaption {
+    border-left-width: 0;
+    border-right-width: 0;
+  }
 }
 
 /* Inflatable content */
 #m-container-inflatable > .m-row > [class*='m-col-'] > .m-note,
 #m-container-inflatable > .m-row > [class*='m-col-'] > .m-frame,
 #m-container-inflatable > .m-row > [class*='m-col-'] > .m-block,
+#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
 #m-container-inflatable > .m-row > [class*='m-col-'] > pre.m-code,
 #m-container-inflatable > .m-row > [class*='m-col-'] > figure.m-code-figure,
 #m-container-inflatable > .m-row > [class*='m-col-'] section > .m-note,
 #m-container-inflatable > .m-row > [class*='m-col-'] section > .m-frame,
 #m-container-inflatable > .m-row > [class*='m-col-'] section > .m-block,
+#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid,
 #m-container-inflatable > .m-row > [class*='m-col-'] section > pre.m-code,
 #m-container-inflatable > .m-row > [class*='m-col-'] section > figure.m-code-figure {
   margin: 0 -1rem 1rem -1rem;
 }
 
-#m-container-inflatable > .m-row > [class*='m-col-'] > .m-imagegrid,
-#m-container-inflatable > .m-row > [class*='m-col-'] section > .m-imagegrid {
-  margin: 0 -1.25rem 1rem -1.25rem;
-}
 @media screen and (min-width: 576px) {
   #m-container-inflatable > .m-row > .m-col-s-10 > .m-imagegrid.m-container-inflate,
   #m-container-inflatable > .m-row > .m-col-s-10 section > .m-imagegrid.m-container-inflate {

diff --git a/css/m-grid.css b/css/m-grid.css
index 5570563afa018473deaf6af425a19ad605fde783..983dc8d1c51dd6e4050caf9cb75a38f9eeb4d529 100644 (file)
--- a/css/m-grid.css
+++ b/css/m-grid.css
@@ -414,8 +414,4 @@ body {
   }
 }
 
-#m-container-inflatable {
-  overflow-x: hidden;  /* needed by image grid :( */
-}
-
 /* kate: indent-width 2; */

diff --git a/pelican-plugins/m/images.py b/pelican-plugins/m/images.py
index ce57f933b7aa55a5f75d039a9694d5c73f5b42ec..047b03262d9fae73c4fd70a13aaf8d850524b593 100644 (file)
--- a/pelican-plugins/m/images.py
+++ b/pelican-plugins/m/images.py
@@ -143,11 +143,12 @@ class ImageGrid(rst.Directive):
         grid_node = nodes.container()
         grid_node['classes'] += ['m-imagegrid', 'm-container-inflate']
 
-        images = []
+        rows = [[]]
         total_widths = [0]
         for uri in self.content:
             # New line, calculating width from 0 again
             if not uri:
+                rows.append([])
                 total_widths.append(0)
                 continue
 
@@ -162,21 +163,26 @@ class ImageGrid(rst.Directive):
             caption = "F{}, {}/{} s, ISO {}".format(float(exif['FNumber'][0])/float(exif['FNumber'][1]), *exif['ExposureTime'], exif['ISOSpeedRatings'])
             rel_width = float(im.width)/im.height
             total_widths[-1] += rel_width
-            images.append((uri, rel_width, len(total_widths) - 1, caption))
-
-        for image in images:
-            image_reference = rst.directives.uri(image[0])
-            image_node = nodes.image('', uri=image_reference)
-            text_nodes, _ = self.state.inline_text(image[3], self.lineno)
-            text_node = nodes.paragraph('', '', *text_nodes)
-            overlay_node = nodes.caption()
-            overlay_node.append(text_node)
-            link_node = nodes.reference('', refuri=image_reference)
-            link_node.append(image_node)
-            link_node.append(overlay_node)
-            wrapper_node = nodes.figure(width="{:.3f}%".format(image[1]*100.0/total_widths[image[2]]))
-            wrapper_node.append(link_node)
-            grid_node.append(wrapper_node)
+            rows[-1].append((uri, rel_width, len(total_widths) - 1, caption))
+
+        for row in rows:
+            row_node = nodes.container()
+
+            for image in row:
+                image_reference = rst.directives.uri(image[0])
+                image_node = nodes.image('', uri=image_reference)
+                text_nodes, _ = self.state.inline_text(image[3], self.lineno)
+                text_node = nodes.paragraph('', '', *text_nodes)
+                overlay_node = nodes.caption()
+                overlay_node.append(text_node)
+                link_node = nodes.reference('', refuri=image_reference)
+                link_node.append(image_node)
+                link_node.append(overlay_node)
+                wrapper_node = nodes.figure(width="{:.3f}%".format(image[1]*100.0/total_widths[image[2]]))
+                wrapper_node.append(link_node)
+                row_node.append(wrapper_node)
+
+            grid_node.append(row_node)
 
         return [grid_node]