114 lines
4.3 KiB
HTML
114 lines
4.3 KiB
HTML
{% load i18n %}
|
||
<!DOCTYPE html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>{% trans "Этикетки оборудования" %} — ACORE</title>
|
||
<style>
|
||
@page { margin: 8mm; size: A4; }
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
|
||
color: #000;
|
||
background: #fff;
|
||
-webkit-print-color-adjust: exact;
|
||
print-color-adjust: exact;
|
||
}
|
||
.toolbar {
|
||
position: sticky; top: 0; z-index: 10;
|
||
display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;
|
||
padding: 0.75rem 1rem;
|
||
background: #f4f4f5;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
.toolbar button, .toolbar a {
|
||
font-size: 0.875rem; padding: 0.4rem 0.85rem;
|
||
border-radius: 0.375rem; border: 1px solid #ccc;
|
||
background: #fff; cursor: pointer; text-decoration: none; color: #111;
|
||
}
|
||
.toolbar .primary { background: #2563eb; color: #fff; border-color: #2563eb; }
|
||
.hint { font-size: 0.8125rem; color: #555; }
|
||
.sheet {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 5mm;
|
||
padding: 8mm;
|
||
align-content: flex-start;
|
||
}
|
||
.label {
|
||
position: relative;
|
||
border: 1px solid #222;
|
||
border-radius: 1mm;
|
||
overflow: hidden;
|
||
break-inside: avoid;
|
||
page-break-inside: avoid;
|
||
background: #fff;
|
||
color: #000;
|
||
}
|
||
.block {
|
||
position: absolute;
|
||
line-height: 1.2;
|
||
z-index: 1;
|
||
}
|
||
.block.code {
|
||
overflow: hidden;
|
||
}
|
||
.block.code img {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: contain;
|
||
display: block;
|
||
}
|
||
.block.text {
|
||
z-index: 2;
|
||
overflow: visible;
|
||
color: #000 !important;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
padding: 0;
|
||
}
|
||
@media print {
|
||
.toolbar { display: none !important; }
|
||
.sheet { padding: 0; gap: 4mm; }
|
||
.label { border-color: #000; }
|
||
.block.text { color: #000 !important; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="toolbar">
|
||
<button type="button" class="primary" onclick="window.print()">{% trans "Печать" %}</button>
|
||
<span class="hint">
|
||
{% trans "Этикеток" %}: {{ labels|length }} ·
|
||
{% trans "по шаблону" %}
|
||
{% if labels %}{{ labels.0.width_css }}×{{ labels.0.height_css }}{% else %}{{ template_width_mm }}×{{ template_height_mm }}{% endif %}
|
||
{% trans "мм" %}
|
||
</span>
|
||
<a href="/it-manager/equipment/labels/template/">{% trans "Редактировать шаблон" %}</a>
|
||
<a href="/it-manager/?tab=equipment">{% trans "К оборудованию" %}</a>
|
||
</div>
|
||
<div class="sheet">
|
||
{% for label in labels %}
|
||
<div class="label" style="width:{{ label.width_css }}mm; height:{{ label.height_css }}mm;">
|
||
{% for block in label.blocks %}
|
||
{% if block.type == 'qr' or block.type == 'ean13' %}
|
||
<div class="block code"
|
||
style="left:{{ block.x_css }}mm; top:{{ block.y_css }}mm; width:{{ block.w_css }}mm; height:{{ block.h_css }}mm;">
|
||
{% if block.png %}<img src="data:image/png;base64,{{ block.png }}" alt="{{ block.text }}">{% endif %}
|
||
</div>
|
||
{% else %}
|
||
<div class="block text"
|
||
style="left:{{ block.x_css }}mm; top:{{ block.y_css }}mm; width:{{ block.w_css }}mm; height:{{ block.h_css }}mm; font-size:{{ block.font_css }}pt; font-weight:{% if block.bold %}700{% else %}400{% endif %}; text-align:{{ block.align }};">{{ block.text }}</div>
|
||
{% endif %}
|
||
{% empty %}
|
||
<div style="padding:2mm; font-size:8pt; color:#b91c1c;">{% trans "Шаблон пуст — откройте редактор шаблона." %}</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% empty %}
|
||
<p style="padding:2rem;">{% trans "Не выбрано оборудование." %}</p>
|
||
{% endfor %}
|
||
</div>
|
||
</body>
|
||
</html>
|