Commit 9577511b authored by Jens Ehlers's avatar Jens Ehlers
Browse files

#1 print view styles and generated PDF file

parent 47ebc80e
Pipeline #8009 failed with stage
in 39 seconds
...@@ -14,7 +14,8 @@ ...@@ -14,7 +14,8 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async></script>
<script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} });</script> <script type="text/x-mathjax-config">MathJax.Hub.Config({ tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]} });</script>
<script src="js/bootstrap-4-navbar.js"></script> <script src="js/bootstrap-4-navbar.js"></script>
<script src="js/prism.js"></script> <script src="js/prism.js"></script>
<script src="https://kit.fontawesome.com/083ef4a4ae.js"></script>
<script> <script>
// document ready handler // document ready handler
...@@ -51,13 +52,27 @@ ...@@ -51,13 +52,27 @@
// open external links in new tab // open external links in new tab
$("#" + filename + " a").each(function() { $("#" + filename + " a").each(function() {
var href = $(this).attr('href'); var href = $(this).attr('href');
if (href.startsWith("http")) $(this).attr('target', '_blank'); if (typeof href !== "undefined" && href.startsWith("http")) $(this).attr('target', '_blank');
}); });
// generate listing titles for print view
$("#" + filename + " .tab-pane").each(function() {
var title = $('a[href="#'+ $(this).attr('id') +'"]').html();
$(this).prepend('<div class="print-title">' + title + '</div>');
});
// display all listings below each other for print view
if (urlParams.get('show') == "all") {
$('.tab-pane').css('display', 'block');
}
}); });
var id = $(this).parent().attr('id').replace('content-', ''); var id = $(this).parent().attr('id').replace('content-', '');
var title = $('#' + id).html(); var title = $('#' + id).html();
$("#content-" + id).prepend("<h3>"+title+"</h3>"); $("#content-" + id).prepend("<h3>"+title+"</h3>");
// page break before each h3 in print view
$("h3").each(function() { $(this).addClass('page-break'); });
}); });
// search event handlers // search event handlers
...@@ -78,6 +93,18 @@ ...@@ -78,6 +93,18 @@
} }
}); });
// display all units for pdf export
var urlParams = new URLSearchParams(window.location.search);
if (urlParams.get('show') == "all") {
$("[id^=content-unit-]").show();
}
// generate toc for print view
$('.toc').append($('.navbar-nav').clone());
$('.toc').find('.navbar-nav').removeClass('navbar-nav');
$('.toc').find('.dropdown-menu').removeClass('dropdown-menu');
$('.toc').find('.dropdown-toggle').removeClass('dropdown-toggle');
// finish preloading animation // finish preloading animation
$(window).on("load", function() { $(window).on("load", function() {
$("body").addClass("loaded"); $("body").addClass("loaded");
...@@ -144,7 +171,24 @@ ...@@ -144,7 +171,24 @@
mark { background-color: yellow; } mark { background-color: yellow; }
b, th { font-weight: 600; } b, th { font-weight: 600; }
td { vertical-align: top; } td { vertical-align: top; }
.table-head-row { background-color: #ccc; } .table-head-row { background-color: #ccc; }
#pdf { z-index: 100; position: absolute; top: 10px; right: 10px; width: 24px; }
#pdf a { color: #ffffff; font-size: 24px; }
@media screen { .credits, .toc, .print-title { display: none; } }
@media print {
@page { margin: 2cm; }
.page-break { page-break-before: always; }
#content { display: table; }
.jumbotron { background-image: none; background-color: white; }
.jumbotron .lead, .jumbotron h1 { color: #212529; }
.jumbotron .lead { font-size: 20pt; margin-bottom: 31cm; }
.credits, .toc { color: #212529; padding-left: 15px; page-break-after: always; }
#pdf, .nav-tabs, .overlay { display: none; }
.print-title { font-weight: 600; }
.tab-pane { page-break-inside: avoid; }
pre code { font-size: 12px; }
}
</style> </style>
</head> </head>
<body> <body>
...@@ -160,7 +204,13 @@ ...@@ -160,7 +204,13 @@
<h1 class="display-4">Patterns und Frameworks</h1> <h1 class="display-4">Patterns und Frameworks</h1>
<p class="lead">für die Entwicklung paralleler und verteilter Anwendungen in Java</p> <p class="lead">für die Entwicklung paralleler und verteilter Anwendungen in Java</p>
</div> </div>
<div class="credits">
<p>Verfasser: Prof. Dr. Jens Ehlers, Technische Hochschule Lübeck</p>
<p>Webseite: <a href="https://oncampus.pages.th-luebeck.de/patterns-and-frameworks">https://oncampus.pages.th-luebeck.de/patterns-and-frameworks</a></p>
<p>GitLab: <a href="https://git.mylab.th-luebeck.de/oncampus/patterns-and-frameworks">https://git.mylab.th-luebeck.de/oncampus/patterns-and-frameworks</a></p>
</div>
</div> </div>
<div class="toc"><h3>Inhaltsverzeichnis</h3></div>
<nav class="navbar navbar-expand-lg navbar-light"> <nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
...@@ -216,41 +266,42 @@ ...@@ -216,41 +266,42 @@
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown">Verteilte Programmierung</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown">Verteilte Programmierung</a>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" id="unit-distributed-communication">Kommunikation und Skalierbarkeit im verteilten System</a> <li><a class="dropdown-item" id="unit-distributed-communication">Kommunikation und Skalierbarkeit im verteilten System</a></li>
<a class="dropdown-item" id="unit-rmi">Remote Method Invocation (RMI)</a> <li><a class="dropdown-item" id="unit-rmi">Remote Method Invocation (RMI)</a></li>
<a class="dropdown-item" id="unit-soap">SOAP-Webservices</a> <li><a class="dropdown-item" id="unit-soap">SOAP-Webservices</a></li>
<a class="dropdown-item" id="unit-rest">REST-Webservices</a> <li><a class="dropdown-item" id="unit-rest">REST-Webservices</a></li>
<a class="dropdown-item" id="unit-orm">Object-Relational Mapping (ORM)</a> <li><a class="dropdown-item" id="unit-orm">Object-Relational Mapping (ORM)</a></li>
<a class="dropdown-item" id="unit-spring">REST und Reactive Streams in Spring</a> <li><a class="dropdown-item" id="unit-spring">REST und Reactive Streams in Spring</a></li>
<a class="dropdown-item" id="unit-websocket">WebSockets</a> <li><a class="dropdown-item" id="unit-websocket">WebSockets</a></li>
<a class="dropdown-item" id="unit-socket">Sockets</a> <li><a class="dropdown-item" id="unit-socket">Sockets</a></li>
</div> </ul>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown">Nebenläufige Programmierung</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown">Nebenläufige Programmierung</a>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" id="unit-threads">Threads in Java</a> <li> <a class="dropdown-item" id="unit-threads">Threads in Java</a></li>
<a class="dropdown-item" id="unit-sync">Synchronisation von Threads</a> <li> <a class="dropdown-item" id="unit-sync">Synchronisation von Threads</a></li>
<a class="dropdown-item" id="unit-streams">Futures und parallele Streams</a> <li> <a class="dropdown-item" id="unit-streams">Futures und parallele Streams</a></li>
</div> </ul>
</li> </li>
<li class="nav-item dropdown"> <li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown">UI-Frameworks</a> <a class="nav-link dropdown-toggle" data-toggle="dropdown">UI-Frameworks</a>
<div class="dropdown-menu"> <ul class="dropdown-menu">
<a class="dropdown-item" id="unit-javafx">Desktop-Anwendungen mit JavaFX</a> <li><a class="dropdown-item" id="unit-javafx">Desktop-Anwendungen mit JavaFX</a></li>
<a class="dropdown-item" id="unit-web">Web-Anwendungen mit jQuery und Angular</a> <li><a class="dropdown-item" id="unit-web">Web-Anwendungen mit jQuery und Angular</a></li>
</div> </ul>
</li> </li>
</ul> </ul>
<div id="search"> <div id="search">
<input class="form-control" type="text" placeholder="Suche (min. 3 Zeichen)" aria-label="Search"> <input class="form-control" type="text" placeholder="Suche (min. 3 Zeichen)" aria-label="Search">
<span id="unit-search-results" style="display: none">Suchergebnisse</span> <span id="unit-search-results" style="display: none">Suchergebnisse</span>
</div> </div>
</div> </div>
</nav> </nav>
<div id="content" style="padding:30px"> <div id="content" style="padding:30px">
<div id="pdf"><a href="patterns-and-frameworks.pdf"><i class="far fa-file-pdf"></i></a></div>
<div id="content-unit-goals"> <div id="content-unit-goals">
<div class="unit-part" id="intro-goals"></div> <div class="unit-part" id="intro-goals"></div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment