Kennzeichnung Empfohlen

  • Affected Version
    WoltLab Suite 5.5
    Affected App
    WoltLab Suite Filebase

    Optischer Fehler bei der Empfohlen-Kennzeichnung.

    Grüsse aus Wien, Regards from Vienna

    Saccil

  • Vorschlag:

    CSS
    .filebaseFileFeatured .filebaseFileCardHeader::after {
        content: "";
        font-family: FontAwesome;
        font-size: 36px;
        position: absolute;
        right: 6px;
        bottom: 10px;
    }

    Grüsse aus Wien, Regards from Vienna

    Saccil

  • Ich würde sagen das ist so beabsichtigt da so der Titel durchgängig lesbar bleibt selbst wenn der Stern da ist. Schiebt man den hoch, wie in deinem Vorschlag, verdeckt man den Titel.

    Das sieht bei dir etwas komisch auch weil da der Hintergrund vom Header fehlt:

    Wo hast du den denn gelassen 👀

    Das "F" in Montag steht für Freude☝️


    ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️

  • Ich würde sagen das ist so beabsichtigt da so der Titel durchgängig lesbar bleibt selbst wenn der Stern da ist. Schiebt man den hoch, wie in deinem Vorschlag, verdeckt man den Titel.

    Ah, verstehe, it´s a feature, not a bug. ;)

    Wo hast du den denn gelassen 👀

    Das liegt an der generellen Farbgebung unserer Seite (welche eben leicht adaptiert wurde).

    Grüsse aus Wien, Regards from Vienna

    Saccil

    Edited once, last by Saccil (July 8, 2022 at 7:13 PM).

  • Plan B:

    CSS
    .filebaseFileFeatured .filebaseFileCardHeader::after {
        font-size: 24px;
        position: absolute;
        right: 4px;
        bottom: -4px;
    }

    Grüsse aus Wien, Regards from Vienna

    Saccil

  • Wenn dann richtig:

    CSS
    @include screen-lg {
        .filebaseFileFeatured .filebaseFileCardTitle {
            padding-right: 35px;
        }
    }

    Das "F" in Montag steht für Freude☝️


    ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️ 🐶 ♥️

  • Der leicht angeschnittene Stern ist mit Absicht so positioniert, die Werte sind pixelgenau gewählt. Es soll eine Art dezente Hintergrundgrafik simulieren, deswegen entspricht die Icon-Farbe auch der Hintergrundfarbe des nachfolgenden Elementes.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!