Alternative zu lighterpack

[bri]

Probier doch mal, die festen Breiten rauszuschmeißen und dafür ins CSS aufzunehmen:

select { width: auto !important; }

[zeank]

vor einer Stunde schrieb bri:

select { width: auto !important; }

Meine Heldin!

Tausend Dank!

[Diran]

Gefällt mir sehr gut was bisher zu sehen ist!

Ein kleiner Fehler ist mir aufgefallen: Wenn man drei Nachkommastellen eingibt, dann stimmt etwas mit der Summe nicht. Bei vier Nachkommastellen passt es wieder.

Beispiel:

0,10 kg = 100 g Summe

0,100 kg = 100000 g Summe

0,1000 kg = 100 g Summe

[zeank]

vor 21 Minuten schrieb fejubl:

Gefällt mir sehr gut was bisher zu sehen ist!

Danke

Zitat

Ein kleiner Fehler ist mir aufgefallen: Wenn man drei Nachkommastellen eingibt, dann stimmt etwas mit der Summe nicht. Bei vier Nachkommastellen passt es wieder.

Beispiel:

0,10 kg = 100 g Summe

0,100 kg = 100000 g Summe

0,1000 kg = 100 g Summe

Wow, auf sowas käm' ich ja im Leben nicht, das zu testen.

Problem ist folgendes: Nachkommastellen müssen mit . und nicht , abgetrennt werden. Würdest Du das Feld verlassen, würde es rot als fehlerhaft markiert werden. Während des Tippens findet aber noch keine Kontrolle statt und so wird aber trotzdem der eingetragene Wert für die Berechnung genutzt. In dem Fall dann als String statt als Zahl und blablabla JavaScript ist halt übel was das angeht.

Langer Rede kurzer Sinn, ich fürchte, da gibt es keine schnelle Abhilfe es sei denn ich finde raus wie man in HTML sagt, dass Nachkommastellen bei Zahlen im Deutschen mit Komma eingegeben werden.

[Edit] Gefunden ... https://www.ctrl.blog/entry/html5-input-number-localization
Zufriedenstellend ist das aber noch nicht, weil Firefox zB jetzt nur noch Komma erlaubt (entgegen der Darstellung in dem Artikel). Man müsste jetzt manuell rausfinden, was der User will und das Feld entsprechend konfigurieren. Gar nicht lästig. Warum macht das der Browser nicht einfach von sich aus richtig? ...

Bearbeitet 1. November 2018 von zeank

[Diran]

vor 6 Minuten schrieb zeank:

Wow, auf sowas käm' ich ja im Leben nicht, das zu testen.

Problem ist folgendes: Nachkommastellen müssen mit . und nicht , abgetrennt werden. Würdest Du das Feld verlassen, würde es rot als fehlerhaft markiert werden. Während des Tippens findet aber noch keine Kontrolle statt und so wird aber trotzdem der eingetragene Wert für die Berechnung genutzt. In dem Fall dann als String statt als Zahl und blablabla JavaScript ist halt übel was das angeht.

Langer Rede kurzer Sinn, ich fürchte, da gibt es keine schnelle Abhilfe es sei denn ich finde raus wie man in HTML sagt, dass Nachkommastellen bei Zahlen im Deutschen mit Komma eingegeben werden.

Mit dem . als Trennzeichen wird es auch Rot markiert derzeit. Auch da geht manchmal was schief, gebe mal 1.11111 kg an, wenn als Summe Gramm ausgewählt ist. Mit 5 und 6 Nachkommastellen stimmt was nicht, danach ist es wieder normal.

Aber das ist natürlich nur eine theoretische Betrachtung, solche Eingaben machen natürlich keinen Sinn!

[zeank]

vor 1 Minute schrieb fejubl:

Mit dem . als Trennzeichen wird es auch Rot markiert derzeit.

Ja, wird geändert, lade gleich ne neue Version hoch.

[zeank]

vor 3 Minuten schrieb fejubl:

Mit dem . als Trennzeichen wird es auch Rot markiert derzeit. Auch da geht manchmal was schief, gebe mal 1.11111 kg an, wenn als Summe Gramm ausgewählt ist. Mit 5 und 6 Nachkommastellen stimmt was nicht, danach ist es wieder normal.

Und ja, lol, ... ich sehe was du meinst. Nicht so wichtig, aber gut zu wissen, dass das passiert.

[Dean]

Könnte das farbliche Unterscheiden pro Zeile auch bei den Kategorien passieren?

Bearbeitet 1. November 2018 von Dean
Ich nichts Deutsch heute

[zeank]

Wie meinst du das genau? Überschrift in anderer, abwechselnder Farbe? Hintergrundfarbe? Wenn ja wo?

[Dean]

Am 1.11.2018 um 17:27 schrieb zeank:

Wie meinst du das genau? Überschrift in anderer, abwechselnder Farbe? Hintergrundfarbe? Wenn ja wo?

Also im Prinzip bei der Kategorien Übersicht (oben) ist alles mit weissen Hintergrund. Ich finde es angenehmer wenn es pro Zeile unterschiedlich hinterlegt ist (wie bei den items) 

 

Da ich gerade im Zug sitze hier mal mein Feedback beim aufrufen der Seite am Handy. 

- Die Auswahl der Listen ist nicht möglich, es fehlt das ganze Menü dafür. Am Handy könnte man also nur eine einzige Liste erstellen. (im portrait mode, im landscape hat man links das Menü) 

- Die Kategorien Gewicht/Qty hat mehr Platz als Name und Description auf dem Handy, dafür dass das nur Zahlen sind, sieht das schräg aus. 

Bearbeitet 2. November 2018 von Dean

[zeank]

vor 2 Minuten schrieb Dean:

Also im Prinzip bei der Kategorien Übersicht (oben) ist alles mit weissen Hintergrund. Ich finde es angenehmer wenn es pro Zeile unterschiedlich hinterlegt ist (wie bei den items) 

Ach, jetzt verstehe ich. Wird gemacht. 

vor 2 Minuten schrieb Dean:

 

Da ich gerade im Zug sitze hier mal mein Feedback beim aufrufen der Seite am Handy. 

- Die Auswahl der Listen ist nicht möglich, es fehlt das ganze Menü dafür. Am Handy könnte man also nur eine einzige Liste erstellen. (im hochkant Format) 

Ja, bekannt. Kommt als nächstes. Nachdem ich endlich eine vernünftige deploy chain am laufen hab. Will halt auf continuous deployment raus. Aber grad klappt gar nix. 

vor 2 Minuten schrieb Dean:

- Die Kategorien Gewicht/Qty hat mehr Platz als Name und Description auf dem Handy, dafür dass das nur Zahlen sind, sieht das schräg aus.

Hm. Dadran hab ich rumgefummelt. Kann gut sein, dass ich es verkackt hab. Da hilft mir @bri auch grad. 

vor 2 Minuten schrieb Dean:

 

 

 

[SouthWest]

Das ist ja geil hier! Extreme programming live stream

Bearbeitet 2. November 2018 von SouthWest
Link

[zeank]

Tz

[zeank]

Ja. Wär natürlich nicht schlecht das auszulagern. Aber wie wo? Nicht jeder hat einen github Account. 

Bearbeitet 2. November 2018 von zeank

[zeank]

Warum bin ich immer so defensiv? Oder wie war das gemeint @SouthWest?

Bearbeitet 3. November 2018 von zeank

[SouthWest]

Missverständnis. Habe ich ein Problem gemeldet? Nein! Im Gegenteil meinte ich ernst was ich schrub.  Finde es echt geil. Ein neues UL Tool wird bei der Geburt gefilmt.

Bearbeitet 2. November 2018 von SouthWest

[zeank]

Oh, in den falschen Hals bekommen.   

[zeank]

So, Spaltenbreiten sind angespasst und Hintergrundfarbe alterniert jetzt oben. CI geht immer noch nicht :p  

[sja]

@zeank, tolle Arbeit! Cool.

Ich komme aus der Accessibility-Ecke (bin Prüferin und berate...). Wage es mal (nicht jeder ist dem Thema offen gestimmt...) und gebe den Hinweis zu dem ein oder anderen Punkt, ohne in die Tiefe zu gehen... .  Nichts muss...

Kontraste: Grüne Schaltflächen: IST 2,5:1 SOLL laut WCAG-Guidelines 4,5:1 (gemessen mit dem Color Contrast Analyser), gute Kontraste auch bei mobiler Nutzung hilfreich.

Textalternativen: Ohne jetzt in die Tiefen der Screenreadernutzung einzugehen..., wenn die SVG-Icons eine Textalternative bekämen ("+" und "x"-Icons, dann wäre dieses sehr wichtige Element auch mit assistiven Technologien nutzbar. D.h. Textalternative über title-Element (Kind von svg siehe https://www.sitepoint.com/tips-accessible-svg/)
"-"  für Löschen (Liste löschen) ist keine Grafik, der Text wird aber nicht ausgegeben, hier würde ein aria-label="delete" oder "löschen" je nach Sprachversion im ensprechenden a-Element helfen. Das aria-label ersetzt dann für SR-Nutzer den Textlink.

Sturktur: tfoot ist eignetlich für Zusammenfassungen von Tabelleninhalten da? D.h. die Links evtl. außerhalb der Tabelle positionieren? Bzw. hier finde ich ungünstig, dass die Summe von "Weight" ja quasi in derselben Zeile steht wie "Add new Item" (würde auch dafür sprechen "Add new Item und "Delete Category" außerhalb der Tabelle zu positionieren? D.h. tfoot wie bei "Category" mit th "Total" o.ä. umsetzen (konsistenter?).
In diesem Zusammenhang noch ein Usability-Aspekt: Wenn bei "Weight" im Select "g" ausgewählt ist, sollt die Summe dann nicht auch "g" sein?
Spaltenüberschrit für das Select "regular" einbauen?

Tastaturbedienung/Fokusmanagement: Bzgl. "Add new Item" super. Wenn man hier aktiviert ist anschließend der Fokus im entsprechenden Formularfeld. Könnte man das auch für "Add new Category" umsetzen? (hier muss man wieder komplett durch die Seite tabben).

Tastaturbedienung/Tastaturfokus: Für sehende Tastaturnutzer (eingeschränkte Handmotorik oder Neards) wäre ein immer gut sichtbarer Tastaturfokus prima. Hier auf den Formularfeldern gut (mit FF getestet), ansonsten nur Browsersystemkranz vorhanden - nicht superdeutlich, aber nutzbar, bzgl den grünen Links zusätzlich Tastaturfokus stylen wie bei Mausnutzung?

Hoffe, ich hab mich nicht zu weit aus dem Fenster gehängt, schau was du damit machen willst. Wie gesagt, wenn nicht, auch kein Problem

Danke, für deine Arbeit...

 

Bearbeitet 3. November 2018 von sja

[Craftsman]

Ich muss gerade auch mal meinen Respekt ausdrücken. Ich finde dieses Projekt klasse und bin schonmal gespannt was noch so eingebaut wird ... vielen Dank @zeank, dass du dir die Arbeit machst und uns alle daran teilhaben lässt. 

[Fabian.]

Sehr cooles Projekt! Leider funktioniert es bei mir über Safari nicht. Liegt das ggf. am Browser?

[momper]

vor 2 Stunden schrieb Fabian.:

Sehr cooles Projekt! Leider funktioniert es bei mir über Safari nicht. Liegt das ggf. am Browser?

Alternativen Browser zum Vergleich installieren? Sonst sind bei OSX Versionen wichtig -> beim Safari noch für alte Versionen zu entwickeln, ist Luxus ... 

Bearbeitet 4. November 2018 von momper
Quatsch korrigiert - Safari ist durch die mobilen Geräte kein Nischenbrowser

[Craftsman]

vor 3 Stunden schrieb Fabian.:

Sehr cooles Projekt! Leider funktioniert es bei mir über Safari nicht. Liegt das ggf. am Browser?

Bei mir läufts über Safari wunderbar. Evtl. liegt es an den Browser Einstellungen? Ansonsten halt Firefox, Chrome, ... probieren. 

[zeank]

Ich weiss gar nicht, was ich sagen soll, ich bin einfach überwältigt von soviel Zuspruch, Interesse und positivem, konstruktivem Feedback. Damit hatte ich so nicht gerechnet. Auf jeden Fall ein sehr guter Anreiz weiterzumachen.

Besonderen Dank an @sja, werd mir das gleich mal genauer anschauen. Uu muss ich mit Nachfragen auf Dich zukommen, weil ich ehrlich gesagt, nicht alles gleich verstehe, was Du da sagst.  

Und ja, Accessability ist ein Muss, auch wenn ich da sicher nicht ausreichend Wissen habe. Aber das trifft - wie man sieht - auf fast alles zu.  

@Fabian. Safari muss gehen. Weisst Du wie man an die JavaScript-Konsole kommt? Dort findet sich uU eine hilfreiche Fehlermeldung.

PS: Hab jetzt eine voll automatisierte Deploy-Chain CI/CD ftw.  #fachchinesisch

Bearbeitet 5. November 2018 von zeank

[zeank]

Am 3.11.2018 um 22:40 schrieb sja:

Kontraste: Grüne Schaltflächen: IST 2,5:1 SOLL laut WCAG-Guidelines 4,5:1 (gemessen mit dem Color Contrast Analyser), gute Kontraste auch bei mobiler Nutzung hilfreich.

Farbe geändert (deutlich dunkler). Dein Tool gibt sein OK jetzt.  

Am 3.11.2018 um 22:40 schrieb sja:

Textalternativen: Ohne jetzt in die Tiefen der Screenreadernutzung einzugehen..., wenn die SVG-Icons eine Textalternative bekämen ("+" und "x"-Icons, dann wäre dieses sehr wichtige Element auch mit assistiven Technologien nutzbar. D.h. Textalternative über title-Element (Kind von svg siehe https://www.sitepoint.com/tips-accessible-svg/)
"-"  für Löschen (Liste löschen) ist keine Grafik, der Text wird aber nicht ausgegeben, hier würde ein aria-label="delete" oder "löschen" je nach Sprachversion im ensprechenden a-Element helfen. Das aria-label ersetzt dann für SR-Nutzer den Textlink.

Das mit dem nested title tag geht leider nicht so einfach, weil das benutzte framework das seltsamerweise nicht unterstützt. Ich hab deshalb jetzt erstmal den title im übergeordneten a-Tag gesetzt. Geht das?

(-) wurde durch Graphik ersetzt.

Am 3.11.2018 um 22:40 schrieb sja:

Sturktur: tfoot ist eignetlich für Zusammenfassungen von Tabelleninhalten da? D.h. die Links evtl. außerhalb der Tabelle positionieren? Bzw. hier finde ich ungünstig, dass die Summe von "Weight" ja quasi in derselben Zeile steht wie "Add new Item" (würde auch dafür sprechen "Add new Item und "Delete Category" außerhalb der Tabelle zu positionieren? D.h. tfoot wie bei "Category" mit th "Total" o.ä. umsetzen (konsistenter?).

Erledigt, super Hinweis!

Am 3.11.2018 um 22:40 schrieb sja:

In diesem Zusammenhang noch ein Usability-Aspekt: Wenn bei "Weight" im Select "g" ausgewählt ist, sollt die Summe dann nicht auch "g" sein?

Hm, nicht unbedingt, lighterpack macht das auch so und persönlich finde(!) ich das recht eingängig, denn ein Total in g ist eher schwer zu lesen. Kann man doch aber oben bei den Total-Totals ändern. 

Am 3.11.2018 um 22:40 schrieb sja:

Spaltenüberschrit für das Select "regular" einbauen?

Ist mir kein richtig gutes Wort eingefallen, hab es jetzt mal "Type" genannt. Macht das Sinn?

Am 3.11.2018 um 22:40 schrieb sja:

Tastaturbedienung/Fokusmanagement: Bzgl. "Add new Item" super. Wenn man hier aktiviert ist anschließend der Fokus im entsprechenden Formularfeld. Könnte man das auch für "Add new Category" umsetzen? (hier muss man wieder komplett durch die Seite tabben).

Erledigt.

Am 3.11.2018 um 22:40 schrieb sja:

Tastaturbedienung/Tastaturfokus: Für sehende Tastaturnutzer (eingeschränkte Handmotorik oder Neards) wäre ein immer gut sichtbarer Tastaturfokus prima. Hier auf den Formularfeldern gut (mit FF getestet), ansonsten nur Browsersystemkranz vorhanden - nicht superdeutlich, aber nutzbar, bzgl den grünen Links zusätzlich Tastaturfokus stylen wie bei Mausnutzung?

Nicht 100% ich dich da richtig verstehe, hab es jetzt so gemacht, dass selektierte Elemente auch ein Unterstrich bekommen und blau werden.

Am 3.11.2018 um 22:40 schrieb sja:

Hoffe, ich hab mich nicht zu weit aus dem Fenster gehängt, schau was du damit machen willst. Wie gesagt, wenn nicht, auch kein Problem

Ich bin dir sehr sehr dankbar!