feat: Added meters for vaccination rates
This commit is contained in:
parent
61e6cb2806
commit
ec2064fd6d
2 changed files with 40 additions and 0 deletions
|
@ -33,6 +33,17 @@
|
||||||
Für die Zweitimpfungen sind am <em>{{ data_second_vaccination['extrapolation_mean_seven_days']['date_herd_immunity_str'] }}</em> {{ herd_immunity }} % erreicht und am <em>{{ data_second_vaccination['extrapolation_mean_seven_days']['date_done_str'] }}</em> 100 %.
|
Für die Zweitimpfungen sind am <em>{{ data_second_vaccination['extrapolation_mean_seven_days']['date_herd_immunity_str'] }}</em> {{ herd_immunity }} % erreicht und am <em>{{ data_second_vaccination['extrapolation_mean_seven_days']['date_done_str'] }}</em> 100 %.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
|
<section>
|
||||||
|
<h1>Impffortschritt</h1>
|
||||||
|
<div class="labelled_meter">
|
||||||
|
<meter name="first_vaccination_percentage" value="{{ data_first_vaccination.total_percentage }}" max="100" title="{{ '{:.3n}'.format(data_first_vaccination.total_percentage) }} %"/>
|
||||||
|
<label for="first_vaccination_percentage">Erstimpfungen: <em>{{ '{:.3n}'.format(data_first_vaccination.total_percentage) }} %</em></label>
|
||||||
|
</div>
|
||||||
|
<div class="labelled_meter">
|
||||||
|
<meter name="second_vaccination_percentage" value="{{ data_second_vaccination.total_percentage }}" max="100" title="{{ '{:.3n}'.format(data_second_vaccination.total_percentage) }} %"/>
|
||||||
|
<label for="second_vaccination_percentage">Zweitimpfungen: <em>{{ '{:.3n}'.format(data_second_vaccination.total_percentage) }} %</em></label>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
<!--<section>
|
<!--<section>
|
||||||
<h1>Details</h1>
|
<h1>Details</h1>
|
||||||
<figure>
|
<figure>
|
||||||
|
|
|
@ -43,7 +43,36 @@ sup {
|
||||||
user-select: none;
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.labelled_meter {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 0.1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.labelled_meter meter {
|
||||||
|
min-width: 250px;
|
||||||
|
height: 1.5em;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid #999999;
|
||||||
|
flex-grow: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.labelled_meter label {
|
||||||
|
width: 200px;
|
||||||
|
padding: 0.1em;
|
||||||
|
wrap: nowrap;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.labelled_meter label em {
|
||||||
|
font-weight: inherit;
|
||||||
|
font-style: inherit;
|
||||||
|
/*color: #ffac12;*/
|
||||||
|
color: #333333;
|
||||||
|
/*background-image: linear-gradient(rgba(255, 255, 255, 0) 90%, #f7bb3c 91%, #f7bb3c 98%, rgba(255, 255, 255, 0) 99%);*/
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: #ffac12;
|
||||||
|
}
|
||||||
|
|
||||||
figure {
|
figure {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
Loading…
Reference in a new issue