You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
matrix-chat/src/App.vue

96 lines
2.7 KiB
Vue

4 years ago
<template>
<div id="app">
4 years ago
<div class="content">
<div id="messagesContainer" class="messagesContainer">
4 years ago
<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>
4 years ago
</div>
<newMessage />
4 years ago
<error />
4 years ago
</div>
4 years ago
</div>
</template>
<script>
4 years ago
import message from './components/message.vue';
import messageReceive from './components/messageReceive.vue';
import newMessage from './components/newMessage.vue';
import error from "@/components/error.vue";
4 years ago
export default {
name: 'App',
components: {
4 years ago
message,
messageReceive,
newMessage,
error
4 years ago
}
}
</script>
<style>
4 years ago
body{
margin: 0;
}
4 years ago
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
4 years ago
position: absolute;
color: #ffffff;
background-color: #1d1d1d;
min-height: 100%;
width: 100%;
}
.content{
position: absolute;
4 years ago
top: 0;
left: calc(50% - 25rem);
padding: 0;
min-height: calc(100%);
4 years ago
width: 50rem;
min-width: 15rem;
background-color: #313131;
4 years ago
box-shadow: 3px 3px 10px #111;
}
4 years ago
.messagesContainer{
4 years ago
position: absolute;
margin: 0;
left: 0;
top: 0;
height: calc(100% - 4rem);
4 years ago
width: 100%;
overflow-y: auto;
}
4 years ago
.messages{
margin-top: 1rem;
margin-bottom: 1rem;
}
4 years ago
@media (max-width: 55rem){
.content{
4 years ago
width: calc(100%);
4 years ago
left: 0;
}
4 years ago
}
</style>