martyn/townsquare
1
0
Fork 0
mirror of https://github.com/bra1n/townsquare.git synced 2025-04-04 22:24:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

responsive design

Browse source
This commit is contained in:
pingumask 2022-12-26 16:23:44 +01:00
parent fb51230d7e
commit 8d0622f3bb
7 changed files with 34 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/Player.vue
View file

@ -234,15 +234,14 @@ export default {
return indexAdjusted < session.lockedVote - 1; return indexAdjusted < session.lockedVote - 1;
}, },
zoom: function() { zoom: function() {
const unit = window.innerWidth > window.innerHeight ? "vh" : "vw";
if (this.players.length < 7) { if (this.players.length < 7) {
return { width: 18 + this.grimoire.zoom + unit }; return { width: 18 + this.grimoire.zoom + "vmin" };
} else if (this.players.length <= 10) { } else if (this.players.length <= 10) {
return { width: 16 + this.grimoire.zoom + unit }; return { width: 16 + this.grimoire.zoom + "vmin" };
} else if (this.players.length <= 15) { } else if (this.players.length <= 15) {
return { width: 14 + this.grimoire.zoom + unit }; return { width: 14 + this.grimoire.zoom + "vmin" };
} else { } else {
return { width: 12 + this.grimoire.zoom + unit }; return { width: 12 + this.grimoire.zoom + "vmin" };
} }
} }
}, },

13
src/components/TownSquare.vue
View file

@ -362,15 +362,16 @@ export default {
.circle { .circle {
padding: 0; padding: 0;
width: 100%; width: 100vmin;
height: 100%; height: 100vmin;
list-style: none; list-style: none;
margin: 0; margin: 0;
> li { > li {
position: absolute; position: absolute;
left: 50%; left: 50%;
height: 50%; height: 50vmin;
max-height: 50%;
transform-origin: 0 100%; transform-origin: 0 100%;
pointer-events: none; pointer-events: none;
@ -498,7 +499,7 @@ export default {
top: 10px; top: 10px;
} }
&.storytelling{ &.storytelling{
bottom: 20vmin; bottom: 10px;
left: auto; left: auto;
right: 10px; right: 10px;
width: min-content; width: min-content;
@ -556,8 +557,8 @@ export default {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
li { li {
width: 14vh; width: 14vmin;
height: 14vh; height: 14vmin;
margin: 0 0.5%; margin: 0 0.5%;
display: inline-block; display: inline-block;
transition: all 250ms; transition: all 250ms;

2
src/components/modals/FabledModal.vue
View file

@ -48,7 +48,7 @@ export default {
ul.tokens li { ul.tokens li {
border-radius: 50%; border-radius: 50%;
width: 8vw; width: 8vmax;
margin: 0.5%; margin: 0.5%;
transition: transform 500ms ease; transition: transform 500ms ease;

4
src/components/modals/Modal.vue
View file

@ -66,7 +66,8 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-height: 80vh; max-height: 80vh;
max-width: 80vw; width:90vw;
max-width: 1800px;
.editions &, .editions &,
.vote-history &, .vote-history &,
@ -78,7 +79,6 @@ export default {
.roles &, .roles &,
.characters & { .characters & {
max-height: 100vh; max-height: 100vh;
max-width: 60vw;
} }
ul { ul {

39
src/components/modals/ReferenceModal.vue
View file

@ -214,7 +214,6 @@ h3 {
.team { .team {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
width: 100%;
&:not(:last-child):after { &:not(:last-child):after {
content: " "; content: " ";
display: block; display: block;
@ -254,20 +253,25 @@ h3 {
ul { ul {
flex-grow: 1; flex-grow: 1;
display: flex; display: grid;
padding: 5px 0; width: calc(100% - 35px);
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
padding: 15px 5px;
li { li {
display: flex; display: flex;
align-items: center; align-items: center;
flex-grow: 1; max-width: 100%;
width: 420px; text-align: justify;
.icon { .icon {
width: 8vh; width: 12vmin;
background-size: cover; background-size: contain;
background-position: 0 -5px; background-position: center right;
background-repeat: no-repeat;
flex-shrink: 0; flex-shrink: 0;
flex-grow: 0; flex-grow: 0;
position: relative;
top: 0.5em;
&:after { &:after {
content: " "; content: " ";
display: block; display: block;
@ -294,16 +298,11 @@ ul {
} }
} }
/** break into 1 column below 1200px **/ /** break into 1 column below 600px **/
@media screen and (max-width: 1199.98px) { @media screen and (max-width: 600px) {
.modal {
max-width: 60%;
}
ul { ul {
grid-template-columns: 1fr;
li { li {
.icon {
width: 6vh;
}
.role { .role {
line-height: 100%; line-height: 100%;
} }
@ -318,12 +317,8 @@ ul {
} }
} }
} }
} .team aside {
width: 15px;
/** trim icon size on maximized one-column sheet **/
@media screen and (max-width: 991.98px) {
.characters .modal.maximized ul li .icon {
width: 5.1vh;
} }
} }

2
src/components/modals/RoleModal.vue
View file

@ -117,7 +117,7 @@ export default {
ul.tokens li { ul.tokens li {
border-radius: 50%; border-radius: 50%;
width: 6vw; width: 6vmax;
margin: 1%; margin: 1%;
transition: transform 500ms ease; transition: transform 500ms ease;

4
src/components/modals/RolesModal.vue
View file

@ -173,10 +173,10 @@ export default {
@import "../../vars.scss"; @import "../../vars.scss";
ul.tokens { ul.tokens {
padding-left: 5%; padding-left: 5vmin;
li { li {
border-radius: 50%; border-radius: 50%;
width: 5vw; width: 5vmax;
margin: 5px; margin: 5px;
opacity: 0.5; opacity: 0.5;
transition: all 250ms; transition: all 250ms;