css: rework button markup.

Default to centered button, because that's what one usually wants. This
also resolves the problem with the following markup not having spacing
after and thus being too sticky to content that immediately follows it.

    <div class="m-text-centered">
      <a class="m-button m-success" href="#">...</a>
    </div>

The new markup is thus this, the .m-text-centered class no longer
needed. Adding .m-fullwidth to the <div> works as expected.

    <div class="m-button m-success">
      <a href="#">...</a>
    </div>

Sorry for potential breakages of your content.

diff --git a/css/m-components.css b/css/m-components.css
index 287c45064e16cf34100afc864d8c9c63c09a42e2..d5af0c07471d0f3f6772e5d074be6d06fa7aec4c 100644 (file)
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -694,7 +694,10 @@ dl.m-diary dd {
 }
 
 /* Button */
-a.m-button {
+div.m-button {
+  text-align: center;
+}
+div.m-button a {
   display: inline-block;
   border-radius: var(--border-radius);
   padding-top: 0.75rem;
@@ -702,19 +705,18 @@ a.m-button {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
   text-decoration: none;
-  text-align: center;
   font-size: 1.17rem;
 }
-a.m-button.m-fullwidth {
+div.m-button.m-fullwidth a {
   display: block;
   padding-left: 0;
   padding-right: 0;
 }
-a.m-button .m-big:first-child {
+div.m-button a .m-big:first-child {
   font-size: 1.37rem;
   font-weight: bold;
 }
-a.m-button .m-small:last-child {
+div.m-button a .m-small:last-child {
   font-size: 0.854rem;
 }
 
@@ -977,33 +979,33 @@ table.m-table tr.m-dim th, table.m-table th.m-dim {
 }
 
 /* Colored button, label */
-a.m-button, .m-label { color: var(--background-color); }
-a.m-button.m-default, .m-label:not(.m-flat).m-default { background-color: var(--default-color); }
-a.m-button.m-primary, .m-label:not(.m-flat).m-primary { background-color: var(--primary-color); }
-a.m-button.m-success, .m-label:not(.m-flat).m-success { background-color: var(--success-color); }
-a.m-button.m-warning, .m-label:not(.m-flat).m-warning { background-color: var(--warning-color); }
-a.m-button.m-danger, .m-label:not(.m-flat).m-danger { background-color: var(--danger-color); }
-a.m-button.m-info, .m-label:not(.m-flat).m-info { background-color: var(--info-color); }
-a.m-button.m-dim, .m-label:not(.m-flat).m-dim { background-color: var(--dim-color); }
-a.m-button.m-default:hover, a.m-button.m-default:focus, a.m-button.m-default:active {
+div.m-button a, .m-label { color: var(--background-color); }
+div.m-button.m-default a, .m-label:not(.m-flat).m-default { background-color: var(--default-color); }
+div.m-button.m-primary a, .m-label:not(.m-flat).m-primary { background-color: var(--primary-color); }
+div.m-button.m-success a, .m-label:not(.m-flat).m-success { background-color: var(--success-color); }
+div.m-button.m-warning a, .m-label:not(.m-flat).m-warning { background-color: var(--warning-color); }
+div.m-button.m-danger a, .m-label:not(.m-flat).m-danger { background-color: var(--danger-color); }
+div.m-button.m-info a, .m-label:not(.m-flat).m-info { background-color: var(--info-color); }
+div.m-button.m-dim a, .m-label:not(.m-flat).m-dim { background-color: var(--dim-color); }
+div.m-button.m-default a:hover, div.m-button.m-default a:focus, div.m-button.m-default a:active {
   background-color: var(--default-button-active-color);
 }
-a.m-button.m-primary:hover, a.m-button.m-primary:focus, a.m-button.m-primary:active {
+div.m-button.m-primary a:hover, div.m-button.m-primary a:focus, div.m-button.m-primary a:active {
   background-color: var(--primary-button-active-color);
 }
-a.m-button.m-success:hover, a.m-button.m-success:focus, a.m-button.m-success:active {
+div.m-button.m-success a:hover, div.m-button.m-success a:focus, div.m-button.m-success a:active {
   background-color: var(--success-button-active-color);
 }
-a.m-button.m-warning:hover, a.m-button.m-warning:focus, a.m-button.m-warning:active {
+div.m-button.m-warning a:hover, div.m-button.m-warning a:focus, div.m-button.m-warning a:active {
   background-color: var(--warning-button-active-color);
 }
-a.m-button.m-danger:hover, a.m-button.m-danger:focus, a.m-button.m-danger:active {
+div.m-button.m-danger a:hover, div.m-button.m-danger a:focus, div.m-button.m-danger a:active {
   background-color: var(--danger-button-active-color);
 }
-a.m-button.m-info:hover, a.m-button.m-info:focus, a.m-button.m-info:active {
+div.m-button.m-info a:hover, div.m-button.m-info a:focus, div.m-button.m-info a:active {
   background-color: var(--info-button-active-color);
 }
-a.m-button.m-dim:hover, a.m-button.m-dim:focus, a.m-button.m-dim:active {
+div.m-button.m-dim a:hover, div.m-button.m-dim a:focus, div.m-button.m-dim a:active {
   background-color: var(--dim-button-active-color);
 }
 
@@ -1392,7 +1394,7 @@ div.m-math.m-dim svg, svg.m-math.m-dim { fill: var(--dim-color); }
 /* Spacing after every block element, but not after the last */
 p, ul, ol, dl, blockquote, pre, figure.m-code-figure, figure.m-console-figure,
 hr, article, article > header, article section,
-.m-note, .m-frame, .m-block, .m-button,
+.m-note, .m-frame, .m-block, div.m-button,
 div.m-scroll, table.m-table, div.m-image, img.m-image, svg.m-image,
 figure.m-figure, .m-imagegrid, div.m-math {
   margin-bottom: 1rem;
@@ -1400,10 +1402,10 @@ figure.m-figure, .m-imagegrid, div.m-math {
 p:last-child, ul:last-child, ol:last-child, dl:last-child, blockquote:last-child,
 pre:last-child, figure.m-code-figure:last-child, figure.m-console-figure:last-child,
 hr:last-child, article:last-child, article section:last-child,
-.m-note:last-child, .m-frame:last-child, .m-block:last-child, .m-button:last-child,
-table.m-table:last-child, img.m-image:last-child, svg.m-image:last-child,
-div.m-image:last-child, figure.m-figure:last-child, .m-imagegrid:last-child,
-div.m-math:last-child {
+.m-note:last-child, .m-frame:last-child, .m-block:last-child,
+div.m-button:last-child, table.m-table:last-child,
+img.m-image:last-child, svg.m-image:last-child, div.m-image:last-child,
+figure.m-figure:last-child, .m-imagegrid:last-child, div.m-math:last-child {
   margin-bottom: 0;
 }
 
@@ -1413,8 +1415,7 @@ div.m-math:last-child {
 li > p:last-child, li > blockquote:last-child, li > pre:last-child,
 li > figure.m-code-figure:last-child, li > figure.m-console-figure:last-child,
 li > .m-note:last-child, li > .m-frame:last-child, li > .m-block:last-child,
-li > .m-button:last-child, li > div.m-scroll:last-child,
-li > table.m-table:last-child,
+li > div.m-button:last-child, li > div.m-scroll:last-child, li > table.m-table:last-child,
 li > img.m-image:last-child, li > svg.m-image:last-child, li > div.m-image:last-child,
 li > figure.m-figure:last-child, li > div.m-math:last-child {
   margin-bottom: 1rem;
@@ -1422,11 +1423,10 @@ li > figure.m-figure:last-child, li > div.m-math:last-child {
 li:last-child > p:last-child, li:last-child > blockquote:last-child, li:last-child > pre:last-child,
 li:last-child > figure.m-code-figure:last-child, li:last-child > figure.m-console-figure:last-child,
 li:last-child > .m-note:last-child, li:last-child > .m-frame:last-child, li:last-child > .m-block:last-child,
-li:last-child > .m-button:last-child, li:last-child > div.m-scroll:last-child,
-li:last-child > table.m-table:last-child,
-li:last-child > img.m-image:last-child, li:last-child > svg.m-image:last-child,
-li:last-child > div.m-image:last-child, li:last-child > figure.m-figure:last-child,
-li:last-child > div.m-math:last-child {
+li:last-child > div.m-button:last-child, li:last-child > div.m-scroll:last-child,
+li:last-child > table.m-table:last-child, li:last-child > img.m-image:last-child,
+li:last-child > svg.m-image:last-child, li:last-child > div.m-image:last-child,
+li:last-child > figure.m-figure:last-child, li:last-child > div.m-math:last-child {
   margin-bottom: 0;
 }
 

diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index a04b4dd268fd93b51efdca001984bf0168639f94..dbfd6edbdfade62389faeb63d6e800a731f0f73c 100644 (file)
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -1140,7 +1140,7 @@ List with components inside
         <div class="m-note m-info">An info note.</div>
       </li>
       <li>
-        <a class="m-button m-primary">A button</a>
+        <div class="m-button m-primary"><a href="#">A button</a></div>
       </li>
       <li>
         <p>Next item.</p>

diff --git a/doc/css/components.rst b/doc/css/components.rst
index 56614c8b58204f6a2eab6224adf9ff6759417ac9..481314b6bf2f7f5d5e77f956a54df7302eca6604 100644 (file)
--- a/doc/css/components.rst
+++ b/doc/css/components.rst
@@ -352,40 +352,38 @@ without using those particular tags.
 
 To highlight important links such as file download, you can style them as
 buttons. Use :css:`.m-button` CSS class together with desired color class on an
-:html:`<a>` tag. The button is by default displayed as inline block, either
-wrap it in :css:`.m-text-center` etc. :html:`<div>` to make it centered or
-apply a :css:`.m-fullwidth` class to it to display it as a full-width block
-with center-aligned label.
+:html:`<a>` tag. The button is by default centered, apply a :css:`.m-fullwidth`
+class to it to display it as a full-width block with center-aligned label.
 
 .. code-figure::
 
     .. code:: html
 
-        <a class="m-button m-success" href="#">Success button</a>
+        <div class="m-button m-success m-fullwidth"><a href="#">Success button</a></div>
 
     .. raw:: html
 
         <div class="m-row">
           <div class="m-col-m-3 m-col-s-6">
-            <a class="m-button m-default m-fullwidth" href="#">Default button</a>
+            <div class="m-button m-default m-fullwidth"><a href="#">Default button</a></div>
           </div>
           <div class="m-col-m-3 m-col-s-6">
-            <a class="m-button m-primary m-fullwidth" href="#">Primary button</a>
+            <div class="m-button m-primary m-fullwidth"><a href="#">Primary button</a></div>
           </div>
           <div class="m-col-m-3 m-col-s-6">
-            <a class="m-button m-success m-fullwidth" href="#">Success button</a>
+            <div class="m-button m-success m-fullwidth"><a href="#">Success button</a></div>
           </div>
           <div class="m-col-m-3 m-col-s-6">
-            <a class="m-button m-warning m-fullwidth" href="#">Warning button</a>
+            <div class="m-button m-warning m-fullwidth"><a href="#">Warning button</a></div>
           </div>
           <div class="m-col-m-3 m-col-s-6">
-            <a class="m-button m-danger m-fullwidth" href="#">Danger button</a>
+            <div class="m-button m-danger m-fullwidth"><a href="#">Danger button</a></div>
           </div>
           <div class="m-col-m-3 m-col-s-6">
-            <a class="m-button m-info m-fullwidth" href="#">Info button</a>
+            <div class="m-button m-info m-fullwidth"><a href="#">Info button</a></div>
           </div>
           <div class="m-col-m-3 m-col-s-6">
-            <a class="m-button m-dim m-fullwidth" href="#">Dim button</a>
+            <div class="m-button m-dim m-fullwidth"><a href="#">Dim button</a></div>
           </div>
         </div>
 
@@ -396,8 +394,8 @@ class inside the :html:`<a>` to achieve the following effect:
 
     .. code:: html
 
-        <div class="m-text-center">
-          <a class="m-button m-primary" href="#">
+        <div class="m-button m-primary">
+          <a href="#">
             <div class="m-big">Download the thing</div>
             <div class="m-small">Any platform, 5 kB.</div>
           </a>
@@ -405,8 +403,8 @@ class inside the :html:`<a>` to achieve the following effect:
 
     .. raw:: html
 
-        <div class="m-text-center">
-          <a class="m-button m-primary" href="#">
+        <div class="m-button m-primary">
+          <a href="#">
             <div class="m-big">Download the thing</div>
             <div class="m-small">Any platform, 5 kB.</div>
           </a>

diff --git a/pelican-plugins/m/components.py b/pelican-plugins/m/components.py
index 5b6ca88358e40c7d4bd42225d16e51370b40b0e0..be842ecaef2034c2136d24e81c426c68baa49de2 100644 (file)
--- a/pelican-plugins/m/components.py
+++ b/pelican-plugins/m/components.py
@@ -233,8 +233,7 @@ class Button(rst.Directive):
         set_classes(self.options)
 
         text = '\n'.join(self.content)
-        ref_node = nodes.reference(text, '', refuri=self.arguments[0], **self.options)
-        ref_node['classes'] += ['m-button', self.style_class]
+        ref_node = nodes.reference(text, '', refuri=self.arguments[0])
 
         if self.content:
             node = nodes.Element()          # anonymous container for parsing
@@ -266,7 +265,11 @@ class Button(rst.Directive):
                 description['classes'] += ['m-small']
                 ref_node += description
 
-        return [ref_node]
+        wrapper_node = nodes.container(**self.options)
+        wrapper_node['classes'] += ['m-button', self.style_class]
+        wrapper_node += ref_node
+
+        return [wrapper_node]
 
 class DefaultButton(Button):
     style_class = 'm-default'

diff --git a/pelican-plugins/m/test/components/page.html b/pelican-plugins/m/test/components/page.html
index 4f30ba61a0d0999bdbd6bdbefbf7fd6c47c9a5ac..fb2a6f2197b687ba49710253d3bc9c959bcd4e87 100644 (file)
--- a/pelican-plugins/m/test/components/page.html
+++ b/pelican-plugins/m/test/components/page.html
@@ -62,12 +62,16 @@ snippet</pre>
 <div class="m-text m-dim">
 Dim text.</div>
 <p class="m-transition">~ ~ ~</p>
-<a class="m-button m-warning" href="./page.html"><span>Button text.</span></a>
-<a class="m-button m-success" href="#"><div class="m-big">
+<div class="m-button m-warning">
+<a href="./page.html"><span>Button text.</span></a>
+</div>
+<div class="m-button m-success">
+<a href="#"><div class="m-big">
 First text.</div>
 <div class="m-small">
 Second text.</div>
 </a>
+</div>
 <!-- /content -->
       </div>
     </div>