css: adapt Playground to smartphone

This commit is contained in:
Settel 2022-10-10 19:31:32 +02:00
parent 673242ba11
commit f119935467
2 changed files with 37 additions and 4 deletions

View File

@ -1,3 +1,4 @@
$phone-width: 560px; $phone-width: 560px;
$phone-max-width: 767px; $phone-max-width: 767px;
$tablet-width: 768px; $tablet-width: 768px;
$desktop-min-width: 880px;

View File

@ -51,7 +51,7 @@ const showQuote = ref(false)
window.setTimeout(() => { showQuote.value = true }, 100) window.setTimeout(() => { showQuote.value = true }, 100)
const showSkipButton = computed(() => game.phase === 'select-quote') const showSkipButton = computed(() => game.phase === 'select-quote')
const badgeMap = computed(() => { const badgeMap = computed(() => {
const badgeMap = {} as { [key: string]: number} const badgeMap = {} as { [key: string]: number }
if (game.phase === 'reveal-show-count') { if (game.phase === 'reveal-show-count') {
for (const id in round.revelation.votes) { for (const id in round.revelation.votes) {
badgeMap[id] = round.revelation.votes[id].length badgeMap[id] = round.revelation.votes[id].length
@ -61,7 +61,7 @@ const badgeMap = computed(() => {
}) })
const disabledMap = computed(() => { const disabledMap = computed(() => {
const disabledMap = {} as { [key: string]: boolean} const disabledMap = {} as { [key: string]: boolean }
if (game.phase === 'reveal-source') { if (game.phase === 'reveal-source') {
for (const id in round.revelation.sources) { for (const id in round.revelation.sources) {
disabledMap[id] = !round.revelation.sources[id] disabledMap[id] = !round.revelation.sources[id]
@ -71,7 +71,7 @@ const disabledMap = computed(() => {
return disabledMap return disabledMap
}) })
const showMap = ref({} as { [key: string]: boolean}) const showMap = ref({} as { [key: string]: boolean })
sources.forEach((source, index) => { sources.forEach((source, index) => {
window.setTimeout(() => { window.setTimeout(() => {
showMap.value[source.id] = true showMap.value[source.id] = true
@ -80,6 +80,8 @@ sources.forEach((source, index) => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.playground { .playground {
&__container { &__container {
display: flex; display: flex;
@ -92,6 +94,10 @@ sources.forEach((source, index) => {
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
margin: 40px; margin: 40px;
@media (max-width: $phone-max-width) {
margin: 0;
}
} }
&__sources { &__sources {
@ -99,10 +105,18 @@ sources.forEach((source, index) => {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-around; justify-content: space-around;
gap: 24px 36px; gap: 24px 36px;
@media (max-width: $phone-max-width) {
order: 2;
}
} }
&__spacer { &__spacer {
flex-grow: 3; flex-grow: 3;
@media (max-width: $phone-max-width) {
flex-grow: 1;
}
} }
&__quote { &__quote {
@ -115,6 +129,10 @@ sources.forEach((source, index) => {
&__show { &__show {
opacity: 100%; opacity: 100%;
} }
@media (max-width: $phone-max-width) {
flex-grow: 1;
}
} }
&__skip { &__skip {
@ -127,11 +145,24 @@ sources.forEach((source, index) => {
animation: quote-show 0.5s linear 5s; animation: quote-show 0.5s linear 5s;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
@media (max-width: $phone-max-width) {
order: 3;
margin: 64px 32px;
}
} }
&__players-list { &__players-list {
width: 200px; width: 200px;
margin: 16px 16px 0 64px; margin: 16px 16px 0 64px;
@media (max-width: $phone-max-width) {
display: none;
}
@media (max-width: calc($desktop-min-width - 1px)) {
margin-left: 16px;
}
} }
} }
@ -139,6 +170,7 @@ sources.forEach((source, index) => {
from { from {
opacity: 0%; opacity: 0%;
} }
to { to {
opacity: 100%; opacity: 100%;
} }