open player menu always inside the circle (closes #28)

This commit is contained in:
Steffen 2020-07-03 10:57:08 +02:00
parent ac29310eb4
commit 2776f58366
No known key found for this signature in database
GPG Key ID: 764D74E98267DFC6
2 changed files with 23 additions and 1 deletions

View File

@ -634,7 +634,7 @@ li.move:not(.from) .player .overlay svg.move {
.player > .menu { .player > .menu {
position: absolute; position: absolute;
left: 100%; left: 100%;
bottom: 0; bottom: -5px;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.5);

View File

@ -219,8 +219,30 @@ export default {
&:nth-child(#{$i}) { &:nth-child(#{$i}) {
transform: rotate($rot * 1deg); transform: rotate($rot * 1deg);
@if $i - 1 <= $item-count / 2 { @if $i - 1 <= $item-count / 2 {
// first half of players
z-index: $item-count - $i + 1; z-index: $item-count - $i + 1;
// open menu on the left
.player > .menu {
left: auto;
right: 100%;
margin-right: 15px;
&:before {
border-left-color: black;
border-right-color: transparent;
right: auto;
left: 100%;
}
}
.fold-enter-active,
.fold-leave-active {
transform-origin: right center;
}
.fold-enter,
.fold-leave-to {
transform: perspective(200px) rotateY(-90deg);
}
} @else { } @else {
// second half of players
z-index: $i - 1; z-index: $i - 1;
.ability { .ability {
right: 120%; right: 120%;