Clean up moves display

assets/css/_board.scss

@@ -1,13 +1,3 @@
-:root {
-  --board-size: 90vmin;
-}
-
-@media (min-aspect-ratio: 10/11) {
-  :root {
-    --board-size: 80vmin;
-  }
-}
-
 @mixin move-indicator {
   border-radius: 50%;
   content: "";
@@ -25,6 +15,7 @@
   border-spacing: 1px;
   box-shadow: 0 calc(var(--board-size) / 200) calc(var(--board-size) / 40) $board-shadow-color;
   color: $white-square-color;
+  grid-area: board;
   height: var(--board-size);
   padding: calc(var(--board-size) / 20);
   position: relative;

assets/css/_game_grid.scss

@@ -0,0 +1,7 @@
+.game-grid {
+  display: grid;
+  grid-gap: $base-spacing;
+  grid-template-areas: "board moves";
+  grid-template-columns: min-content 1fr;
+  grid-template-rows: var(--board-size);
+}

assets/css/_game_list.scss

@@ -6,6 +6,6 @@
 }
 
 .your-turn {
-  font-weight: bold;
   background-color: $your-turn-background-color;
+  font-weight: bold;
 }

assets/css/_headings.scss

@@ -0,0 +1,6 @@
+.heading {
+  font-family: $heading-font-family;
+  font-size: modular-scale(1);
+  line-height: $heading-line-height;
+  margin: 0 0 $small-spacing;
+}

assets/css/_layout.scss

@@ -1,6 +1,7 @@
 html {
   background: $background-color;
   color: mix($background-color, $foreground-color, 20%);
+  font-weight: 300;
 }
 
 a {
@@ -11,7 +12,6 @@ h1,
 h2,
 h3,
 h4 {
-  font-variant: small-caps;
   font-weight: 300;
 }
 

assets/css/_move_list.scss

@@ -0,0 +1,16 @@
+.move-list {
+  grid-area: moves;
+  overflow-y: auto;
+}
+
+.move-list__line-number {
+  color: mix($background-color, $foreground-color);
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: "tnum";
+}
+
+.move-list__header--white,
+.move-list__move--white,
+.move-list__line-number {
+  text-align: right;
+}

assets/css/_tables.scss

@@ -0,0 +1,16 @@
+.table--condensed {
+  width: auto;
+
+  caption {
+    text-align: left;
+  }
+
+  tr {
+    border: 0;
+  }
+
+  th,
+  td {
+    padding: 0 $base-spacing 0 0;
+  }
+}

assets/css/_utilities.scss

@@ -0,0 +1,3 @@
+.visually-hidden {
+  display: none;
+}

assets/css/_variables.scss

@@ -28,3 +28,14 @@ $available-outline-color: rgba(lighten($available-square-color, 20%), 0.5);
 
 $colours: "black" "white";
 $pieces: king queen bishop knight rook pawn;
+
+:root {
+  --board-size: 90vmin;
+}
+
+@media (min-aspect-ratio: 10/11) {
+  :root {
+    --board-size: 80vmin;
+  }
+}
+

assets/css/app.scss

@@ -1,11 +1,18 @@
 @import "bourbon/bourbon";
-@import "base/base";
 @import "vendor/family";
+@import "base/base";
 
 @import "variables";
 
+@import "utilities";
+
+@import "tables";
+@import "headings";
+
 @import "layout";
 @import "nav";
 
 @import "game_list";
 @import "board";
+@import "move_list";
+@import "game_grid";

assets/css/base/_tables.scss

@@ -1,6 +1,5 @@
 table {
   border-collapse: collapse;
-  margin: $base-spacing 0;
   table-layout: fixed;
   text-align: left;
   width: 100%;

assets/js/app.js

@@ -35,7 +35,7 @@ class App extends React.Component {
     const { store, gameId } = this.props;
 
     return (
-      <div>
+      <div className="game-grid">
         <ChessBoard
           gameId={gameId}
           store={store}

assets/js/components/move-list.js

@@ -1,6 +1,7 @@
 import React from "react";
-import { connect } from "react-redux";
 import _ from "lodash";
+import { connect } from "react-redux";
+import classNames from "classnames";
 
 const pieceToNotation = (piece) => {
   const pieces = {
@@ -15,10 +16,14 @@ const pieceToNotation = (piece) => {
   return pieces[piece.type];
 };
 
+const moveClass = (move) => {
+  return classNames("move-list__move", "move-list__move--" + move.piece.colour);
+}
+
 const renderMove = (move) => {
   if (move != undefined) {
     return (
-      <td className="move">
+      <td className={moveClass(move)}>
         {pieceToNotation(move.piece)}
         {move.piece_captured ? "x" : ""}
         {move.to}
@@ -28,9 +33,12 @@ const renderMove = (move) => {
 };
 
 const renderMoves = (moves) => {
+  let lineNumber = 1;
+
   return _.map(moves, (move) => {
     return (
       <tr key={move[0].id}>
+        <th scope="row" className="move-list__line-number">{lineNumber++}.</th>
         {renderMove(move[0])}
         {renderMove(move[1])}
       </tr>
@@ -40,17 +48,26 @@ const renderMoves = (moves) => {
 
 const MoveList = (props) => {
   return (
-    <table className="move-list">
+    <div className="move-list">
+      <table className="table table--condensed">
+        <caption className="heading">Moves</caption>
+
         <thead>
           <tr>
-          <th>White</th>
+            <th className="move-list__line-number">
-          <th>Black</th>
+              <span className="visually-hidden">Move no.</span>
+            </th>
+
+            <th className="move-list__header--white">White</th>
+            <th className="move-list__header--black">Black</th>
           </tr>
         </thead>
+
         <tbody>
           {renderMoves(props.moves)}
         </tbody>
       </table>
+    </div>
   );
 };
 

lib/chess_web/templates/game/index.html.eex

@@ -1,6 +1,6 @@
 <h2><%= gettext "Listing games" %></h2>
 
-<table class="table">
+<table class="table table--games-list">
   <tbody>
     <%= for game <- @games do %>
       <tr class="<%= turn_class(@conn, game) %>">

lib/chess_web/templates/game/show.html.eex

@@ -1,5 +1,3 @@
-<p><%= link gettext("Back to games"), to: game_path(@conn, :index) %></p>
-
 <h2><%= gettext "Game with %{name}", name: opponent(@conn, @game).name %></h2>
 
 <div id="app" data-game-id="<%= @game.id %>">