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

View File

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

View File

@ -1,7 +1,17 @@
<template>
<div>
<TitleBox />
<LoginBox />
<div class="page-index__action-box">
<div class="page-index__space" />
<div class="page-index__login">
<LoginBox />
</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>
@ -14,4 +24,28 @@ body {
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>