Browse Source

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
Geremia Taglialatela 8 years ago
parent
commit
39905502b8
3 changed files with 7 additions and 1 deletions
  1. 1 0
      src/assets/less/site.less
  2. 5 0
      src/assets/less/site/print.less
  3. 1 1
      src/cheatsheet.html

+ 1 - 0
src/assets/less/site.less

@@ -18,6 +18,7 @@
 @import "site/bootstrap/modals";
 @import "site/bootstrap/modals";
 
 
 @import "site/layout";
 @import "site/layout";
+@import "site/print";
 @import "site/social-buttons";
 @import "site/social-buttons";
 @import "site/jumbotron-carousel";
 @import "site/jumbotron-carousel";
 @import "site/stripe-ad";
 @import "site/stripe-ad";

+ 5 - 0
src/assets/less/site/print.less

@@ -0,0 +1,5 @@
+@media print {
+  .col-print-4 {
+    .make-xs-column(4);
+  }
+}

+ 1 - 1
src/cheatsheet.html

@@ -23,7 +23,7 @@ relative_path: ../
     {% assign sorted_icons = icons | expand_aliases | sort_by:'class' %}
     {% assign sorted_icons = icons | expand_aliases | sort_by:'class' %}
 
 
     {% for icon in sorted_icons %}
     {% 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 %}
       {% 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>
       <i class="fa fa-fw" aria-hidden="true" title="Copy to use {{ icon.class }}">&#x{{ icon.unicode }}</i>
       fa-{{ icon.class }}
       fa-{{ icon.class }}