Positionierung von Chatnachrichten mittels CSS

Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

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:
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>
Da ist jetzt viel Overhead drin, damit ich es testen konnte. Das einzige, was Du übernehmen müsstest, ist die Funktion privateLog():
Code:
function privateLog($post, $type)
{
    $class = '';
    if ($type == 2) {
        $class = ' class="hunter" ';
    }
    return '<li' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}
d. h. die vorhandene Funktion durch diese ersetzen.
Und dann mal sehen, wie der Chat dann aussieht.
 

Fonex47

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:
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>
Da ist jetzt viel Overhead drin, damit ich es testen konnte. Das einzige, was Du übernehmen müsstest, ist die Funktion privateLog():
Code:
function privateLog($post, $type)
{
    $class = '';
    if ($type == 2) {
        $class = ' class="hunter" ';
    }
    return '<li' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}
d. h. die vorhandene Funktion durch diese ersetzen.
Und dann mal sehen, wie der Chat dann aussieht.

Aufjedenfall sind wir einen riesen schritt vorran gekommen, nun hat es den öffentlichen chat getroffen :D
aber das könnte ich irgendwie reparieren. nur das problem ist das der empfänger seine nachricht nicht farbig sein soll sondern meine also quasi absender. ich will es nicht kompliziert erklären :D so wie es gerade ist mit den farben umgekehrt nur.
 

Anhänge

  • Beispiel.png
    Beispiel.png
    89,4 KB · Aufrufe: 2

Sempervivum

Erfahrenes Mitglied
nur das problem ist das der empfänger seine nachricht nicht farbig sein soll sondern meine also quasi absender.
Verstehe schon, das kannst Du leicht umkehren, indem Du die Abfrage des Typs änderst:
Code:
function privateLog($post, $type)
{
    $class = '';
    if ($type == 1) {
        $class = ' class="hunter" ';
    }

    return '<li' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}
 

Fonex47

Mitglied
Verstehe schon, das kannst Du leicht umkehren, indem Du die Abfrage des Typs änderst:
Code:
function privateLog($post, $type)
{
    $class = '';
    if ($type == 1) {
        $class = ' class="hunter" ';
    }

    return '<li' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}

hat geklappt super vielen vielen dank, jetzt schau ich mal das ich den öffentlichen chat wieder hinkriege also den public chat, der ist bissel kaputt gegangen durch den css veränderungen. ich hoffe ich kriegs hin dann wäre das alles erledigt.
Danke nochmal :)
 

Fonex47

Mitglied
OK, wenn Du damit noch Probleme hast, kannst Du dich ja wieder melden.
Hallo nochmal:),
mir ist aufgefallen das ich die ID der nachrichten auch brauche, und ich eine klasse namens tick via div noch einfügen muss die nur bei Hunter angezeigt werden darf.


Ich hau mal die alte Funktion rein die ich modifiziert hatte mit den ganzen features.

PHP:
function privateLog($post, $type){
    global $data;
    switch($type){
        case 1:
            return '<li id="priv' . $post['id'] . '" class="hunter">
                <div class="private_logs">
                    <div class="private_content">
                    <div class="'.$data['pn_color'].' hunter_private"> ' . processPrivateMsg($post) . '<div class="metadata"><p class="pdate">' . displayDateNe($post['time']) . '</p><span class="tick">
                    
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" id="msg-dblcheck-ack" x="2063" y="2076">
                    <path d="M15.01 3.316l-.478-.372a.365.365 0 0 0-.51.063L8.666 9.88a.32.32 0 0 1-.484.032l-.358-.325a.32.32 0 0 0-.484.032l-.378.48a.418.418 0 0 0 .036.54l1.32 1.267a.32.32 0 0 0 .484-.034l6.272-8.048a.366.366 0 0 0-.064-.512zm-4.1 0l-.478-.372a.365.365 0 0 0-.51.063L4.566 9.88a.32.32 0 0 1-.484.032L1.892 7.77a.366.366 0 0 0-.516.005l-.423.433a.364.364 0 0 0 .006.514l3.255 3.185a.32.32 0 0 0 .484-.033l6.272-8.048a.365.365 0 0 0-.063-.51z" fill="'.(($data["status"] == 1 ) ? "#41bdf5" : "#dbdbdb").'"/>
                    </svg>
                    </span></div></div>
                        

                    </div>
                    
                </div>
            </li>';
        case 2:
            return '<li id="priv' . $post['id'] . '" class="target">
                <div class="private_logs">
                    <div class="private_avatar">
                        <img data="' . $post['user_id'] . '" class="get_info avatar_private" src="' . myavatar($post['user_tumb']) . '"/>
                    </div>
                    <div class="private_content">
                        <div class="target_private">' . processPrivateMsg($post) . ' <div class="metadata"><p class="ptdate">' . displayDateNe($post['time']) . '</p></div></div>
                        
                    </div>
                </div>
            </li>';
    }
}

Vielleicht ne Idee @Sempervivum ?

Mfg
 

Sempervivum

Erfahrenes Mitglied
Hallo, wo brauchst Du denn die ID, sichtbar für den Benutzer oder in einer ID im HTML, wie man es in deinem ersten Posting sah?
und ich eine klasse namens tick via div noch einfügen muss die nur bei Hunter angezeigt werden darf.
Da verstehe ich leider nicht wie Du das meinst.
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Neue Beiträge