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>
<body>
<div class="container">
<h1 class="text-center">Vue-Socket.io</h1>
<div class="container">
<div v-if="!join" id="join" class="text-center">
<form @submit.prevent="joinChat(name)">
<div class="form-group">
<input type="text" max="12" class="form-control input-lg text-center" v-model="name" placeholder="Name">
</div>
<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>
</div>

49
example/style.css
View file

@ -9,7 +9,6 @@ body {
.container {
max-width: 700px;
margin-top: 5%;
box-shadow: 0 2px 3px rgba(0, 0, 0, .05);
background-color: #fff;
border: 1px solid #eee;
@ -84,3 +83,51 @@ body {
position: absolute;
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;
}
}