Fix cheatsheet print layout

This PR changes the print layout, showing three icons per row instead of
one. In this way we can solve an issue with the Bootstrap grid, which
for some reason limits the output to three pages when printing the
cheatsheet.

Fix: #10395

diff --git a/src/assets/less/site.less b/src/assets/less/site.less
index 5207be2e4abb6438d47363a4f4b62fe2dc62cc1e..54bf1da088ca6785b4ac84bfd35e8f3061946f22 100644 (file)
--- a/src/assets/less/site.less
+++ b/src/assets/less/site.less
@@ -18,6 +18,7 @@
 @import "site/bootstrap/modals";
 
 @import "site/layout";
+@import "site/print";
 @import "site/social-buttons";
 @import "site/jumbotron-carousel";
 @import "site/stripe-ad";

diff --git a/src/assets/less/site/print.less b/src/assets/less/site/print.less
new file mode 100644 (file)
index 0000000..5ebe6a8
--- /dev/null
+++ b/src/assets/less/site/print.less
@@ -0,0 +1,5 @@
+@media print {
+  .col-print-4 {
+    .make-xs-column(4);
+  }
+}

diff --git a/src/cheatsheet.html b/src/cheatsheet.html
index d33e22ca4e451d3842a4053fa90cf23dc5bc791f..6a9efcbd4fbb7ed99a3cd9a897ce868c51fe589a 100644 (file)
--- a/src/cheatsheet.html
+++ b/src/cheatsheet.html
@@ -23,7 +23,7 @@ relative_path: ../
     {% assign sorted_icons = icons | expand_aliases | sort_by:'class' %}
 
     {% for icon in sorted_icons %}
-    <div class="col-md-4 col-sm-6 col-lg-3">
+    <div class="col-md-4 col-sm-6 col-lg-3 col-print-4">
       {% if icon.created >= site.fontawesome.major_version %}<small class="text-muted pull-right">{{ icon.created }}</small>{% endif %}
       <i class="fa fa-fw" aria-hidden="true" title="Copy to use {{ icon.class }}">&#x{{ icon.unicode }}</i>
       fa-{{ icon.class }}