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

Merge branch 'lars-chat' into 'master'

Browse Source 
Lars chat

See merge request !40
This commit was merged in pull request #44.
This commit is contained in:
Marijn Jansen
2017-01-13 12:06:54 +01:00
parent b0e3d43e13 fe11b79380
commit a49b906217
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);
} }

17
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="#"><div class="chat-conversation"> <a href="#">
<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>
<a href="#"><div class="chat-conversation">
<img class="profile-picture" src=http://www.kpop-map.com/wp-content/uploads/2016/01/sm-rookies-kun-profile.jpg">
Henk de Boer
</div></a>
</nav>
</div> </div>
</a>
<div class="chat-right"> </nav>
<div class="chat-right 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>