[Projekt] MDCSS v2: Material Design CSS Version 2

[Uhula]

@Pittini Ja, ist so, das Widget liefert immer einen String, auch wenn du Time/Color/usw wählst. Musst du dann scriptmäßig umwandeln. War aber, wie ich denke, schon immer so.
Zu den Farben kann ich so nichts sagen, dazu müsste ich ins Projekt sehen können.

@Dominik-F mdui-scale brauchst du nicht wirklich. Das kannst du auch im Widget direkt einstellen: CSS Allgemein | transform dort scale(x,y) eingeben. Achtung, der vis-Editor kommt damit teilweise durcheinander, zur Laufzeit geht es aber.

[Dominik F.]

@Uhula

Ich habs mal ausprobiert. Das Widget wird dann anders positioniert als mit mdui-scale, aus welchem Grund auch immer. Dazu kommt, dass wie du schon schriebst, der vis Editor die Veränderung nicht anzeigt was die richtige Postionierung des Widgets schwieriger macht wie ich finde. mdui-scale funktioniert wunderbar. Wenn du es nicht aufnehmen möchtest ist es nicht schlimm, werds dann einfach weiter selbst hinzufügen

[Pittini]

@Uhula sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

a, ist so, das Widget liefert immer einen String, auch wenn du Time/Color/usw wählst. Musst du dann scriptmäßig umwandeln. War aber, wie ich denke, schon immer so.

Verwende das selten, finde das Verhalten aber "dämlich". Vorallem wenn man die Option "als String" bedenkt, die dann ja sinnfrei wäre. Hab mal ein Issue aufgemacht.

Hab Dir im Chat den Link zum Projekt geschickt, wär nett wenn Du Dir das mal anschauen könntest. Tritt offenbar nur in dem Riesenprojekt auf, beim kleinen HeatingControl Projekt, indem genau die gleichen cards und widgets wie auf der Heizungsseite im großen Projekt sind, schauts einwandfrei aus. Kann das wieder, w ie wir schon mal hatten, ein Timingproblem sein?

[Tirador]

@Uhula Bei der vorherigen Version wurden mir noch graue Trennstriche zwischen den Listitems dargestellt. Das ist nun weg.
Muss man dafür noch etwas zusätzlich definieren?

Beispiel einer aktuellen Ansicht:

[Uhula]

@Tirador sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

Muss man dafür noch etwas zusätzlich definieren?

Ja, steht im Changelog:

• mdui-list: hat per Vorgabe keinen Border und keine Item-Trennlinien mehr, wenn gewünscht, "mdui-list mdui-bordered" bzw. "mdui-list mdui-divided" angeben

[Pittini]

@Uhula
Ich konnte das Problem lösen, der Grund bleibt unklar. Ich habe alle Widgets von der Seite contHeizung in eine leere Seite kopiert, dann die contHeizung gelöscht und die neue wieder contHeizung genannt. Und zack...sieht alles aus wie es soll. Its magic

[der-eine]

@Uhula habe gerade versucht die Material Design Icons in der lnav zu verwenden funktioniert leider nicht so wie mit den Material Icons. Gibts da eine Möglichkeit?

[Uhula]

@der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

@Uhula habe gerade versucht die Material Design Icons in der lnav zu verwenden funktioniert leider nicht so wie mit den Material Icons. Gibts da eine Möglichkeit?

Du meinst den Unterstrich? Der führt nur bei den Material Icons zum Abstand, da er im Font so codiert ist. Mit Material Design Icons musst du die Leerzeichen nach dem <i ...>...</i> mit "none blanc spaces" einfügen, auch mehrere nacheinander:

 

Alternativ im <i ...>...</i> einen rechten Rand via style-Attribut mit angeben:

<i ... style='margin-right:1em;'>...</i>

[Uhula]

@Pittini sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

@Uhula
Ich konnte das Problem lösen, der Grund bleibt unklar. Ich habe alle Widgets von der Seite contHeizung in eine leere Seite kopiert, dann die contHeizung gelöscht und die neue wieder contHeizung genannt. Und zack...sieht alles aus wie es soll. Its magic

Vielleicht hatte die view selbst noch einen background gesetzt. K.A., aber danke.

[der-eine]

@Uhula sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

style='margin-right:1em;

Super so <i style='margin-right:1em' class="mdui-mdi">󰛉</i>Proxmox funktioniert es Danke! Die erste Variante hab ich nicht verstanden.

[Uhula]

@der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

Die erste Variante hab ich nicht verstanden

Dann nur zur Vollständigkeit, sieht so aus:

<i ...>...</i>&nbsp;&nbsp;Mein Text

[der-eine]

@Uhula ah jetzt verstanden danke.

[der-eine]

@Uhula jetzt bin ich es nochmal... in Deinem Demo auf View cardDemoExHeos ist unten eine Select Value List

Wie bekomme ich dort die Schrift zentriert? Hätte es mit:

.mdui-select.mdui-select-center input[type="text"] {

text-align:center !important;

}

versucht aber ändert sich nichts. Hast Du einen Tipp?

[Uhula]

@der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

Hast Du einen Tipp?

text-align wird im select ignoriert. Versuch mal text-align-last statt text-align - damit ist eigentlich nur die jeweils letzte Zeile betroffen, da im select aber nur eine drin ist, betrifft es sie auch. Kann funktionieren, muss aber nicht.

[der-eine]

@Uhula danke aber funktioniert leider auch nicht.

[Uhula]

@der-eine sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

@Uhula danke aber funktioniert leider auch nicht.

Kann mit deinem CSS auch nicht, da du ein input-HTML-Element manipulieren möchtest, es sich aber um ein select-HTML-Element handelt. Versuch mal:

.mdui-select.mdui-center-h select,
.mdui-select.mdui-center select  {
    text-align-last: center !important;
}

und weise dem Widget mdui-center oder mdui-center-h zu (habe ich im MDCSS so aufgenommen).

[Tirador]

Gibt es eigentlich die Möglichkeit einen Back-Button einzubauen im anav ? D.h. wenn ich zurück möchte zur vorherigen View/Page.

[der-eine]

@Tirador importiere mal dieses Widget. Mit javascript:history.back(1) in "Link" kommst Du eine View zurück.

Widget

Spoiler

[{"tpl":"tplIconLink","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":false,"g_css_shadow_padding":false,"g_css_border":false,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"src":"","href":"javascript:history.back(1)","class":"mdui-button mdui-center","alt":"","text":"<i class=\"material-icons\">keyboard_backspace</i>"},"style":{"left":"calc(100% - 80px)","top":"2px","width":"36px","height":"36px"},"widgetSet":"jqui"}]

[der-eine]

@Uhula war wohl schon zu spät... Danke aber mit Deinem Code geht es auch nicht. Dann geht das wohl nicht bei dem Widget.
Wie bekomme ich das Herz am Anfang weg? Das würde schon reichen.

[Uhula]

@Tirador sagte in [Projekt] MDCSS v2: Material Design CSS Version 2:

Gibt es eigentlich die Möglichkeit einen Back-Button einzubauen im anav ? D.h. wenn ich zurück möchte zur vorherigen View/Page.

Alternativ, mit MDCSS 2.51 geht auch das HTML-Basis Widget mit CSS :

mdui-navitem mdui-tooltip?text:Vorherige+Seite mdui-click?action:history.back(1)

Ab MDCSS 2.51 wird der hinter action angegebene Code einfach ausgeführt. Möchte man auf Geräten, die es unterstützen noch ein Vibrate-Feedback, geht das demnächst auch:

mdui-navitem mdui-tooltip?text:Vorherige+Seite mdui-click?action:history.back(1);vibrate:100

---

Vibrate ist vielleicht auch in deinem Message-Script interessant, wird browserseitig einfach via window.navigator.vibrate([v1,p1,v2,p2,...]) aufgerufen (v=vibrate in ms, p=pause in ms). Und an mdui-swipe kannst du es dann auch anhängen.