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;
+    }
 }