From 53a681c014bc1ea124d1600ecd9797db728ca7ac Mon Sep 17 00:00:00 2001
From: =?utf8?q?Vladim=C3=ADr=20Vondru=C5=A1?= <mosra@centrum.cz>
Date: Tue, 7 Nov 2017 16:35:40 +0100
Subject: [PATCH] css: make figure work with lengthy caption or large images.

Previously lengthy caption or description was extending beyond image
instead of being wrapped. Also large images didn't stop at 100% width,
leaking out of the page.
---
 css/m-components.css        | 28 ++++++++++++++++-----
 css/m-dark.compiled.css     | 24 +++++++++++++-----
 css/m-light.compiled.css    | 24 +++++++++++++-----
 doc/css/components-test.rst | 50 +++++++++++++++++++++++++++++++++++--
 4 files changed, 106 insertions(+), 20 deletions(-)

diff --git a/css/m-components.css b/css/m-components.css
index fa46a39c..84425ce4 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -968,12 +968,15 @@ figure.m-figure.m-flat:before {
 figure.m-figure > * {
   margin-left: 1rem;
   margin-right: 1rem;
+  display: table-caption;
+  caption-side: bottom;
 }
-figure.m-figure:after {
-  content: ' ';
-  display: block;
-  margin-top: 1rem;
-  height: 1px;
+figure.m-figure > *:first-child {
+  /* otherwise figure with clickable image is center differently */
+  display: inline;
+}
+figure.m-figure > *:last-child {
+  margin-bottom: 1rem;
 }
 figure.m-figure img {
   position: relative; /* so it's above the border */
@@ -982,6 +985,7 @@ figure.m-figure img {
   margin-bottom: 0;
   border-top-left-radius: 0.2rem;
   border-top-right-radius: 0.2rem;
+  max-width: 100%;
 }
 figure.m-figure figcaption {
   margin-top: 0.5rem;
@@ -993,12 +997,24 @@ figure.m-figure a img {
   margin-left: -1rem;
   margin-right: -1rem;
 }
-figure.m-figure.m-fullwidth {
+figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
+  /* Using inline for the content would lose the margin on wrapped lines */
   display: block;
 }
+figure.m-figure.m-fullwidth > *:first-child {
+  display: inline;
+}
 figure.m-figure.m-fullwidth img {
   width: 100%;
 }
+figure.m-figure.m-fullwidth:after {
+  /* Specifying bottom margin on the last element works only if it is displayed
+     as table caption, so I have to hack it here. */
+  content: ' ';
+  display: block;
+  margin-top: 1rem;
+  height: 1px;
+}
 
 /* Code figure */
 figure.m-code-figure {
diff --git a/css/m-dark.compiled.css b/css/m-dark.compiled.css
index 59ee85e2..989f8737 100644
--- a/css/m-dark.compiled.css
+++ b/css/m-dark.compiled.css
@@ -1272,12 +1272,14 @@ figure.m-figure.m-flat:before {
 figure.m-figure > * {
   margin-left: 1rem;
   margin-right: 1rem;
+  display: table-caption;
+  caption-side: bottom;
 }
-figure.m-figure:after {
-  content: ' ';
-  display: block;
-  margin-top: 1rem;
-  height: 1px;
+figure.m-figure > *:first-child {
+  display: inline;
+}
+figure.m-figure > *:last-child {
+  margin-bottom: 1rem;
 }
 figure.m-figure img {
   position: relative; /* so it's above the border */
@@ -1286,6 +1288,7 @@ figure.m-figure img {
   margin-bottom: 0;
   border-top-left-radius: 0.2rem;
   border-top-right-radius: 0.2rem;
+  max-width: 100%;
 }
 figure.m-figure figcaption {
   margin-top: 0.5rem;
@@ -1297,12 +1300,21 @@ figure.m-figure a img {
   margin-left: -1rem;
   margin-right: -1rem;
 }
-figure.m-figure.m-fullwidth {
+figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
   display: block;
 }
+figure.m-figure.m-fullwidth > *:first-child {
+  display: inline;
+}
 figure.m-figure.m-fullwidth img {
   width: 100%;
 }
+figure.m-figure.m-fullwidth:after {
+  content: ' ';
+  display: block;
+  margin-top: 1rem;
+  height: 1px;
+}
 figure.m-code-figure {
   margin-top: 0;
   margin-left: 0;
diff --git a/css/m-light.compiled.css b/css/m-light.compiled.css
index 1dff3603..af95596b 100644
--- a/css/m-light.compiled.css
+++ b/css/m-light.compiled.css
@@ -1272,12 +1272,14 @@ figure.m-figure.m-flat:before {
 figure.m-figure > * {
   margin-left: 1rem;
   margin-right: 1rem;
+  display: table-caption;
+  caption-side: bottom;
 }
-figure.m-figure:after {
-  content: ' ';
-  display: block;
-  margin-top: 1rem;
-  height: 1px;
+figure.m-figure > *:first-child {
+  display: inline;
+}
+figure.m-figure > *:last-child {
+  margin-bottom: 1rem;
 }
 figure.m-figure img {
   position: relative; /* so it's above the border */
@@ -1286,6 +1288,7 @@ figure.m-figure img {
   margin-bottom: 0;
   border-top-left-radius: 0.2rem;
   border-top-right-radius: 0.2rem;
+  max-width: 100%;
 }
 figure.m-figure figcaption {
   margin-top: 0.5rem;
@@ -1297,12 +1300,21 @@ figure.m-figure a img {
   margin-left: -1rem;
   margin-right: -1rem;
 }
-figure.m-figure.m-fullwidth {
+figure.m-figure.m-fullwidth, figure.m-figure.m-fullwidth > * {
   display: block;
 }
+figure.m-figure.m-fullwidth > *:first-child {
+  display: inline;
+}
 figure.m-figure.m-fullwidth img {
   width: 100%;
 }
+figure.m-figure.m-fullwidth:after {
+  content: ' ';
+  display: block;
+  margin-top: 1rem;
+  height: 1px;
+}
 figure.m-code-figure {
   margin-top: 0;
   margin-left: 0;
diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 1badc589..1119a0e2 100644
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -465,7 +465,7 @@ Figure, centered:
     <figure class="m-figure">
       <img src="{filename}/static/ship-small.jpg" />
       <figcaption>A Ship</figcaption>
-      <div>Photo © <a href="http://blog.mosra.cz/">The Author</a></div>
+      <span>Photo © <a href="http://blog.mosra.cz/">The Author</a></span>
     </figure>
 
 Figure, centered, image link, flat:
@@ -475,7 +475,7 @@ Figure, centered, image link, flat:
     <figure class="m-figure m-flat">
       <a href="http://blog.mosra.cz/"><img src="{filename}/static/ship-small.jpg" /></a>
       <figcaption>A Ship</figcaption>
-      <div>Photo © <a href="http://blog.mosra.cz/">The Author</a></div>
+      <span>Photo © <a href="http://blog.mosra.cz/">The Author</a></span>
     </figure>
 
 Figure, fullwidth, without description (yes, it should be pixelated):
@@ -487,6 +487,52 @@ Figure, fullwidth, without description (yes, it should be pixelated):
       <figcaption>A Ship</figcaption>
     </figure>
 
+Figure, fullwidth, with a long caption and description, there should be no
+unnecessary wrapping of the text:
+
+.. raw:: html
+
+    <figure class="m-figure m-fullwidth">
+      <img src="{filename}/static/ship-small.jpg" />
+      <figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
+      <span>The Photo Displayed Above Was Kindly Taken And Allowed To Be Used
+      On This Page By <a href="http://blog.mosra.cz/">The Author</a>. All
+      Rights Reserved.</span>
+    </figure>
+
+Figure with a large image but not fullwidth, should look the same as above, no
+leaking of the image outside of the page:
+
+.. raw:: html
+
+    <figure class="m-figure">
+      <img src="{filename}/static/ship.jpg" />
+      <figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
+      <span>The Photo Displayed Above Was Kindly Taken And Allowed To Be Used
+      On This Page By <a href="http://blog.mosra.cz/">The Author</a>. All
+      Rights Reserved.</span>
+    </figure>
+
+Figure with a long caption and description, then just a caption (it should wrap
+instead of extending the border and there should be proper padding on bottom):
+
+.. raw:: html
+
+    <figure class="m-figure">
+      <img src="{filename}/static/ship-small.jpg" />
+      <figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
+      <span>The Photo Displayed Above Was Kindly Taken And Allowed To Be Used
+      On This Page By <a href="http://blog.mosra.cz/">The Author</a>. All
+      Rights Reserved.</span>
+    </figure>
+
+.. raw:: html
+
+    <figure class="m-figure">
+      <img src="{filename}/static/ship-small.jpg" />
+      <figcaption>A Somewhat Lengthy Caption For A Photo</figcaption>
+    </figure>
+
 Image grid
 ==========
 
-- 
2.30.2