print report css [#34]

Rello · Apr 4, 2020 · 7eb91d0 · 7eb91d0
1 parent 75dffb4
commit 7eb91d0
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 19 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,11 +3,13 @@
 ## 2.2.0 - 2020-04-xx
 ### Added
 - chart type: doughnut
-- customizable chart options [#30](https://github.com/rello/analytics/issues/30)
+- advanced chart options [#30](https://github.com/rello/analytics/issues/30)
+- print report css [#34](https://github.com/rello/analytics/issues/34)
 
 ### Fixed
 - handle German date format in input form
 - regex not working - options field too short [#31](https://github.com/rello/analytics/issues/31)
+- frontend doesn't respect the users timezone [#17](https://github.com/rello/analytics/issues/17)
 
 ## 2.1.1 - 2020-03-12
 ### Fixed

diff --git a/css/print.scss b/css/print.scss
@@ -0,0 +1,37 @@
+@media print {
+ /* hide stuff */
+ #body-user {
+ #header,
+ div#app-navigation,
+ #app-navigation-toggle,
+ #app-navigation-toggle-custom,
+ #tableContainer_filter,
+ #tableContainer_length,
+ #tableContainer_paginate,
+ #chartMenuContainer {
+ display: none !important;
+ }
+
+ #content {
+ margin: 0;
+ padding: 0;
+ }
+
+ #app-content {
+ margin: 0 !important;
+ }
+ }
+
+ div#app-navigation-toggle.icon-menu {
+ display: block;
+ width: 0px;
+ height: 0px;
+ background: none;
+ }
+
+ /* Layout */
+ @page {
+ size: A4 portrait;
+ margin: 20mm 0 10mm 0;
+ }
+}
diff --git a/css/style.scss b/css/style.scss
@@ -64,3 +64,8 @@
 table.dataTable tbody tr {
  background-color: var(--color-main-background) !important;
 }
+
+/**
+ * Print settings, better leave them at the eof
+ */
+@import 'print.scss';
diff --git a/js/app.js b/js/app.js
@@ -204,7 +204,10 @@ OCA.Analytics.UI = {
  legend: {
  display: false,
  position: 'bottom'
- }
+ },
+ animation: {
+ duration: 0 // general animation time
+ },
  };
 
  for (let values of jsondata.data) {
@@ -401,4 +404,8 @@ document.addEventListener('DOMContentLoaded', function () {
  $('#myInput').on('keyup', function () {
  table.search(this.value).draw();
  });
+
+ window.addEventListener("beforeprint", function (event) {
+ document.getElementById('chartContainer').style.height = document.getElementById('myChart').style.height;
+ });
 });
diff --git a/templates/part.content.php b/templates/part.content.php
@@ -9,28 +9,26 @@
  * @copyright 2020 Marcel Scherello
  */
 ?>
-<div id="analytics-content" style="width:100%; padding: 10px" hidden>
+<div id="analytics-content" style="width:100%; padding: 20px 40px;" hidden>
  <input type="hidden" name="sharingToken" value="<?php p($_['token']); ?>" id="sharingToken">
  <input type="hidden" name="dataset" value="" id="datasetId">
  <input type="hidden" name="advanced" value="false" id="advanced">
  <h2 id="dataHeader" style="text-align: center;"></h2>
- <h3 id="dataSubHeader" style="text-align: center;"></h3>
- <div style="width:100%; padding: 20px">
- <div id="drilldown" style="display: none" hidden>
- <?php p($l->t('Drilldown')); ?>
- <input type="checkbox" id="checkBoxObject" class="checkbox" checked>
- <label for="checkBoxObject"><?php //p($l->t('Object')); ?></label>
- <input type="hidden" id="checkBoxDate" class="checkbox" checked>
- </div>
- <div id="chartMenuContainer" style="height: 16px;">
- <div id="chart-legend" class="icon icon-menu" style="right: 30px;position: absolute;"></div>
- </div>
- <div id="chartContainer"
- style="position: relative; min-width: 310px; height: 400px; margin-bottom: 30px;">
- <canvas id="myChart"></canvas>
- </div>
- <table id="tableContainer" style="width:100%; height: 50%;"></table>
+ <h3 id="dataSubHeader" style="text-align: center; padding-bottom: 30px"></h3>
+ <div id="drilldown" style="display: none" hidden>
+ <?php p($l->t('Drilldown')); ?>
+ <input type="checkbox" id="checkBoxObject" class="checkbox" checked>
+ <label for="checkBoxObject"><?php //p($l->t('Object')); ?></label>
+ <input type="hidden" id="checkBoxDate" class="checkbox" checked>
  </div>
+ <div id="chartMenuContainer" style="height: 16px;">
+ <div id="chart-legend" class="icon icon-menu" style="right: 45px;position: absolute;"></div>
+ </div>
+ <div id="chartContainer"
+ style="position: relative; min-width: 310px; height:40vh; width:99%; margin-bottom: 60px;">
+ <canvas id="myChart"></canvas>
+ </div>
+ <table id="tableContainer" style="width:100%; height: 50%;"></table>
 </div>
 <div id="analytics-intro" style="width:50%; padding: 50px" hidden>
  <h2><?php p($l->t('Data Analytics')); ?></h2>