From bb5f2f5c1f053f43ce11ab8d188cd4c33f2d66a0 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= Date: Fri, 15 Sep 2017 20:42:32 +0200 Subject: [PATCH] css, m.images: delimit image grid rows with a wrapper
. 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. --- css/m-components.css | 62 ++++++++++++++++++++++++------------- css/m-grid.css | 4 --- pelican-plugins/m/images.py | 38 +++++++++++++---------- 3 files changed, 63 insertions(+), 41 deletions(-) diff --git a/css/m-components.css b/css/m-components.css index 0884126e..c0d0c8b1 100644 --- 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 5570563a..983dc8d1 100644 --- 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 ce57f933..047b0326 100644 --- 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] -- 2.30.2