Add base template for print views

- Add paper.css and some custom CSS
- Move meta information to meta.html to use it in normal and print base templates both

Note: In order to display headers and footers on all pages, there were needed a lot of (ugly) tricks.

aleksis/core/static/paper.css

+/*
+ * Copyright (c) 2015 Tsutomu Kawamura
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+@page { margin: 0 }
+body { margin: 0 }
+.sheet {
+  margin: 0;
+  overflow: hidden;
+  position: relative;
+  box-sizing: border-box;
+  page-break-after: always;
+}
+/** Paper sizes **/
+body.A3               .sheet { width: 297mm; min-height: 419mm }
+body.A3.landscape     .sheet { width: 420mm; min-height: 296mm }
+body.A4               .sheet { width: 210mm; min-height: 296mm }
+body.A4.landscape     .sheet { width: 297mm; min-height: 209mm }
+body.A5               .sheet { width: 148mm; min-height: 209mm }
+body.A5.landscape     .sheet { width: 210mm; min-height: 147mm }
+body.letter           .sheet { width: 216mm; min-height: 279mm }
+body.letter.landscape .sheet { width: 280mm; min-height: 215mm }
+body.legal            .sheet { width: 216mm; min-height: 356mm }
+body.legal.landscape  .sheet { width: 357mm; min-height: 215mm }
+/** Padding area **/
+.sheet.padding-10mm { padding: 10mm }
+.sheet.padding-15mm { padding: 15mm }
+.sheet.padding-20mm { padding: 20mm }
+.sheet.padding-25mm { padding: 25mm }
+/** For screen preview **/
+@media screen {
+  body { background: #e0e0e0 }
+  .sheet {
+    background: white;
+    box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
+    margin: 5mm auto;
+  }
+}
+/** Fix for Chrome issue #273306 **/
+@media print {
+           body.A3.landscape { width: 420mm }
+  body.A3, body.A4.landscape { width: 297mm }
+  body.A4, body.A5.landscape { width: 210mm }
+  body.A5                    { width: 148mm }
+  body.letter, body.legal    { width: 216mm }
+  body.letter.landscape      { width: 280mm }
+  body.legal.landscape       { width: 357mm }
+}

aleksis/core/static/print.css

+.sheet.infinitive {
+    height: auto !important;
+}
+
+@page {
+    size: A4;
+    padding: 30mm;
+}
+
+header {
+    display: block;
+    width: 190mm;
+}
+
+
+#print-header {
+    display: block !important;
+    border-bottom: 1px solid;
+    margin-bottom: 0;
+    height: 22mm;
+    background: white;
+}
+
+header, main, footer {
+    margin: 0;
+}
+
+#print-header .col.right-align {
+    padding: 15px;
+}
+
+.sheet {
+    padding: 10mm;
+}
+
+
+.header-space, .footer-space {
+    height: 0;
+}
+
+.print-layout-table td {
+    padding: 0;
+}
+
+.print-layout-table .no-border {
+    border: 0;
+}
+
+
+footer {
+    margin-top: 5mm;
+    text-align: center;
+    width: 190mm;
+
+}
+
+header .row, header .col {
+    padding: 0 !important;
+    margin: 0 !important;
+}
+
+#print-logo {
+    padding: 2mm;
+    height: 22mm;
+    width: auto;
+}
+
+@media print {
+    .header-space {
+        height: 35mm;
+    }
+
+    .footer-space {
+        height: 20mm
+    }
+
+    header, footer {
+        height: 22mm;
+    }
+
+    header {
+        position: fixed;
+        top: 10mm;
+    }
+
+    footer {
+        position: fixed;
+        bottom: 0;
+    }
+}

aleksis/core/templates/core/base.html

@@ -7,10 +7,7 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <meta name="description" content="{% blocktrans %}AlekSIS is a web-based school information system (SIS) which can be used to manage and/or publish organisational data of educational in titutions.{% endblocktrans %}">
+  {% include "core/meta.html" %}
 
   <title>
     {% block no_browser_title %}
@@ -19,14 +16,6 @@
     {{ config.SITE_TITLE }}
   </title>
 
-  {# Favicons #}
-  <link href="{% static "icons/favicon_16.png" %}" rel="icon" type="image/png" sizes="16x16">
-  <link href="{% static "icons/favicon_32.png" %}" rel="icon" type="image/png" sizes="32x32">
-  <link href="{% static "icons/favicon_48.png" %}" rel="icon" type="image/png" sizes="48x48">
-
-  <!-- PWA -->
-  {% progressive_web_app_meta %}
-
   {# CSS #}
   {% include_css "material-design-icons" %}
   <link rel="stylesheet" href="{% sass_src 'style.scss' %}">

aleksis/core/templates/core/base_print.html

+{% load static i18n any_js sass_tags cropping %}
+
+<!DOCTYPE html>
+<html>
+<head>
+  {% include "core/meta.html" %}
+
+  <title>
+    {% block no_browser_title %}
+      {% block browser_title %}{% endblock %} —
+    {% endblock %}
+    {{ config.SITE_TITLE }}
+  </title>
+
+  {% include_css "material-design-icons" %}
+  <link rel="stylesheet" href="{% static "paper.css" %}"/>
+  <link rel="stylesheet" href="{% sass_src 'style.scss' %}"/>
+  <link rel="stylesheet" href="{% static "print.css" %}"/>
+
+  {% block extra_head %}{% endblock %}
+</head>
+
+<body class="A4 print-body">
+<main class="sheet infinitive">
+  <div style="margin-top: -10mm;"></div>
+
+  <table class="print-layout-table">
+    <thead>
+    <tr class="no-border">
+      <td>
+        <div class="header-space">&nbsp;</div>
+      </td>
+    </tr>
+    </thead>
+
+    <tbody>
+    <tr class="no-border">
+      <td>
+        <div class="content">
+          <header>
+            <div id="print-header" class="row">
+              <div class="col s6 logo">
+                <img src="{% cropped_thumbnail SCHOOL 'logo_cropping' max_size="85x85" %}" alt="Logo" id="print-logo"/>
+              </div>
+              <div class="col s6 right-align">
+                <h5>{% block page_title %}{% endblock %}</h5>
+                {% now "DATETIME_FORMAT" %}
+              </div>
+            </div>
+          </header>
+
+          {% block content %}{% endblock %}
+
+          <footer>
+            <div class="left">
+              {{ SCHOOL.name }}
+            </div>
+
+            <div class="right">
+              {% trans "Powered by AlekSIS" %}
+            </div>
+          </footer>
+        </div>
+      </td>
+    </tr>
+    </tbody>
+
+    <tfoot>
+    <tr class="no-border">
+      <td>
+        <div class="footer-space">&nbsp;</div>
+      </td>
+    </tr>
+    </tfoot>
+  </table>
+</main>
+</body>
+</html>

aleksis/core/templates/core/meta.html

+{% load i18n static pwa %}
+
+{# Basic meta #}
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="description"
+      content="{% blocktrans %}AlekSIS is a web-based school information system (SIS) which can be used to manage and/or publish organisational data of educational in titutions.{% endblocktrans %}">
+
+{# Favicons #}
+<link href="{% static "icons/favicon_16.png" %}" rel="icon" type="image/png" sizes="16x16">
+<link href="{% static "icons/favicon_32.png" %}" rel="icon" type="image/png" sizes="32x32">
+<link href="{% static "icons/favicon_48.png" %}" rel="icon" type="image/png" sizes="48x48">
+
+{# PWA meta #}
+{% progressive_web_app_meta %}