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> <template>
<div class="bought-container"> <div class="bought-container">
<div class="red-container inner-bought-container"> <div class="red-container inner-bought-container">
<div> <div class="number-container">
<span class="red">{{ red.total }}</span> kjøpt <span class="red bought-number-span">{{ red.total }}</span>
</div> <div class="inner-text-container">
<span> kjøpte</span>
<div>{{ red.win }} vinn</div> <div>{{ red.win }} vinn</div>
<div>{{ redPercentage }}% vinn</div> <div>{{ redPercentage }}% vinn</div>
</div> </div>
<div class="blue-container inner-bought-container">
<div>
<span class="blue">{{ blue.total }}</span> kjøpt
</div> </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>{{ blue.win }} vinn</div>
<div>{{ bluePercentage }}% vinn</div> <div>{{ bluePercentage }}% vinn</div>
</div> </div>
<div class="yellow-container inner-bought-container">
<div>
<span class="yellow">{{ yellow.total }}</span> kjøpt
</div> </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>{{ yellow.win }} vinn</div>
<div>{{ yellowPercentage }}% vinn</div> <div>{{ yellowPercentage }}% vinn</div>
</div> </div>
<div class="green-container inner-bought-container">
<div>
<span class="green">{{ green.total }}</span> kjøpt
</div> </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>{{ green.win }} vinn</div>
<div>{{ greenPercentage }}% vinn</div> <div>{{ greenPercentage }}% vinn</div>
</div> </div>
</div>
</div>
<!--<div class="total-container inner-bought-container"> <!--<div class="total-container inner-bought-container">
<div> <div>
totalt&nbsp; totalt&nbsp;
@@ -94,6 +106,19 @@ export default {
align-items: center; 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 { .bought-container {
display: flex; display: flex;
flex-direction: row; flex-direction: row;