From 53e1371cde61876ff9258bfd9700a1d6e2825f87 Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Sun, 9 Oct 2022 16:47:36 +0200
Subject: [PATCH 1/9] css: make TitleBox ready for smartphone

---
 client/src/assets/css/components.scss |  1 +
 client/src/assets/css/media.scss      |  3 +++
 client/src/components/TitleBox.vue    | 29 +++++++++++++++++++++++++--
 3 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 client/src/assets/css/media.scss

diff --git a/client/src/assets/css/components.scss b/client/src/assets/css/components.scss
index 5350819..2ada391 100644
--- a/client/src/assets/css/components.scss
+++ b/client/src/assets/css/components.scss
@@ -1,4 +1,5 @@
 @import './colors.scss';
+@import './media.scss';
 
 $font-primary: 'Wendy One';
 $font-secondary: 'Dosis';
diff --git a/client/src/assets/css/media.scss b/client/src/assets/css/media.scss
new file mode 100644
index 0000000..c0f941c
--- /dev/null
+++ b/client/src/assets/css/media.scss
@@ -0,0 +1,3 @@
+$phone-width: 560px;
+$phone-max-width: 767px;
+$tablet-width: 768px;
diff --git a/client/src/components/TitleBox.vue b/client/src/components/TitleBox.vue
index 0ff5738..63b43d9 100644
--- a/client/src/components/TitleBox.vue
+++ b/client/src/components/TitleBox.vue
@@ -19,7 +19,11 @@
     padding: 80px 0;
     display: flex;
     justify-content: center;
-  }
+
+    @media (max-width: $phone-max-width) {
+      padding: 40px 0;      
+    }
+}
 
   &__titleborderbox1,
   &__titleborderbox2,
@@ -36,6 +40,11 @@
     justify-content: center;
     align-items: center;
     z-index: 3;
+
+    @media (max-width: $phone-max-width) {
+      width: 260px;
+      height: 140px;
+    }
   }
 
   &__titleborderbox2 {
@@ -44,7 +53,13 @@
     width: 720px;
     height: 120px;
     z-index: 2;
-  }
+
+    @media (max-width: $phone-max-width) {
+      top: 75px;
+      width: 300px;
+      height: 80px;      
+    }
+}
 
   &__titleborderbox3 {
     position: absolute;
@@ -52,6 +67,11 @@
     width: 760px;
     height: 40px;
     z-index: 1;
+
+    @media (max-width: $phone-max-width) {
+      top: 95px;
+      width: 340px;
+    }
   }
 
   &__title {
@@ -59,6 +79,11 @@
     font-family: $font-primary;
     color: $box-primary-text-color;
     text-align: center;
+
+    @media (max-width: $phone-max-width) {
+      font-size: 32px;      
+    }
   }
+
 }
 </style>

From e2d504c8394df2a121fbec7af672d84080e67cda Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Sun, 9 Oct 2022 21:29:09 +0200
Subject: [PATCH 2/9] css: make index page ready for smartphone

---
 client/src/components/TitleBox.vue | 10 +++----
 client/src/pages/index.vue         | 42 ++++++++++++++++++++++++++++--
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/client/src/components/TitleBox.vue b/client/src/components/TitleBox.vue
index 63b43d9..14df46f 100644
--- a/client/src/components/TitleBox.vue
+++ b/client/src/components/TitleBox.vue
@@ -21,9 +21,9 @@
     justify-content: center;
 
     @media (max-width: $phone-max-width) {
-      padding: 40px 0;      
+      padding: 40px 0;
     }
-}
+  }
 
   &__titleborderbox1,
   &__titleborderbox2,
@@ -57,9 +57,9 @@
     @media (max-width: $phone-max-width) {
       top: 75px;
       width: 300px;
-      height: 80px;      
+      height: 80px;
     }
-}
+  }
 
   &__titleborderbox3 {
     position: absolute;
@@ -81,7 +81,7 @@
     text-align: center;
 
     @media (max-width: $phone-max-width) {
-      font-size: 32px;      
+      font-size: 32px;
     }
   }
 
diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 9741c07..7366c43 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -6,7 +6,9 @@
       <div class="page-index__login">
         <LoginBox />
       </div>
-      <div class="page-index__separator" />
+      <div class="page-index__separator">
+        <span class="page-index__separator-text">{{ $t('or') }}</span>
+      </div>
       <div class="page-index__create-team">
         <Button :border="false" @click="createTeam">{{ $t('create-team') }}</Button>
       </div>
@@ -28,6 +30,7 @@ import useI18n from '@/composables/useI18n'
 
 const { $t } = useI18n({
   'create-team': { en: 'Create Team ...', de: 'Team erstellen ...' },
+  or: { en: 'or', de: 'oder' },
 })
 
 const config = useRuntimeConfig()
@@ -57,18 +60,53 @@ body {
     display: flex;
     width: 100%;
     height: 120px;
+
+    @media (max-width: $phone-max-width) {
+      flex-direction: column;
+      margin: 32px 0 0 0;
+    }
   }
 
   &__login,
   &__create-team {
     width: 320px;
     align-self: center;
+
+    @media (max-width: $phone-max-width) {
+      width: auto;
+    }
   }
 
   &__separator {
     width: 1px;
     margin: 0 48px;
     border-left: $box-primary-border;
+
+    @media (max-width: $phone-max-width) {
+      position: relative;
+      width: 300px;
+      height: 1px;
+      margin: 48px 0;
+      border-left: none;
+      border-bottom: $box-primary-border;
+      align-self: center;
+    }
+
+    &-text {
+      display: none;
+
+      @media (max-width: $phone-max-width) {
+        display: block;
+        position: absolute;
+        top: -10px;
+        left: 120px;
+        width: 60px;
+        background-color: $background-primary-color;
+        font-size: 18px;
+        color: $text-primary-color;
+        text-align: center;
+      }
+    }
   }
 
   &__space {
@@ -81,7 +119,7 @@ body {
     bottom: 0;
     color: #606060;
     cursor: pointer;
-    
+
     &:hover {
       color: #c0c0c0;
     }

From 118dc897ce76a033ff838e132f7071e1f3ccd04d Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Sun, 9 Oct 2022 21:36:51 +0200
Subject: [PATCH 3/9] css: disable create team button in smartphone mode

---
 client/src/pages/index.vue | 34 +++++++---------------------------
 1 file changed, 7 insertions(+), 27 deletions(-)

diff --git a/client/src/pages/index.vue b/client/src/pages/index.vue
index 7366c43..a0d2a31 100644
--- a/client/src/pages/index.vue
+++ b/client/src/pages/index.vue
@@ -6,9 +6,7 @@
       <div class="page-index__login">
         <LoginBox />
       </div>
-      <div class="page-index__separator">
-        <span class="page-index__separator-text">{{ $t('or') }}</span>
-      </div>
+      <div class="page-index__separator" />
       <div class="page-index__create-team">
         <Button :border="false" @click="createTeam">{{ $t('create-team') }}</Button>
       </div>
@@ -30,7 +28,6 @@ import useI18n from '@/composables/useI18n'
 
 const { $t } = useI18n({
   'create-team': { en: 'Create Team ...', de: 'Team erstellen ...' },
-  or: { en: 'or', de: 'oder' },
 })
 
 const config = useRuntimeConfig()
@@ -62,7 +59,6 @@ body {
     height: 120px;
 
     @media (max-width: $phone-max-width) {
-      flex-direction: column;
       margin: 32px 0 0 0;
     }
   }
@@ -77,35 +73,19 @@ body {
     }
   }
 
+  &__create-team {
+    @media (max-width: $phone-max-width) {
+      display: none;
+    }
+  }
+
   &__separator {
     width: 1px;
     margin: 0 48px;
     border-left: $box-primary-border;
 
     @media (max-width: $phone-max-width) {
-      position: relative;
-      width: 300px;
-      height: 1px;
-      margin: 48px 0;
-      border-left: none;
-      border-bottom: $box-primary-border;
-      align-self: center;
-    }
-
-    &-text {
       display: none;
-
-      @media (max-width: $phone-max-width) {
-        display: block;
-        position: absolute;
-        top: -10px;
-        left: 120px;
-        width: 60px;
-        background-color: $background-primary-color;
-        font-size: 18px;
-        color: $text-primary-color;
-        text-align: center;
-      }
     }
   }
 

From 75f476c55fc86028c4b27c45b71bb770ca7b78dd Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Sun, 9 Oct 2022 23:02:31 +0200
Subject: [PATCH 4/9] css: adapt TopBar and Lobby to smartphone

---
 client/src/components/Lobby.vue  | 10 +++++++++-
 client/src/components/TopBar.vue | 20 ++++++++++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/client/src/components/Lobby.vue b/client/src/components/Lobby.vue
index 54b1543..2ffff95 100644
--- a/client/src/components/Lobby.vue
+++ b/client/src/components/Lobby.vue
@@ -29,16 +29,24 @@ const { $t } = useI18n({
 
   &__message {
     flex-grow: 1;
-    margin: 60px 0 0 200px;
+    margin: 60px 48px 0 200px;
     font-family: $font-secondary;
     font-size: 24px;
     text-align: center;
     color: $text-primary-color;
+
+    @media (max-width: $phone-max-width) {
+      margin: 60px 48px;
+    }
   }
 
   &__players-list {
     width: 200px;
     margin: 16px 16px 0 0;
+
+    @media (max-width: $phone-width) {
+      display: none;
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/client/src/components/TopBar.vue b/client/src/components/TopBar.vue
index 064a33b..2246570 100644
--- a/client/src/components/TopBar.vue
+++ b/client/src/components/TopBar.vue
@@ -76,7 +76,13 @@ const actionLogout = async () => {
     padding: 0 16px;
     text-align: center;
     color: $text-primary-color;
+  
   }
+  &__username {
+    @media (max-width: $phone-width) {
+      display: none;
+    }
+}
   
   &__actionbar {
     flex-grow: 1;
@@ -86,6 +92,12 @@ const actionLogout = async () => {
       color: $text-primary-color;
       font-size: 24px;
       text-align: center;
+
+      @media (max-width: $phone-width) {
+        margin-left: 24px;
+        text-align: left;
+        font-size: 20px;
+      }
     }
   }
 
@@ -94,6 +106,10 @@ const actionLogout = async () => {
     height: calc(64px - 2 * 16px);
     margin: 16px 0;
     background-color: $topbar-separator-color;
+
+    @media (max-width: $phone-width) {
+      display: none;
+    }
   }
 
   &__logout-button {
@@ -104,6 +120,10 @@ const actionLogout = async () => {
     &:hover {
       color: $text-primary-hover-color;
     }
+
+    @media (max-width: $phone-width) {
+      padding-right: 0;
+    }
   }
 }
 </style>
\ No newline at end of file

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 5/9] 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 {

From 673242ba11d7f1092e07c3882618767a0ae5eb4e Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Mon, 10 Oct 2022 19:01:27 +0200
Subject: [PATCH 6/9] css: adapt ReadySet to smartphone

---
 client/src/components/ReadySet.vue | 35 ++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/client/src/components/ReadySet.vue b/client/src/components/ReadySet.vue
index 92b0373..25a3307 100644
--- a/client/src/components/ReadySet.vue
+++ b/client/src/components/ReadySet.vue
@@ -52,6 +52,11 @@ const textSize = computed((): string => {
       animation: fade-out 0.3s linear;
       animation-fill-mode: forwards;
     }
+
+    @media (max-width: $phone-max-width) {
+      width: 360px;
+      height: 360px;
+    }
   }
 
   &__box1 {
@@ -65,6 +70,14 @@ const textSize = computed((): string => {
     border: $animationbox-border;
     border-radius: 50px;
     z-index: 5;
+
+    @media (max-width: $phone-max-width) {
+      left: 54px;
+      top: 54px;
+      width: 240px;
+      height: 240px;
+      border-width: 6px;
+    }
   }
 
   &__box2 {
@@ -77,6 +90,14 @@ const textSize = computed((): string => {
     background-color: $animationbox-animation-color;
     animation: spin-rev 5s linear infinite;
     z-index: 4;
+
+    @media (max-width: $phone-max-width) {
+      left: 50px;
+      top: 50px;
+      width: 260px;
+      height: 260px;
+      border-radius: 100px;
+    }
   }
 
   &__box3 {
@@ -89,6 +110,14 @@ const textSize = computed((): string => {
     background-color: $animationbox-animation-color;
     z-index: 3;
     animation: spin 6s linear infinite;
+
+    @media (max-width: $phone-max-width) {
+      left: 50px;
+      top: 50px;
+      width: 260px;
+      height: 260px;
+      border-radius: 100px;
+    }
   }
 
   &__text {
@@ -117,6 +146,12 @@ const textSize = computed((): string => {
     &__popup {
       animation: pop 0.5s ease-in-out;
     }
+
+    @media (max-width: $phone-max-width) {
+      width: 360px;
+      height: 360px;
+      line-height: 360px;
+    }
   }
 }
 

From f119935467d4a84e6aed022c97ad9479f2ae4c38 Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Mon, 10 Oct 2022 19:31:32 +0200
Subject: [PATCH 7/9] css: adapt Playground to smartphone

---
 client/src/assets/css/media.scss     |  1 +
 client/src/components/Playground.vue | 40 +++++++++++++++++++++++++---
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/client/src/assets/css/media.scss b/client/src/assets/css/media.scss
index c0f941c..4c73005 100644
--- a/client/src/assets/css/media.scss
+++ b/client/src/assets/css/media.scss
@@ -1,3 +1,4 @@
 $phone-width: 560px;
 $phone-max-width: 767px;
 $tablet-width: 768px;
+$desktop-min-width: 880px;
diff --git a/client/src/components/Playground.vue b/client/src/components/Playground.vue
index fb953c0..56d004a 100644
--- a/client/src/components/Playground.vue
+++ b/client/src/components/Playground.vue
@@ -51,7 +51,7 @@ const showQuote = ref(false)
 window.setTimeout(() => { showQuote.value = true }, 100)
 const showSkipButton = computed(() => game.phase === 'select-quote')
 const badgeMap = computed(() => {
-  const badgeMap = {} as { [key: string]: number}
+  const badgeMap = {} as { [key: string]: number }
   if (game.phase === 'reveal-show-count') {
     for (const id in round.revelation.votes) {
       badgeMap[id] = round.revelation.votes[id].length
@@ -61,7 +61,7 @@ const badgeMap = computed(() => {
 })
 
 const disabledMap = computed(() => {
-  const disabledMap = {} as { [key: string]: boolean}
+  const disabledMap = {} as { [key: string]: boolean }
   if (game.phase === 'reveal-source') {
     for (const id in round.revelation.sources) {
       disabledMap[id] = !round.revelation.sources[id]
@@ -71,7 +71,7 @@ const disabledMap = computed(() => {
   return disabledMap
 })
 
-const showMap = ref({} as { [key: string]: boolean})
+const showMap = ref({} as { [key: string]: boolean })
 sources.forEach((source, index) => {
   window.setTimeout(() => {
     showMap.value[source.id] = true
@@ -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 {
@@ -111,10 +125,14 @@ sources.forEach((source, index) => {
     flex-grow: 4;
     opacity: 0;
     transition: opacity 1s linear;
-    
+
     &__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%;
   }

From 763e517c3f5d546678281bbe7e8e3c909c5b9680 Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Mon, 10 Oct 2022 19:36:33 +0200
Subject: [PATCH 8/9] css: adapt highscores to smartphone

---
 client/src/components/Highscores.vue | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/client/src/components/Highscores.vue b/client/src/components/Highscores.vue
index a90fae5..0664e37 100644
--- a/client/src/components/Highscores.vue
+++ b/client/src/components/Highscores.vue
@@ -50,6 +50,10 @@ const players = computed(() => {
     margin: 64px 0;
     width: 600px;
     min-height: 600px;
+
+    @media (max-width: $phone-max-width) {
+      width: 300px;
+    }
   }
 
   &__table-outer-border {
@@ -93,6 +97,12 @@ const players = computed(() => {
   &__title {
     font-family: $font-primary;
     font-size: 48px;
+
+    @media (max-width: $phone-max-width) {
+      font-size: 32px;
+      padding: 20px;
+      text-align: center;
+    }
   }
 
   &__table-body {
@@ -103,6 +113,9 @@ const players = computed(() => {
     font-family: $font-secondary;
     font-size: 32px;
 
+    @media (max-width: $phone-max-width) {
+      font-size: 24px;
+    }
   }
 
   &__table {

From b16ae59cd92ba0e6a4b6a1b31329daf62ac37e14 Mon Sep 17 00:00:00 2001
From: Settel <achim.settelmeier@diva-e.com>
Date: Tue, 11 Oct 2022 20:34:45 +0200
Subject: [PATCH 9/9] version: bump to 2.6

---
 client/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/package.json b/client/package.json
index a9c2b90..e3a50bc 100644
--- a/client/package.json
+++ b/client/package.json
@@ -1,6 +1,6 @@
 {
   "name": "knowyt",
-  "version": "2.5",
+  "version": "2.6",
   "private": true,
   "scripts": {
     "lint": "tsc-strict",