129 lines
3.5 KiB
Plaintext
129 lines
3.5 KiB
Plaintext
<!--
|
|
Composant servant a faire les progressbar dans #left
|
|
-->
|
|
|
|
<generalysticsfragment>
|
|
<style>
|
|
#generalysticsfragment {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 15vw;
|
|
}
|
|
|
|
#generalysticsfragment
|
|
#generalysticsfragment-percent {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: row-reverse;
|
|
width: 100%;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#generalysticsfragment
|
|
#generalysticsfragment-percent
|
|
#woman, #man {
|
|
padding: 5px;
|
|
text-align: center;
|
|
}
|
|
|
|
#generalysticsfragment
|
|
#generalysticsfragment-percent
|
|
#woman {
|
|
border-top-left-radius: 14px;
|
|
border-bottom-left-radius: 14px;
|
|
background: mediumpurple;
|
|
}
|
|
|
|
#generalysticsfragment
|
|
#generalysticsfragment-percent
|
|
#man {
|
|
border-top-right-radius: 14px;
|
|
border-bottom-right-radius: 14px;
|
|
background: royalblue;
|
|
}
|
|
|
|
#generalysticsfragment
|
|
#generalysticsfragment-legend {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row-reverse;
|
|
justify-content: center;
|
|
align-items: center;
|
|
gap: 2vw;
|
|
margin-top: 1vw;
|
|
}
|
|
|
|
#generalysticsfragment
|
|
#generalysticsfragment-legend
|
|
#generalysticsfragment-legend-container-h, #generalysticsfragment-legend-container-f {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#generalysticsfragment
|
|
#generalysticsfragment-legend
|
|
.generalysticsfragment-legend-square {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
|
|
#generalysticsfragment
|
|
#generalysticsfragment-legend
|
|
#generalysticsfragment-legend-container-h
|
|
#generalysticsfragment-legend-h {
|
|
background: royalblue;
|
|
}
|
|
|
|
#generalysticsfragment
|
|
#generalysticsfragment-legend
|
|
#generalysticsfragment-legend-container-f
|
|
#generalysticsfragment-legend-f {
|
|
background: mediumpurple;
|
|
}
|
|
</style>
|
|
|
|
<div id="generalysticsfragment">
|
|
<div id="generalysticsfragment-percent">
|
|
<span style={ this.props.hstyle } id="man">
|
|
{ this.props.manPercent } (H)
|
|
</span>
|
|
|
|
<span style={ this.props.fstyle } id="woman">
|
|
{ this.props.womenPercent } (F)
|
|
</span>
|
|
</div>
|
|
|
|
<div id="generalysticsfragment-legend">
|
|
<div id="generalysticsfragment-legend-container-h">
|
|
<div id="generalysticsfragment-legend-h" class="generalysticsfragment-legend-square"></div>
|
|
<span>H</span>
|
|
</div>
|
|
|
|
|
|
<div id="generalysticsfragment-legend-container-f">
|
|
<div id="generalysticsfragment-legend-f" class="generalysticsfragment-legend-square"></div>
|
|
<span>F</span>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
export default {
|
|
props: [
|
|
"manPercent",
|
|
"womanPercent",
|
|
"hstyle",
|
|
"fstyle"
|
|
]
|
|
}
|
|
</script>
|
|
</generalysticsfragment> |