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.

diff --git a/css/m-components.css b/css/m-components.css
index fa46a39cdb9b9008f3951e4ebbdddfa3654d2d05..84425ce45a043225bd45d0f182ad4cb76e749d3d 100644 (file)
--- 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 59ee85e2080988d151dcaa2951480f51f6ec067f..989f87375563a38fbb410a73fdda149218338509 100644 (file)
--- 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 1dff3603f8a3ee621d4a4737ff087c389d505929..af95596bac46e36eae346c9f7113b71898fc187d 100644 (file)
--- 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 1badc589eb1208b362555cf53ce3c8216d5853c9..1119a0e2f1db20e31f68911aad136bab74b965e4 100644 (file)
--- 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
 ==========