settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

css: adapt Playground to smartphone

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

1
client/src/assets/css/media.scss
View File

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

32
client/src/components/Playground.vue
View File

@ -80,6 +80,8 @@ sources.forEach((source, index) => {
</script>
<style lang="scss">
@import '~/assets/css/components';
.playground {
&__container {
display: flex;
@ -92,6 +94,10 @@ sources.forEach((source, index) => {
flex-direction: column;
flex-grow: 1;
margin: 40px;
@media (max-width: $phone-max-width) {
margin: 0;
}
}
&__sources {
@ -99,10 +105,18 @@ sources.forEach((source, index) => {
flex-wrap: wrap;
justify-content: space-around;
gap: 24px 36px;
@media (max-width: $phone-max-width) {
order: 2;
}
}
&__spacer {
flex-grow: 3;
@media (max-width: $phone-max-width) {
flex-grow: 1;
}
}
&__quote {
@ -115,6 +129,10 @@ sources.forEach((source, index) => {
&__show {
opacity: 100%;
}
@media (max-width: $phone-max-width) {
flex-grow: 1;
}
}
&__skip {
@ -127,11 +145,24 @@ sources.forEach((source, index) => {
animation: quote-show 0.5s linear 5s;
animation-fill-mode: forwards;
}
@media (max-width: $phone-max-width) {
order: 3;
margin: 64px 32px;
}
}
&__players-list {
width: 200px;
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 {
opacity: 0%;
}
to {
opacity: 100%;
}