adb
/
matrix-chat
2
3
Fork 1
Code Issues Pull Requests Releases Wiki Activity

init

Browse Source
topBanner
adb 4 years ago
parent 0e67fd0d2c
commit deb8b8c6d4
5 changed files with 120 additions and 65 deletions
Show Stats Download Patch File Download Diff File

2
public/index.html
Unescape Escape View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'/>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>

54
src/App.vue
Unescape Escape View File

@ -1,28 +1,70 @@
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<div class="content">
<div id="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. "
/>
</div>
</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import message from './components/message.vue';
import messageReceive from './components/messageReceive.vue';
export default {
name: 'App',
components: {
HelloWorld
message,
messageReceive
}
}
</script>
<style>
body{
margin: 0;
}
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
position: absolute;
color: #ffffff;
background-color: #1d1d1d;
min-height: 100%;
width: 100%;
}
.content{
position: absolute;
top: 0px;
left: calc(50% - 26rem);
padding: 1rem;
min-height: calc(100% - 2rem);
width: 50rem;
min-width: 15rem;
background-color: #313131;
}
@media (max-width: 55rem){
.content{
width: calc(100% - 2rem);
left: 0;
}
}
</style>

58
src/components/HelloWorld.vue
Unescape Escape View File

@ -1,58 +0,0 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

36
src/components/message.vue
Unescape Escape View File

@ -0,0 +1,36 @@
<template>
<div class="messageContainer">
<div class="message">
{{msg}}
</div>
</div>
</template>
<script>
export default {
name: "message",
props: {
msg: String
}
}
</script>
<style scoped>
.messageContainer{
position: relative;
margin-top: 0.5rem;
width: 100%;
}
.message{
margin-left:auto; margin-right:0;
position: relative;
width: max-content;
min-width: 5rem;
max-width: calc(100% - 3rem);
padding: 1rem;
right: 0rem;
background-color: #42b983;
border-radius: 1rem 1rem 0rem 1rem;
text-align: left;
}
</style>

35
src/components/messageReceive.vue
Unescape Escape View File

@ -0,0 +1,35 @@
<template>
<div class="messageContainer">
<div class="message">
{{msg}}
</div>
</div>
</template>
<script>
export default {
name: "messageReceive",
props: {
msg: String
}
}
</script>
<style scoped>
.messageContainer{
position: relative;
margin-top: 0.5rem;
width: 100%;
}
.message{
position: relative;
width: max-content;
min-width: 5rem;
max-width: calc(100% - 3rem);
padding: 1rem;
left: 0rem;
background-color: #42a7b9;
border-radius: 1rem 1rem 1rem 0rem;
text-align: left;
}
</style>
Write Preview
Loading…
Cancel
Save