forks/Vue-Socket.io
1
0
Fork 0
mirror of https://github.com/MetinSeylan/Vue-Socket.io.git synced 2025-04-16 15:21:28 +02:00
Code Issues Projects Releases Packages Wiki Activity

example update

Browse source
This commit is contained in:
Metin Seylan 2016-05-10 00:39:16 +03:00
parent bfdac9ab09
commit bec25b3ab4
2 changed files with 52 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
example/index.html
View file

@ -13,14 +13,17 @@
</head> </head>
<body> <body>
<div class="container"> <h1 class="text-center">Vue-Socket.io</h1>
<div class="container">
<div v-if="!join" id="join" class="text-center"> <div v-if="!join" id="join" class="text-center">
<form @submit.prevent="joinChat(name)"> <form @submit.prevent="joinChat(name)">
<div class="form-group"> <div class="form-group">
<input type="text" max="12" class="form-control input-lg text-center" v-model="name" placeholder="Name"> <input type="text" max="12" class="form-control input-lg text-center" v-model="name" placeholder="Name">
</div> </div>
<button class="btn btn-primary btn-lg" type="submit">Join Chat</button> <button class="btn btn-primary btn-lg" type="submit">Join Chat</button>
<br>
<a href="https://github.com/metinseylan/vue-socket.io">Github</a>
</form> </form>
</div> </div>

49
example/style.css
View file

@ -9,7 +9,6 @@ body {
.container { .container {
max-width: 700px; max-width: 700px;
margin-top: 5%;
box-shadow: 0 2px 3px rgba(0, 0, 0, .05); box-shadow: 0 2px 3px rgba(0, 0, 0, .05);
background-color: #fff; background-color: #fff;
border: 1px solid #eee; border: 1px solid #eee;
@ -83,4 +82,52 @@ body {
.chat .input { .chat .input {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
}
@media screen and (max-width: 768px) {
body, html {
position: relative;
width: 100%;
height: 100%;
}
#join .btn {
display: block;
width: 100%;
}
.container {
position: absolute;
width: 100%;
height: 89%;
}
h1 {
margin: 4% 0;
}
.users {
display: none;
}
.chat {
float: none;
padding: 0;
height: 100%;
width: 100%;
position: absolute;
}
.chat .messages {
height: 90%;
}
.chat .messages ul {
height: 100%;
}
#group {
height: 100%;
position: relative;
}
} }