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.
* Header, menu, footer.
*/
// include("views/main.php");
include("views/main.php");
/* Add your view files here. */
include("views/chat.php");

25
website/styles/chat.css
View File

@@ -6,7 +6,7 @@
/*border: solid #845663;*/
width: 80%;
height: 500px;
margin: 10px auto;
margin: 20px auto;
background-color: white;
vertical-align: bottom;
}
@@ -24,21 +24,30 @@
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 {
text-align: right;
float: right;
margin: 10px;
background-color: aqua;
padding: 10px;
border-radius: 10px;
margin-right: 10px;
background-color: darkgreen;
color: white;
}
.chat-message-other {
text-align: left;
float: left;
margin: 10px;
margin-left: 10px;
background-color: aquamarine;
padding: 10px;
border-radius: 10px;
}

2
website/styles/main.css
View File

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

15
website/views/chat.php
View File

@@ -1,9 +1,18 @@
<div class="content">
<div class="chat">
<div class="chat-history">
<div class="chat-message-self">Hi!</div><br>
<div class="chat-message-other">Hi!</div><br>
<div class="chat-message-self">Hi!</div><br>
<div class="chat-message">
<div class="chat-message-self">Hi!</div>
</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>
<form class="chat-field" method="post">