Skip to content

Commit 57111fb

Browse files
Muntasir2001Muntasir2001
committed
responsive update: fixed the list of user section (half of it)
1 parent 2c5af99 commit 57111fb

File tree

3 files changed

+81
-114
lines changed

3 files changed

+81
-114
lines changed

‎package.json

+1-3
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@
1414
"react-firebase-hooks": "^3.0.1",
1515
"react-router-dom": "^5.2.0",
1616
"react-scripts": "4.0.3",
17-
"react-scroll": "^1.8.2",
18-
"react-scroll-to-bottom": "^4.1.0",
1917
"web-vitals": "^1.0.1"
2018
},
2119
"scripts": {
@@ -42,4 +40,4 @@
4240
"last 1 safari version"
4341
]
4442
}
45-
}
43+
}

‎src/App.css

+79
Original file line numberDiff line numberDiff line change
@@ -247,4 +247,83 @@ h1, h2, h3, p, a, li, label, input {
247247
.chatbox-body .chatbox-right .input-box form #input-submit:hover {
248248
cursor: pointer;
249249
background-color: #b87e14;
250+
}
251+
252+
/* responsive css */
253+
@media only screen and (max-width: 1155px) {
254+
.chatbox-body .chatbox-left .self {
255+
max-width: 250px;
256+
overflow: hidden;
257+
}
258+
259+
.chatbox-body .chatbox-left .user {
260+
max-width: 250px;
261+
overflow: hidden;
262+
}
263+
}
264+
265+
@media only screen and (max-width: 1000px) {
266+
.chatbox-body .chatbox-left .topbar {
267+
justify-content: space-between;
268+
flex-direction: column;
269+
align-items: center;
270+
text-align: center;
271+
}
272+
273+
.chatbox-body .chatbox-left .topbar #logout-btn {
274+
margin-top: 15px;
275+
}
276+
}
277+
278+
@media only screen and (max-width: 700px) {
279+
.chatbox-body .chatbox-left {
280+
width: 40vw;
281+
}
282+
283+
.chatbox-body .chatbox-right {
284+
width: 60vw;
285+
}
286+
}
287+
288+
@media only screen and (max-width: 550px) {
289+
.chatbox-body {
290+
min-height: 100vh;
291+
}
292+
293+
.chatbox-body .chatbox-left .user p, .chatbox-body .chatbox-left .self p {
294+
display: none;
295+
}
296+
297+
.chatbox-body .chatbox-left {
298+
width: 30vw;
299+
}
300+
301+
.chatbox-body .chatbox-right {
302+
width: 60vw;
303+
}
304+
305+
.chatbox-body .chatbox-left .topbar #logout-btn {
306+
border-radius: 1000px;
307+
}
308+
309+
.chatbox-body .chatbox-left .self {
310+
display: flex;
311+
flex-direction: column;
312+
justify-content: center;
313+
align-items: center;
314+
margin: 20px 0px;
315+
}
316+
317+
.chatbox-body .chatbox-left .users {
318+
display: flex;
319+
flex-direction: column;
320+
align-items: center;
321+
justify-content: center;
322+
overflow-y: scroll;
323+
}
324+
325+
.chatbox-body .chatbox-left .user {
326+
margin: 0;
327+
margin-top: 10px;
328+
}
250329
}

‎yarn.lock

+1-111
Original file line numberDiff line numberDiff line change
@@ -1161,62 +1161,6 @@
11611161
resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-10.1.0.tgz#f0950bba18819512d42f7197e56c518aa491cf18"
11621162
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
11631163

1164-
"@emotion/cache@^10.0.27":
1165-
version "10.0.29"
1166-
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
1167-
integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
1168-
dependencies:
1169-
"@emotion/sheet" "0.9.4"
1170-
"@emotion/stylis" "0.8.5"
1171-
"@emotion/utils" "0.11.3"
1172-
"@emotion/weak-memoize" "0.2.5"
1173-
1174-
"@emotion/[email protected]":
1175-
version "0.8.0"
1176-
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
1177-
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
1178-
1179-
"@emotion/[email protected]":
1180-
version "0.7.4"
1181-
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
1182-
integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
1183-
1184-
"@emotion/serialize@^0.11.15":
1185-
version "0.11.16"
1186-
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
1187-
integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
1188-
dependencies:
1189-
"@emotion/hash" "0.8.0"
1190-
"@emotion/memoize" "0.7.4"
1191-
"@emotion/unitless" "0.7.5"
1192-
"@emotion/utils" "0.11.3"
1193-
csstype "^2.5.7"
1194-
1195-
"@emotion/[email protected]":
1196-
version "0.9.4"
1197-
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
1198-
integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
1199-
1200-
"@emotion/[email protected]":
1201-
version "0.8.5"
1202-
resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
1203-
integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
1204-
1205-
"@emotion/[email protected]":
1206-
version "0.7.5"
1207-
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
1208-
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
1209-
1210-
"@emotion/[email protected]":
1211-
version "0.11.3"
1212-
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
1213-
integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
1214-
1215-
"@emotion/[email protected]":
1216-
version "0.2.5"
1217-
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
1218-
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
1219-
12201164
"@eslint/eslintrc@^0.3.0":
12211165
version "0.3.0"
12221166
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.3.0.tgz#d736d6963d7003b6514e6324bec9c602ac340318"
@@ -3597,11 +3541,6 @@ class-utils@^0.3.5:
35973541
isobject "^3.0.0"
35983542
static-extend "^0.1.1"
35993543

3600-
[email protected]:
3601-
version "2.2.6"
3602-
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
3603-
integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
3604-
36053544
clean-css@^4.2.3:
36063545
version "4.2.3"
36073546
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
@@ -3927,16 +3866,6 @@ create-ecdh@^4.0.0:
39273866
bn.js "^4.1.0"
39283867
elliptic "^6.5.3"
39293868

3930-
[email protected]:
3931-
version "10.0.27"
3932-
resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-10.0.27.tgz#cb4fa2db750f6ca6f9a001a33fbf1f6c46789503"
3933-
integrity sha512-fIK73w82HPPn/RsAij7+Zt8eCE8SptcJ3WoRMfxMtjteYxud8GDTKKld7MYwAX2TVhrw29uR1N/bVGxeStHILg==
3934-
dependencies:
3935-
"@emotion/cache" "^10.0.27"
3936-
"@emotion/serialize" "^0.11.15"
3937-
"@emotion/sheet" "0.9.4"
3938-
"@emotion/utils" "0.11.3"
3939-
39403869
create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
39413870
version "1.2.0"
39423871
resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
@@ -4222,11 +4151,6 @@ cssstyle@^2.2.0:
42224151
dependencies:
42234152
cssom "~0.3.6"
42244153

4225-
csstype@^2.5.7:
4226-
version "2.6.16"
4227-
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.16.tgz#544d69f547013b85a40d15bff75db38f34fe9c39"
4228-
integrity sha512-61FBWoDHp/gRtsoDkq/B1nWrCUG/ok1E3tUrcNbZjsE9Cxd9yzUirjS3+nAATB8U4cTtaQmAHbNndoFz5L6C9Q==
4229-
42304154
cyclist@^1.0.1:
42314155
version "1.0.1"
42324156
resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -7475,11 +7399,6 @@ lodash.templatesettings@^4.0.0:
74757399
dependencies:
74767400
lodash._reinterpolate "^3.0.0"
74777401

7478-
lodash.throttle@^4.1.1:
7479-
version "4.1.1"
7480-
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
7481-
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
7482-
74837402
lodash.uniq@^4.5.0:
74847403
version "4.5.0"
74857404
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -7574,11 +7493,6 @@ map-visit@^1.0.0:
75747493
dependencies:
75757494
object-visit "^1.0.0"
75767495

7577-
[email protected]:
7578-
version "2.0.1"
7579-
resolved "https://registry.yarnpkg.com/math-random/-/math-random-2.0.1.tgz#5604b16c6a9a4aee63aff13937fb909b27e46b3a"
7580-
integrity sha512-oIEbWiVDxDpl5tIF4S6zYS9JExhh3bun3uLb3YAinHPTlRtW4g1S66LtJrJ4Npq8dgIa8CLK5iPVah5n4n0s2w==
7581-
75827496
md5.js@^1.3.4:
75837497
version "1.3.5"
75847498
resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -9350,7 +9264,7 @@ [email protected], prompts@^2.0.1:
93509264
kleur "^3.0.3"
93519265
sisteransi "^1.0.5"
93529266

9353-
prop-types@15.7.2, prop-types@^15.6.2, prop-types@^15.7.2:
9267+
prop-types@^15.6.2, prop-types@^15.7.2:
93549268
version "15.7.2"
93559269
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
93569270
integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -9711,25 +9625,6 @@ [email protected]:
97119625
optionalDependencies:
97129626
fsevents "^2.1.3"
97139627

9714-
react-scroll-to-bottom@^4.1.0:
9715-
version "4.1.0"
9716-
resolved "https://registry.yarnpkg.com/react-scroll-to-bottom/-/react-scroll-to-bottom-4.1.0.tgz#e39955aeaea27e36adb601de552b91a58f7be662"
9717-
integrity sha512-atWRfdhLFCG2dK4kAsCDCYvl327DDEi5BMO0kIU4D12u2o2UX+GmlKO8m7sPW86Vb3MlqL3+Gawv/79VQ90tXQ==
9718-
dependencies:
9719-
classnames "2.2.6"
9720-
create-emotion "10.0.27"
9721-
math-random "2.0.1"
9722-
prop-types "15.7.2"
9723-
simple-update-in "2.2.0"
9724-
9725-
react-scroll@^1.8.2:
9726-
version "1.8.2"
9727-
resolved "https://registry.yarnpkg.com/react-scroll/-/react-scroll-1.8.2.tgz#68e35b74ae296c88e7863393c9fd49f05afa29f5"
9728-
integrity sha512-f2ZEG5fsPbPTySI9ekcFpETCcNlqbmwbQj9hhzYK8tkgv+PA8APatSt66o/q0KSkDZxyT98ONTtXp9x0lyowEw==
9729-
dependencies:
9730-
lodash.throttle "^4.1.1"
9731-
prop-types "^15.7.2"
9732-
97339628
react@^17.0.1:
97349629
version "17.0.1"
97359630
resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
@@ -10472,11 +10367,6 @@ simple-swizzle@^0.2.2:
1047210367
dependencies:
1047310368
is-arrayish "^0.3.1"
1047410369

10475-
[email protected]:
10476-
version "2.2.0"
10477-
resolved "https://registry.yarnpkg.com/simple-update-in/-/simple-update-in-2.2.0.tgz#86607662635ea12e59b5341044244902aa7db1c8"
10478-
integrity sha512-FrW41lLiOs82jKxwq39UrE1HDAHOvirKWk4Nv8tqnFFFknVbTxcHZzDS4vt02qqdU/5+KNsQHWzhKHznDBmrww==
10479-
1048010370
sisteransi@^1.0.5:
1048110371
version "1.0.5"
1048210372
resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"

0 commit comments

Comments
 (0)