number-placements

This commit is contained in:
Kasper Rynning-Tønnesen
2020-01-22 13:41:48 +01:00
parent 5596affe91
commit 6b34516d0e

View File

@@ -1,33 +1,45 @@
<template>
<div class="bought-container">
<div class="red-container inner-bought-container">
<div>
<span class="red">{{ red.total }}</span> kjøpt
</div>
<div class="number-container">
<span class="red bought-number-span">{{ red.total }}</span>
<div class="inner-text-container">
<span> kjøpte</span>
<div>{{ red.win }} vinn</div>
<div>{{ redPercentage }}% vinn</div>
</div>
<div class="blue-container inner-bought-container">
<div>
<span class="blue">{{ blue.total }}</span> kjøpt
</div>
</div>
<div class="blue-container inner-bought-container">
<div class="number-container">
<span class="blue bought-number-span">{{ blue.total }}</span>
<div class="inner-text-container">
<span> kjøpte</span>
<div>{{ blue.win }} vinn</div>
<div>{{ bluePercentage }}% vinn</div>
</div>
<div class="yellow-container inner-bought-container">
<div>
<span class="yellow">{{ yellow.total }}</span> kjøpt
</div>
</div>
<div class="yellow-container inner-bought-container">
<div class="number-container">
<span class="yellow bought-number-span">{{ yellow.total }}</span>
<div class="inner-text-container">
<span> kjøpte</span>
<div>{{ yellow.win }} vinn</div>
<div>{{ yellowPercentage }}% vinn</div>
</div>
<div class="green-container inner-bought-container">
<div>
<span class="green">{{ green.total }}</span> kjøpt
</div>
</div>
<div class="green-container inner-bought-container">
<div class="number-container">
<span class="green bought-number-span">{{ green.total }}</span>
<div class="inner-text-container">
<span> kjøpte</span>
<div>{{ green.win }} vinn</div>
<div>{{ greenPercentage }}% vinn</div>
</div>
</div>
</div>
<!--<div class="total-container inner-bought-container">
<div>
totalt&nbsp;
@@ -94,6 +106,19 @@ export default {
align-items: center;
}
.number-container {
display: flex;
}
.inner-text-container {
margin-top: 0.8rem;
padding-left: 5px;
}
.bought-number-span {
display: inline-flex;
}
.bought-container {
display: flex;
flex-direction: row;