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>
<style lang="scss">
@import '~/assets/css/components';
.collect-quotes {
&__explaination-box {
margin: 16px;
@media (max-width: $phone-width) {
display: none;
}
}
&__quotes {

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

@ -110,6 +110,12 @@ const keydown = async (ev: KeyboardEvent) => {
border-radius: 0 16px 0 0;
color: $quote-text-color;
@media (max-width: $phone-width) {
width: 240px;
height: 120px;
padding: 16px;
}
&__editable {
cursor: text;
@ -124,14 +130,26 @@ const keydown = async (ev: KeyboardEvent) => {
&__text-short {
font-size: 24px;
@media (max-width: $phone-width) {
font-size: 20px;
}
}
&__text-medium {
font-size: 20px;
@media (max-width: $phone-width) {
font-size: 18px;
}
}
&__text-long {
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;
height: 150px;
margin: 32px;
padding: 32px;
padding: 28px;
background-color: $quote-new-background-color;
border: $quote-new-border;
border-radius: 0 16px 0 0;
@ -26,6 +26,12 @@
border: $quote-new-hover-border;
color: $quote-new-hover-text-color;
}
@media (max-width: $phone-width) {
width: 240px;
height: 120px;
padding: 12px;
}
}
&__new {