Kompaktere Darstellung der Box Ungelesene Themen / Letzte Beiträge

Seewie · May 10, 2018 at 7:28 PM

Ich möchte das Dashboard gerne so aufbauen, dass man alles Wesentliche auf einen Blick erkennt, hierbei stören mich persönlich jedoch die großen Zeilenhöhen in der Box Ungelesene Themen bzw. Letzte Beiträge (Inhaltsbereich) gerade auf kleineren Monitoren.

Um das zu lösen, bereinige ich die Box um mMn. nicht so wichtige Inhalte wie Avatare, Themenstarter, Themenstartzeitpunkt, Statistiken - alles per CSS kein Problem. Beim Zeilenumbruch der letzten Spalte beiße ich mir aber die Zähne aus.

Bisher:

Nach meinen Anpassungen:

Mein Ziel:

Hat jemand eine Idee wie ich den Zeilenumbruch bei

Semako (p-Tag)

vor 8 Minuten (small-Tag)

entfernen kann?

fulgore · May 10, 2018 at 7:37 PM

Ich bin auch auf Suche nach genau der gleichen Lösung wie du.

Würdest du deinen css Code zur Verfügung stellen?

Morik · May 10, 2018 at 8:03 PM

Code

.columnLastPost > .box32 > div > p {
    float: left;
}

Danach noch etwas den Abstand tweaken und du solltest am Ziel sein^^

Seewie · May 10, 2018 at 9:27 PM

Danke Morik - klappte super! Damit habe ich folgenden CSS-Code:

CSS

.columnLastPost > .box32 > div > p {
float: left; margin-right: 10px; font-size: 12px;
}
li.columnIcon.columnAvatar, ul.inlineList.dotSeparated.small.messageGroupInfo, aside.statusDisplay, li.columnStats { display: none; }
.messageGroupList .tabularList .columnLastPost { flex: 0 0 250px !important; }
.tabularListRow { padding: 2px 0px 2px 5px; }
small { float: right; margin-right: 10px; }
img.userAvatarImage { height: 20px !important; width: 20px !important; }
.messageGroupList .columnSubject > h3 > .messageGroupLink { font-size: 14px; }
.statusDisplay {display: none !important; }
ul.labelList { display: none; }

Display More

Damit spart man ca. 50% der Höhe der Box letzten Beiträge ein. Werde ich allerdings noch optisch etwas verbessern und insbes. die mobilen Ansichten noch etwas optimieren müssen.

Resultat:

statt

Seewie · May 20, 2018 at 9:20 AM

Guten Morgen,

ich würde im og. Beispiel hinter den Themennamen gerne noch die Zahl der ungelesenen Beiträge im Thema anzeigen. So würde man sofort sehen, wieviel Aktivität einem bislang entgangen ist und die ungelesenen Themen würden zusätzlich hervorgehoben (die Fette Darstellung geht z.T. etwas unter).

Darstellung: Als rote Nummer im Rechteckkasten analog zur Forenübersicht. Ginge das über eine Sprachvariable?

norse · May 20, 2018 at 2:42 PM

Da diese Information nirgendwo sonst in der Installation zur Verfügung steht, wird sie auch hier nicht abrufbar sein. In der Forenübersicht, auf die Du Dich beziehst, wird nicht die Zahl der ungelesenen Beiträge, sondern die der Themen mit bisher ungelesenen (beliebig vielen) Beiträgen angezeigt.

Gruß norse

Seewie · May 20, 2018 at 3:18 PM

Schade. Ich könnte mir vorstellen, dass viele User in der Box letzte Beiträge / ungelesene Themen die Zahl der ungelesenen Beiträge interessanter finden als die Gesamt-Zahl der Beiträge im Thema.

norse · May 20, 2018 at 3:46 PM

Du kannst das ja mal vorschlagen. Vielleicht kommt es dann mit der nächsten Version. Bis dahin wäre ja noch genug Zeit, die Funktion einzubauen.

Gruß norse

Seewie · May 20, 2018 at 4:06 PM

Dank Dir norse für Dein Feedback - habe einen Vorschlag erstellt.

MenikoBlue · May 25, 2018 at 6:05 PM

Quote from Seewie

Danke Morik - klappte super! Damit habe ich folgenden CSS-Code:

Das wird doch dann auch in der Themenübersicht so kompakt dargestellt und nicht nur in der "Ungelesene Themen" Box

norse · May 25, 2018 at 6:54 PM

Das lässt sich bei Bedarf ja problemlos auf die eingangs genannte Box beschränken.

Gruß norse

fulgore · May 26, 2018 at 1:36 PM

Ich hab mir das individuell für einen Stil anpassen lassen. Damit sieht die Top20 Box fast wieder wie unter wbb4.1 aus, vor allem nicht mehr so wbb5.x typisch bullig

Danke SgtKaneki

Seewie · May 26, 2018 at 2:01 PM

Hallo fulgore

könntest/darfst Du denn nen Screenshot / Link oder Code posten, da ich hier auch noch einige Optimierungen vornehmen möchte und das Rad ungern zweimal erfinden will

fulgore · May 26, 2018 at 2:03 PM

So sieht es unter WBB4.1 aus:

Und so sieht es unter WBB5.1 (Testforum) aus:

Die Änderungen hat SgtKaneki so hinbekommen, dass es nur die Box auf der Startseite verändert.

Das hat er echt toll gemacht!

Jetzt können wir die endgültige Umstellung auf 5.1 in Angriff nehmen

fulgore · May 27, 2018 at 9:00 AM

Code kann ich dazu leider nicht posten, da das (c) dafür nicht bei mir liegt und ich zudem leider nicht weiß, welcher Teil im Stil das bewirkt.

Seewie · May 31, 2018 at 5:01 PM

ich habe den oben geposteten Code noch für die mobilen Ansichten optimiert, so dass alle Darstellungen möglichst platzsparend und dennoch ordentlich aussehen:

CSS

//.tabularBox .tabularListRowHead {display: none; }  // blendet noch Überschriftszeile aus
.boxContent li.columnIcon.columnAvatar, .boxContent ul.inlineList.dotSeparated.small.messageGroupInfo, .boxContent aside.statusDisplay, .boxContent li.columnStats, .boxContent .messageGroupInfoMobile { display: none !important; }
.boxContent .tabularListRow { padding: 2px 0px 2px 5px; }
.boxContent img.userAvatarImage { height: 20px !important; width: 20px !important; }
.boxContent .messageGroupList .columnSubject > h3 > .messageGroupLink { font-size: 14px; }
.boxContent .columnLastPost > .box32 > div > p { float: left; margin-right: 10px; font-size: 12px; }
.boxContent small { float: right; margin-right: 10px; }
.messageGroupList .tabularList .columnSubject > h3 > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@include screen-md-up { 
     .boxContent .messageGroupList .tabularList .columnLastPost { flex: 0 0 300px; }
}

@include screen-sm-down { 
    .messageGroupList .columnLastPost > .box32 { display: contents; }
    .box32 a,  span.badge.messageGroupCounterMobile { display: none; padding-left: 10px; }
     .messageGroupList .tabularListRow:not(.tabularListRowHead) > .tabularListColumns { justify-content: normal; padding-left: 10px; }
}

Display More

Damit es nur die gewünschte Box betrifft, überall noch die jeweilige ID z.B. [data-box-identifier="com.woltlab.wcf.RecentActivity"] davorstellen. Vielleicht hilft es jemanden...

Aze · September 17, 2018 at 9:45 PM

Entschuldigt, wenn ich dieses "ältere" Thema wieder hochhole, aber ich sitze selbst gerade an der Umsetzung einer schmaleren Darstellung dieser Box. Eine Darstellung wie auf dem Screen von fulgore zu erwirken, stellt kein Hindernis dar, dennoch frage ich mich, da ich speziellere Anpassungen tätigen will, wie das Template der Box heißt. Im WBB 4.1 war es unter dashboardBoxLatestPosts zu finden, im WSC werde ich grundlegend nicht fündig. Wie ist das Template dort benannt?

norse · September 17, 2018 at 10:17 PM

boxThreadListTable

Gruß norse

Porcelain · February 10, 2019 at 11:26 AM

Hi - ich hol das Thema mal wieder hoch.

Ich hab den CSS Code bei uns eingepflegt und bei den Letzten Beiträgen funktioniert das auch super.

Allerdings optimiert er mir auch die Modern Shoutbox, das möchten wir eigentlich nicht.

Gibts dafür evt ne Lösung?

norse · February 10, 2019 at 3:09 PM

Quote from Seewie

Damit es nur die gewünschte Box betrifft, überall noch die jeweilige ID z.B. [data-box-identifier="com.woltlab.wcf.RecentActivity"]

Gruß norse

Participate now!