From ce31b88acfa85a14d48e8f974d2d2c2f530e6396 Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Sun, 9 Oct 2022 23:25:18 +0200
Subject: [PATCH] css: adapt CollectQuotes, QuoteCard, QuoteCardNew to
 smartphone

---
 client/src/components/CollectQuotes.vue |  6 ++++++
 client/src/components/QuoteCard.vue     | 18 ++++++++++++++++++
 client/src/components/QuoteCardNew.vue  |  8 +++++++-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/client/src/components/CollectQuotes.vue b/client/src/components/CollectQuotes.vue
index a447c95..fa134c5 100644
--- a/client/src/components/CollectQuotes.vue
+++ b/client/src/components/CollectQuotes.vue
@@ -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 {
diff --git a/client/src/components/QuoteCard.vue b/client/src/components/QuoteCard.vue
index 5ac1912..05cb8e7 100644
--- a/client/src/components/QuoteCard.vue
+++ b/client/src/components/QuoteCard.vue
@@ -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;
+      }
     }
   }
 
diff --git a/client/src/components/QuoteCardNew.vue b/client/src/components/QuoteCardNew.vue
index dc43ac6..f6b10d2 100644
--- a/client/src/components/QuoteCardNew.vue
+++ b/client/src/components/QuoteCardNew.vue
@@ -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 {