Sortierung der divs in der messageSidebar

CentrixDE · Feb 6th 2021

Servus,

ich habe leider keine passende Frage im Forum hierzu gefunden, falls ich falschliege kann mich gerne jemand korrigieren

In jedem Stil den ich bisher gefunden habe ist der Aufbau in der messageSidebar folgender:

Avatar
Benutzername
Ranggrafiken
Punkte

Nun möchte ich jedoch den Aufbau gerne abändern, damit dieser nach folgender Reihenfolge angezeigt wird:

Benutzername
Avatar
Ranggrafiken
Punkte

(Hierbei habe ich im Browser manuell den div "multirankContainer" manuell unter den div "userAvatar" gesetzt.)

Ich habe mit folgendem Code zumindest den Benutzernamen und die Ranggrafiken bereits über den Avatar bekommen, leider finde ich jedoch keine offensichtliche Möglichkeit die Ranggrafiken einzeln zu bestimmen:

messageSidebar - Template + Ergebnis

Smarty

{if !$isReply|isset}
    {assign var=isReply value=false} 
{/if}
{if !$enableMicrodata|isset}
    {assign var=enableMicrodata value=false}
{/if}
{if !$__messageSidebarJavascript|isset}
    {assign var=__messageSidebarJavascript value=true}
{/if}

<aside role="presentation" class="messageSidebar{if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && !$isReply && $userProfile->isOnline()} userOnline{/if} {if $userProfile->userID}member{else}guest{/if}"{if $enableMicrodata} itemprop="author" itemscope itemtype="http://schema.org/Person"{/if}>
    <div class="messageAuthor">
        {event name='messageAuthor'}
        
        {if $userProfile->userID}
            {assign var='username' value=$userProfile->username}

                <div class="messageAuthorContainer">
                <a href="{$userProfile->getLink()}" class="username userLink" data-object-id="{@$userProfile->userID}"{if $enableMicrodata} itemprop="url"{/if}>
                    <span{if $enableMicrodata} itemprop="name"{/if}>{@$userProfile->getFormattedUsername()}</span>
                </a>
                {if !$isReply}
                    {if $userProfile->banned}<span class="icon icon16 fa-lock jsTooltip jsUserBanned" title="{lang user=$userProfile}wcf.user.banned{/lang}"></span>{/if}
                    
                    {event name='messageAuthorContainer'}
                {/if}
            </div>            
            {if $userProfile->getAvatar()}
                <div class="userAvatar">
                    {user object=$userProfile type='avatar128' ariaHidden='true'}

                    {if MESSAGE_SIDEBAR_ENABLE_ONLINE_STATUS && !$isReply && $userProfile->isOnline()}<span class="badge green badgeOnline" title="{lang}wcf.user.online.title{/lang}">{lang}wcf.user.online{/lang}</span>{/if}
                </div>
            {/if}
            
            
            {if !$isReply}
                {hascontent}
                    <div class="userTitle">
                        {content}
                            {event name='beforeUserTitle'}
                        
                            {if MODULE_USER_RANK && $userProfile->getUserTitle()}
                                <span class="badge userTitleBadge{if $userProfile->getRank() && $userProfile->getRank()->cssClassName} {@$userProfile->getRank()->cssClassName}{/if}">{$userProfile->getUserTitle()}</span>
                            {/if}
                        
                            {event name='afterUserTitle'}
                        {/content}
                    </div>
                {/hascontent}
                
                {if MODULE_USER_RANK && $userProfile->getRank() && $userProfile->getRank()->rankImage}
                    <div class="userRank">{@$userProfile->getRank()->getImage()}</div>
                {/if}
            {/if}

            {if !$isReply && MODULE_TROPHY && $__wcf->session->getPermission('user.profile.trophy.canSeeTrophies') && ($userProfile->isAccessible('canViewTrophies') || $userProfile->userID == $__wcf->session->userID) && $userProfile->getSpecialTrophies()|count}
                <div class="specialTrophyContainer">
                    <ul>
                        {foreach from=$userProfile->getSpecialTrophies() item=trophy}
                            <li><a href="{@$trophy->getLink()}">{@$trophy->renderTrophy(32, true)}</a></li>
                        {/foreach}
                    </ul>
                </div>
            {/if}
        {else}
            <div class="userAvatar">
                <span>{@$userProfile->getAvatar()->getImageTag(128)}</span>
            </div>
            
            <div class="messageAuthorContainer">
                {if $userProfile->username}
                    <span class="username"{if $enableMicrodata} itemprop="name"{/if}>{$userProfile->username}</span>
                {/if}
                
                {event name='messageAuthorContainer'}
            </div>
            
            <div class="userTitle">
                <span class="badge">{lang}wcf.user.guest{/lang}</span>
            </div>
        {/if}
    </div>
    
    {if !$isReply}
        {event name='beforeCredits'}
        
        {if $userProfile->userID}
            {hascontent}
                <div class="userCredits">
                    <dl class="plain dataList">
                        {content}
                            {if MODULE_LIKE && MESSAGE_SIDEBAR_ENABLE_LIKES_RECEIVED && !$isReply && $userProfile->likesReceived}
                                <dt><a href="{$userProfile->getLink()}#likes" class="jsTooltip" title="{lang user=$userProfile}wcf.like.showLikesReceived{/lang}">{lang}wcf.like.likesReceived{/lang}</a></dt>
                                <dd>{#$userProfile->likesReceived}</dd>
                            {/if}
                            
                            {if MESSAGE_SIDEBAR_ENABLE_ACTIVITY_POINTS && $userProfile->activityPoints}
                                <dt><a href="#" class="activityPointsDisplay jsTooltip" title="{lang user=$userProfile}wcf.user.activityPoint.showActivityPoints{/lang}" data-user-id="{@$userProfile->userID}">{lang}wcf.user.activityPoint{/lang}</a></dt>
                                <dd>{#$userProfile->activityPoints}</dd>
                            {/if}
                            
                            {if MODULE_TROPHY && MESSAGE_SIDEBAR_ENABLE_TROPHY_POINTS && $userProfile->trophyPoints && $__wcf->session->getPermission('user.profile.trophy.canSeeTrophies') && ($userProfile->isAccessible('canViewTrophies') || $userProfile->userID == $__wcf->session->userID)}
                                <dt><a href="#" class="trophyPoints jsTooltip userTrophyOverlayList" data-user-id="{$userProfile->userID}" title="{lang user=$userProfile}wcf.user.trophy.showTrophies{/lang}">{lang}wcf.user.trophy.trophyPoints{/lang}</a></dt>
                                <dd>{#$userProfile->trophyPoints}</dd>
                            {/if}
                            
                            {if MESSAGE_SIDEBAR_ENABLE_ARTICLES && $userProfile->articles}
                                <dt><a href="{link controller='ArticleList' userID=$userProfile->userID}{/link}" class="jsTooltip" title="{lang user=$userProfile}wcf.article.showArticlesWritten{/lang}">{lang}wcf.user.articles{/lang}</a></dt>
                                <dd>{#$userProfile->articles}</dd>
                            {/if}
                            
                            {event name='userCredits'}
                            
                            {if MESSAGE_SIDEBAR_USER_OPTIONS && $userProfile->isAccessible('canViewProfile')}
                                {assign var='__sidebarUserOptions' value=','|explode:MESSAGE_SIDEBAR_USER_OPTIONS}
                                {foreach from=$__sidebarUserOptions item='__sidebarUserOption'}
                                    {if $userProfile->getUserOption($__sidebarUserOption)}
                                        {assign var='__formattedUserOption' value=$userProfile->getFormattedUserOption($__sidebarUserOption)}
                                        {if $__formattedUserOption}
                                            <dt>{lang}wcf.user.option.{$__sidebarUserOption}{/lang}</dt>
                                            <dd>{@$__formattedUserOption}</dd>
                                        {/if}
                                    {/if}
                                {/foreach}
                            {/if}
                        {/content}
                    </dl>
                </div>
            {/hascontent}
        {/if}
        
        {event name='afterCredits'}
    {/if}
</aside>

Display More

Damit wird folgende Ansicht erzielt:

norse · Feb 6th 2021

Angesichts der Tatsache, dass werksseitig nur ein Benutzerrang vorgesehen ist und angezeigt wird, bist Du mit diesem Anliegen vermutlich beim Pluginautor besser aufgehoben als hier.

Gruß norse

CentrixDE · Feb 6th 2021

Oh, danke dir für die Info. Habs soeben getestet und ohne das Plugin funktioniert es einwandfrei...

Ich dachte schon ich hätte nur irgendwas übersehen

Aze · Feb 6th 2021

Eine Änderung der Sortierung ist auch mittels CSS umsetzbar, ohne dabei ins Template einzugreifen. Sofern ich heute Abend noch dazu komme, stelle ich die Anpassung hier zur Verfügung.

nohwet · Feb 6th 2021

Quote from Aze

Eine Änderung der Sortierung ist auch mittels CSS umsetzbar, ohne dabei ins Template einzugreifen. Sofern ich heute Abend noch dazu komme, stelle ich die Anpassung hier zur Verfügung.

Das hört sich gut an.

Möchte bei mir die Trophäen weiter nach oben holen.

Aze · Feb 6th 2021

Mittels CSS ist die Darstellung so zu erreichen:

Sass (Scss)

/* messagesidebar styling
========================================================================== */

@include screen-md-up {

    .messageSidebar {

        .messageAuthor {
            display: flex;
            flex-direction: column;
        }

        .userAvatar {
            order: 2;
        }

        .messageAuthorContainer {
            order: 1;
            margin-bottom: 10px;
        }

        .userTitle {
            order: 3;
        }

        .specialTrophyContainer {
            order: 4;
        }

        .badgeOnline {
            left: 35px;
        }

    }

}

Display More

Mit Hilfe der order Eigenschaft lassen sich die Elemente individuell sortieren. Wenn das Plugin "Mehrere Ranggrafiken" genutzt wird, müsste man .userTitle durch .multirankContainer ersetzen.

SoftCreatR · Feb 6th 2021

Quote from Aze

müsste man .userTitle durch .multirankContainer ersetzen.

Oder

.userTitle => .userTitle, .multirankContainer

CentrixDE · Feb 6th 2021

Quote from Aze

Mittels CSS ist die Darstellung so zu erreichen

Vielen herzlichen Dank! Ich bin gerade erst dazugekommen es zu testen und es funktioniert wunderbar für meinen Zweck

Kudos to you

Sortierung der divs in der messageSidebar

Participate now!

Share

Similar Threads

Bei "Masonry"-Darstellung funktioniert die Sortierung "Zeitpunkt des Hochladens" nicht

Globale Verwaltung der Dateianhänge/Attachments

Die erste Trophäen nicht automatisch in MessageSidebar und Profil anzeigen!

Bei "Masonry"-Darstellung Infotext im ACP bereitstellen, dass Sortierung eingeschränkt ist

Profilfeld in die 'messageSidebar' (Thema)

Titelbild in MessageSidebar zentrieren

Tags

Users Viewing This Thread