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

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

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