Skip to content

Commit b11c060

Browse files
jitendra-kyjitendra-ky
authored
Merge pull request #76 from jitendra-ky/68-update-app-ui
upgrade message UI.
2 parents 66e5bd2 + 44c19e8 commit b11c060

File tree

5 files changed

+250
-74
lines changed

5 files changed

+250
-74
lines changed

‎static/js/home.js‎

Lines changed: 47 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,22 @@ function render_msg_view() {
7878
return
7979
}
8080

81+
// check if selected contact id is -1 and screen width is less than 600
82+
const screenWidth = $(window).width()
83+
const isSmallScreen = screenWidth < 600
84+
if (isSmallScreen) {
85+
if (app_states.selectedContactId === -1) {
86+
$('.mainbox').removeClass('mainbox-fullscreen')
87+
$('.sidebar').addClass('sidebar-fullscreen')
88+
} else {
89+
$('.sidebar').removeClass('sidebar-fullscreen')
90+
$('.mainbox').addClass('mainbox-fullscreen')
91+
}
92+
} else {
93+
$('.mainbox').removeClass('mainbox-fullscreen')
94+
$('.sidebar').removeClass('sidebar-fullscreen')
95+
}
96+
8197
// check other validation
8298
if (
8399
app_states.selectedContactId === -1 || // check if a contact is selected
@@ -305,6 +321,22 @@ function onSidebarToggleClick() {
305321
}
306322
}
307323

324+
function onToggleMagicSidebar() {
325+
const $magicSidebar = $('.magic-sidebar')
326+
if ($magicSidebar.css('display') === 'none') {
327+
$magicSidebar.css('display', 'flex')
328+
$('.mask').show()
329+
} else {
330+
$magicSidebar.css('display', 'none')
331+
$('.mask').hide()
332+
}
333+
}
334+
335+
function onClickBackToContacts() {
336+
app_states.setSelectedContactId(-1)
337+
render_msg_view()
338+
}
339+
308340
$(function () {
309341
console.log('home.js loaded')
310342

@@ -317,17 +349,12 @@ $(function () {
317349
}
318350
console.log(app_states.sessionId)
319351
console.log(app_states.userEmail)
320-
const $userDetails = $('<p>')
321-
.attr('id', 'user-details')
322-
.text(`${app_states.userEmail}`)
323-
const $logoutButton = $('<button>')
324-
.attr('id', 'logout-button')
325-
.text('Logout')
326-
.on('click', onLogoutClick)
327-
$('.right-list ul').prepend($userDetails, $logoutButton)
328-
console.log('add user details and logout button')
352+
353+
const username = app_states.userEmail.split('@')[0]
354+
$('#username').text(username)
329355

330356
rerender_contacts_view()
357+
render_msg_view()
331358

332359
connectWebSocket()
333360

@@ -347,5 +374,16 @@ $(function () {
347374
})
348375

349376
$('.left-list .one').on('click', onSidebarToggleClick)
377+
378+
$('.toggle-magic-sidebar').on('click', onToggleMagicSidebar)
379+
380+
$('.logout').on('click', onLogoutClick)
381+
382+
$('.back-to-contact-list').on('click', onClickBackToContacts)
383+
384+
// An event listener that will triger of change of widge of body
385+
$(window).on('resize', function () {
386+
render_msg_view()
387+
})
350388
})
351389
})

‎static/styles/home.css‎

Lines changed: 166 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -22,35 +22,148 @@ body {
2222
flex-direction: column;
2323
}
2424

25-
.navbar {
26-
height: 50px;
25+
.button {
26+
background-color: white;
27+
color: #4caf50;
28+
border: none;
29+
border-radius: 5px;
30+
padding: 5px 10px;
31+
cursor: pointer;
32+
33+
&:hover {
34+
background-color: #45a049;
35+
}
36+
}
37+
38+
.mask {
39+
position: fixed;
40+
top: 0;
41+
left: 0;
42+
width: 100%;
43+
height: 100%;
44+
background-color: rgba(0, 0, 0, 0.5);
45+
z-index: 999;
46+
display: none;
47+
}
48+
49+
.magic-sidebar {
50+
width: 250px;
51+
background-color: #2c3e50;
52+
color: white;
53+
height: 100vh;
2754
display: flex;
28-
justify-content: space-between;
55+
flex-direction: column;
56+
padding: 10px;
57+
position: absolute;
58+
top: 0;
59+
left: 0;
60+
z-index: 1000;
61+
display: none;
2962

30-
.cont {
31-
margin: 5px;
32-
flex: 1;
63+
.magic-sidebar-header {
3364
display: flex;
34-
justify-content: space-between;
3565
align-items: center;
66+
gap: 10px;
67+
padding: 10px 0;
68+
}
3669

37-
ul {
38-
display: flex;
39-
list-style: none;
40-
gap: 10px;
41-
}
70+
.profile-pic {
71+
width: 50px;
72+
height: 50px;
73+
border-radius: 50%;
74+
}
4275

43-
li {
44-
height: 30px;
45-
width: 30px;
46-
list-style: none;
47-
cursor: pointer;
48-
border-radius: 50%;
49-
font-size: xx-large;
50-
display: flex;
51-
justify-content: center;
52-
align-items: center;
53-
}
76+
.user-info {
77+
display: flex;
78+
flex-direction: column;
79+
}
80+
81+
.user-info p {
82+
margin: 0;
83+
font-weight: bold;
84+
}
85+
86+
.user-info a {
87+
color: #1abc9c;
88+
text-decoration: none;
89+
font-size: 0.9rem;
90+
}
91+
92+
.magic-sidebar-menu {
93+
list-style: none;
94+
padding: 0;
95+
margin: 0;
96+
}
97+
98+
.magic-sidebar-item {
99+
display: flex;
100+
align-items: center;
101+
gap: 10px;
102+
padding: 10px;
103+
cursor: pointer;
104+
transition: background-color 0.3s;
105+
}
106+
107+
.magic-sidebar-item:hover {
108+
background-color: #34495e;
109+
}
110+
111+
.icon {
112+
font-size: 1.2rem;
113+
}
114+
115+
.switch {
116+
margin-left: auto;
117+
position: relative;
118+
display: inline-block;
119+
width: 34px;
120+
height: 20px;
121+
align-self: flex-end;
122+
}
123+
124+
.switch input {
125+
opacity: 0;
126+
width: 0;
127+
height: 0;
128+
}
129+
130+
.slider {
131+
position: absolute;
132+
cursor: pointer;
133+
top: 0;
134+
left: 0;
135+
right: 0;
136+
bottom: 0;
137+
background-color: #cccccc0e;
138+
transition: 0.4s;
139+
border-radius: 20px;
140+
}
141+
142+
.slider:before {
143+
position: absolute;
144+
content: '';
145+
height: 14px;
146+
width: 14px;
147+
left: 3px;
148+
bottom: 3px;
149+
background-color: white;
150+
transition: 0.4s;
151+
border-radius: 50%;
152+
}
153+
154+
input:checked + .slider {
155+
background-color: #1abc9c;
156+
}
157+
158+
input:checked + .slider:before {
159+
transform: translateX(14px);
160+
}
161+
162+
.magic-sidebar-footer {
163+
font-size: 0.8rem;
164+
text-align: center;
165+
color: #bdc3c7;
166+
margin-top: auto;
54167
}
55168
}
56169

@@ -62,12 +175,11 @@ body {
62175
}
63176

64177
.sidebar {
65-
width: 250px;
178+
width: 30%;
66179
background-color: #f4f4f4;
67180
display: flex;
68181
flex-direction: column;
69182
border-right: 1px solid #ddd;
70-
transition: 0.5s;
71183
overflow-x: hidden;
72184

73185
.header {
@@ -81,19 +193,6 @@ body {
81193
h3 {
82194
margin: 0;
83195
}
84-
85-
button {
86-
background-color: white;
87-
color: #4caf50;
88-
border: none;
89-
border-radius: 5px;
90-
padding: 5px 10px;
91-
cursor: pointer;
92-
}
93-
94-
button:hover {
95-
background-color: #45a049;
96-
}
97196
}
98197

99198
.search-bar {
@@ -163,6 +262,15 @@ body {
163262
}
164263
}
165264

265+
.sidebar-fullscreen {
266+
position: fixed;
267+
top: 0;
268+
left: 0;
269+
width: 100%;
270+
height: 100%;
271+
z-index: 5;
272+
}
273+
166274
.sidebar-float {
167275
position: fixed;
168276
top: 50px;
@@ -174,18 +282,6 @@ body {
174282
display: none;
175283
}
176284

177-
/* media query for screen smaler than 600px */
178-
179-
@media (max-width: 600px) {
180-
/* use the style of sidebar-float */
181-
.sidebar {
182-
position: fixed;
183-
top: 50px;
184-
left: 0;
185-
z-index: 1000;
186-
}
187-
}
188-
189285
.mainbox {
190286
flex: 1;
191287
background-color: rgb(206, 204, 204);
@@ -226,6 +322,11 @@ body {
226322
background-color: #4caf50;
227323
color: white;
228324

325+
.back-to-contact-list {
326+
margin-right: 2px;
327+
display: none;
328+
}
329+
229330
.chat-header-profile {
230331
width: 40px;
231332
height: 40px;
@@ -338,6 +439,21 @@ body {
338439
}
339440
}
340441

442+
.mainbox-fullscreen {
443+
position: fixed;
444+
top: 0;
445+
left: 0;
446+
width: 100%;
447+
height: 100%;
448+
z-index: 5;
449+
450+
.chat-header {
451+
.back-to-contact-list {
452+
display: block;
453+
}
454+
}
455+
}
456+
341457
.success-drop-down {
342458
position: fixed;
343459
top: 0;

0 commit comments

Comments
 (0)