feat: set up start page layout

This commit is contained in:
Settel 2022-07-28 11:28:12 +02:00
parent 0baed9f154
commit 226a40437e
3 changed files with 69 additions and 22 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<button class="button__button" :class="{ disabled, border }"> <button :type="type" class="button__button" :class="{ disabled, border }">
<slot /> <slot />
</button> </button>
</template> </template>
@ -10,6 +10,10 @@ defineProps({
type: Boolean, type: Boolean,
default: false, default: false,
}, },
type: {
type: String,
default: 'button',
},
border: { border: {
type: Boolean, type: Boolean,
default: true, default: true,
@ -23,7 +27,6 @@ defineProps({
.button { .button {
&__button { &__button {
display: inline-block; display: inline-block;
margin: auto;
padding: 4px 24px; padding: 4px 24px;
background-color: inherit; background-color: inherit;
color: $text-secondary-color; color: $text-secondary-color;

View File

@ -1,8 +1,11 @@
<template> <template>
<div class="login-box__container"> <div class="login-box__container-outer">
<input v-model="authCode" class="login-box__authinput" type="text" size="6" maxlength="6" placeholder="Code" /> <form class="login-box__container-inner" @submit.prevent="login">
<Button @click="login">Go!</Button> <input v-model="authCode" v-focus class="login-box__authinput" type="text" size="6" maxlength="6"
placeholder="Code" />
<Button type="submit">Go!</Button>
<div v-if="errorMessage" class="login-box__error">{{ errorMessage }}</div> <div v-if="errorMessage" class="login-box__error">{{ errorMessage }}</div>
</form>
</div> </div>
</template> </template>
@ -13,6 +16,10 @@ import { watch, ref, Ref } from 'vue'
const authCode: Ref<string> = ref('') const authCode: Ref<string> = ref('')
const errorMessage: Ref<string> = ref('') const errorMessage: Ref<string> = ref('')
const vFocus = {
mounted: (el: HTMLElement) => el.focus()
}
const login = (): void => { const login = (): void => {
errorMessage.value = '' errorMessage.value = ''
@ -22,6 +29,8 @@ const login = (): void => {
if (!newVal && data.value === 'ok') { if (!newVal && data.value === 'ok') {
const router = useRouter() const router = useRouter()
router.push('/play') router.push('/play')
} else if (!newVal) {
errorMessage.value = 'login failed'
} }
}) })
} }
@ -31,34 +40,35 @@ const login = (): void => {
@import '~/assets/css/components'; @import '~/assets/css/components';
.login-box { .login-box {
&__container { &__container-outer {
display: flex; display: flex;
width: 240px; width: 240px;
}
// justify-content: center; &__container-inner {
margin: 0 0 0 auto;
} }
&__authinput { &__authinput {
display: inline; display: inline;
position: relative;
height: 36px; height: 36px;
// border: $input-inactive-border; margin: 0 16px;
// border-radius: 8px;
// background-color: $input-inactive-background-color;
// color: $input-inactive-text-color;
background: transparent; background: transparent;
border: none; border: none;
border-bottom: 1px solid white; border-bottom: $box-primary-border;
color: white; color: $text-primary-color;
font-family: $secondary-font; font-family: $secondary-font;
font-weight: 800; font-weight: 800;
font-size: 24px; font-size: 24px;
outline: none; outline: none;
}
// &:focus { &__error {
// border: 1px solid $input-border-color; position: absolute;
// background-color: $input-background-color; width: 240px;
// color: $input-text-color; text-align: center;
// } margin: 8px;
color: $text-error-color;
} }
} }
</style> </style>

View File

@ -1,8 +1,18 @@
<template> <template>
<div> <div>
<TitleBox /> <TitleBox />
<div class="page-index__action-box">
<div class="page-index__space" />
<div class="page-index__login">
<LoginBox /> <LoginBox />
</div> </div>
<div class="page-index__separator" />
<div class="page-index__create-team">
<Button disabled>Create Team</Button>
</div>
<div class="page-index__space" />
</div>
</div>
</template> </template>
<style lang="scss"> <style lang="scss">
@ -14,4 +24,28 @@ body {
margin: 0; margin: 0;
} }
.page-index {
&__action-box {
display: flex;
width: 100%;
height: 120px;
}
&__login,
&__create-team {
width: 240px;
align-self: center;
}
&__separator {
width: 1px;
margin: 0 48px;
border-left: $box-primary-border;
}
&__space {
flex-grow: 1;
}
}
</style> </style>