From b9e8284334773aa6ff54c9f0c12bb985c81a7de8 Mon Sep 17 00:00:00 2001
From: Alexander Popov <iiiypuk@iiiypuk.me>
Date: Thu, 25 Feb 2021 04:29:23 +0300
Subject: [PATCH] fix small devices view

---
 _media/js/game.js |  9 ++++++++-
 index.html        | 10 +++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/_media/js/game.js b/_media/js/game.js
index 3fdc4eb..40d6a96 100644
--- a/_media/js/game.js
+++ b/_media/js/game.js
@@ -35,7 +35,7 @@ function generateKeyboard(layout)
 
 	layout.split('').forEach(function(letter)
 	{
-		keyboardHtmlStr = keyboardHtmlStr + '<button class="button outline is-marginless" id="' + letter +
+		keyboardHtmlStr = keyboardHtmlStr + '<button class="button clear is-marginless" id="' + letter +
 			'" onclick="offChar(\'' + letter + '\')"> ' + letter + '</button>';
 	})
 
@@ -123,4 +123,11 @@ window.onload = function()
 
 	// fix load empty word
 	// if (gameWord === 0) { document.location.reload(true); }
+
+	if (window.screen.availWidth <= 599)
+	{
+		document.querySelector('#lives').classList.remove('error');
+		document.querySelector('#lives').classList.add('dark');
+		alert(599);
+	}
 }
diff --git a/index.html b/index.html
index cad2ec9..10a3299 100644
--- a/index.html
+++ b/index.html
@@ -25,11 +25,11 @@
   <div class="container">
     <header>
       <nav class="nav">
-        <div class="nav-left">
+        <div class="nav-left hide-xs">
           <a class="brand" href="#">WORDs</a>
         </div>
         <div class="nav-center">
-          <p id="lives" class="button error">loading...</p>
+          <p id="lives" class="button error is-full-width">loading...</p>
         </div>
         <div class="nav-right">
           <!-- <a class="button dropdown">Language</a> -->
@@ -41,7 +41,7 @@
     <nav class="tabs is-full">
       <a onclick="document.location.reload(true);" class="active" id="gameButton">Game</a>
       <a onclick="showPage(this, pageStatistics);" id="statsButton">Statistics</a>
-      <a onclick="showPage(this, pageCredits);" id="creditsButton">Credits</a>
+      <a onclick="showPage(this, pageCredits);" id="creditsButton" class="hide-xs">Credits</a>
     </nav>
 
     <br>
@@ -56,8 +56,8 @@
       </div>
     </section>
 
-    <hr>
-    <footer class="text-center">
+    <footer class="text-center hide-xs">
+      <hr>
       <p class="text-grey is-marginless is-small">
         by iiiypuk<br>
         ver: 2.0.0