Zum Inhalt springen
Ultraleicht Trekking

Alternative zu lighterpack


zeank

Empfohlene Beiträge

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 von zeank
Link zu diesem Kommentar
Auf anderen Seiten teilen

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!

Link zu diesem Kommentar
Auf anderen Seiten teilen

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.

Link zu diesem Kommentar
Auf anderen Seiten teilen

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. 

Screenshot_Chrome_20181102-193432.png

Screenshot_Chrome_20181102-193424.png

Bearbeitet von Dean
Link zu diesem Kommentar
Auf anderen Seiten teilen

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:

 

 

Screenshot_Chrome_20181102-193432.png

Screenshot_Chrome_20181102-193424.png

 

Link zu diesem Kommentar
Auf anderen Seiten teilen

@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 von sja
Link zu diesem Kommentar
Auf anderen Seiten teilen

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 von momper
Quatsch korrigiert - Safari ist durch die mobilen Geräte kein Nischenbrowser
Link zu diesem Kommentar
Auf anderen Seiten teilen

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. :P 

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 von zeank
Link zu diesem Kommentar
Auf anderen Seiten teilen

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. :D 

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!

 

Link zu diesem Kommentar
Auf anderen Seiten teilen

Deine Meinung

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Benutzerkonto hast, melde Dich bitte an, um mit Deinem Konto zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung jetzt entfernen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.


Forumssponsoren









×
×
  • Neu erstellen...