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

css: adapt CollectQuotes, QuoteCard, QuoteCardNew to smartphone

Browse Source
This commit is contained in:
Settel 2022-10-09 23:25:18 +02:00
parent 75f476c55f
commit ce31b88acf
3 changed files with 31 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/CollectQuotes.vue
View File

@ -38,9 +38,15 @@ const editEnd = () => {
</script> </script>
<style lang="scss"> <style lang="scss">
@import '~/assets/css/components';
.collect-quotes { .collect-quotes {
&__explaination-box { &__explaination-box {
margin: 16px; margin: 16px;
@media (max-width: $phone-width) {
display: none;
}
} }
&__quotes { &__quotes {

18
client/src/components/QuoteCard.vue
View File

@ -110,6 +110,12 @@ const keydown = async (ev: KeyboardEvent) => {
border-radius: 0 16px 0 0; border-radius: 0 16px 0 0;
color: $quote-text-color; color: $quote-text-color;
@media (max-width: $phone-width) {
width: 240px;
height: 120px;
padding: 16px;
}
&__editable { &__editable {
cursor: text; cursor: text;
@ -124,14 +130,26 @@ const keydown = async (ev: KeyboardEvent) => {
&__text-short { &__text-short {
font-size: 24px; font-size: 24px;
@media (max-width: $phone-width) {
font-size: 20px;
}
} }
&__text-medium { &__text-medium {
font-size: 20px; font-size: 20px;
@media (max-width: $phone-width) {
font-size: 18px;
}
} }
&__text-long { &__text-long {
font-size: 18px; font-size: 18px;
@media (max-width: $phone-width) {
font-size: 14px;
}
} }
} }

8
client/src/components/QuoteCardNew.vue
View File

@ -15,7 +15,7 @@
width: 300px; width: 300px;
height: 150px; height: 150px;
margin: 32px; margin: 32px;
padding: 32px; padding: 28px;
background-color: $quote-new-background-color; background-color: $quote-new-background-color;
border: $quote-new-border; border: $quote-new-border;
border-radius: 0 16px 0 0; border-radius: 0 16px 0 0;
@ -26,6 +26,12 @@
border: $quote-new-hover-border; border: $quote-new-hover-border;
color: $quote-new-hover-text-color; color: $quote-new-hover-text-color;
} }
@media (max-width: $phone-width) {
width: 240px;
height: 120px;
padding: 12px;
}
} }
&__new { &__new {