Skip to content

Commit bc1294d

Browse files
antoine92190antoine92190
committed
(demo) improve responsiveness
1 parent 4d508ca commit bc1294d

File tree

2 files changed

+107
-103
lines changed

2 files changed

+107
-103
lines changed

‎demo/src/App.vue

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,22 @@
55
<button @click="resetData">Clear Data</button>
66
<button @click="addData" :disabled="updatingData">Add Data</button>
77
</div> -->
8-
<span class="user-logged">Logged as</span>
9-
<select v-model="currentUserId">
8+
<span class="user-logged" v-if="!isDevice">Logged as</span>
9+
<select v-model="currentUserId" v-if="!isDevice">
1010
<option v-for="user in users" :key="user._id" :value="user._id">
1111
{{ user.username }}
1212
</option>
1313
</select>
1414

15-
<div class="button-theme">
15+
<div class="button-theme" v-if="!isDevice">
1616
<button @click="theme = 'light'" class="button-light">Light</button>
1717
<button @click="theme = 'dark'" class="button-dark">Dark</button>
1818
</div>
1919

2020
<chat-container
2121
:currentUserId="currentUserId"
2222
:theme="theme"
23+
:isDevice="isDevice"
2324
v-if="showChat"
2425
/>
2526

@@ -73,6 +74,12 @@ export default {
7374
}
7475
},
7576
77+
computed: {
78+
isDevice() {
79+
return window.innerWidth < 500
80+
}
81+
},
82+
7683
methods: {
7784
resetData() {
7885
roomsRef.get().then(val => {
@@ -132,11 +139,12 @@ export default {
132139
<style lang="scss">
133140
body {
134141
background: #fafafa;
142+
margin: 0;
135143
}
136144
137145
.app-container {
138146
font-family: 'Quicksand', sans-serif;
139-
padding: 10px 20px 20px;
147+
padding: 20px 30px 30px;
140148
141149
@media only screen and (max-width: 768px) {
142150
padding: 0;
@@ -148,6 +156,7 @@ select {
148156
outline: none;
149157
border: 1px solid #e0e2e4;
150158
background: #fff;
159+
margin-bottom: 20px;
151160
}
152161
153162
.user-logged {

‎demo/src/ChatContainer.vue

Lines changed: 94 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,42 @@
11
<template>
2-
<div class="window-container">
3-
<div class="chat-forms">
4-
<form @submit.prevent="createRoom" v-if="addNewRoom">
5-
<input
6-
type="text"
7-
placeholder="Add username to create a room"
8-
v-model="addRoomUsername"
9-
/>
10-
<button type="submit" :disabled="disableForm || !addRoomUsername">
11-
Create Room
12-
</button>
13-
<button class="button-cancel" @click="addNewRoom = false">
14-
Cancel
15-
</button>
16-
</form>
17-
18-
<form @submit.prevent="addRoomUser" v-if="inviteRoomId">
19-
<input
20-
type="text"
21-
placeholder="Add user to the room"
22-
v-model="invitedUsername"
23-
/>
24-
<button type="submit" :disabled="disableForm || !invitedUsername">
25-
Add User
26-
</button>
27-
<button class="button-cancel" @click="inviteRoomId = null">
28-
Cancel
29-
</button>
30-
</form>
31-
32-
<form @submit.prevent="deleteRoomUser" v-if="removeRoomId">
33-
<select v-model="removeUserId">
34-
<option default value="">Select User</option>
35-
<option v-for="user in removeUsers" :key="user._id" :value="user._id">
36-
{{ user.username }}
37-
</option>
38-
</select>
39-
<button type="submit" :disabled="disableForm || !removeUserId">
40-
Remove User
41-
</button>
42-
<button class="button-cancel" @click="removeRoomId = null">
43-
Cancel
44-
</button>
45-
</form>
46-
</div>
2+
<div class="window-container" :class="{ 'window-mobile': isDevice }">
3+
<form @submit.prevent="createRoom" v-if="addNewRoom">
4+
<input type="text" placeholder="Add username" v-model="addRoomUsername" />
5+
<button type="submit" :disabled="disableForm || !addRoomUsername">
6+
Create Room
7+
</button>
8+
<button class="button-cancel" @click="addNewRoom = false">
9+
Cancel
10+
</button>
11+
</form>
12+
13+
<form @submit.prevent="addRoomUser" v-if="inviteRoomId">
14+
<input type="text" placeholder="Add username" v-model="invitedUsername" />
15+
<button type="submit" :disabled="disableForm || !invitedUsername">
16+
Add User
17+
</button>
18+
<button class="button-cancel" @click="inviteRoomId = null">
19+
Cancel
20+
</button>
21+
</form>
22+
23+
<form @submit.prevent="deleteRoomUser" v-if="removeRoomId">
24+
<select v-model="removeUserId">
25+
<option default value="">Select User</option>
26+
<option v-for="user in removeUsers" :key="user._id" :value="user._id">
27+
{{ user.username }}
28+
</option>
29+
</select>
30+
<button type="submit" :disabled="disableForm || !removeUserId">
31+
Remove User
32+
</button>
33+
<button class="button-cancel" @click="removeRoomId = null">
34+
Cancel
35+
</button>
36+
</form>
4737

4838
<chat-window
49-
height="calc(100vh - 80px)"
39+
:height="screenHeight"
5040
:theme="theme"
5141
:styles="styles"
5242
:current-user-id="currentUserId"
@@ -93,7 +83,7 @@ export default {
9383
ChatWindow
9484
},
9585
96-
props: ['currentUserId', 'theme'],
86+
props: ['currentUserId', 'theme', 'isDevice'],
9787
9888
data() {
9989
return {
@@ -147,6 +137,9 @@ export default {
147137
computed: {
148138
loadedRooms() {
149139
return this.rooms.slice(0, this.roomsLoadedCount)
140+
},
141+
screenHeight() {
142+
return this.isDevice ? window.innerHeight + 'px' : 'calc(100vh - 80px)'
150143
}
151144
},
152145
@@ -791,67 +784,69 @@ export default {
791784
width: 100%;
792785
}
793786
794-
.chat-forms {
795-
padding-bottom: 20px;
796-
787+
.window-mobile {
797788
form {
798-
padding-top: 20px;
799-
}
800-
801-
input {
802-
padding: 5px;
803-
width: 180px;
804-
height: 21px;
805-
border-radius: 4px;
806-
border: 1px solid #d2d6da;
807-
outline: none;
808-
font-size: 14px;
809-
vertical-align: middle;
810-
811-
&::placeholder {
812-
color: #9ca6af;
813-
}
789+
padding: 10px;
814790
}
791+
}
815792
816-
button {
817-
background: #1976d2;
818-
color: #fff;
819-
outline: none;
820-
cursor: pointer;
821-
border-radius: 4px;
822-
padding: 8px 12px;
823-
margin-left: 10px;
824-
border: none;
825-
font-size: 14px;
826-
transition: 0.3s;
827-
vertical-align: middle;
828-
829-
&:hover {
830-
opacity: 0.8;
831-
}
793+
form {
794+
padding-bottom: 20px;
795+
}
832796
833-
&:active {
834-
opacity: 0.6;
835-
}
797+
input {
798+
padding: 5px;
799+
width: 140px;
800+
height: 21px;
801+
border-radius: 4px;
802+
border: 1px solid #d2d6da;
803+
outline: none;
804+
font-size: 14px;
805+
vertical-align: middle;
806+
807+
&::placeholder {
808+
color: #9ca6af;
809+
}
810+
}
836811
837-
&:disabled {
838-
cursor: initial;
839-
background: #c6c9cc;
840-
opacity: 0.6;
841-
}
812+
button {
813+
background: #1976d2;
814+
color: #fff;
815+
outline: none;
816+
cursor: pointer;
817+
border-radius: 4px;
818+
padding: 8px 12px;
819+
margin-left: 10px;
820+
border: none;
821+
font-size: 14px;
822+
transition: 0.3s;
823+
vertical-align: middle;
824+
825+
&:hover {
826+
opacity: 0.8;
842827
}
843828
844-
.button-cancel {
845-
color: #a8aeb3;
846-
background: none;
847-
margin-left: 5px;
829+
&:active {
830+
opacity: 0.6;
848831
}
849832
850-
select {
851-
vertical-align: middle;
852-
height: 33px;
853-
width: 120px;
854-
font-size: 13px;
833+
&:disabled {
834+
cursor: initial;
835+
background: #c6c9cc;
836+
opacity: 0.6;
855837
}
856838
}
839+
840+
.button-cancel {
841+
color: #a8aeb3;
842+
background: none;
843+
margin-left: 5px;
844+
}
845+
846+
select {
847+
vertical-align: middle;
848+
height: 33px;
849+
width: 120px;
850+
font-size: 13px;
851+
}
857852
</style>

0 commit comments

Comments
 (0)