From 5c71a0f73717bffefb5e23a9e100adb62fc54a61 Mon Sep 17 00:00:00 2001
From: Philip Paquette <pcpaquette@gmail.com>
Date: Sun, 7 Jul 2019 09:23:59 -0400
Subject: Updated the web interface to have 3 tabs - Results / Messages /
 Current

- Updated dependencies in package-lock.json
- Set default homepage to "." so that built pages are relative to "index.html".
- Add module "helmet" to handle page title.
- Simplified page loading (replace static function builder with direct call to a method with component as argument).
- Move function loadGameFromDisk in a separate file.
- Use React context to access page object.
- Add a new React component "Navigation" and simplify page rendering.
- Add ability to choose power for any kind of loaded game.

In phase history:
- Show messages from all past and currently displayed phase.
- Display messages from past phase with gray background.
- Show messages per protagonist in tabs.
- Show message phase in message header
- Display message wide (header left, body right).

- Display short names for powers in message tabs header.
- Add warn function to page component.
- Messages from previous phase are displayed with gray color text.
- Game registration password input is displayed only if required
- On games page:
  - sorted by descending timestamp created.
  - In table, game ID is displayed with human readable created date.
- Prevent messages from displaying twice.
- Re-add checkbox "show orders" to display arrow orders on past maps.
- Handle HTML break-lines <br/> and remove all other HTML tags when displaying messages.
- Use latest phase as current game phase when loading a game from disk.
---
 diplomacy/web/src/index.css | 47 +++++++++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 12 deletions(-)

(limited to 'diplomacy/web/src/index.css')

diff --git a/diplomacy/web/src/index.css b/diplomacy/web/src/index.css
index f33b116..f270135 100644
--- a/diplomacy/web/src/index.css
+++ b/diplomacy/web/src/index.css
@@ -1,7 +1,7 @@
 /** Bootstrap. **/
 /** Common. **/
 
-a.dropdown-item {
+span.dropdown-item {
     cursor: pointer;
 }
 
@@ -46,7 +46,7 @@ a.dropdown-item {
     color: green;
 }
 
-#past-map svg, #current-map svg {
+#past-map svg, #current-map svg, #messages-map svg {
     display: block;
     width: 100%;
     height: auto;
@@ -94,10 +94,25 @@ main {
     text-align: center;
 }
 
+span.power-name {
+    display: inline-block;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    width: 10rem;
+}
+
 #current-power {
     color: red;
     font-weight: bold;
     text-align: center;
+    display: inline-block;
+    margin-left: 1rem;
+    margin-right: 1rem;
+    width: 10rem;
+}
+
+.form-current-power {
+    display: inline-block;
 }
 
 .page-messages {
@@ -173,9 +188,10 @@ main {
     display: inline-block;
 }
 
-.page > .title {
+.page > main > .title {
     border-bottom: 1px solid silver;
-    padding: 10px;
+    padding-bottom: 10px;
+    margin-bottom: 10px;
 }
 
 .left {
@@ -341,19 +357,18 @@ main {
 }
 
 .game-message {
-    padding: 10px;
-    width: 75%;
-    border-width: 4px;
+    width: 90%;
+    border-width: 2px;
     border-style: solid;
-    border-radius: 10px;
+    margin: 0;
 }
 
 .game-message .message-header {
     font-weight: bold;
+    border-right: inherit;
 }
 
 .game-message.message-recipient {
-    float: left;
     border-color: rgb(240, 200, 200);
     background-color: rgb(255, 220, 220);
     cursor: pointer;
@@ -366,18 +381,26 @@ main {
 }
 
 .game-message.message-sender {
-    float: right;
     border-color: rgb(200, 200, 240);
     background-color: rgb(220, 220, 255);
+    float: right;
 }
 
 .game-message-wrapper {
-    overflow: auto;
     clear: both;
+    overflow: auto;
+}
+
+.game-message-wrapper.other-phase {
+    color: rgb(140, 140, 140);
 }
 
 .game-message-wrapper + .game-message-wrapper {
-    margin-top: 10px;
+    padding-top: 5px;
+}
+
+.game-message-wrapper.other-phase + .game-message-wrapper.new-phase {
+    margin-top: 5px;
 }
 
 .button-server {
-- 
cgit v1.2.3