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

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.
 

Fonex47

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?
Da verstehe ich leider nicht wie Du das meinst.
Genau, die id brauch ich da ich eine funktion drinne hab die die ganzen ids überprüft und je nachdem dann auf gelesen oder nicht gelesen setzt den status, das heißt ich brauche es nur bei hunter.

War jetzt zu schnell sorry, und hab oben den beitrag nochmal bearbeitet.
 

Sempervivum

Erfahrenes Mitglied
Verstehe, jetzt wo ich den Code sehe. ID und Class sind klar, aber da sehe ich auch ein img-Tag und eine SVG-Grafik. Sind die erstmal nicht Thema?
 

Sempervivum

Erfahrenes Mitglied
ID kannst Du so einfügen:
Code:
function privateLog($post, $type)
{
    $class = '';
    if ($type == 2) {
        $class = ' class="hunter" ';
    }

    return '<li id="priv' . $post['id'] . '"' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}
Die andere Klasse sehe ich in deinem Code, ich weiß nur nicht, wo wir sie hin tun müssen, weil ja das HTML jetzt ganz anders aussieht.
 

Fonex47

Mitglied
ID kannst Du so einfügen:
Code:
function privateLog($post, $type)
{
    $class = '';
    if ($type == 2) {
        $class = ' class="hunter" ';
    }

    return '<li id="priv' . $post['id'] . '"' . $class . '><span>' . processPrivateMsg($post) . '</span></li>';
}
Die andere Klasse sehe ich in deinem Code, ich weiß nur nicht, wo wir sie hin tun müssen, weil ja das HTML jetzt ganz anders aussieht.
Ich hab das ausprobiert das sieht verbuggt aus,
Ich hab mal jetzt das aktuelle design so zum testen nur als html und css hochgeladen..
So sieht es aktuell aus
 

Sempervivum

Erfahrenes Mitglied
Warum sieht das denn verbuggt aus? Im Code oder in der Darstellung?
Bei dem Link bin ich verwundert: Du wolltest doch unbedingt diesen Farbverlauf haben und deswegen haben wir doch das HTML und CSS umgestellt. Und von dem ist jetzt gar nichts mehr zu sehen?
 

Fonex47

Mitglied
Warum sieht das denn verbuggt aus? Im Code oder in der Darstellung?
Bei dem Link bin ich verwundert: Du wolltest doch unbedingt diesen Farbverlauf haben und deswegen haben wir doch das HTML und CSS umgestellt. Und von dem ist jetzt gar nichts mehr zu sehen?
Ja das war vor dem umstyling weil du ja geschrieben hast du weißt nicht wo das hinmuss womit du auch recht hast kannst es ja nicht sehen nur durch PHP oder HTML code.

So nun war ich so weit die uhrzeit mitzunehmen, also anzuzeigen. Und jetzt am ende bin ich bei den häkchen gescheitert. priv ist ne id und generiert eigentlich keinen css ich versteh auch nicht warum das verbuggt aussah eben beim testen in der Darstellung.
 

Sempervivum

Erfahrenes Mitglied
Also mit verbuggt meinst Du das unsaubere Aussehen? Das hat aber sicher nichts mit der ID zu tun.

Schon spät, ich mache jetzt Schluss. Dann bis morgen - gute Nacht!
 
Status
Dieses Thema wurde gelöst! Zur Lösung gehen…

Neue Beiträge