Menu responsiveness, to-do board

public/assets/css/main.css

@@ -52,6 +52,8 @@ nav span:hover {
 /* index */
 #mainMenuView .modes {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 2rem;
 }
 
@@ -74,6 +76,8 @@ nav span:hover {
 /* PvP/index */
 #pvpMenuView .modes {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 2rem;
 }
 
@@ -96,6 +100,8 @@ nav span:hover {
 /* PvP/create */
 #pvpCreateView .modes {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 2rem;
 }
 
@@ -138,6 +144,8 @@ nav span:hover {
 /* PvP/join */
 #pvpJoinView .modes {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 2rem;
 }
 
@@ -182,6 +190,8 @@ nav span:hover {
 /* Preparation */
 #preparingGame .modes {
     display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
     gap: 2rem;
 }
 
@@ -214,6 +224,7 @@ nav span:hover {
     display: flex;
     margin: 3rem;
     flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
     width: 45vw;
     justify-content: space-between;
@@ -223,6 +234,7 @@ nav span:hover {
     display: flex;
     gap: 1rem;
     width: 60vw;
+    flex-wrap: wrap;
 }
 
 #profileView .matchList {

public/assets/css/responsive.css

@@ -0,0 +1,42 @@
+@media only screen and (max-width: 1280px) {
+    #profileView .stats  {
+        flex-direction: column;
+    }
+
+    #profileView .profile {
+        width: auto;
+        justify-content: center;
+        text-align: center;
+    }
+}
+
+@media only screen and (max-width: 820px) {
+    #pvpCreateView .modes div {
+        max-width: 90vw;
+        height: 19rem;
+        padding: 0.5rem 1.5rem;
+        box-sizing: border-box;
+    }
+
+    #pvpJoinView .modes div {
+        max-width: 90vw;
+        height: 8rem;
+        padding: 2rem 1.5rem;
+    }
+
+    #profileView .matchList .match:hover {
+        height: 16rem;
+    }
+
+    #profileView .stats {
+        width: 90vw;
+    }
+
+    #profileView .matchList .match {
+        height: 7rem;
+    }
+
+    #profileView .match div {
+        flex-direction: column;
+    }
+}

utils/auth.js

@@ -151,7 +151,7 @@ export class MailAuth {
     getProfile(userId) {
         return new Promise((resolve, reject) => {
             const conn = mysql.createConnection(this.mysqlOptions);
-            conn.query(`SELECT nickname, account_creation FROM accounts WHERE user_id = ${conn.escape(userId)}; SELECT ROUND((AVG(statistics.won)) * 100) AS winrate, COUNT(statistics.match_id) AS alltime_matches, COUNT(CASE WHEN (YEAR(matches.date) = YEAR(NOW()) AND MONTH(matches.date) = MONTH(NOW())) THEN matches.match_id END) AS monthly_matches FROM accounts NATURAL JOIN statistics NATURAL JOIN matches WHERE accounts.user_id = ${conn.escape(userId)}; SELECT statistics.match_id, accounts.nickname AS opponent, matches.match_type, statistics.won, matches.duration, matches.date FROM statistics JOIN matches ON matches.match_id = statistics.match_id JOIN accounts ON accounts.user_id = (CASE WHEN matches.host_id != statistics.user_id THEN matches.host_id ELSE matches.guest_id END) WHERE statistics.user_id = ${conn.escape(userId)};`, async (error, response) => {
+            conn.query(`SELECT nickname, account_creation FROM accounts WHERE user_id = ${conn.escape(userId)}; SELECT ROUND((AVG(statistics.won)) * 100) AS winrate, COUNT(statistics.match_id) AS alltime_matches, COUNT(CASE WHEN (YEAR(matches.date) = YEAR(NOW()) AND MONTH(matches.date) = MONTH(NOW())) THEN matches.match_id END) AS monthly_matches FROM accounts NATURAL JOIN statistics NATURAL JOIN matches WHERE accounts.user_id = ${conn.escape(userId)}; SELECT statistics.match_id, accounts.nickname AS opponent, matches.match_type, statistics.won, matches.duration, matches.date FROM statistics JOIN matches ON matches.match_id = statistics.match_id JOIN accounts ON accounts.user_id = (CASE WHEN matches.host_id != statistics.user_id THEN matches.host_id ELSE matches.guest_id END) WHERE statistics.user_id = ${conn.escape(userId)} LIMIT 10;`, async (error, response) => {
                 if (error) reject(error);
                 else {
                     if (response[0].length === 0 || response[1].length === 0) {

views/layouts/main.handlebars

@@ -12,6 +12,7 @@
     <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">
     <link rel="stylesheet" href="/assets/css/board.css">
     <link rel="stylesheet" href="/assets/css/main.css">
+    <link rel="stylesheet" href="/assets/css/responsive.css">
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
 </head>
 <body>