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

Styled chat page

Browse Source 
Change the chat tap so it has the same style as the rest of the page
This commit is contained in:
Lars van Hijfte
2017-01-12 14:59:29 +01:00
parent fd171d01f3
commit b95aa49c32
2 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
website/styles/chat.css
View File

@@ -19,9 +19,7 @@
} }
.chat-recent, .chat-history { .chat-recent, .chat-history {
border-radius: 20px;
width: 100%; width: 100%;
background-color: white;
} }
/* List of chats. */ /* List of chats. */
@@ -47,7 +45,7 @@
.chat-history { .chat-history {
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
padding-bottom: 10px; padding: 0 0 10px 0;
} }
.chat-message { .chat-message {
@@ -80,20 +78,35 @@
/* Chat reply field */ /* Chat reply field */
.chat-field { .chat-field {
padding: 15px; width: 100%;
padding: 15px 0;
display: table;
} }
.chat-field input { .chat-field form {
border-radius: 8px; width: 100%;
overflow: hidden;
}
.chat-field span {
display: block;
overflow: hidden;
} }
.chat-field input[type="text"] { .chat-field input[type="text"] {
width: calc(100% - 80px); width: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
} }
.chat-field input[type="submit"] { .chat-field input[type="submit"] {
width: auto; width: auto;
float: right;
background-color: #845663; background-color: #845663;
color: white; color: white;
padding: 5px 10px; padding: 5px 10px;
border-top-right-radius: 10px;
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);
} }

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

@@ -1,7 +1,7 @@
<div class="content"> <div class="content">
<div class="chat"> <div class="chat">
<div class="chat-left"> <div class="chat-left">
<nav class="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">
@@ -15,7 +15,7 @@
</div> </div>
<div class="chat-right"> <div class="chat-right">
<div class="chat-history"> <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>
</div> </div>
@@ -43,14 +43,16 @@
</div> </div>
<div class="chat-field"> <div class="chat-field">
<form method="post"> <form method="post">
<input type="text"
name="message"
placeholder="Reageer..."
required
>
<input type="submit" <input type="submit"
value="Verstuur" value="Verstuur"
> >
<span>
<input type="text"
name="message"
placeholder="Reageer..."
required
>
</span>
</form> </form>
</div> </div>
</div> </div>