pcvolkmer/etl-processor
1
0
Fork 0
mirror of https://github.com/pcvolkmer/etl-processor.git synced 2025-04-19 17:26:51 +00:00
Code Issues Releases Activity

style: fix statistics chart layout

Browse Source
This commit is contained in:
Paul-Christian Volkmer 2024-03-04 16:33:52 +01:00
parent 6806c4fd69
commit b1a83510a6
2 changed files with 26 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/main/resources/static/style.css
View File

@ -490,7 +490,7 @@ td.clipboard.clipped {
.btn:active,
.btn:hover {
filter: drop-shadow(1px 1px 1px gray) var(--dark);
filter: drop-shadow(0px 1px 1px var(--bg-gray)) var(--dark);
}
.btn:active {
@ -555,15 +555,24 @@ input.inline:focus-visible {
font-weight: bold;
}
.chart {
width: calc(100% - 2.4rem - 4px);
height: 320px;
display: inline-block;
.charts {
display: grid;
grid-gap: 1em;
grid-template:
"a b" 28em
"c c" 28em / 1fr 1fr;
}
.chart-50pc {
width: calc(50% - 2.4rem - 4px);
.charts > .grid-left {
grid-area: a;
}
.charts > .grid-right {
grid-area: b;
}
.charts > .grid-full {
grid-area: c;
}
.connection-display {
@ -571,7 +580,7 @@ input.inline:focus-visible {
grid-template-columns: 10em 16em 10em;
place-items: center;
width: fit-content;
margin: 1em 0;
margin: 1em auto;
}
.connection-display > * {

16
src/main/resources/templates/statistics.html
View File

@ -18,11 +18,11 @@
<p>
Anfragen zur Aktualisierung von Patientendaten durch Übermittlung eines MTB-Files.
</p>
<div>
<div id="piechart1" class="chart chart-50pc"></div>
<div id="piechart2" class="chart chart-50pc"></div>
<div class="charts">
<div id="piechart1" class="chart grid-left"></div>
<div id="piechart2" class="chart grid-right"></div>
<div id="barchart" class="chart grid-full"></div>
</div>
<div id="barchart" class="chart"></div>
</section>
<section>
@ -30,11 +30,11 @@
<p>
Anfragen zur Löschung von Patientendaten, wenn kein Consent vorliegt.
</p>
<div>
<div id="piechartdel1" class="chart chart-50pc"></div>
<div id="piechartdel2" class="chart chart-50pc"></div>
<div class="charts">
<div id="piechartdel1" class="chart grid-left"></div>
<div id="piechartdel2" class="chart grid-right"></div>
<div id="barchartdel" class="chart grid-full"></div>
</div>
<div id="barchartdel" class="chart"></div>
</section>
</main>