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

Merge branch 'marijn-chat' into 'master'

Browse Source 
Marijn chat

See merge request !7
This commit was merged in pull request #11.
This commit is contained in:
Marijn Jansen
2017-01-11 10:56:50 +01:00
parent 8a6293cb8d 8b74917b21
commit 8d0f2d40b7
8 changed files with 117 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.idea/php.xml generated Normal file
View File

@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="PhpProjectSharedConfiguration" php_language_level="7.1" />
</project>

18
website/chat.php Normal file
View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html>
<?php
include("views/head.php");
?>
<body>
<?php
/*
* This view adds the main layout over the screen.
* Header, menu, footer.
*/
include("views/main.php");
/* Add your view files here. */
include("views/chat.php");
?>
</body>
</html>

BIN
website/img/Logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 38 KiB

After

Width:  |  Height:  |  Size: 39 KiB

53
website/styles/chat.css Normal file
View File

@@ -0,0 +1,53 @@
.chat {
text-align: center;
}
.chat-history {
/*border: solid #845663;*/
width: 80%;
height: 500px;
margin: 20px auto;
background-color: white;
vertical-align: bottom;
}
.chat-field input {
border-radius: 8px;
}
.chat-field input[type="text"] {
width: calc(75% - 60px);
}
.chat-field input[type="submit"] {
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-right: 10px;
background-color: darkgreen;
color: white;
}
.chat-message-other {
text-align: left;
float: left;
margin-left: 10px;
background-color: aquamarine;
}

12
website/styles/main.css
View File

@@ -16,7 +16,7 @@ body {
} }
.content { .content {
margin-top: 80px; margin-top: 95px;
} }
::selection { ::selection {
@@ -36,6 +36,16 @@ body {
border: 0; border: 0;
} }
input[type="submit"], button {
background-color: #845663;
color: white;
padding: 5px;
}
input[type="text"] {
padding: 5px;
}
/* Move element down (clear), below floating elements */ /* Move element down (clear), below floating elements */
.clear { .clear {
clear: both; clear: both;

29
website/views/chat.php Normal file
View File

@@ -0,0 +1,29 @@
<div class="content">
<div class="chat">
<div class="chat-history">
<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">
<input type="text"
name="message"
placeholder="Typ een chatbericht om te verzenden"
required
>
<input type="submit"
value="Verstuur"
>
</form>
</div>
</div>

1
website/views/head.php
View File

@@ -6,6 +6,7 @@
<style> <style>
/* Add your css files here. */ /* Add your css files here. */
@import url("styles/main.css"); @import url("styles/main.css");
@import url("styles/chat.css");
@import url("styles/font-awesome.css"); @import url("styles/font-awesome.css");
@import url("styles/header.css"); @import url("styles/header.css");
</style> </style>

2
website/views/header.php
View File

@@ -1,6 +1,6 @@
<div class="header"> <div class="header">
<div id="header-logo"> <div id="header-logo">
<img src="img/Logo.png" /> <img src="img/logo.png" />
</div> </div>
<div id="header-search"> <div id="header-search">
<form action="php/search.php" method="get"> <form action="php/search.php" method="get">