Merge remote-tracking branch 'old/develop' into develop

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "knowyt",
-  "version": "2.7",
+  "version": "2.8",
   "private": true,
   "scripts": {
     "lint": "tsc-strict",

client/src/assets/css/components.scss

@@ -1,4 +1,5 @@
 @import './colors.scss';
+@import './media.scss';
 
 $font-primary: 'Wendy One';
 $font-secondary: 'Dosis';

client/src/assets/css/media.scss

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

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 {

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 {

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>

client/src/components/Playground.vue

@@ -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%;
   }

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;
+      }
     }
   }
 

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 {

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;
+    }
   }
 }
 

client/src/components/TitleBox.vue

@@ -19,6 +19,10 @@
     padding: 80px 0;
     display: flex;
     justify-content: center;
+
+    @media (max-width: $phone-max-width) {
+      padding: 40px 0;
+    }
   }
 
   &__titleborderbox1,
@@ -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,6 +53,12 @@
     width: 720px;
     height: 120px;
     z-index: 2;
+
+    @media (max-width: $phone-max-width) {
+      top: 75px;
+      width: 300px;
+      height: 80px;
+    }
   }
 
   &__titleborderbox3 {
@@ -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>

client/src/components/TopBar.vue

@@ -76,6 +76,12 @@ const actionLogout = async () => {
     padding: 0 16px;
     text-align: center;
     color: $text-primary-color;
+  
+  }
+  &__username {
+    @media (max-width: $phone-width) {
+      display: none;
+    }
 }
   
   &__actionbar {
@@ -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>

client/src/pages/index.vue

@@ -57,18 +57,36 @@ body {
     display: flex;
     width: 100%;
     height: 120px;
+
+    @media (max-width: $phone-max-width) {
+      margin: 32px 0 0 0;
+    }
   }
 
   &__login,
   &__create-team {
     width: 320px;
     align-self: center;
+
+    @media (max-width: $phone-max-width) {
+      width: auto;
+    }
+  }
+
+  &__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) {
+      display: none;
+    }
   }
 
   &__space {