example update

8 years ago · bec25b3ab4
parent bfdac9ab09
commit bec25b3ab4
2 changed files with 52 additions and 2 deletions
--- a/example/index.html
+++ b/example/index.html
@ -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>
--- a/example/style.css
+++ b/example/style.css
@ -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;
@ -83,4 +82,52 @@ body {
 .chat .input {
    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;
    }
 }