css changed to fix history overflow

This commit is contained in:
2025-12-19 07:38:21 +01:00
parent cf260d616f
commit ff387316ac
3 changed files with 27 additions and 25 deletions
@@ -25,7 +25,7 @@
<div class="flex main-content">
<div class="left-section">
<div class="col">
<div class="col-chartype">
<!-- left column block Chartype -->
<div class="margin-bottom-3">
<div><strong>Typ</strong> Thaumaturg &nbsp;&nbsp; <strong>Grad</strong> 18</div>
@@ -55,7 +55,7 @@
<div class="attr-box attr-box-100"><div class="attr-label">Raufen</div><div class="attr-value">+ 5</div></div>
</div>
<!-- left column block boni -->
<div class="margin-top-5">
<div class="margin-top-2">
<div><strong>persönlicher Bonus für:</strong></div>
<div class="margin-top-2">
<div class="bonus-row"><span>Ausdauer <u>11</u></span><span>Schaden <u>2</u></span><span>Angriff <u>0</u></span></div>
@@ -64,7 +64,7 @@
</div>
</div>
<!-- center column block Charinfo -->
<div class="col">
<div class="col-charinfo">
<table class="charinfo">
<tr>
<td><strong>Geburtsdatum</strong></td>
@@ -100,14 +100,14 @@
</table>
</div>
<!-- left column block LPAP -->
<div class="margin-top-5">
<div class="margin-top-3">
<div class="attr-box attr-box-100"><div class="attr-label">LP-Max.</div><div class="attr-value">17</div></div>
<div class="attr-box attr-box-100"><div class="attr-label">AP-Max.</div><div class="attr-value">61</div></div>
<div class="attr-box attr-box-80"><div class="attr-label">GG</div><div class="attr-value">0</div></div>
<div class="attr-box attr-box-80"><div class="attr-label">SG</div><div class="attr-value">9</div></div>
</div>
<!-- left column block History -->
<div class="margin-top-5">
<div class="margin-top-2">
<table class="history-table">
<tr>
<th>Datum</th>
@@ -25,7 +25,7 @@
<div class="flex main-content">
<div class="left-section">
<div class="col">
<div class="col-chartype">
<!-- left column block Chartype -->
<div class="margin-bottom-3">
<div><strong>Typ</strong> {{.Character.Type}} &nbsp;&nbsp; <strong>Grad</strong> {{.Character.Grade}}</div>
@@ -55,7 +55,7 @@
<div class="attr-box attr-box-100"><div class="attr-label">Raufen</div><div class="attr-value">+ 5</div></div>
</div>
<!-- left column block boni -->
<div class="margin-top-5">
<div class="margin-top-2">
<div><strong>persönlicher Bonus für:</strong></div>
<div class="margin-top-2">
<div class="bonus-row"><span>Ausdauer <u>{{.DerivedValues.AusdauerBonus}}</u></span><span>Schaden <u>{{.DerivedValues.SchadenBonus}}</u></span><span>Angriff <u>{{.DerivedValues.AngriffBonus}}</u></span></div>
@@ -64,7 +64,7 @@
</div>
</div>
<!-- center column block Charinfo -->
<div class="col">
<div class="col-charinfo">
<table class="charinfo">
<tr>
<td><strong>Geburtsdatum</strong></td>
@@ -100,14 +100,14 @@
</table>
</div>
<!-- left column block LPAP -->
<div class="margin-top-5">
<div class="margin-top-3">
<div class="attr-box attr-box-100"><div class="attr-label">LP-Max.</div><div class="attr-value">{{.DerivedValues.LPMax}}</div></div>
<div class="attr-box attr-box-100"><div class="attr-label">AP-Max.</div><div class="attr-value">{{.DerivedValues.APMax}}</div></div>
<div class="attr-box attr-box-80"><div class="attr-label">GG</div><div class="attr-value">{{.DerivedValues.GG}}</div></div>
<div class="attr-box attr-box-80"><div class="attr-label">SG</div><div class="attr-value">{{.DerivedValues.SG}}</div></div>
</div>
<!-- left column block History -->
<div class="margin-top-5">
<div class="margin-top-2">
<table class="history-table">
<tr>
<th>Datum</th>
@@ -118,17 +118,17 @@
<tr>
<td>ES</td>
{{range .GameResults}}<td>{{.ES}}</td>{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td></td>{{end}}{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td>&nbsp;</td>{{end}}{{end}}
</tr>
<tr>
<td>EP</td>
{{range .GameResults}}<td>{{.EP}}</td>{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td></td>{{end}}{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td>&nbsp;</td>{{end}}{{end}}
</tr>
<tr>
<td>Geld</td>
{{range .GameResults}}<td>{{.Gold}}</td>{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td></td>{{end}}{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td>&nbsp;</td>{{end}}{{end}}
</tr>
<tr>
<th>Datum</th>
@@ -138,17 +138,17 @@
<tr>
<td>ES</td>
{{range .GameResults}}<td>{{.ES}}</td>{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td></td>{{end}}{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td>&nbsp;</td>{{end}}{{end}}
</tr>
<tr>
<td>EP</td>
{{range .GameResults}}<td>{{.ES}}</td>{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td></td>{{end}}{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td>&nbsp;</td>{{end}}{{end}}
</tr>
<tr>
<td>Geld</td>
{{range .GameResults}}<td>{{.Gold}}</td>{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td></td>{{end}}{{end}}
{{range $i := iterate 6}}{{if lt $i (len $.GameResults)}}<td>&nbsp;</td>{{end}}{{end}}
</tr>
</table>
</div>
@@ -1,9 +1,9 @@
@page { size: A4 landscape; margin: 1cm; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; font-size: 9pt; line-height: 1.2; }
.container { width: 277mm; height: 190mm; padding: 5mm; }
.container { width: 277mm; height: 190mm; padding: 1mm; }
table { border-collapse: collapse; width: 100%; height:74%; }
.charinfo{height:100%}
.charinfo{height:92%}
td, th { border: 1px solid #000; padding: 2px 4px; }
.header { display: flex; justify-content: space-between; font-size: 8pt; margin-bottom: 3mm; }
.header-left { font-weight: bold; }
@@ -17,23 +17,25 @@ td, th { border: 1px solid #000; padding: 2px 4px; }
.info-box { border: 2px solid #000; padding: 5px; margin: 5px 0; display: inline-block; min-width: 320px; font-size: 12pt; line-height: 1.8;}
.flex { display: flex; gap: 10px; }
.col { flex: 1; }
.col-chartype { flex: 1; }
.col-charinfo { flex: 1; }
.small { font-size: 8pt; }
.right { text-align: right; }
.main-content { margin-bottom: 5mm; }
.left-section { display: flex; gap: 4px; width: 50%; flex-wrap: wrap; }
.left-section { display: flex; gap: 2px; width: 50%; flex-wrap: wrap; }
.right-section { width: 50%; display: flex; flex-direction: column; height: 100%; }
.skills-content { flex: 1; display: flex; flex-direction: column; }
.margin-bottom-3 { margin-bottom: 3mm; }
.margin-top-5 { margin-top: 5mm; }
.left-section > .margin-top-5 { width: 100%; }
.left-section .history-table { width: 100%; }
.margin-top-2 { margin-top: 2mm; }
.bonus-row { display: flex; justify-content: space-between; font-size: 11pt; line-height: 1.5;}
.margin-top-3 { margin-top: 3mm; }
.margin-top-5 { margin-top: 5mm; }
.margin-bottom-3 { margin-bottom: 3mm; }
.left-section > .margin-top-5 { width: 100%; }
/*.left-section .history-table { width: 100%; line-height: 1; } */
.bonus-row { display: flex; justify-content: space-between; font-size: 11pt; line-height: 1.5;}
.attr-box-80 { min-width: 80px; }
.attr-box-100 { min-width: 100px; }
.attr-box-120 { min-width: 120px; }
.history-table { width: 400px; }
.history-table { line-height: 1; width: 400px; }
.skills-title { font-weight: bold; text-align: center; margin-bottom: 3mm; }
.skills-container { display: flex; gap: 5mm; width: 100%; }
.skills-table { font-size: 8pt; flex: 1; width: 50%; }