me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

factored out window styling to app.vue and other style improvments

Browse source
This commit is contained in:
Andrew Gundersen 2021-02-20 10:47:28 -06:00
commit d62561f6e8
6 changed files with 124 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/views/home.vue
View file

@ -22,11 +22,11 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
#messenger {
width: 350px;
height: 500px;
background-color: #e6e6e6;
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.3);
// border-radius: 20px;
}
#messenger {
width: 350px;
height: 500px;
background-color: #e6e6e6;
}
</style>

53
src/views/login.vue
View file

@ -1,5 +1,6 @@
<template>
<form id="login" @submit.prevent="submit">
<!-- login title -->
<div id="loginTitle">
<div>Login</div>
@ -8,20 +9,27 @@
<!-- username and password forms -->
<div id="loginBox">
<!-- username -->
<input class="input" type="text" v-model="email" placeholder="username" />
<div class="inputBox">
<input class="input" type="text" v-model="email" />
<div class="inputModifier">Email</div>
</div>
<!-- password -->
<input class="input" type="password" v-model="password" placeholder="Password" />
<div class="inputBox">
<input class="input" type="password" v-model="password" />
<div class="inputModifier">Password</div>
</div>
</div>
<!-- <input type="checkbox" id="checkbox" v-model="rememberMe" />
<label for="checkbox">Remember Me</label> -->
<!-- submit button; position: fixed -->
<button class="button" @click.prevent="submit">Submit</button>
<button class="submitButton" @click.prevent="submit">Submit</button>
<!-- back to login button: position: fixed -->
<button class="button2" @click.prevent="switchView">Create an account</button>
<button class="createAccountButton" @click.prevent="switchView">Create account</button>
</form>
</template>
@ -81,13 +89,12 @@ export default defineComponent({
<style lang="scss" scoped>
#login {
width: 350px;
height: 500px;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e6e6e6;
}
#loginTitle {
@ -95,6 +102,7 @@ export default defineComponent({
font-size: 24px;
font-weight: bold;
text-align: left;
padding-bottom: 10px;
}
#loginBox {
@ -102,12 +110,19 @@ export default defineComponent({
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom: 30px;
}
.inputBox {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.input {
background-color: #B9B9B9;
border: none;
color: white;
padding: 16px;
text-decoration: none;
margin: 4px 2px;
@ -115,25 +130,35 @@ export default defineComponent({
border-radius: 10px;
}
.button {
.inputModifier {
min-width: 181px;
font-size: 12px;
font-weight: bold;
text-align: left;
margin-left: 15px;
}
.submitButton {
position: fixed;
margin-top: 141px;
background-color: #58C4FD;
border: none;
color: white;
padding: 10px 20px;
padding: 10px 30px;
text-decoration: none;
border-radius: 20px;
font-size: 16px;
font-weight: bold;
}
.button2 {
position: fixed;
margin-top: 225px;
.createAccountButton {
position: absolute;
border: none;
background-color: #e6e6e6;
background-color: #EBEBEB;
text-decoration: none;
color: #58C4FD;
font-weight: bold;
bottom: 20px;
right: 20px;
}
</style>