From 707b9cce615057e103dfad736a2e340edbb03895 Mon Sep 17 00:00:00 2001
From: Maciej Caderek <maciej.caderek@gmail.com>
Date: Tue, 22 Feb 2022 03:56:58 +0100
Subject: [PATCH] WIP

---
 src/ui/components/GameTabs.css |  4 ++++
 src/ui/components/GameTabs.tsx | 10 ++++++++--
 src/ui/components/Header.tsx   |  4 ++--
 src/ui/components/Moves.tsx    | 10 ++++++----
 4 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/ui/components/GameTabs.css b/src/ui/components/GameTabs.css
index 17ff9b4..a712390 100644
--- a/src/ui/components/GameTabs.css
+++ b/src/ui/components/GameTabs.css
@@ -26,6 +26,10 @@
   column-gap: 0.5rem;
 }
 
+.span2 {
+  grid-row-end: span 2;
+}
+
 .span3 {
   grid-row-end: span 3;
 }
diff --git a/src/ui/components/GameTabs.tsx b/src/ui/components/GameTabs.tsx
index 022714a..0a0156d 100644
--- a/src/ui/components/GameTabs.tsx
+++ b/src/ui/components/GameTabs.tsx
@@ -54,8 +54,14 @@ const GameTabs: Component<{ moves: readonly string[]; handlers: Handlers }> = (
       <Switch>
         <Match when={state.activeTab === "game"}>
           <Info handlers={props.handlers}></Info>
-          <Moves moves={props.moves} handlers={props.handlers} />
-          <Controls handlers={props.handlers} />
+          <Moves
+            moves={props.moves}
+            handlers={props.handlers}
+            class={state.layout === "single" ? "span2" : undefined}
+          />
+          <Show when={state.layout !== "single"}>
+            <Controls handlers={props.handlers} />
+          </Show>
         </Match>
         <Match when={state.activeTab === "load"}>
           <Load handlers={props.handlers} class="span3" />
diff --git a/src/ui/components/Header.tsx b/src/ui/components/Header.tsx
index a4474a4..35a9b50 100644
--- a/src/ui/components/Header.tsx
+++ b/src/ui/components/Header.tsx
@@ -12,9 +12,9 @@ const Header: Component<{ handlers: Handlers }> = () => {
         <div class="header__logo-pic" />
       </div>
       <div class="header__options">
-        <div class="header__options-ico" onClick={() => {}}>
+        {/* <div class="header__options-ico" onClick={() => {}}>
           <i class="las la-question-circle"></i>
-        </div>
+        </div> */}
         <div
           class="header__options-ico"
           onClick={() => {
diff --git a/src/ui/components/Moves.tsx b/src/ui/components/Moves.tsx
index 71a8461..8730f25 100644
--- a/src/ui/components/Moves.tsx
+++ b/src/ui/components/Moves.tsx
@@ -5,9 +5,11 @@ import Scrollable from "./reusable/Scrollable";
 import "./Moves.css";
 import { state } from "../../state";
 
-const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
-  props
-) => {
+const Moves: Component<{
+  moves: readonly string[];
+  handlers: Handlers;
+  class?: string;
+}> = (props) => {
   createEffect(() => {
     if (!state.mobile) {
       document.querySelector(`[data-ply="${state.ply}"]`)?.scrollIntoView();
@@ -15,7 +17,7 @@ const Moves: Component<{ moves: readonly string[]; handlers: Handlers }> = (
   });
 
   return (
-    <Scrollable class="moves">
+    <Scrollable class={"moves" + (props.class ? ` ${props.class}` : "")}>
       <Show when={props.moves.length === 0}>
         <p class="moves__turn">
           {state.game.getPosition(0).turn === "w" ? "White" : "Black"} to move.