heartwood every commit a ring

Improve print styles on property page

64464e2d by Isaac Bythewood · 3 years ago

modified properties/static_src/index.js
@@ -3,3 +3,5 @@ import "./scripts/property_map.js";import "./scripts/property_date_select.js";import "./scripts/property_custom_cards.js";import "./scripts/property_is_public.js";import "./styles/print.scss";
modified properties/static_src/scripts/property_graphs.js
@@ -54,6 +54,9 @@ document.addEventListener("DOMContentLoaded", function () {    options: {      responsive: true,      maintainAspectRatio: false,      animation: {        duration: 0,      },      plugins: {        tooltip: {          mode: "index",
added properties/static_src/styles/print.scss
@@ -0,0 +1,36 @@@media print {  @page {    size: A4;  }  html, body {    width: fit-content;    height: fit-content;  }  .container {    max-width: 100%;  }  #chart-total-events {    height: 300px;    page-break-after: always;  }  #doughnut-graphs {    width: 100%;    display: flex;    flex-wrap: wrap;    margin-bottom: 1.5rem;    page-break-after: always;  }  #doughnut-graphs > div {    width: 50%;    margin-bottom: 0;  }  .col-sm-6 {    width: 50%;  }}
modified properties/templates/properties/property.html
@@ -2,6 +2,11 @@{% load static %}{% block extra_css %}<link rel="stylesheet" href="{% static 'properties.css' %}">{% endblock %}{% block extra_js %}{{ total_events_graph|json_script:"chart-total-events-data" }}{{ total_events_by_browser|json_script:"chart-total-events-by-browser-data" }}
@@ -165,7 +170,7 @@        <div id="datamap"></div>      </div>    </div>    <div class="col-12 col-md-4">    <div id="doughnut-graphs" class="col-12 col-md-4">      <div class="bg-light mb-4 p-2 rounded">        <canvas id="chart-total-events-by-device"></canvas>      </div>
@@ -180,7 +185,7 @@      </div>    </div>  </div>  <div class="row justify-content-center">  <div id="top-lists" class="row justify-content-center">    {% if total_page_views_by_page_url|length > 0 %}    <div class="col-12 col-sm-6 col-lg-4 mb-5">      <ol class="list-group">