diff options
| author | Philip Paquette <pcpaquette@gmail.com> | 2019-07-07 09:23:59 -0400 |
|---|---|---|
| committer | Philip Paquette <pcpaquette@gmail.com> | 2019-07-07 15:33:01 -0400 |
| commit | 5c71a0f73717bffefb5e23a9e100adb62fc54a61 (patch) | |
| tree | a841ca27065db2c68e07570780549624bbb70f40 /diplomacy/web/src/index.css | |
| parent | d67963031211b32df6dd39d610a6424717729094 (diff) | |
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.
Diffstat (limited to 'diplomacy/web/src/index.css')
| -rw-r--r-- | diplomacy/web/src/index.css | 47 |
1 files changed, 35 insertions, 12 deletions
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 { |