martyn
/
townsquare
mirror of https://github.com/bra1n/townsquare.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/modals/RoleModal.vue
View File

@ -8,42 +8,40 @@
: "bluffing"
}}
</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
>
<ul class="tokens" v-if="tab === 'editionRoles'">
<li
v-for="role in availableRoles"
:class="[role.team]"
:key="role.id"
@click="setRole(role)"
>
<Token :role="role" />
</li>
<ul class="tokens" v-if="tab === 'editionRoles'">
<li
v-for="role in availableRoles"
:class="[role.team]"
:key="role.id"
@click="setRole(role)"
>
<Token :role="role" />
</li>
</ul>
<ul class="tokens" v-if="tab === 'otherTravellers'">
<li
v-for="role in extraTravellers"
:class="[role.team]"
:key="role.id"
@click="setRole(role)"
>
<Token :role="role" />
</li>
</ul>
</ul>
<ul class="tokens" v-if="tab === 'otherTravellers'">
<li
v-for="role in extraTravellers"
:class="[role.team]"
:key="role.id"
@click="setRole(role)"
>
<Token :role="role" />
</li>
</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>
</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 {
display: none;
}