MyHyvesBookPlus/WebDB
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases Wiki Activity

Styled and rearranged chat-view

Browse Source
This commit is contained in:
Lars van Hijfte
2017-01-13 12:01:12 +01:00
parent 51b444a186
commit 8c1bacf894
2 changed files with 18 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
website/styles/chat.css
View File

@@ -3,7 +3,6 @@
position: fixed; position: fixed;
top: 80px; top: 80px;
left: 256px; left: 256px;
text-align: center;
padding: 15px 0; padding: 15px 0;
width: calc(100% - 256px); width: calc(100% - 256px);
height: calc(100% - 120px); height: calc(100% - 120px);
@@ -12,32 +11,14 @@
.chat-left { .chat-left {
width: 256px; width: 256px;
height: 100%; height: calc(100% - 100px);
margin-left: 10px; margin: 0 10px;
margin-right: 10px;
display: inline-flex;
}
.chat-recent, .chat-history {
width: 100%;
}
/* List of chats. */
.chat-recent {
height: 600px;
overflow-y: auto; overflow-y: auto;
padding: 10px;
text-align: left;
}
.chat-conversation {
margin: 5px;
} }
.chat-right { .chat-right {
width: calc(100% - 256px - 40px); width: calc(100% - 256px - 40px);
height: calc(100% - 80px); height: calc(100% - 80px);
vertical-align: bottom;
margin-right: 10px; margin-right: 10px;
} }
@@ -45,9 +26,10 @@
.chat-history { .chat-history {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
padding: 0 0 10px 0; padding: 10px;
} }
/* Chat-message takes the whole width of the chat area */
.chat-message { .chat-message {
width: 100%; width: 100%;
min-height: 40px; min-height: 40px;
@@ -56,9 +38,8 @@
} }
.chat-message-self, .chat-message-other { .chat-message-self, .chat-message-other {
text-align: left;
border-radius: 20px; border-radius: 20px;
padding: 10px 12px; padding: 10px;
max-width: 45%; max-width: 45%;
} }
@@ -79,7 +60,6 @@
.chat-field { .chat-field {
width: 100%; width: 100%;
padding: 15px 0;
display: table; display: table;
} }
@@ -95,8 +75,8 @@
.chat-field input[type="text"] { .chat-field input[type="text"] {
width: 100%; width: 100%;
border-top-left-radius: 10px; border: none;
border-bottom-left-radius: 10px; border-radius: 10px 0 0 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} }
@@ -106,7 +86,6 @@
background-color: #845663; background-color: #845663;
color: white; color: white;
padding: 5px 10px; padding: 5px 10px;
border-top-right-radius: 10px; border-radius: 0 10px 10px 0;
border-bottom-right-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} }

25
website/views/chat-view.php
View File

@@ -1,20 +1,15 @@
<div class="content"> <div class="content">
<div class="chat"> <div class="chat">
<div class="chat-left"> <nav class="chat-left left platform chat-recent">
<nav class="chat-recent platform"> <h5>Chats</h5>
<h5>Chats</h5> <a href="#">
<a href="#"><div class="chat-conversation"> <div class="chat-conversation">
<img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw"> <img class="profile-picture" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTDnuRSeeyPve7KwDvJJ6OBzj3gyghwLcE2z9kZeYBOyZavh3mw">
Rudolf Leslo Rudolf Leslo
</div></a> </div>
<a href="#"><div class="chat-conversation"> </a>
<img class="profile-picture" src=http://www.kpop-map.com/wp-content/uploads/2016/01/sm-rookies-kun-profile.jpg"> </nav>
Henk de Boer <div class="chat-right right">
</div></a>
</nav>
</div>
<div class="chat-right">
<div class="chat-history platform"> <div class="chat-history platform">
<div class="chat-message"> <div class="chat-message">
<div class="chat-message-self">Hi!</div> <div class="chat-message-self">Hi!</div>