From 67af10e2e629c131c1aa0655a57c6c15073c48bd Mon Sep 17 00:00:00 2001
From: TrueKuehli <rctcoaster2000@hotmail.de>
Date: Sun, 30 Sep 2018 20:21:22 +0200
Subject: Fixed an issue where the join button would separate from the player
 count

This caused alignment problems and didn't look great. Now they're in a non-breaking container.
---
 .../NodeJSServer/src/modules/server-client.js      |  3 +-
 .../NodeJSServer/src/modules/ui/server-creator.js  |  7 ---
 .../NodeJSServer/src/modules/ui/server-listing.js  | 11 +++--
 .../partials/front-layer/_server-listing.scss      | 54 ++++++++++++----------
 4 files changed, 38 insertions(+), 37 deletions(-)
 delete mode 100644 WebInterface/NodeJSServer/src/modules/ui/server-creator.js

(limited to 'WebInterface/NodeJSServer/src')

diff --git a/WebInterface/NodeJSServer/src/modules/server-client.js b/WebInterface/NodeJSServer/src/modules/server-client.js
index e550bb7..86ea336 100644
--- a/WebInterface/NodeJSServer/src/modules/server-client.js
+++ b/WebInterface/NodeJSServer/src/modules/server-client.js
@@ -1,6 +1,5 @@
 import * as signalR from '@aspnet/signalr';
 import ServerListing from './ui/server-listing.js';
-import ServerCreator from './ui/server-creator.js';
 
 export default class ServerClient {
   constructor(url, serverListingId, debug = false) {
@@ -43,7 +42,7 @@ export default class ServerClient {
   }
 
   createServer(){
-
+    // TODO: Create
   }
 
   messageHandling(){
diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-creator.js b/WebInterface/NodeJSServer/src/modules/ui/server-creator.js
deleted file mode 100644
index 4203dfe..0000000
--- a/WebInterface/NodeJSServer/src/modules/ui/server-creator.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Modal from './modal.js';
-
-export default class ServerCreator extends Modal {
-  constructor() {
-    super('Neues Spiel')
-  }
-}
diff --git a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
index be66573..2c501fd 100644
--- a/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
+++ b/WebInterface/NodeJSServer/src/modules/ui/server-listing.js
@@ -15,12 +15,14 @@ export default class ServerListing {
 
       let serverDiv = document.createElement('div');
       let nameSpan = document.createElement('span');
+      let rightAlignDiv = document.createElement('div');
       let onlineDot = document.createElement('div');
       let playerCountSpan = document.createElement('span');
       let playerCountStaticSpan = document.createElement('span');
       let joinButton = document.createElement('button');
       serverDiv.className = 'server';
       nameSpan.className = 'server-name';
+      rightAlignDiv.className = 'right-aligned-items';
       onlineDot.className = 'player-count-dot';
       playerCountSpan.className = 'player-count';
       playerCountStaticSpan.className = 'player-count-static';
@@ -31,11 +33,12 @@ export default class ServerListing {
       playerCountStaticSpan.textContent = 'Spieler online';
       joinButton.textContent = 'Beitreten';
 
+      rightAlignDiv.appendChild(onlineDot);
+      rightAlignDiv.appendChild(playerCountSpan);
+      rightAlignDiv.appendChild(playerCountStaticSpan);
+      rightAlignDiv.appendChild(joinButton);
       serverDiv.appendChild(nameSpan);
-      serverDiv.appendChild(onlineDot);
-      serverDiv.appendChild(playerCountSpan);
-      serverDiv.appendChild(playerCountStaticSpan);
-      serverDiv.appendChild(joinButton);
+      serverDiv.appendChild(rightAlignDiv)
       this.serverListing.appendChild(serverDiv);
     }
   }
diff --git a/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss
index 2efb73b..7e67178 100644
--- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_server-listing.scss
@@ -60,35 +60,41 @@
           margin: 0.5rem 0;
         }
 
-        .player-count {
-          font-family: 'Roboto Condensed', sans-serif;
-        }
+        .right-aligned-items {
+          margin-left: auto;
+          white-space: nowrap;
+          display: flex;
+          align-items: center;
 
-        .player-count-static {
-          @media (max-width: 1000px) {
-            display: none;
+          .player-count-dot {
+            background-color: $online-green;
+            border-radius: 50%;
+            min-width: 1rem;
+            min-height: 1rem;
+            width: 1rem;
+            height: 1rem;
+            margin-right: 0.25rem;
           }
 
-          white-space: nowrap;
-          margin-left: 0.25rem;
-          letter-spacing: 0;
-          font-family: 'Roboto Condensed', sans-serif;
-        }
+          .player-count {
+            font-family: 'Roboto Condensed', sans-serif;
+          }
 
-        .player-count-dot {
-          background-color: $online-green;
-          border-radius: 50%;
-          min-width: 1rem;
-          min-height: 1rem;
-          width: 1rem;
-          height: 1rem;
-          margin-left: auto;
-          margin-right: 0.25rem;
-        }
+          .player-count-static {
+            @media (max-width: 1000px) {
+              display: none;
+            }
 
-        .join-btn {
-          margin-left: 0.5rem;
-          min-width: 12rem;
+            white-space: nowrap;
+            margin-left: 0.25rem;
+            letter-spacing: 0;
+            font-family: 'Roboto Condensed', sans-serif;
+          }
+
+          .join-btn {
+            margin-left: 0.5rem;
+            min-width: 12rem;
+          }
         }
       }
     }
-- 
cgit v1.2.3-70-g09d2