Sempervivum
Erfahrenes Mitglied
Ich habe mal einen ersten Schritt gemacht und ein Demo nur mit den Nachrichten gemacht, ohne Zeit und ohne Avatar, und zwar mit deinem letzten Codepen als Vorlage. Sieht vollständig so aus:
Da ist jetzt viel Overhead drin, damit ich es testen konnte. Das einzige, was Du übernehmen müsstest, ist die Funktion privateLog():
d. h. die vorhandene Funktion durch diese ersetzen.
Und dann mal sehen, wie der Chat dann aussieht.
Code:
<?php
ini_set('display_errors', '1');
error_reporting(E_ALL);
//<li class="hunter"><span>Hey Empfänger!</span></li>
function processPrivateMsg($post)
{
return $post;
}
function privateLog($post, $type)
{
$class = '';
if ($type == 2) {
$class = ' class="hunter" ';
}
return '<li' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<style>
html,body{
background: black;
margin: 0 auto;
}
.background_box {
margin: 0 auto;
display: flex;
flex-direction: column;
font: 16px/1.3 sans-serif;
overflow: auto;
padding: 0;
background: linear-gradient(rgb(114, 52, 169) 0%, rgb(10, 142, 231) 100%);
}
.background_box:after {
content: '';
background: white;
flex: 1;
pointer-events: none;
}
.background_box li {
list-style-type: none;
display: flex;
flex-direction: row-reverse;
overflow: hidden;
border-style: solid;
border-color: black;
border-width: 2px 16px 2px 8px;
flex: 0 0 auto;
}
.background_box li.hunter {
flex-direction: row;
border-right-width: 8px;
border-left-width: 16px;
}
.background_box li:first-child {
border-top-width: 10px;
}
.background_box li:last-child {
border-bottom-width: 10px;
}
.background_box li:before {
content: '';
flex: 1;
background: black;
pointer-events: none;
}
.background_box li span {
background: #1a1a1a;
padding: 8px;
position: relative;
color: white;
}
.background_box li span:before {
content: '';
position: absolute;
left: -8px;
top: -8px;
bottom: -8px;
right: -8px;
border: 8px solid black;
border-radius: 16px;
pointer-events: none;
}
.background_box li.hunter span {
background: none;
color: white;
}
.background_box ul {
margin: 0;
padding: 0;
}
</style>
<div id="private_content" class="background_box" value="1">
<ul>
<?php
echo privateLog('Hey Empfänger!', 1);
echo privateLog('Na Absender?', 2);
echo privateLog('Wie geht es dir ?', 1);
echo privateLog('Mir geht es Prima!', 2);
?>
</ul>
</div
</body>
</html>
Code:
function privateLog($post, $type)
{
$class = '';
if ($type == 2) {
$class = ' class="hunter" ';
}
return '<li' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}
Und dann mal sehen, wie der Chat dann aussieht.