neue Visualisierung "webui" (alternative zu vis & vis-2)

jogibear9988

so, sollte nun gehen.

Problem war, ich prüfe ob es ein "LIT" element ist, um den event namen zu bauen, aber LIT ist in der Runtime erst später geladen, daher ist es zum zeitpunkt wo ich die Bindings anwende noch kein "LIT" element. Nun prüfe ich das später nochmals und wende das binding dann nochmal an.

Und an deinem screen hab ich ein paar sachen gelöscht, damit ich die controls sehe, hab aber nicht analysiert was du da vor hast.

Smilie108

@jogibear9988 Danke jetzt gehts
Bin grad nochmal dabei alles umzugestalten ist momentan ein experiment sorry
bin grad dabei zu schauen in wie weit ich das ganze handy kompatible bekomme ohne auf den comfort bei einem großen display zu verlieren. Alles lässt sich nicht einfach scalen zwecks lesbarkeit am handy
mal sehen wenn ich das soweit habe folgen nochmals infos danke nochmal

Blockmove

@smilie108 said in neue Visualisierung "webui" (alternative zu vis):

@jogibear9988 Danke jetzt gehts
Bin grad nochmal dabei alles umzugestalten ist momentan ein experiment sorry
bin grad dabei zu schauen in wie weit ich das ganze handy kompatible bekomme ohne auf den comfort bei einem großen display zu verlieren. Alles lässt sich nicht einfach scalen zwecks lesbarkeit am handy
mal sehen wenn ich das soweit habe folgen nochmals infos danke nochmal

Schau dir mal die html-Einheiten an. Schriftgrößen, margin oder padding kann man auch in em anstelle px angeben. Packt man die Elemente in ein grid, dann ist die Einteilung fr oft nützlich.

jogibear9988

@blockmove said in neue Visualisierung "webui" (alternative zu vis):

@smilie108 said in neue Visualisierung "webui" (alternative zu vis):

@jogibear9988 Danke jetzt gehts
Bin grad nochmal dabei alles umzugestalten ist momentan ein experiment sorry
bin grad dabei zu schauen in wie weit ich das ganze handy kompatible bekomme ohne auf den comfort bei einem großen display zu verlieren. Alles lässt sich nicht einfach scalen zwecks lesbarkeit am handy
mal sehen wenn ich das soweit habe folgen nochmals infos danke nochmal

Schau dir mal die html-Einheiten an. Schriftgrößen, margin oder padding kann man auch in em anstelle px angeben. Packt man die Elemente in ein grid, dann ist die Einteilung fr oft nützlich.

da gibts mittlerweile echt viele:

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

und für container queries gibts auch nochmal welche:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries

Blockmove

@jogibear9988

Ja es gibt wirklich jede Menge.
Gehört halt zu dem Umfeld von responsive Design.
Hilft ja nicht nur die Elemente dynamisch anzuordnen, man sollte auch die Schriften lesen können.
Deshalb mache ich lieber ne spartanische Visu und verzichte auf aufwendige Spielereien. Die fallen einem meist irgendwann auf die Füße.

jogibear9988

@blockmove said in neue Visualisierung "webui" (alternative zu vis):

@jogibear9988

Ja es gibt wirklich jede Menge.
Gehört halt zu dem Umfeld von responsive Design.
Hilft ja nicht nur die Elemente dynamisch anzuordnen, man sollte auch die Schriften lesen können.
Deshalb mache ich lieber ne spartanische Visu und verzichte auf aufwendige Spielereien. Die fallen einem meist irgendwann auf die Füße.

Container queries machen das ganze echt noch mal interessant. Da kannst du dann deine schriftgröße abhängig von deiner containergröße machen.
(siehe bsp screen containerFontSize)

Blockmove

@jogibear9988 said in neue Visualisierung "webui" (alternative zu vis):

@blockmove said in neue Visualisierung "webui" (alternative zu vis):

@jogibear9988

Ja es gibt wirklich jede Menge.
Gehört halt zu dem Umfeld von responsive Design.
Hilft ja nicht nur die Elemente dynamisch anzuordnen, man sollte auch die Schriften lesen können.
Deshalb mache ich lieber ne spartanische Visu und verzichte auf aufwendige Spielereien. Die fallen einem meist irgendwann auf die Füße.

Container queries machen das ganze echt noch mal interessant. Da kannst du dann deine schriftgröße abhängig von deiner containergröße machen.
(siehe bsp screen containerFontSize)

Die Designer brauchen ja auch ne Daseinsberechtigung
Ist wie mit den Juristen … Wären Gesetze einfach und verständlich, bräuchte man auch keine mehr.

Blockmove

@jogibear9988 said in neue Visualisierung "webui" (alternative zu vis):

@blockmove said in neue Visualisierung "webui" (alternative zu vis):

@jogibear9988

Ja es gibt wirklich jede Menge.
Gehört halt zu dem Umfeld von responsive Design.
Hilft ja nicht nur die Elemente dynamisch anzuordnen, man sollte auch die Schriften lesen können.
Deshalb mache ich lieber ne spartanische Visu und verzichte auf aufwendige Spielereien. Die fallen einem meist irgendwann auf die Füße.

Container queries machen das ganze echt noch mal interessant. Da kannst du dann deine schriftgröße abhängig von deiner containergröße machen.
(siehe bsp screen containerFontSize)

Hab ich mir jetzt auch mal angeschaut. Auch ne interessante Möglichkeit.
Wenn man die Visu auf verschiedenen Geräten nutzt, erlebt man halt immer wieder Überraschungen.
Highend-Smatphones sind da besonders lustig. Hohe Auflösungen und kleine Bildschirme. Da ist oft ne Schrift kaum mehr lesbar. Ich persönlich hab das Thema bei mir erstmal hinten angestellt. Auf meinen Tablets und auf dem Desktop funktioniert es.
@Smilie108
Wie sieht das mit deinen schönen grafischen Darstellungen aus?
Funktioniert das alles auf verschiedenen Geräten?

Smilie108

@blockmove
Hi naja eingeschränkt hatte jetzt mal fast alles von vis2 umgezogen ohne Rücksicht auf das responsiv.
Bin jetzt grad dabei das ganze entweder in einem 2.ten baum für handydarstellung zu Optimieren oder das bestehende reponsiv fähig machen.
ABER Die graphiken usw kann man teilweise nicht einfach shrinken oder so weil damit unleserlich wird.
Es gibt auch noch die option auf dem handy zu schieben usw aber unterwegs insteresieren mich eigentlich ja nur harte fakten und weniger die Graphik.
Zuhause auf dem Tablet bzw rechner ist das was anderes Da soll es auch gut ausschauen.
Mal sehen wie ich das alles unter einen hut bringe.
mfg Tom

Blockmove

@smilie108

Ich komme immer mehr zum Schluß, dass für mich ein 2. Baum für Handy weniger Aufwand ist als zu versuchen komplett auf responsive Design zu setzen.

Smilie108

@blockmove Denke inzwischen auch das dies ein der bessere weg ist

Blockmove

@smilie108 said in neue Visualisierung "webui" (alternative zu vis):

@blockmove Denke inzwischen auch das dies ein der bessere weg ist

Der bessere Weg vielleicht nicht …. Aber der einfachere.
Ich hab bis jetzt ganz wenig absolute px-Positionen verwendet.
Wenn ich mal Zeit hab, dann muss ich mir da mal echart in der Hinsicht genauer anschauen.

Blockmove

@jogibear9988 said in neue Visualisierung "webui" (alternative zu vis):

Ich hab jetzt nicht die richtigen styles zusammenkopiert, will nur zeigen, du solltest zusammenfassen was sinn macht, wenn du bei 4 items in dem kalender die gleicehn styles setzt, macht es sinn die in eine gemeinsame klasse zu packen, und dem element mehrere klassen zuzuweisen.

Ich hab jetzt mal deinen Vorschlag umgesetzt und das css verschlankt.
Auf dem Server liegt nun eine akutalisierte Variante.

Hast du dir schon mal Gedanken gemacht über ein ui für bind-class?

Viele Grüße und schönes WE!

Scrounger

@jogibear9988
Erstmal vielen Dank für den tollen Adapter

Bin fleißig seit beginn an mitzulesen, komme aber erst jetzt wirklich dazu mich damit mal zu beschäftigen und hab gleich mal ein paar Fragen:

Ich würde genre die material-components-web (npm) verwenden, vor allem wegen der TopAppBar. Bekomme allerdings folgende Fehlermeldung - der scheint die Dateiendung nicht zu verwenden:

Wie kann ich nach dem Laden der runtime auf ein Element per Javascript zugreifen?
Timeout, DOMContentLoaded, etc funktioniert nicht.
Hab ein kleines Beispiel erstellt in deiner Demo erstellt scrounger/javascript_test

jogibear9988

@scrounger said in neue Visualisierung "webui" (alternative zu vis):

TopAppBar

hab dir es angepasst...

kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

wenn dem npm package die Dateiendungen fehlen ist das fehlerhaft und muss dort gefixt werden.

jogibear9988

hab ein issue dazu erstellt: https://github.com/material-components/material-components-web/issues/8174

jogibear9988 created this issue in material-components/material-components-web

closed [ALL] NPM packages are missing file extensions in ES6 exports #8174

Scrounger

@jogibear9988 sagte in neue Visualisierung "webui" (alternative zu vis):

kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

Bin ein Stück weiter, mdc laden geht schon, muss aber anders aufgerufen werden, siehe mein Beispiel scrounger/topAppBar in deiner Demo. Der navigation drawer geht jetzt auch schon.

Was ich aber nicht hinbekomme ist, dass die Icons geladen werden. Hast du ne idee?

jogibear9988

@scrounger said in neue Visualisierung "webui" (alternative zu vis):

@jogibear9988 sagte in neue Visualisierung "webui" (alternative zu vis):

kann aber die Komponente nicht wirklich einbinden. Wenn ich das js vom CDN lade ist danach mdc trotzdem nicht definiert.

Bin ein Stück weiter, mdc laden geht schon, muss aber anders aufgerufen werden, siehe mein Beispiel scrounger/topAppBar in deiner Demo. Der navigation drawer geht jetzt auch schon.

Was ich aber nicht hinbekomme ist, dass die Icons geladen werden. Hast du ne idee?

das script geht schon nicht, "mdc is not defined". Kp warum das so ist. Glaube fast das das package auf unpkg so nicht funktioniert.

Scrounger

@jogibear9988
Also in der Runtime kommt die Fehlermeldung mdc is not defined nicht.

Im Designer Preview kommt die Fehlermeldung.
Wenn ich noch const mdc = require('material-components-web'); verwende, da gehts auch im Designer Preview, allerdings meckert er dann in der Runtime mit error parsing javascript - screenviewer - scrounger/topAppBar ReferenceError: require is not defined

Das package von unpkg funktioniert bei mir an anderer Stelle einwandfrei.

jogibear9988

@scrounger

require kannst nicht nutzen...

Dann hängt das ganze mit "monaco" editor zusammen, der vscode editor den ich im designer nutze.
Der definiert ein require, dadurch wird das paket falsch geladen.
Ich hoffe das es bald ein ESM paket von monaco gibt, aber der issue ist schon ewig offen...

NEWS