diff options
author | Ilion Beyst <ilion.beyst@gmail.com> | 2022-03-19 21:33:52 +0100 |
---|---|---|
committer | Ilion Beyst <ilion.beyst@gmail.com> | 2022-03-19 21:33:52 +0100 |
commit | 579f16fc51c6a8b5ff34b1afee8c2518b05e22d3 (patch) | |
tree | 982abd6a220234e50f5a255c5c3d901e6ace0b07 /web/pw-server | |
parent | e4e581b3462debeada522e8f034189e01785421c (diff) | |
download | planetwars.dev-579f16fc51c6a8b5ff34b1afee8c2518b05e22d3.tar.xz planetwars.dev-579f16fc51c6a8b5ff34b1afee8c2518b05e22d3.zip |
create common styles for account forms
Diffstat (limited to 'web/pw-server')
-rw-r--r-- | web/pw-server/src/routes/__layout.svelte | 21 | ||||
-rw-r--r-- | web/pw-server/src/routes/index.svelte | 2 | ||||
-rw-r--r-- | web/pw-server/src/routes/login.svelte | 29 | ||||
-rw-r--r-- | web/pw-server/src/routes/register.svelte | 57 | ||||
-rw-r--r-- | web/pw-server/src/styles/account_forms.scss | 52 | ||||
-rw-r--r-- | web/pw-server/src/styles/variables.scss | 1 |
6 files changed, 79 insertions, 83 deletions
diff --git a/web/pw-server/src/routes/__layout.svelte b/web/pw-server/src/routes/__layout.svelte index 250cdef..c22591e 100644 --- a/web/pw-server/src/routes/__layout.svelte +++ b/web/pw-server/src/routes/__layout.svelte @@ -1,4 +1,6 @@ <script lang="ts"> + import NavbarUserSection from "$lib/components/navbar/NavbarUserSection.svelte"; + import "./style.css"; </script> @@ -7,16 +9,13 @@ <div class="navbar-main"> <a href="/">PlanetWars</a> </div> - <div class="navbar-user"> - <a class="navbar-href" href="login">Sign in</a> - <a class="navbar-href" href="register">Sign up</a> - </div> + <NavbarUserSection /> </div> <slot /> </div> <style lang="scss"> - @import "../lib/variables.scss"; + @import "src/styles/variables.scss"; .outer-container { width: 100vw; @@ -35,14 +34,6 @@ padding: 0 15px; } - .navbar-user a { - font-size: 18px; - color: #eee; - font-family: Helvetica, sans-serif; - padding: 4px 8px; - text-decoration: none; - } - .navbar-main { margin: auto 0; } @@ -52,8 +43,4 @@ color: #eee; text-decoration: none; } - - .navbar-user { - margin: auto 0; - } </style> diff --git a/web/pw-server/src/routes/index.svelte b/web/pw-server/src/routes/index.svelte index dcc40ca..984910e 100644 --- a/web/pw-server/src/routes/index.svelte +++ b/web/pw-server/src/routes/index.svelte @@ -182,7 +182,7 @@ </div> <style lang="scss"> - @import "../lib/variables.scss"; + @import "src/styles/variables.scss"; .container { display: flex; diff --git a/web/pw-server/src/routes/login.svelte b/web/pw-server/src/routes/login.svelte index da3fc83..9ff0378 100644 --- a/web/pw-server/src/routes/login.svelte +++ b/web/pw-server/src/routes/login.svelte @@ -35,14 +35,21 @@ } </script> -{#if loggedIn()} - you are logged in -{/if} - -<form on:submit|preventDefault={login}> - <label for="username">Username</label> - <input name="username" bind:value={username} /> - <label for="password">Password</label> - <input type="password" name="password" bind:value={password} /> - <button type="submit">Log in</button> -</form> + +<div class="page-card"> + <div class="page-card-content"> + <h1 class="page-card-header">Sign in</h1> + <form class="account-form" on:submit|preventDefault={login}> + <label for="username">Username</label> + <input name="username" bind:value={username} /> + <label for="password">Password</label> + <input type="password" name="password" bind:value={password} /> + <button type="submit">Submit</button> + </form> + </div> +</div> + + +<style lang="scss"> + @import "src/styles/account_forms.scss"; +</style>
\ No newline at end of file diff --git a/web/pw-server/src/routes/register.svelte b/web/pw-server/src/routes/register.svelte index 1b0b84a..51cc106 100644 --- a/web/pw-server/src/routes/register.svelte +++ b/web/pw-server/src/routes/register.svelte @@ -31,67 +31,16 @@ <div class="page-card"> <div class="page-card-content"> <h1 class="page-card-header">Create account</h1> - <form class="register-form" on:submit|preventDefault={onSubmit}> + <form class="account-form" on:submit|preventDefault={onSubmit}> <label for="username">Username</label> <input name="username" bind:value={username} /> <label for="password">Password</label> <input type="password" name="password" bind:value={password} /> - <button type="submit">Sign up</button> + <button type="submit">Submit</button> </form> </div> </div> <style lang="scss"> - .page-card { - margin: 50px auto; - width: 40%; - max-width: 600px; - border: 1px solid #b5b5b5; - box-sizing: border-box; - border-radius: 0px; - } - - .page-card-content { - margin: 20px 50px; - } - - .page-card-header { - padding-top: .5em; - padding-bottom: 1em; - text-align: center; - } - - .register-form { - box-sizing: border-box; - display: flex; - flex-direction: column; - font-size: 18px; - } - - .register-form label { - margin: 10px 5px; - font-weight: 500; - } - - .register-form input { - margin: 10px 5px; - font-size: 1rem; - // height: 2.5em; - display: block; - border-radius: 4px; - border: 1px solid #b5b5b5; - padding: .75rem 1rem; - } - - .register-form button { - background-color: lightgreen; - padding: 8px 16px; - border-radius: 8px; - border: 0; - font-size: 18pt; - display: block; - margin: 10px auto; - margin-top: 16px; - - } + @import "src/styles/account_forms.scss"; </style>
\ No newline at end of file diff --git a/web/pw-server/src/styles/account_forms.scss b/web/pw-server/src/styles/account_forms.scss new file mode 100644 index 0000000..36cc96b --- /dev/null +++ b/web/pw-server/src/styles/account_forms.scss @@ -0,0 +1,52 @@ +.page-card { + margin: 50px auto; + width: 40%; + max-width: 600px; + border: 1px solid #b5b5b5; + box-sizing: border-box; + border-radius: 0px; +} + +.page-card-content { + margin: 20px 50px; +} + +.page-card-header { + padding-top: 0.5em; + padding-bottom: 1em; + text-align: center; +} + +.account-form { + box-sizing: border-box; + display: flex; + flex-direction: column; + font-size: 18px; +} + +.account-form label { + margin: 10px 5px; + font-weight: 500; +} + +.account-form input { + margin: 10px 5px; + font-size: 1rem; + // height: 2.5em; + display: block; + border-radius: 4px; + border: 1px solid #b5b5b5; + padding: 0.75rem 1rem; +} + +.account-form button { + background-color: lightgreen; + padding: 8px 16px; + border-radius: 8px; + border: 0; + font-size: 18pt; + display: block; + margin: 10px auto; + margin-top: 16px; + cursor: pointer; +} diff --git a/web/pw-server/src/styles/variables.scss b/web/pw-server/src/styles/variables.scss new file mode 100644 index 0000000..257a67e --- /dev/null +++ b/web/pw-server/src/styles/variables.scss @@ -0,0 +1 @@ +$bg-color: rgb(41, 41, 41); |