mirror of https://github.com/bra1n/townsquare.git
tons of responsive changes
This commit is contained in:
Steffen
parent
d8b7a91402
commit
6b0de4971c
61
src/App.vue
61
src/App.vue
|
|
@ -125,6 +125,65 @@ body {
|
|||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Large devices (desktops, less than 1200px)
|
||||
@media screen and (max-width: 1199.98px) {
|
||||
html,
|
||||
body {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
.player .night em {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// Medium devices (tablets, less than 992px)
|
||||
@media screen and (max-width: 991.98px) {
|
||||
html,
|
||||
body {
|
||||
font-size: 1em;
|
||||
}
|
||||
#controls svg {
|
||||
font-size: 20px;
|
||||
}
|
||||
.player .night em {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
#townsquare {
|
||||
padding: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
// Small devices (landscape phones, less than 768px)
|
||||
@media screen and (max-width: 767.98px) {
|
||||
html,
|
||||
body {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.player > .name {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Old phones
|
||||
@media screen and (max-width: 575.98px) {
|
||||
html,
|
||||
body {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
|
||||
// odd aspect ratio
|
||||
@media (max-aspect-ratio: 11/7) {
|
||||
.bluffs h3 {
|
||||
max-width: 14vh;
|
||||
}
|
||||
.bluffs ul {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
|
@ -211,7 +270,7 @@ ul {
|
|||
color: white;
|
||||
font-weight: bold;
|
||||
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
|
||||
line-height: 40px;
|
||||
line-height: 170%;
|
||||
margin: 5px auto;
|
||||
cursor: pointer;
|
||||
transition: all 200ms;
|
||||
|
|
|
|||
|
|
@ -37,8 +37,10 @@ export default {
|
|||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
margin-left: -96px;
|
||||
margin-bottom: 20px;
|
||||
width: 25vh;
|
||||
margin-left: -12.5vh;
|
||||
margin-bottom: 2vh;
|
||||
max-width: 192px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 10px black;
|
||||
border: 3px solid black;
|
||||
|
|
|
|||
|
|
@ -40,11 +40,12 @@
|
|||
<!-- Grimoire -->
|
||||
<li class="headline">Grimoire</li>
|
||||
<li @click="toggleGrimoire" v-if="players.length">
|
||||
<em>[G]</em>
|
||||
<template v-if="!grimoire.isPublic">Hide</template>
|
||||
<template v-if="grimoire.isPublic">Show</template>
|
||||
<em>[G]</em>
|
||||
</li>
|
||||
<li @click="toggleNightOrder" v-if="players.length">
|
||||
Night order
|
||||
<em
|
||||
><font-awesome-icon
|
||||
:icon="[
|
||||
|
|
@ -52,9 +53,9 @@
|
|||
grimoire.isNightOrder ? 'check-square' : 'square'
|
||||
]"
|
||||
/></em>
|
||||
Night order
|
||||
</li>
|
||||
<li v-if="players.length">
|
||||
Zoom
|
||||
<em>
|
||||
<font-awesome-icon
|
||||
@click="setZoom(grimoire.zoom - 1)"
|
||||
|
|
@ -66,11 +67,10 @@
|
|||
icon="search-plus"
|
||||
/>
|
||||
</em>
|
||||
Zoom
|
||||
</li>
|
||||
<li @click="setBackground">
|
||||
<em><font-awesome-icon icon="image"/></em>
|
||||
Background image
|
||||
<em><font-awesome-icon icon="image"/></em>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
|
|
@ -82,34 +82,32 @@
|
|||
Live Session
|
||||
</li>
|
||||
<li @click="hostSession" v-if="!session.sessionId">
|
||||
<em>[H]</em> Host (Storyteller)
|
||||
Host (Storyteller)<em>[H]</em>
|
||||
</li>
|
||||
<li @click="joinSession" v-if="!session.sessionId">
|
||||
<em>[J]</em> Join (Player)
|
||||
Join (Player)<em>[J]</em>
|
||||
</li>
|
||||
<li v-if="session.sessionId" @click="copySessionUrl">
|
||||
<em><font-awesome-icon icon="copy"/></em>
|
||||
Copy player link
|
||||
<em><font-awesome-icon icon="copy"/></em>
|
||||
</li>
|
||||
<li @click="leaveSession" v-if="session.sessionId">
|
||||
<em>{{ session.sessionId }}</em>
|
||||
Leave Session
|
||||
<em>{{ session.sessionId }}</em>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<template v-if="tab === 'players' && !session.isSpectator">
|
||||
<!-- Users -->
|
||||
<li class="headline">Players</li>
|
||||
<li @click="addPlayer" v-if="players.length < 20">
|
||||
<em>[A]</em> Add
|
||||
</li>
|
||||
<li @click="addPlayer" v-if="players.length < 20">Add<em>[A]</em></li>
|
||||
<li @click="randomizeSeatings" v-if="players.length > 2">
|
||||
<em><font-awesome-icon icon="dice"/></em>
|
||||
Randomize
|
||||
<em><font-awesome-icon icon="dice"/></em>
|
||||
</li>
|
||||
<li @click="clearPlayers" v-if="players.length">
|
||||
<em><font-awesome-icon icon="trash-alt"/></em>
|
||||
Remove all
|
||||
<em><font-awesome-icon icon="trash-alt"/></em>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
|
|
@ -117,19 +115,19 @@
|
|||
<!-- Characters -->
|
||||
<li class="headline">Characters</li>
|
||||
<li v-if="!session.isSpectator" @click="toggleModal('edition')">
|
||||
<em>[E]</em>
|
||||
Select Edition
|
||||
<em>[E]</em>
|
||||
</li>
|
||||
<li
|
||||
@click="toggleModal('roles')"
|
||||
v-if="!session.isSpectator && players.length > 4"
|
||||
>
|
||||
<em>[C]</em>
|
||||
Choose & Assign
|
||||
<em>[C]</em>
|
||||
</li>
|
||||
<li @click="clearRoles" v-if="players.length">
|
||||
<em><font-awesome-icon icon="trash-alt"/></em>
|
||||
Remove all
|
||||
<em><font-awesome-icon icon="trash-alt"/></em>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
|
|
@ -137,20 +135,20 @@
|
|||
<!-- Help -->
|
||||
<li class="headline">Help</li>
|
||||
<li @click="toggleModal('reference')">
|
||||
<em>[R]</em>
|
||||
Reference Sheet
|
||||
<em>[R]</em>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://discord.gg/tkWDny6" target="_blank">
|
||||
<em><font-awesome-icon :icon="['fab', 'discord']"/></em>
|
||||
Join Discord
|
||||
</a>
|
||||
<em><font-awesome-icon :icon="['fab', 'discord']"/></em>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/bra1n/townsquare" target="_blank">
|
||||
<em><font-awesome-icon :icon="['fab', 'github']"/></em>
|
||||
Source code
|
||||
</a>
|
||||
<em><font-awesome-icon :icon="['fab', 'github']"/></em>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
|
@ -232,6 +230,7 @@ export default {
|
|||
},
|
||||
addPlayer() {
|
||||
if (this.session.isSpectator) return;
|
||||
if (this.players.length >= 20) return;
|
||||
const name = prompt("Player name");
|
||||
if (name) {
|
||||
this.$store.commit("players/add", name);
|
||||
|
|
@ -288,6 +287,7 @@ export default {
|
|||
top: 3px;
|
||||
text-align: right;
|
||||
padding-right: 50px;
|
||||
z-index: 200;
|
||||
|
||||
#app.screenshot & {
|
||||
display: none;
|
||||
|
|
@ -366,6 +366,10 @@ export default {
|
|||
color: white;
|
||||
text-align: left;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 30px;
|
||||
|
||||
&.tabs {
|
||||
display: flex;
|
||||
|
|
@ -399,21 +403,16 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&:not(.headline):not(.tabs):hover {
|
||||
cursor: pointer;
|
||||
color: red;
|
||||
}
|
||||
|
||||
em {
|
||||
float: right;
|
||||
flex-grow: 0;
|
||||
font-style: normal;
|
||||
margin-left: 10px;
|
||||
font-size: 80%;
|
||||
line-height: 31px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -422,6 +421,7 @@ export default {
|
|||
letter-spacing: 1px;
|
||||
padding: 0 10px;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
$townsfolk 0%,
|
||||
|
|
|
|||
|
|
@ -127,7 +127,7 @@
|
|||
<font-awesome-icon icon="camera" />
|
||||
Screenshot
|
||||
</li>
|
||||
<li @click="$emit('trigger', ['removePlayer'])">
|
||||
<li @click="removePlayer">
|
||||
<font-awesome-icon icon="times-circle" />
|
||||
Remove
|
||||
</li>
|
||||
|
|
@ -198,14 +198,15 @@ export default {
|
|||
return indexAdjusted < session.lockedVote - 1;
|
||||
},
|
||||
zoom: function() {
|
||||
const unit = window.innerWidth > window.innerHeight ? "vh" : "vw";
|
||||
if (this.players.length < 7) {
|
||||
return { width: 9 + this.grimoire.zoom + "vw" };
|
||||
return { width: 18 + this.grimoire.zoom + unit };
|
||||
} else if (this.players.length <= 10) {
|
||||
return { width: 8 + this.grimoire.zoom + "vw" };
|
||||
return { width: 16 + this.grimoire.zoom + unit };
|
||||
} else if (this.players.length <= 15) {
|
||||
return { width: 7 + this.grimoire.zoom + "vw" };
|
||||
return { width: 14 + this.grimoire.zoom + unit };
|
||||
} else {
|
||||
return { width: 6 + this.grimoire.zoom + "vw" };
|
||||
return { width: 12 + this.grimoire.zoom + unit };
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
@ -261,6 +262,10 @@ export default {
|
|||
value
|
||||
});
|
||||
},
|
||||
removePlayer() {
|
||||
this.isMenuOpen = false;
|
||||
this.$emit("trigger", ["removePlayer"]);
|
||||
},
|
||||
swapPlayer(player) {
|
||||
this.isMenuOpen = false;
|
||||
this.$emit("trigger", ["swapPlayer", player]);
|
||||
|
|
@ -305,7 +310,6 @@ export default {
|
|||
/***** Player token *****/
|
||||
.circle .player {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
&:before {
|
||||
content: " ";
|
||||
|
|
@ -525,10 +529,11 @@ li.move:not(.from) .player .overlay svg.move {
|
|||
.player .has-vote {
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: 45px;
|
||||
margin-top: -15%;
|
||||
color: #fff;
|
||||
filter: drop-shadow(0 0 3px black);
|
||||
transition: opacity 250ms;
|
||||
z-index: 2;
|
||||
|
||||
#townsquare.public & {
|
||||
opacity: 0;
|
||||
|
|
@ -570,10 +575,11 @@ li.move:not(.from) .player .overlay svg.move {
|
|||
.player .seat {
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
bottom: 45px;
|
||||
margin-top: -15%;
|
||||
color: #fff;
|
||||
filter: drop-shadow(0 0 3px black);
|
||||
cursor: default;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.player.you .seat {
|
||||
|
|
@ -654,17 +660,22 @@ li.move:not(.from) .player .overlay svg.move {
|
|||
/**** Night reminders ****/
|
||||
.player .night {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
opacity: 1;
|
||||
transition: opacity 200ms;
|
||||
display: flex;
|
||||
top: -20px;
|
||||
top: 0;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
#townsquare.public & {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
|
@ -746,8 +757,6 @@ li.move:not(.from) .player .overlay svg.move {
|
|||
position: absolute;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
text-align: center;
|
||||
line-height: 37px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid black;
|
||||
filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.5));
|
||||
|
|
@ -755,15 +764,18 @@ li.move:not(.from) .player .overlay svg.move {
|
|||
opacity: 1;
|
||||
pointer-events: all;
|
||||
transition: opacity 200ms;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.first em {
|
||||
left: -15px;
|
||||
left: -10%;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, $townsfolk 100%);
|
||||
}
|
||||
|
||||
&.other em {
|
||||
right: -15px;
|
||||
right: -10%;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, $demon 100%);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -132,6 +132,7 @@ export default {
|
|||
.name {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 24px; // svg fonts are relative to document font size
|
||||
.label {
|
||||
fill: black;
|
||||
stroke: white;
|
||||
|
|
|
|||
|
|
@ -104,7 +104,6 @@ export default {
|
|||
|
||||
li {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
padding: 0 5px;
|
||||
|
|
@ -144,11 +143,13 @@ export default {
|
|||
li.edition {
|
||||
width: 220px;
|
||||
height: 200px;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background-position: 0 center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
top: -25%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -157,6 +157,16 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
#townsquare {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.circle {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
|
|
@ -228,11 +238,11 @@ export default {
|
|||
$x: $i - 1;
|
||||
@if $x < $q or ($x >= $item-count / 2 and $x < $q * 3) {
|
||||
.player {
|
||||
margin-bottom: -15% + 20% * (1 - ($x % $q / $q));
|
||||
margin-bottom: -10% + 20% * (1 - ($x % $q / $q));
|
||||
}
|
||||
} @else {
|
||||
.player {
|
||||
margin-bottom: -15% + 20% * ($x % $q / $q);
|
||||
margin-bottom: -10% + 20% * ($x % $q / $q);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -246,17 +256,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
#townsquare {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/***** Demon bluffs *******/
|
||||
.bluffs {
|
||||
position: absolute;
|
||||
|
|
@ -290,11 +289,15 @@ export default {
|
|||
h3 {
|
||||
margin-top: 5px;
|
||||
}
|
||||
li {
|
||||
width: 6vw;
|
||||
height: 6vw;
|
||||
margin: 0 5px;
|
||||
display: inline-block;
|
||||
ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
li {
|
||||
width: 14vh;
|
||||
height: 14vh;
|
||||
margin: 0 0.5%;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -162,7 +162,7 @@ ul.editions .edition {
|
|||
font-family: PiratesBay, sans-serif;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
padding-top: 100px;
|
||||
padding-top: 15%;
|
||||
background-position: center center;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ export default {
|
|||
|
||||
.characters & {
|
||||
max-height: 80%;
|
||||
max-width: 80%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
@ -62,7 +63,6 @@ export default {
|
|||
align-content: center;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 75%;
|
||||
line-height: 100%;
|
||||
}
|
||||
> .close {
|
||||
|
|
|
|||
|
|
@ -167,8 +167,7 @@ ul {
|
|||
/*background: linear-gradient(0deg, #ffffff0f, transparent);*/
|
||||
border-radius: 10px;
|
||||
.icon {
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
width: 6vh;
|
||||
background-size: cover;
|
||||
background-position: 0 -5px;
|
||||
flex-grow: 0;
|
||||
|
|
@ -177,11 +176,16 @@ ul {
|
|||
text-align: center;
|
||||
border-left: 1px solid #ffffff1f;
|
||||
border-right: 1px solid #ffffff1f;
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
padding-top: 66%;
|
||||
}
|
||||
}
|
||||
.name {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
width: 150px;
|
||||
width: 15%;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
font-family: "Papyrus", sans-serif;
|
||||
|
|
@ -207,6 +211,9 @@ ul {
|
|||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
}
|
||||
.icon:after {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -81,12 +81,14 @@ export default {
|
|||
ul.reminders .reminder {
|
||||
background: url("../../assets/reminder.png") center center;
|
||||
background-size: 100%;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 14vh;
|
||||
height: 14vh;
|
||||
max-width: 100px;
|
||||
max-height: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 5px;
|
||||
margin: 1%;
|
||||
|
||||
border-radius: 50%;
|
||||
border: 3px solid black;
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ export default {
|
|||
ul.tokens li {
|
||||
border-radius: 50%;
|
||||
width: 6vw;
|
||||
margin: 5px;
|
||||
margin: 1%;
|
||||
transition: transform 500ms ease;
|
||||
|
||||
&.townsfolk {
|
||||
|
|
|
|||
|
|
@ -146,11 +146,11 @@ export default {
|
|||
@import "../../vars.scss";
|
||||
|
||||
ul.tokens {
|
||||
padding-left: 55px;
|
||||
padding-left: 5%;
|
||||
li {
|
||||
border-radius: 50%;
|
||||
width: 6vw;
|
||||
margin: 5px;
|
||||
margin: 1%;
|
||||
opacity: 0.5;
|
||||
transition: all 250ms;
|
||||
&.selected {
|
||||
|
|
@ -181,11 +181,16 @@ ul.tokens {
|
|||
position: absolute;
|
||||
left: 0;
|
||||
font-weight: bold;
|
||||
line-height: 50px;
|
||||
text-align: center;
|
||||
font-size: 100%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
font-size: 75%;
|
||||
width: 5%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
&:after {
|
||||
content: " ";
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
}
|
||||
&.townsfolk {
|
||||
color: $townsfolk;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue