Größe von data-warn bzw. fa-warn (roter Kreis + X) beeinflussen?

Begonnen von octek0815, 27 Dezember 2016, 15:43:17

Vorheriges Thema - Nächstes Thema

octek0815

Hi,

ist es möglich die Größe von data-warn bzw. fa-warn (roter Kreis + X) zu beeinflussen bzw. zu ändern?
Dieser wird ja durch die Größe des Symbol bzw. Push Widgets vorgeben, nur ist mir der Kreis manchmal zu groß.
Schön wäre es, wenn man die Größe als Parameter mitgeben könnte.

Grüße
Olli

PingPong

Hallo zusammen,

stehe gerade auch vor dem Problem, die Größe des warn-Kreises unabhängig von der Icongröße anzeigen zu wollen.
Gibt es da eine Lösung?

VG
Marc

setstate

Da gibt es noch nichts. Könnte man aber bauen.  Es ist in der Richtung aber eh noch was offen. Der rote Kreis soll sich horizontal verbreitern, wenn die Zahlen dreistellig werden. Aber ich habe aktuell gerade keinen Rechner, der ist zur Reperatur.

PingPong

Danke für die schnelle Antwort.
Dann weiss ich Bescheid und kann mir die weitere Recherche sparen :-)

Dann drück ich mal die Daumen, dass der Rechner fix und vor allem heil wieder kommt.
VG
Marc

setstate

#4
Die Größe der Warn Badges passen sich der Größe des Symbols an.


            <li data-row="1" data-col="1" data-sizex="2" data-sizey="2">
                <header>BIGGER</header>
                <div class="center">
                    <div data-type="symbol" data-device="ftuitest" data-get="STATE" data-icon="fa-trash warn" data-background-icon="fa-circle" data-color="#222" class="bigger"></div>
                </div>
            </li>
            <li data-row="1" data-col="2" data-sizex="2" data-sizey="2">
                <header>BIG</header>
                <div class="center">
                    <div data-type="symbol" data-device="ftuitest" data-get="STATE" data-icon="fa-trash warn" data-background-icon="fa-circle" data-color="#222" class="big"></div>
                </div>
            </li>
            <li data-row="1" data-col="3" data-sizex="2" data-sizey="2">
                <header>NORMAL</header>
                <div class="center">
                    <div data-type="symbol" id="myElem" data-device="ftuitest" data-get="STATE" data-icon="fa-trash warn" data-background-icon="fa-circle" data-color="#222"></div>
                </div>
            </li>


man kann diese aber jetzt auch per CSS ändern individuell anpassen.

Im Header angeben

    <style>
        #myElem #warn {
            font-size:0.4em;
        }
    </style>


Oder in der fhem-tablet-ui-user.css

Es sind jetzt auch Werte > 99 darstellbar. Die Breite passt sich flexibel an.

PingPong

Klasse, vielen Dank.
Werde ich mir heute abend direkt mal anschauen.

Mikka

Hallo setstate,

cool und danke für die Umsetzung.

Irgendwie bin ich gerade überfordert mit der Umsetzung in der fhem-tablet-ui-user.css.


html,
body,
main,

.symbol #warn {
    font-size:0.4em;
}


Sorry für die blöde Frage  ::)

In deinem Bsp. oben sind glaube ich ein paar "ddd" zu viel wie ddddata-map-class. Oder muss das so?

Mikka

setstate

Danke, ich habe aus dem Beispiel die unnötigen Teile rausgeworfen.

Hast du deine Symbole mit class="symbol" angelegt? Wenn nicht, wird dein Style nicht gezogen.

Entweder so:

[data-type="symbol"] #warn {
    font-size:0.4em;
}


Oder so

[data-type="symbol"] #warn {
    font-size:0.4em !important;
}


Ausserdem irritiert mich das


html,
body,
main,


Wenn das wirklich so drin steht, ist das falsch. Dann weglöschen.

Mikka

Zitat von: setstate am 06 Februar 2018, 10:50:57
Danke, ich habe aus dem Beispiel die unnötigen Teile rausgeworfen.

Hast du deine Symbole mit class="symbol" angelegt? Wenn nicht, wird dein Style nicht gezogen.

Hatte ich nicht, danke.


Entweder so:

[code][data-type="symbol"] #warn {
    font-size:0.4em;
}




Oder so

[data-type="symbol"] #warn {
    font-size:0.4em !important;
}


Funktionier, klasse, DANKE!

Zitat
Ausserdem irritiert mich das


html,
body,
main,


Wenn das wirklich so drin steht, ist das falsch. Dann weglöschen.

Bin davon ausgegangen, dass das in die user.css rein muss. Ist nun raus.

Vielen Dank für deine Hilfe und die Tablet-UI!!!

tomster

Servus setstate,

prima Feature! Danke dafür.
Allerdings:
Geht das nur mir so, oder ist der Backgroundkreis bei einstelligen Zahlen bei Euch auch ein "Ei"?

Mikka

Hi,

Zitat von: tomster am 21 Februar 2018, 15:35:55
Servus setstate,

prima Feature! Danke dafür.
Allerdings:
Geht das nur mir so, oder ist der Backgroundkreis bei einstelligen Zahlen bei Euch auch ein "Ei"?

kann ich bestätigen, man muss aber schon ganz genau hingucken :-)

Mikka

Mikka

@setstate: Seit dem Update steht der Kreis höher als vorher über dem Symbol oder? Lässt sich dies evtl. einstellen?

Siehe Screenshots