Enhance page layout when exporting to PDF using dompdf
It's still not perfect. But better than previously. Using the pdfexport module is still recommended though.
This commit is contained in:
Johannes Meyer
parent
6d744e585f
commit
85c42f8400
|
|
@ -1,5 +1,6 @@
|
|||
<?php
|
||||
|
||||
use Icinga\Application\Icinga;
|
||||
use Icinga\Web\StyleSheet;
|
||||
|
||||
|
||||
|
|
@ -10,6 +11,9 @@ if ($moduleName !== 'default') {
|
|||
$moduleClass = '';
|
||||
}
|
||||
|
||||
$logoPath = Icinga::app()->getBootstrapDirectory() . '/img/icinga-logo-big-dark.png';
|
||||
$logo = base64_encode(file_get_contents($logoPath));
|
||||
|
||||
|
||||
?><!DOCTYPE html>
|
||||
<html>
|
||||
|
|
@ -20,33 +24,21 @@ if ($moduleName !== 'default') {
|
|||
<base href="<?= $this->serverUrl() ?>">
|
||||
</head>
|
||||
<body>
|
||||
<script type="text/php">
|
||||
// This attempt doesn't work :(
|
||||
if ( isset($pdf) )
|
||||
{
|
||||
$w = $pdf->get_width();
|
||||
$h = $pdf->get_height();
|
||||
$font = Font_Metrics::get_font("helvetica");
|
||||
$pdf->page_text($w -100, $h - 40, "Page {PAGE_NUM} of {PAGE_COUNT}", $font, 10, array(0,0,0));
|
||||
}
|
||||
|
||||
</script>
|
||||
<?= $this->img('img/icinga-logo-big-dark.png', null, array('align' => 'right', 'width' => '75')) ?>
|
||||
<!--<div id="page-header">
|
||||
<div id="header">
|
||||
<table>
|
||||
<tr>
|
||||
<td><?= $this->escape($this->title) ?></td>
|
||||
<td style="text-align: right;"></td>
|
||||
</tr>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th><?= $this->escape($this->title) ?></th>
|
||||
<td style="text-align: right;"><img width="75" src="data:image/png;base64,<?= $logo ?>"></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>-->
|
||||
<h1><?= $this->escape($this->title) ?></h1>
|
||||
<div id="col1" class="container<?= $moduleClass ?>">
|
||||
<?= $this->render('inline.phtml') ?>
|
||||
</div>
|
||||
|
||||
<div id="page-footer">
|
||||
<div id="footer">
|
||||
<div class="page-number"></div>
|
||||
</div>
|
||||
<div class="<?= $moduleClass ?>">
|
||||
<?= $this->render('inline.phtml') ?>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -126,13 +126,13 @@ class LessCompiler
|
|||
/**
|
||||
* Set the path to the LESS theme
|
||||
*
|
||||
* @param string $theme Path to the LESS theme
|
||||
* @param ?string $theme Path to the LESS theme
|
||||
*
|
||||
* @return $this
|
||||
*/
|
||||
public function setTheme($theme)
|
||||
{
|
||||
if (is_file($theme) && is_readable($theme)) {
|
||||
if ($theme === null || (is_file($theme) && is_readable($theme))) {
|
||||
$this->theme = $theme;
|
||||
} else {
|
||||
Logger::error('Can\t load theme %s. Make sure that the theme exists and is readable', $theme);
|
||||
|
|
|
|||
|
|
@ -187,6 +187,8 @@ class StyleSheet
|
|||
public static function forPdf()
|
||||
{
|
||||
$styleSheet = new self();
|
||||
$styleSheet->lessCompiler->setTheme(null);
|
||||
$styleSheet->lessCompiler->setThemeMode($styleSheet->pubPath . '/css/modes/none.less');
|
||||
$styleSheet->lessCompiler->addLessFile($styleSheet->pubPath . '/css/pdf/pdfprint.less');
|
||||
// TODO(el): Caching
|
||||
return $styleSheet;
|
||||
|
|
|
|||
|
|
@ -1,31 +1,9 @@
|
|||
/*! Icinga Web 2 | (c) 2015 Icinga Development Team | GPLv2+ */
|
||||
|
||||
// Print styles
|
||||
/*! Icinga Web 2 | (c) 2015 Icinga GmbH | GPLv2+ */
|
||||
|
||||
@media print {
|
||||
#fileupload-frame-target,
|
||||
#header,
|
||||
#responsive-debug,
|
||||
#sidebar,
|
||||
.controls > .tabs,
|
||||
.controls .filter,
|
||||
.controls .limiter-control,
|
||||
.controls .pagination-control,
|
||||
.controls .selection-info,
|
||||
.controls .sort-control,
|
||||
.controls,
|
||||
.dontprint, // Compat only, use dont-print instead
|
||||
.dont-print {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#layout,
|
||||
#main,
|
||||
.controls {
|
||||
position: static;
|
||||
}
|
||||
|
||||
.container {
|
||||
float: none !important;
|
||||
width: 100% !important;
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,71 +1,75 @@
|
|||
/*! Icinga Web 2 | (c) 2014 Icinga Development Team | GPLv2+ */
|
||||
/*! Icinga Web 2 | (c) 2014 Icinga GmbH | GPLv2+ */
|
||||
|
||||
.controls,
|
||||
.dontprint, // Compat only, use dont-print instead
|
||||
.dont-print {
|
||||
display: none !important;
|
||||
}
|
||||
// Ensure styling is light, exports use a white background
|
||||
|
||||
table.action img.inlinepie {
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
}
|
||||
@gray: #7F7F7F;
|
||||
@gray-semilight: #A9A9A9;
|
||||
@gray-light: #C9C9C9;
|
||||
@gray-lighter: #EEEEEE;
|
||||
@gray-lightest: #F7F7F7;
|
||||
@icinga-blue: #0095BF;
|
||||
@low-sat-blue: #dae3e6;
|
||||
@low-sat-blue-dark: #becbcf;
|
||||
@body-bg-color: #fff;
|
||||
@text-color: @black;
|
||||
@text-color-light: @gray;
|
||||
@tr-active-color: @body-bg-color;
|
||||
@tr-hover-color: @body-bg-color;
|
||||
|
||||
// Page layout
|
||||
|
||||
@page {
|
||||
margin: 2cm;
|
||||
margin: 1cm;
|
||||
}
|
||||
|
||||
.container * {
|
||||
font-size: 7pt;
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
margin: 0;
|
||||
padding-top: 37px; // ~ logo height in the header
|
||||
}
|
||||
|
||||
body > h1 {
|
||||
font-size: 1em;
|
||||
.content {
|
||||
font-size: 9pt;
|
||||
}
|
||||
|
||||
#page-header, #page-footer {
|
||||
font-family: fixed;
|
||||
font-weight: bold;
|
||||
#header,
|
||||
#footer {
|
||||
position: fixed;
|
||||
left: 1em;
|
||||
right: 1em;
|
||||
left: 0;
|
||||
right: 0;
|
||||
color: #aaa;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
#page-header table, #page-footer table {
|
||||
#header {
|
||||
top: 0;
|
||||
border-bottom: 0.1pt solid #aaa;
|
||||
|
||||
img {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
#footer {
|
||||
bottom: 0;
|
||||
border-top: 0.1pt solid #aaa;
|
||||
}
|
||||
|
||||
#header table,
|
||||
#footer table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#page-header table {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
#page-header td, #page-footer td {
|
||||
font-family: fixed;
|
||||
#header td,
|
||||
#header th,
|
||||
#footer td,
|
||||
#footer th {
|
||||
padding: 0;
|
||||
color: #aaa;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#page-header {
|
||||
top: 0.5em;
|
||||
border-bottom: 0.2pt solid #aaa;
|
||||
}
|
||||
|
||||
#page-footer {
|
||||
bottom: 2.5em;
|
||||
border-top: 0.2pt solid #aaa;
|
||||
}
|
||||
|
||||
@page {
|
||||
@bottom-right {
|
||||
content: counter(page) " of " counter(pages);
|
||||
}
|
||||
}
|
||||
|
||||
.page-number {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -79,19 +83,10 @@ hr {
|
|||
border: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0;
|
||||
}
|
||||
// General style
|
||||
|
||||
.dashboard > div.container {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
h1 form {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 1cm 1cm 1.5cm 1cm;
|
||||
.controls,
|
||||
.dontprint, // Compat only, use dont-print instead
|
||||
.dont-print {
|
||||
display: none !important;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue