IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Ansichtsausweis Verbessert

Browse Source
This commit is contained in:
Moritz Utcke
2023-05-07 16:50:29 +04:00
parent 9619bf29f3
commit 7e13a6da50
8 changed files with 93 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/Ausweis/PerformanceScore.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
export let performance: number;
export let verbrauch: number;
export let primär: number;
let maxPerformance = 250;
@@ -31,22 +32,24 @@
return centeredValue;
}
$: translation = Math.min(100, performance / maxPerformance * 100);
$: translation_1 = Math.min(100, verbrauch / maxPerformance * 100);
$: translation_2 = Math.min(100, primär / maxPerformance * 100);
</script>
<div class="w-full rounded-lg border border-[#ffcc03] relative p-2">
<img src="/images/SKALA-910.png" alt="Energieeffizienz Skala">
<img
class="absolute top-1 transition-left duration-700 ease-in-out"
class="absolute top-1 transition-left duration-1000 ease-in-out"
width="20px"
src="/images/pfeil2.png"
alt=""
style="left: {translation}%; transform: translateX({centerValueBetweenBoundaries(translation, 50, -150, 0, 100)}%)"
style="left: {translation_1}%; transform: translateX({centerValueBetweenBoundaries(translation_1, 50, -150, 0, 100)}%)"
/>
<img
class="absolute bottom-1"
class="absolute bottom-1 transition-left duration-1000 ease-in-out"
width="20px"
src="/images/pfeil.png"
style="left: {translation_2}%; transform: translateX({centerValueBetweenBoundaries(translation_2, 50, -150, 0, 100)}%)"
alt=""
/>
</div>