ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Style public pages, add links to login page

This commit is contained in:
Christian Cueni 2019-10-07 16:29:15 +02:00
parent a1954e00c5
commit 80b1d38b93
4 changed files with 58 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
client/src/layouts/PublicLayout.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="skillbox public"> <div class="skillbox public">
<logo></logo> <logo class="public__logo"></logo>
<router-view class="skillbox__content"></router-view> <router-view class="skillbox__content"></router-view>
<footer class="skillbox__footer">Footer</footer> <footer class="skillbox__footer">Footer</footer>
</div> </div>
@ -23,6 +23,11 @@ import Logo from '@/components/icons/Logo';
.public { .public {
max-width: 800px; max-width: 800px;
min-width: 320px; min-width: 320px;
&__logo {
position: relative;
left: -10px;
}
} }
</style> </style>

42
client/src/pages/login.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="login"> <div class="login">
<h1 class="login__title">Login</h1> <h1 class="login__title">Melden Sie sich jetzt an</h1>
<form class="login__form login-form" novalidate @submit.prevent="validateBeforeSubmit"> <form class="login__form login-form" novalidate @submit.prevent="validateBeforeSubmit">
<div class="login-form__field sbform-input"> <div class="login-form__field sbform-input">
<label for="email" class="sbform-input__label">E-Mail</label> <label for="email" class="sbform-input__label">E-Mail</label>
@ -55,7 +55,14 @@
<div class="sbform-input"> <div class="sbform-input">
<small class="sbform-input__error" data-cy="login-error" v-if="loginError">{{loginError}}</small> <small class="sbform-input__error" data-cy="login-error" v-if="loginError">{{loginError}}</small>
</div> </div>
<button class="button button--primary change-form__submit" data-cy="login-button">Anmelden</button> <div class="actions">
<button class="button button--primary button--big actions__submit" data-cy="login-button">Anmelden</button>
<a class="actions__reset text-link" href="/accounts/password_reset/">Passwort vergessen?</a>
</div>
<div class="registration">
<p class="registration__text">Haben Sie noch kein Konto?</p>
<a class="registration__link text-link" href="/accounts/password_reset/">Jetzt registrieren</a>
</div>
</form> </form>
</div> </div>
</template> </template>
@ -127,5 +134,36 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
@import "@/styles/_variables.scss";
@import "@/styles/_mixins.scss";
.login {
&__title {
margin-top: 48px;
font-size: 2.75rem; // 44px
margin-bottom: 24px;
font-weight: 600;
}
}
.text-link {
font-family: $sans-serif-font-family;
color: $color-brand;
}
.actions {
&__reset {
display: inline-block;
margin-left: $large-spacing;
}
}
.registration {
margin-top: $large-spacing;
&__text {
font-family: $sans-serif-font-family;
margin-bottom: $small-spacing;
}
}
</style> </style>

3
client/src/styles/_buttons.scss
View File

@ -23,6 +23,9 @@
border: 2px solid $color-silver-light; border: 2px solid $color-silver-light;
background-color: $color-silver-light; background-color: $color-silver-light;
} }
&--big {
padding: 15px;
}
} }
.icon-button { .icon-button {

11
server/core/static/styles/main.scss
View File

@ -101,13 +101,17 @@ input[type=text], input[type=password], input[type=email], select {
.logo { .logo {
width: 250px; width: 250px;
height: 48px; height: 48px;
position: relative;
left: -10px;
} }
/* reset forms */ /* reset forms */
.reset__heading { .reset__heading {
font-size: 2.125rem; line-height: 4.5rem;
margin-bottom: 52px; font-size: 44px;
margin-bottom: 24px;
margin-top: 52px;
font-weight: 600; font-weight: 600;
} }
@ -154,4 +158,7 @@ input[type=text], input[type=password], input[type=email], select {
max-width: 800px; max-width: 800px;
min-width: 320px; min-width: 320px;
margin: 0 auto; margin: 0 auto;
@media (max-width: 1023px) {
margin: 0 30px;
}
} }