Merge pull request #54 from Elthan/bug-53-fix-print

Fixed styling for print (#54)
devilry · Aug 1, 2018 · a8c3cd3 · a8c3cd3
2 parents 22fdb89 + f447174
commit a8c3cd3
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 7 deletions.
diff --git a/trix/trix_student/static/trix_student/dist/css/styles.css b/trix/trix_student/static/trix_student/dist/css/styles.css
@@ -8663,7 +8663,8 @@ fieldset[disabled] .btn-trix-admin.active {
 .trix-assignment {
   margin-top: 30px;
   margin-bottom: 30px;
-  padding: 15px 20px;
+  padding: 20px;
+  border-radius: 4px;
   font-size: 18px;
 }
 @media (min-width: 768px) {
@@ -8693,7 +8694,7 @@ fieldset[disabled] .btn-trix-admin.active {
   margin-left: 10px;
 }
 .trix-assignment .trix-assignmentsolution {
-  margin-top: 10px;
+  margin-top: 20px;
 }
 .trix-assignment .trix-assignmentsolution .trix-assignmentsolutionexpander {
   cursor: pointer;
@@ -9218,6 +9219,43 @@ body {
   background-color: #377CA8;
   display: none;
 }
+/**
+* Styles for printing
+**/
+@media print {
+  body {
+    background: white;
+    font-size: 12pt;
+  }
+  a[href]:after {
+    content: none !important;
+  }
+  .container > h1,
+  .container > p {
+    text-align: center;
+  }
+  .page-header {
+    margin-bottom: 0;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #aaa;
+  }
+  .trix-assignment {
+    background-color: white;
+    padding: 0;
+    border-bottom: 1px solid #bbb;
+  }
+  .assignment-tags > button {
+    border: 0;
+  }
+  .trix-markdownarticle {
+    height: auto !important;
+    display: block !important;
+    border: 0 !important;
+  }
+  .collapse {
+    display: block;
+  }
+}
 .codehilite {
   /* Comment */
   /* Error */

diff --git a/trix/trix_student/static/trix_student/src/less/assignments.less b/trix/trix_student/static/trix_student/src/less/assignments.less
@@ -18,7 +18,8 @@
     margin-bottom: 30px;
     // padding-top: 80px;
     // border-top: 1px solid #eee;
-    padding: 15px 20px;
+    padding: 20px;
+    border-radius: 4px;
     font-size: @trix-article-font-size;
 
     @media (min-width: @screen-sm-min) {
@@ -60,7 +61,7 @@
         }
     }
     .trix-assignmentsolution {
-        margin-top: 10px;
+        margin-top: 20px;
         .trix-assignmentsolutionexpander {
             cursor: pointer;
         }

diff --git a/trix/trix_student/static/trix_student/src/less/print.less b/trix/trix_student/static/trix_student/src/less/print.less
@@ -0,0 +1,49 @@
+/**
+* Styles for printing
+**/
+
+@media print {
+    body {
+        background: white;
+        font-size: 12pt;
+    }
+
+    a[href]:after {
+        content: none !important;
+    }
+
+    .container {
+        & > h1,
+        & > p {
+            text-align: center;
+        }
+    }
+
+    .page-header {
+        margin-bottom: 0;
+        padding-bottom: 20px;
+        border-bottom: 1px solid #aaa;
+    }
+
+    .trix-assignment {
+        background-color: white;
+        padding: 0;
+        border-bottom: 1px solid #bbb;
+    }
+
+    .assignment-tags {
+        & > button {
+            border: 0;
+        }
+    }
+
+    .trix-markdownarticle {
+        height: auto !important;
+        display: block !important;
+        border: 0 !important;
+    }
+
+    .collapse {
+        display: block;
+    }
+}
diff --git a/trix/trix_student/static/trix_student/src/less/styles.less b/trix/trix_student/static/trix_student/src/less/styles.less
@@ -13,6 +13,7 @@
 @import "tag-filter";
 @import "delete";
 @import "trix";
+@import "print";
 
 
 .codehilite {

diff --git a/trix/trix_student/templates/trix_student/assignment_list_base.django.html b/trix/trix_student/templates/trix_student/assignment_list_base.django.html
@@ -10,7 +10,7 @@
 
     <div class="container">
         <div class="row">
-            <div id="assignments-taggingbox" class="col-sm-3 col-sm-push-9 col-md-3 col-md-push-9">
+            <div id="assignments-taggingbox" class="col-sm-3 col-sm-push-9 col-md-3 col-md-push-9 trix-no-print">
                 {% if request.user.is_authenticated and assignmentlist_with_howsolved %}
                     <div ng-controller="AssignmentListProgressController"
                             class="assignments-progressbox"

diff --git a/trix/trix_student/templates/trix_student/include/assignment.django.html b/trix/trix_student/templates/trix_student/include/assignment.django.html
@@ -35,7 +35,7 @@ <h2 id="assignment-{{ assignment.id }}">
         {% trix_assignment_markdown assignment.text %}
     </section>
     {% if request.user.is_authenticated and not disable_howsolved_box %}
-        <div class="trix-assignmenthowsolved" ng-cloak>
+        <div class="trix-assignmenthowsolved trix-no-print" ng-cloak>
             <p>
                 {% trans "How did you solve the assignment?" %}
             </p>
@@ -82,7 +82,7 @@ <h2 id="assignment-{{ assignment.id }}">
                     class="trix-assignmentsolutionexpander"
                     ng-class="{'active': isVisible}">
                 {% trans "See solution" %}
-                <span class="fa" ng-class="{
+                <span class="fa trix-no-print" ng-class="{
                     'fa-angle-right': !isVisible,
                     'fa-angle-down': isVisible
                 }"></span>