From bcedd9ada9be22b14cd268679df7eb35c296aad3 Mon Sep 17 00:00:00 2001 From: Jamie Kerner Date: Mon, 19 Nov 2018 14:23:47 +0100 Subject: [PATCH 1/7] bootstrap link for styling added --- public_html/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/public_html/index.html b/public_html/index.html index bd0597e..fca9647 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -4,6 +4,9 @@ InstantChat + From dc2615b9c322dcfcfa9f2e75532fcc6911c2a394 Mon Sep 17 00:00:00 2001 From: Jamie Kerner Date: Mon, 19 Nov 2018 14:48:09 +0100 Subject: [PATCH 2/7] jQuery moved to bottom to not block HTML rendering --- public_html/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public_html/index.html b/public_html/index.html index fca9647..5e9ffa1 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -8,12 +8,12 @@ integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> -

InstantChat

+ From 4a0164eac679eef63d7e14a5f015b15bc0a23160 Mon Sep 17 00:00:00 2001 From: Jamie Kerner Date: Mon, 19 Nov 2018 14:48:54 +0100 Subject: [PATCH 3/7] bootstrap.js added --- public_html/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/public_html/index.html b/public_html/index.html index 5e9ffa1..e3b8927 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -14,6 +14,9 @@

InstantChat

+ + + From 678082cd9926b9e7986215105daf32aee51ec43b Mon Sep 17 00:00:00 2001 From: Jamie Kerner Date: Mon, 19 Nov 2018 17:25:35 +0100 Subject: [PATCH 4/7] chat template and styling added --- public_html/css/style.css | 214 ++++++++++++++++++++++++++++++++++++++ public_html/index.html | 168 +++++++++++++++++++++++++++++- 2 files changed, 381 insertions(+), 1 deletion(-) diff --git a/public_html/css/style.css b/public_html/css/style.css index e69de29..a276f58 100644 --- a/public_html/css/style.css +++ b/public_html/css/style.css @@ -0,0 +1,214 @@ +img { + max-width: 100%; +} + +.container { + margin: auto; + max-width: 1170px; +} + +.messaging { + padding: 0 0 50px 0; +} + +.inbox_people { + background: #f8f8f8 none repeat scroll 0 0; + border-left: 1px solid #c4c4c4; + float: right; + overflow: hidden; + width: 40%; +} + +.inbox_msg { + border: 1px solid #c4c4c4; + clear: both; + overflow: hidden; +} + +.recent_heading { + float: left; + width: 40%; +} + +.recent_heading h4 { + color: #05728f; + font-size: 21px; + margin: auto; +} + +/*Search*/ +.heading_search { + padding: 10px 29px 10px 20px; + overflow: hidden; + border-bottom: 1px solid #c4c4c4; +} + +.search_bar { + display: inline-block; + text-align: right; + width: 60%; +} + +.search_bar input { + background:none; + border-bottom: 1px solid #cdcdcd; + width: 80%; + padding: 2px 0 4px 6px; +} + +.search_bar .input-group-addon { + margin: 0 0 0 -30px; +} + +.search_bar .input-group-addon button { + background: rgba(0, 0, 0, 0) none repeat scroll 0 0; + border: medium none; + color: #707070; + font-size: 18px; + padding: 0; +} + +.chat_ib h5 { + color: #464646; + font-size: 15px; + margin: 0 0 8px 0; +} + +.chat_ib h5 span { + float: right; + font-size: 13px; +} + +.chat_ib p { + font-size: 14px; + color: #989898; + margin: auto; +} + +.chat_img { + float: left; + width: 11%; +} + +.chat_ib { + float: left; + padding: 0 0 0 15px; + width: 88%; +} + +.chat_people { + overflow:hidden; + clear:both; +} + +.chat_list { + border-bottom: 1px solid #c4c4c4; + margin: 0; + padding: 18px 16px 10px; +} + +.inbox_chat { + height: 550px; + overflow-y: scroll; +} + +.active_chat { + background:#ebebeb; +} + +.incoming_msg_img { + display: inline-block; + width: 6%; +} + +.received_msg { + display: inline-block; + padding: 0 0 0 10px; + vertical-align: top; + width: 92%; +} + +.received_withd_msg { + width: 57%; +} + +.received_withd_msg p { + background: #ebebeb none repeat scroll 0 0; + border-radius: 3px; + color: #646464; + font-size: 14px; + margin: 0; + padding: 5px 10px 5px 12px; + width: 100%; +} + +.messages { + float: left; + padding: 30px 15px 0 25px; + width: 60%; +} + +.time_date { + color: #747474; + display: block; + font-size: 12px; + margin: 8px 0 0; +} + +.sent_msg { + float: right; + width: 46%; +} + +.sent_msg p { + background: #05728f none repeat scroll 0 0; + border-radius: 3px; + font-size: 14px; + margin: 0; color:#fff; + padding: 5px 10px 5px 12px; + width:100%; +} + +.outgoing_msg { + overflow: hidden; + margin: 26px 0 26px; +} + + +.input_msg_write input { + background: rgba(0, 0, 0, 0) none repeat scroll 0 0; + border: medium none; + color: #4c4c4c; + font-size: 15px; + min-height: 48px; + width: 100%; +} + +.type_msg { + border-top: 1px solid #c4c4c4; + position: relative; +} + +.msg_send_btn { + background: #05728f none repeat scroll 0 0; + border: medium none; + border-radius: 50%; + color: #fff; + cursor: pointer; + font-size: 17px; + height: 33px; + position: absolute; + right: 0; + top: 11px; + width: 33px; +} + + +.msg_history { + height: 516px; + overflow-y: auto; +} + +.top_spac { + margin: 20px 0 0; +} \ No newline at end of file diff --git a/public_html/index.html b/public_html/index.html index e3b8927..cf37f79 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -11,7 +11,173 @@ -

InstantChat

+

InstantChat

+

- just add users

+ +
+
+
+
+
+
+

Recent

+
+
+
+ + + + +
+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
sunil
+
+
Sunil Rajput Dec 25
+

Test, which is a new approach to have all solutions + astrology under one roof.

+
+
+
+
+
+
+
+
+
sunil
+
+
+

Test which is a new approach to have all + solutions

+ 11:01 AM | June 9
+
+
+
+
+

Test which is a new approach to have all + solutions

+ 11:01 AM | June 9
+
+
+
sunil
+
+
+

Test, which is a new approach to have

+ 11:01 AM | Yesterday
+
+
+
+
+

Apollo University, Delhi, India Test

+ 11:01 AM | Today
+
+
+
sunil
+
+
+

We work directly with our designers and suppliers, + and sell direct to you, which means quality, exclusive + products, at a price anyone can afford.

+ 11:01 AM | Today
+
+
+
+
+
+ + +
+
+
+
+ + + +
+
+ + + + + From 471f4ff31c7345efe5af96e7ad30b24ecef95a4f Mon Sep 17 00:00:00 2001 From: Jamie Kerner Date: Tue, 20 Nov 2018 08:57:37 +0100 Subject: [PATCH 5/7] HTML linting --- public_html/index.html | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/public_html/index.html b/public_html/index.html index cf37f79..fdab688 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -120,7 +120,8 @@

Test which is a new approach to have all solutions

- 11:01 AM | June 9
+ 11:01 AM | June 9 +
@@ -134,7 +135,8 @@

Test, which is a new approach to have

- 11:01 AM | Yesterday
+ 11:01 AM | Yesterday +
@@ -149,7 +151,8 @@

We work directly with our designers and suppliers, and sell direct to you, which means quality, exclusive products, at a price anyone can afford.

- 11:01 AM | Today
+ 11:01 AM | Today + @@ -168,9 +171,7 @@ - - From 51489ca01854420be18a8b6ab73241474be53097 Mon Sep 17 00:00:00 2001 From: Jamie Kerner Date: Tue, 20 Nov 2018 09:02:05 +0100 Subject: [PATCH 6/7] css linting --- public_html/css/style.css | 28 +++++++++++----------------- 1 file changed, 11 insertions(+), 17 deletions(-) diff --git a/public_html/css/style.css b/public_html/css/style.css index a276f58..36aace4 100644 --- a/public_html/css/style.css +++ b/public_html/css/style.css @@ -50,7 +50,7 @@ img { } .search_bar input { - background:none; + background: none; border-bottom: 1px solid #cdcdcd; width: 80%; padding: 2px 0 4px 6px; @@ -68,6 +68,12 @@ img { padding: 0; } +.chat_ib { + float: left; + padding: 0 0 0 15px; + width: 88%; +} + .chat_ib h5 { color: #464646; font-size: 15px; @@ -90,15 +96,9 @@ img { width: 11%; } -.chat_ib { - float: left; - padding: 0 0 0 15px; - width: 88%; -} - .chat_people { - overflow:hidden; - clear:both; + overflow: hidden; + clear: both; } .chat_list { @@ -113,7 +113,7 @@ img { } .active_chat { - background:#ebebeb; + background: #ebebeb; } .incoming_msg_img { @@ -166,7 +166,7 @@ img { font-size: 14px; margin: 0; color:#fff; padding: 5px 10px 5px 12px; - width:100%; + width: 100%; } .outgoing_msg { @@ -174,7 +174,6 @@ img { margin: 26px 0 26px; } - .input_msg_write input { background: rgba(0, 0, 0, 0) none repeat scroll 0 0; border: medium none; @@ -203,12 +202,7 @@ img { width: 33px; } - .msg_history { height: 516px; overflow-y: auto; -} - -.top_spac { - margin: 20px 0 0; } \ No newline at end of file From 47b2c25fd4c20bd067842114524dea08ebd136cf Mon Sep 17 00:00:00 2001 From: Jamie Kerner Date: Mon, 14 Jan 2019 12:48:44 +0100 Subject: [PATCH 7/7] WIP sidebar --- public_html/css/style.css | 78 +++++++++++++++++++++++++++++++-------- public_html/index.html | 13 +++++-- public_html/js/sidebar.js | 12 ++++++ 3 files changed, 85 insertions(+), 18 deletions(-) create mode 100644 public_html/js/sidebar.js diff --git a/public_html/css/style.css b/public_html/css/style.css index 36aace4..b72ebbb 100644 --- a/public_html/css/style.css +++ b/public_html/css/style.css @@ -8,15 +8,16 @@ img { } .messaging { + overflow: hidden; padding: 0 0 50px 0; + position: relative; } -.inbox_people { - background: #f8f8f8 none repeat scroll 0 0; - border-left: 1px solid #c4c4c4; - float: right; +.messaging_heading { + border: 1px solid #c4c4c4; + border-bottom: 0; + padding: 10px 29px 10px 20px; overflow: hidden; - width: 40%; } .inbox_msg { @@ -25,22 +26,58 @@ img { overflow: hidden; } -.recent_heading { +/* mobile */ +#sidebar { + align-items: stretch; + border: 1px solid #c4c4c4; + background: #f8f8f8 none repeat scroll 0 0; + display: flex; + flex-direction: column; + position: absolute; + top: 0; + transform: translateX(100%); + transition-duration: 0.7s; + width: 100%; + z-index: 1; +} + +/* desktop */ +@media (min-width: 768px) { + #sidebar { + border-left: 1px solid #c4c4c4; + /*float: right;*/ + /*position: relative;*/ + overflow: hidden; + /*width: 40%;*/ + } +} + +#sidebar.active { + left: 0; + transform: none; + transition-duration: 0.7s; +} + +@media (min-width: 768px) { + #sidebar.active { + right: 0; + position: relative; + transform: none; + transition-duration: 0.7s; + width: 40%; + } +} + +.sidebar_heading { float: left; width: 40%; } -.recent_heading h4 { - color: #05728f; - font-size: 21px; - margin: auto; -} - /*Search*/ .heading_search { + border-bottom: 1px solid #c4c4c4; padding: 10px 29px 10px 20px; overflow: hidden; - border-bottom: 1px solid #c4c4c4; } .search_bar { @@ -143,9 +180,16 @@ img { } .messages { - float: left; padding: 30px 15px 0 25px; - width: 60%; + width: 100%; +} + +@media (min-width: 768px) { + .messages { + /*float: left;*/ + padding: 30px 15px 0 25px; + /*width: 60%;*/ + } } .time_date { @@ -202,6 +246,10 @@ img { width: 33px; } +.msg_send_btn svg { + fill: #ffffff; +} + .msg_history { height: 516px; overflow-y: auto; diff --git a/public_html/index.html b/public_html/index.html index fdab688..47c072c 100644 --- a/public_html/index.html +++ b/public_html/index.html @@ -16,12 +16,17 @@
+
+ +
+
-
+