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

Fixed spacing on the chat page.

Browse Source
This commit is contained in:
Marijn Jansen
2017-01-10 20:58:56 +01:00
parent 81e4d1e874
commit b973e666da
4 changed files with 31 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
website/chat.php
View File

@@ -9,7 +9,7 @@
* This view adds the main layout over the screen. * This view adds the main layout over the screen.
* Header, menu, footer. * Header, menu, footer.
*/ */
// include("views/main.php"); include("views/main.php");
/* Add your view files here. */ /* Add your view files here. */
include("views/chat.php"); include("views/chat.php");

25
website/styles/chat.css
View File

@@ -6,7 +6,7 @@
/*border: solid #845663;*/ /*border: solid #845663;*/
width: 80%; width: 80%;
height: 500px; height: 500px;
margin: 10px auto; margin: 20px auto;
background-color: white; background-color: white;
vertical-align: bottom; vertical-align: bottom;
} }
@@ -24,21 +24,30 @@
width: 60px; width: 60px;
} }
.chat-message {
width: 100%;
height: 40px;
padding-top: 10px;
}
.chat-message-self, .chat-message-other {
border-radius: 20px;
padding: 10px 12px;
min-width: 10%;
max-width: 45%;
}
.chat-message-self { .chat-message-self {
text-align: right; text-align: right;
float: right; float: right;
margin: 10px; margin-right: 10px;
background-color: aqua; background-color: darkgreen;
padding: 10px; color: white;
border-radius: 10px;
} }
.chat-message-other { .chat-message-other {
text-align: left; text-align: left;
float: left; float: left;
margin: 10px; margin-left: 10px;
background-color: aquamarine; background-color: aquamarine;
padding: 10px;
border-radius: 10px;
} }

2
website/styles/main.css
View File

@@ -16,7 +16,7 @@ body {
} }
.content { .content {
margin-top: 80px; margin-top: 95px;
} }
::selection { ::selection {

15
website/views/chat.php
View File

@@ -1,9 +1,18 @@
<div class="content"> <div class="content">
<div class="chat"> <div class="chat">
<div class="chat-history"> <div class="chat-history">
<div class="chat-message-self">Hi!</div><br> <div class="chat-message">
<div class="chat-message-other">Hi!</div><br> <div class="chat-message-self">Hi!</div>
<div class="chat-message-self">Hi!</div><br> </div>
<div class="chat-message">
<div class="chat-message-other">Hi!</div>
</div>
<div class="chat-message">
<div class="chat-message-self">How it's going?</div>
</div>
<div class="chat-message">
<div class="chat-message-self">Hi!</div>
</div>
</div> </div>
<form class="chat-field" method="post"> <form class="chat-field" method="post">