vue-router and login page
This commit is contained in:
parent
d87ff0e725
commit
d18ceaa7a7
49
src/App.vue
49
src/App.vue
@ -1,49 +1,18 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div class="content">
|
||||
<div id="messagesContainer" class="messagesContainer">
|
||||
<div id="messages" class="messages">
|
||||
<message msg="Hey :D" />
|
||||
<message msg="Du bist blööööd xD" />
|
||||
<messageReceive msg="Du auch" />
|
||||
<message msg="lol" />
|
||||
<messageReceive msg="Du bist voll blöd, ich hasse dich, warum tust du das?!" />
|
||||
<message msg="Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Ut imperdiet vel risus tristique mollis. Proin aliquam felis non vehicula ornare.
|
||||
Fusce scelerisque pellentesque erat quis sollicitudin.
|
||||
Quisque aliquet, ligula ut volutpat vulputate, ligula lorem dictum velit, et aliquam sapien orci sed magna.
|
||||
Nam suscipit ex eget urna accumsan pulvinar. Pellentesque fringilla placerat feugiat.
|
||||
Aenean aliquam vestibulum metus. Nulla augue turpis, consectetur vitae quam ac, porttitor rhoncus nunc.
|
||||
Nullam non turpis consequat, placerat lectus nec, ornare orci.
|
||||
Fusce lorem tortor, viverra ac suscipit sit amet, scelerisque id eros.
|
||||
Suspendisse et ultricies elit, vitae pretium ipsum. Suspendisse vel ex in turpis pulvinar feugiat. "
|
||||
/>
|
||||
<messageReceive msg="Du hast Pizza!" />
|
||||
<message msg="und Kuchen :P" />
|
||||
<message msg="und Kuchen :P" />
|
||||
<message msg="und Kuchen :P" />
|
||||
<message msg="und Kuchen :P" />
|
||||
<message msg="und Kuchen :P" />
|
||||
</div>
|
||||
</div>
|
||||
<newMessage />
|
||||
<router-view />
|
||||
<error />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import message from './components/message.vue';
|
||||
import messageReceive from './components/messageReceive.vue';
|
||||
import newMessage from './components/newMessage.vue';
|
||||
import error from "@/components/error.vue";
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
message,
|
||||
messageReceive,
|
||||
newMessage,
|
||||
components:{
|
||||
error
|
||||
}
|
||||
}
|
||||
@ -72,20 +41,6 @@ body{
|
||||
background-color: #313131;
|
||||
box-shadow: 3px 3px 10px #111;
|
||||
}
|
||||
.messagesContainer{
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: calc(100% - 4rem);
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.messages{
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@media (max-width: 55rem){
|
||||
.content{
|
||||
width: calc(100%);
|
||||
|
||||
@ -33,6 +33,7 @@ export default {
|
||||
background-color: #42a7b9;
|
||||
border-radius: 1rem 1rem 0 1rem;
|
||||
text-align: left;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@media (min-width: 45rem){
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="newMessageBanner">
|
||||
<label for="newMessageInput"></label>
|
||||
<textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput" placeholder="type a message ..." v-model="msg.content.text" />
|
||||
<textarea @input="resizeMessageBanner()" ref="newMessageInput" id="newMessageInput" class="newMessageInput" autocomplete="off" placeholder="type a message ..." v-model="msg.content.text" />
|
||||
<icon @click.native="sendMessage()" id="sendMessageBtn" style="position: absolute; right: 1rem; bottom: 0.5rem;" ic="./sym/ic_send_white_24px.svg" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
33
src/components/textbtn.vue
Normal file
33
src/components/textbtn.vue
Normal file
@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<button class="btn">
|
||||
<div class="btnText">{{text}}</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "textbtn",
|
||||
props:{
|
||||
text: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.btn{
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
height: 2.5rem;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
background-color: #00BCD4;
|
||||
box-shadow: 3px 3px 10px #222;
|
||||
border-radius: 1.25rem;
|
||||
}
|
||||
.btnText {
|
||||
position: relative;
|
||||
font-size: 1.4rem;
|
||||
color:#fff;
|
||||
font-family:Arial, "lucida console", sans-serif;
|
||||
}
|
||||
</style>
|
||||
37
src/main.js
37
src/main.js
@ -1,10 +1,37 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import App from './App.vue'
|
||||
import login from './views/login.vue'
|
||||
import chat from './views/chat.vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const router = new VueRouter({
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: login
|
||||
},
|
||||
{
|
||||
path: '/chat',
|
||||
name: 'chat',
|
||||
component: chat
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
new Vue({
|
||||
render: h => h(App),
|
||||
el: '#app',
|
||||
router,
|
||||
template: '<App/>',
|
||||
components: {App}
|
||||
}).$mount('#app')
|
||||
|
||||
export default {
|
||||
@ -50,7 +77,13 @@ socket.onmessage = (e) => {
|
||||
let msg = JSON.parse(e.data)
|
||||
if (msg.type === 'error') show_error(msg.content)
|
||||
else if (msg.type === 'message'){
|
||||
element('messages').innerHTML += `<messageReceive msg="${msg.content.message}" />`;
|
||||
//just for now, ik it's dirty
|
||||
element('messages').innerHTML +=
|
||||
`<div class="messageContainer" data-v-032da2b2="">
|
||||
<div class="message" data-v-032da2b2="">
|
||||
${msg.content.text}
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
0
src/router/index.js
Normal file
0
src/router/index.js
Normal file
62
src/views/chat.vue
Normal file
62
src/views/chat.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<div ref="msgContainer" id="messagesContainer" class="messagesContainer">
|
||||
<div id="messages" class="messages">
|
||||
<message msg="Hey :D" />
|
||||
<message msg="Du bist blööööd xD" />
|
||||
<messageReceive msg="Du auch" />
|
||||
<message msg="lol" />
|
||||
<messageReceive msg="Du bist voll blöd, ich hasse dich, warum tust du das?!" />
|
||||
<message msg="Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Ut imperdiet vel risus tristique mollis. Proin aliquam felis non vehicula ornare.
|
||||
Fusce scelerisque pellentesque erat quis sollicitudin.
|
||||
Quisque aliquet, ligula ut volutpat vulputate, ligula lorem dictum velit, et aliquam sapien orci sed magna.
|
||||
Nam suscipit ex eget urna accumsan pulvinar. Pellentesque fringilla placerat feugiat.
|
||||
Aenean aliquam vestibulum metus. Nulla augue turpis, consectetur vitae quam ac, porttitor rhoncus nunc.
|
||||
Nullam non turpis consequat, placerat lectus nec, ornare orci.
|
||||
Fusce lorem tortor, viverra ac suscipit sit amet, scelerisque id eros.
|
||||
Suspendisse et ultricies elit, vitae pretium ipsum. Suspendisse vel ex in turpis pulvinar feugiat. "
|
||||
/>
|
||||
<messageReceive msg="Du hast Pizza!" />
|
||||
<message msg="und Kuchen :P" />
|
||||
<message msg="und Kuchen :P" />
|
||||
<message msg="und Kuchen :P" />
|
||||
<message msg="und Kuchen :P" />
|
||||
<message msg="und Kuchen :P" />
|
||||
</div>
|
||||
</div>
|
||||
<newMessage />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import message from '@/components/message.vue';
|
||||
import messageReceive from '@/components/messageReceive.vue';
|
||||
import newMessage from '@/components/newMessage.vue';
|
||||
|
||||
export default {
|
||||
name: 'chat',
|
||||
components: {
|
||||
message,
|
||||
messageReceive,
|
||||
newMessage
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.messagesContainer{
|
||||
position: absolute;
|
||||
margin: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
height: calc(100% - 4rem);
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.messages{
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
28
src/views/login.vue
Normal file
28
src/views/login.vue
Normal file
@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<div id="login">
|
||||
<h1 class="title">short your url</h1>
|
||||
<div class="input-field" id="longurl">
|
||||
<label for="longurl-input"></label>
|
||||
<input class="input" id="longurl-input" type="text" autocomplete="off" maxlength="20" placeholder="chose nickname">
|
||||
</div>
|
||||
<input type="hidden" value="search" name="login">
|
||||
<textbtn text="login" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import textbtn from '@/components/textbtn';
|
||||
|
||||
export default {
|
||||
name: "login.vue",
|
||||
components: {
|
||||
textbtn
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#login{
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
3
vue.config.js
Normal file
3
vue.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
runtimeCompiler: true
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user