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 năm trước cách đây
mục cha
commit
39905502b8
3 tập tin đã thay đổi với 7 bổ sung1 xóa
  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/layout";
+@import "site/print";
 @import "site/social-buttons";
 @import "site/jumbotron-carousel";
 @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' %}
 
     {% 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 }}