improve token styling
This commit is contained in:
parent
d4605b952e
commit
ef6145dfb6
4
app.py
4
app.py
@ -1224,7 +1224,9 @@ def create_token(subpath):
|
||||
token_qr_code=img_base64,
|
||||
token_folder=token_item.get('folders'),
|
||||
token_url=url,
|
||||
token_valid_to=token_item.get('validity', 'Unbekannt')
|
||||
token_valid_to=token_item.get('validity', 'Unbekannt'),
|
||||
title_short=auth.return_app_config().get('TITLE_SHORT', ''),
|
||||
title_long=auth.return_app_config().get('TITLE_LONG', '')
|
||||
)
|
||||
|
||||
|
||||
|
||||
@ -79,10 +79,6 @@ body {
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* Carded content shell */
|
||||
main.tab-content,
|
||||
section.tab-content {
|
||||
@ -275,7 +271,7 @@ div.directory-item a, li.directory-item a, li.file-item a, li.link-item a {
|
||||
/* Grid Layout for Directories */
|
||||
.directories-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
column-gap: 14px;
|
||||
row-gap: 0;
|
||||
text-align: center;
|
||||
@ -374,7 +370,7 @@ footer .audio-player-container {
|
||||
#transcriptModal .modal-content {
|
||||
background-color: #fff;
|
||||
margin: 5% auto;
|
||||
padding: 20px;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
width: 90%;
|
||||
max-width: 800px;
|
||||
|
||||
@ -26,3 +26,44 @@ function toClipboard(url) {
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
}
|
||||
|
||||
function printToken() {
|
||||
const printable = document.getElementById('tokenPrintable');
|
||||
if (!printable) {
|
||||
console.error('Token printable content not found.');
|
||||
return;
|
||||
}
|
||||
|
||||
const clone = printable.cloneNode(true);
|
||||
clone.querySelectorAll('.token-action-buttons').forEach(el => el.remove());
|
||||
|
||||
const styles = Array.from(document.querySelectorAll('link[rel="stylesheet"], style'))
|
||||
.map(node => node.outerHTML)
|
||||
.join('\n');
|
||||
|
||||
const popup = window.open('', '_blank', 'width=900,height=1200');
|
||||
if (!popup) {
|
||||
alert('Bitte Popups erlauben, um das PDF zu speichern.');
|
||||
return;
|
||||
}
|
||||
|
||||
popup.document.write(`<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Token PDF</title>
|
||||
${styles}
|
||||
<style>
|
||||
body { padding: 24px; }
|
||||
.token-action-buttons { display: none !important; }
|
||||
.card { box-shadow: none !important; }
|
||||
</style>
|
||||
</head>
|
||||
<body>${clone.outerHTML}</body>
|
||||
</html>`);
|
||||
popup.document.close();
|
||||
popup.focus();
|
||||
popup.onload = () => {
|
||||
popup.print();
|
||||
popup.close();
|
||||
};
|
||||
}
|
||||
|
||||
80
static/token.css
Normal file
80
static/token.css
Normal file
@ -0,0 +1,80 @@
|
||||
.token-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
#tokenPrintable .qr-code {
|
||||
max-width: 420px;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#tokenPrintable .token-qr-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#tokenPrintable .token-pdf-logo {
|
||||
max-width: 120px;
|
||||
width: 28%;
|
||||
min-width: 80px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
margin: 0;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.8)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
#tokenPrintable .token-folder-title {
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
|
||||
#tokenPrintable .token-page-title {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
#tokenPrintable .copy-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
border: 1px solid #007bff;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
#tokenPrintable .copy-btn:active {
|
||||
background-color: #0056b3;
|
||||
border-color: #0056b3;
|
||||
}
|
||||
|
||||
@media print {
|
||||
.token-action-buttons {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#tokenPrintable .qr-code {
|
||||
max-width: 620px;
|
||||
width: 90% !important;
|
||||
}
|
||||
|
||||
#tokenPrintable .token-pdf-logo {
|
||||
max-width: 140px;
|
||||
width: 24%;
|
||||
}
|
||||
|
||||
#tokenPrintable .token-qr-wrap {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@ -1,51 +1,34 @@
|
||||
<style>
|
||||
.container-fluid {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.qr-code {
|
||||
max-width: 300px;
|
||||
display: block;
|
||||
margin: auto;
|
||||
}
|
||||
.copy-btn {
|
||||
margin-top: 1rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
cursor: pointer;
|
||||
border: 1px solid #007bff;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
.copy-btn:active {
|
||||
background-color: #0056b3;
|
||||
border-color: #0056b3;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ url_for('static', filename='token.css') }}">
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="card h-100 shadow-sm">
|
||||
<img src="data:image/png;base64,{{ token_qr_code }}" class="card-img-top qr-code p-3" alt="QR Code for token">
|
||||
<div class="container-fluid token-container">
|
||||
{% set folder_names = token_folder | map(attribute='foldername') | list %}
|
||||
<div class="card h-100 shadow-sm text-center" id="tokenPrintable">
|
||||
<h2 class="token-page-title">{{ title_long }}</h2>
|
||||
{% if folder_names %}
|
||||
<h3 class="token-folder-title">{{ folder_names | join(', ') }}</h3>
|
||||
{% endif %}
|
||||
<div class="token-qr-wrap mt-3">
|
||||
<img src="/custom_logo/logoW.png" class="token-pdf-logo" alt="Logo">
|
||||
<img src="data:image/png;base64,{{ token_qr_code }}" class="card-img-top qr-code p-3" alt="QR Code for token">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="card-text mt-2">
|
||||
<h2 class="card-title">Token-Link:</h2>
|
||||
<a href="{{ token_url }}" class="copy-btn" style="text-decoration: none;" id="tokenLink">Link öffnen</a>
|
||||
<button class="copy-btn" onclick="toClipboard('{{ token_url }}')">Link kopieren</button>
|
||||
<div class="token-action-buttons d-flex flex-wrap gap-2 justify-content-center text-center">
|
||||
<a href="{{ token_url }}" class="copy-btn" style="text-decoration: none;" id="tokenLink">Link öffnen</a>
|
||||
<button class="copy-btn" onclick="toClipboard('{{ token_url }}')">Link kopieren</button>
|
||||
<button class="copy-btn" id="printTokenButton" type="button" onclick="printToken()">Drucken</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-text mt-2">
|
||||
<h2 class="mt-3">Gültig bis:</h2>
|
||||
{{ token_valid_to }}
|
||||
</div>
|
||||
<div class="card-text mt-2">
|
||||
<!-- <div class="card-text mt-2">
|
||||
<h2 class="mt-3">Ordner:</h2>
|
||||
{% for folder in token_folder %}
|
||||
{{ folder.foldername }}<br>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user