binaryDiv
/
instantchat
1
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

Changed img to username, set user list to left again, adjusted stylings

This commit is contained in:
Jamie Kerner 2019-03-14 18:25:46 +01:00
parent ee80ee45d6
commit 89c18b7c4c
2 changed files with 53 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
public_html/css/style.css
View File

@ -1,3 +1,8 @@
body {
font-family: Roboto,sans-serif;
font-size: 1rem;
}
img { img {
max-width: 100%; max-width: 100%;
} }
@ -20,6 +25,16 @@ img {
overflow: hidden; overflow: hidden;
} }
@media (min-width: 768px) {
.messaging_heading {
display: none;
}
#sidebarCollapse {
display: none;
}
}
.inbox_msg { .inbox_msg {
border: 1px solid #c4c4c4; border: 1px solid #c4c4c4;
clear: both; clear: both;
@ -45,10 +60,11 @@ img {
@media (min-width: 768px) { @media (min-width: 768px) {
#sidebar { #sidebar {
border-left: 1px solid #c4c4c4; border-left: 1px solid #c4c4c4;
/*float: right;*/ float: left;
/*position: relative;*/
overflow: hidden; overflow: hidden;
/*width: 40%;*/ position: relative;
transform: none;
width: 40%;
} }
} }
@ -86,15 +102,22 @@ img {
width: 60%; width: 60%;
} }
.search_bar .stylish-input-group {
position: relative;
}
.search_bar input { .search_bar input {
background: none; background: none;
border-bottom: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd;
font-size: 1rem;
height: 25px;
padding: 2px 30px 4px 6px;
width: 80%; width: 80%;
padding: 2px 0 4px 6px;
} }
.search_bar .input-group-addon { .search_bar .input-group-addon {
margin: 0 0 0 -30px; position: absolute;
right: 28px;
} }
.search_bar .input-group-addon button { .search_bar .input-group-addon button {
@ -103,12 +126,17 @@ img {
color: #707070; color: #707070;
font-size: 18px; font-size: 18px;
padding: 0; padding: 0;
position: absolute;
}
.search_bar .input-group-addon button svg {
padding-top: 5px;
} }
.chat_ib { .chat_ib {
float: left; float: left;
padding: 0 0 0 15px; padding: 0 0 0 15px;
width: 88%; width: 75%;
} }
.chat_ib h5 { .chat_ib h5 {
@ -145,7 +173,7 @@ img {
} }
.inbox_chat { .inbox_chat {
height: 550px; height: 540px;
overflow-y: scroll; overflow-y: scroll;
} }
@ -153,14 +181,15 @@ img {
background: #ebebeb; background: #ebebeb;
} }
.incoming_msg_img { h5.incoming_msg_user {
display: inline-block; color: #464646;
width: 6%; font-size: 15px;
margin: 0 0 8px 30px;
} }
.received_msg { .received_msg {
display: inline-block; display: inline-block;
padding: 0 0 0 10px; padding-left: 30px;
vertical-align: top; vertical-align: top;
width: 92%; width: 92%;
} }
@ -180,15 +209,13 @@ img {
} }
.messages { .messages {
padding: 30px 15px 0 25px; padding: 30px;
width: 100%; width: 100%;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.messages { .messages {
/*float: left;*/ width: auto;
padding: 30px 15px 0 25px;
/*width: 60%;*/
} }
} }
@ -199,6 +226,7 @@ img {
margin: 8px 0 0; margin: 8px 0 0;
} }
/*Messages*/
.sent_msg { .sent_msg {
float: right; float: right;
width: 46%; width: 46%;
@ -210,7 +238,7 @@ img {
font-size: 14px; font-size: 14px;
margin: 0; color:#fff; margin: 0; color:#fff;
padding: 5px 10px 5px 12px; padding: 5px 10px 5px 12px;
width: 100%; /*width: 100%;*/
} }
.outgoing_msg { .outgoing_msg {
@ -224,12 +252,15 @@ img {
color: #4c4c4c; color: #4c4c4c;
font-size: 15px; font-size: 15px;
min-height: 48px; min-height: 48px;
padding-left: 30px;
width: 100%; width: 100%;
} }
.type_msg { .type_msg {
border-top: 1px solid #c4c4c4; border-top: 1px solid #c4c4c4;
float: left;
position: relative; position: relative;
width: 60%;
} }
.msg_send_btn { .msg_send_btn {
@ -242,12 +273,13 @@ img {
height: 33px; height: 33px;
position: absolute; position: absolute;
right: 0; right: 0;
top: 11px; top: 8px;
width: 33px; width: 33px;
} }
.msg_send_btn svg { .msg_send_btn svg {
fill: #ffffff; fill: #ffffff;
padding-top: 4px;
} }
.msg_history { .msg_history {

6
public_html/index.html
View File

@ -118,7 +118,7 @@
<div class="messages"> <div class="messages">
<div class="msg_history"> <div class="msg_history">
<div class="incoming_msg"> <div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <h5 class="incoming_msg_user">Sunil Rajput</h5>
<div class="received_msg"> <div class="received_msg">
<div class="received_withd_msg"> <div class="received_withd_msg">
<p>Test which is a new approach to have all <p>Test which is a new approach to have all
@ -134,7 +134,7 @@
<span class="time_date"> 11:01 AM | June 9</span> </div> <span class="time_date"> 11:01 AM | June 9</span> </div>
</div> </div>
<div class="incoming_msg"> <div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <h5 class="incoming_msg_user">Sunil Rajput</h5>
<div class="received_msg"> <div class="received_msg">
<div class="received_withd_msg"> <div class="received_withd_msg">
<p>Test, which is a new approach to have</p> <p>Test, which is a new approach to have</p>
@ -148,7 +148,7 @@
<span class="time_date"> 11:01 AM | Today</span> </div> <span class="time_date"> 11:01 AM | Today</span> </div>
</div> </div>
<div class="incoming_msg"> <div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div> <h5 class="incoming_msg_user">Sunil Rajput</h5>
<div class="received_msg"> <div class="received_msg">
<div class="received_withd_msg"> <div class="received_withd_msg">
<p>We work directly with our designers and suppliers, <p>We work directly with our designers and suppliers,