diff options
Diffstat (limited to 'web')
| -rw-r--r-- | web/pw-server/src/lib/components/navbar/UserControls.svelte | 9 | ||||
| -rw-r--r-- | web/pw-server/src/routes/__layout.svelte | 79 | ||||
| -rw-r--r-- | web/pw-server/src/routes/bots/[bot_name]/stats.svelte | 22 |
3 files changed, 82 insertions, 28 deletions
diff --git a/web/pw-server/src/lib/components/navbar/UserControls.svelte b/web/pw-server/src/lib/components/navbar/UserControls.svelte index fa920ad..184a40a 100644 --- a/web/pw-server/src/lib/components/navbar/UserControls.svelte +++ b/web/pw-server/src/lib/components/navbar/UserControls.svelte @@ -52,6 +52,7 @@ font-size: 18px; font-family: Helvetica, sans-serif; padding: 4px 8px; + font-weight: 400; } .account-href { @@ -76,4 +77,12 @@ display: flex; align-items: center; } + + // TODO: pretty hacky + @media screen and (max-width: 600px) { + .user-controls { + flex-direction: column; + align-items: flex-start; + } + } </style> diff --git a/web/pw-server/src/routes/__layout.svelte b/web/pw-server/src/routes/__layout.svelte index 4baefce..6d00a5f 100644 --- a/web/pw-server/src/routes/__layout.svelte +++ b/web/pw-server/src/routes/__layout.svelte @@ -1,11 +1,22 @@ <script lang="ts"> + import { afterNavigate, beforeNavigate } from "$app/navigation"; import UserControls from "$lib/components/navbar/UserControls.svelte"; import "./style.css"; + + let isExpanded = false; + + function toggleExpanded() { + isExpanded = !isExpanded; + } + + afterNavigate(() => { + isExpanded = false; + }); </script> <div class="outer-container"> - <div class="navbar"> + <div class="navbar" class:expanded={isExpanded}> <div class="navbar-left"> <div class="navbar-header"> <a href="/">PlanetWars</a> @@ -19,9 +30,16 @@ <div class="navbar-item"> <a href="/docs/rules">How to play</a> </div> + <div class="navbar-divider"></div> + <div class="navbar-item"> + <UserControls /> + </div> + </div> - <div class="navbar-right"> - <UserControls /> + <!-- <div class="navbar-right"> + </div> --> + <div class="navbar-expand" on:click={toggleExpanded}> + expand </div> </div> <slot /> @@ -30,6 +48,8 @@ <style lang="scss" global> @import "src/styles/global.scss"; + $navbarHeight: 48px; + .outer-container { width: 100vw; height: 100vh; @@ -38,7 +58,7 @@ } .navbar { - height: 48px; + height: $navbarHeight; background-color: $bg-color; border-bottom: 1px solid; flex-shrink: 0; @@ -49,14 +69,20 @@ .navbar-left { display: flex; + width: 100%; } .navbar-right { display: flex; } + .navbar-divider { + flex-grow: 1; + } + .navbar-header { - margin: auto 0; + height: $navbarHeight; + padding-top: 12px; padding-right: 24px; } @@ -69,11 +95,52 @@ margin: auto 0; padding: 0 8px; } - .navbar-item a { font-size: 14px; color: #fff; text-decoration: none; font-weight: 600; } + + .navbar-expand { + color: white; + // margin: auto 0px; + display: none; + font-size: 16px; + padding-top: 14px; + } + @media screen and (max-width: 600px) { + .navbar-item { + display: none; + } + + .navbar-divider { + display: none; + } + + .navbar.expanded { + height: auto; + } + + .navbar.expanded .navbar-left { + flex-direction: column; + } + + .navbar.expanded .navbar-item { + display: block; + padding: 8px; + } + + .navbar-right { + display: none; + } + + .navbar.expanded .navbar-right { + display: flex; + } + + .navbar-expand { + display: block; + } + } </style> diff --git a/web/pw-server/src/routes/bots/[bot_name]/stats.svelte b/web/pw-server/src/routes/bots/[bot_name]/stats.svelte index 67b769f..317e293 100644 --- a/web/pw-server/src/routes/bots/[bot_name]/stats.svelte +++ b/web/pw-server/src/routes/bots/[bot_name]/stats.svelte @@ -116,28 +116,6 @@ margin: 50px auto; } - .header { - display: flex; - justify-content: space-between; - align-items: flex-end; - margin-bottom: 60px; - border-bottom: 1px solid black; - } - - $header-space-above-line: 12px; - - .bot-name { - font-size: 24pt; - margin-bottom: $header-space-above-line; - } - - .owner-name { - font-size: 14pt; - text-decoration: none; - color: #333; - margin-bottom: $header-space-above-line; - } - .leaderboard { margin: 18px 10px; text-align: center; |