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] 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