moving button group to the bototm of the modal, as it is not priority information, swapped out the active CSS for the existing .townsfolt class took the button group out of the UL and surounded in a div.

This commit is contained in:
Dave 2021-01-25 14:42:27 +00:00
parent 8006ecb55c
commit 0ef34ca3a1
1 changed files with 32 additions and 42 deletions

View File

@ -8,21 +8,6 @@
: "bluffing" : "bluffing"
}} }}
</h3> </h3>
<ul>
<li class="button-group" v-if="isBluffs()">
<span
class="button"
:class="{ active: tab === 'editionRoles' }"
@click="tab = 'editionRoles'"
>Edtition Roles</span
>
<span
class="button"
:class="{ active: tab === 'otherTravellers' }"
@click="tab = 'otherTravellers'"
>Other Travellers</span
>
</li>
<ul class="tokens" v-if="tab === 'editionRoles'"> <ul class="tokens" v-if="tab === 'editionRoles'">
<li <li
v-for="role in availableRoles" v-for="role in availableRoles"
@ -43,7 +28,20 @@
<Token :role="role" /> <Token :role="role" />
</li> </li>
</ul> </ul>
</ul> <div class="button-group" v-if="isBluffs()">
<span
class="button"
:class="{ townsfolk: tab === 'editionRoles' }"
@click="tab = 'editionRoles'"
>Edtition Roles</span
>
<span
class="button"
:class="{ townsfolk: tab === 'otherTravellers' }"
@click="tab = 'otherTravellers'"
>Other Travellers</span
>
</div>
</Modal> </Modal>
</template> </template>
@ -145,14 +143,6 @@ ul.tokens li {
} }
} }
.button.active {
background: linear-gradient(
to bottom,
$townsfolk 0%,
rgba(0, 0, 0, 0.7) 100%
);
}
#townsquare.spectator ul.tokens li.traveler { #townsquare.spectator ul.tokens li.traveler {
display: none; display: none;
} }