Nina Grässli Grid Tool - Prototypen
Version 1:
Add Columns and Rows - in Pixels
Version 2:
Add Columns and Rows - in Fr
Version 3:
Add and change Gap - in Px
Version 4:
Delete Columns and Rows
Version 5:
Show Grid lines
Version 6:
Show Grid lines - new approach (im ersten durchlauf noch nicht ganz ok)
Version 7:
Add Columns and Rows with Input field
Version 8:
Troubleshooting
Version 9:
Popup Window and Design
Version 10:
Get the Code!
Version 11:
Add an Remove Buttons style and positioning
Version 12:
Buttons and Input field on every column and Row (Beim Spalten wegnehmen über die Settings noch etwas holprig)
Version 13:
Change Size of Columns and Rows with input field
Version 14:
Troubleshooting
Problem 1:
SOLVED Der Abstand zwischen den Zeilen wird nicht auf die Buttons übernommen
Problem 2:
SOLVED Das Löschen der Buttons über die Einstellungen ist holprig
Problem 3:
SOLVED Neue Felder werden hinten angefügt, sollten aber nach gecklicktem Element eingefügt werden
(funktioniert bei den Buttons, aber nicht im Raster selber)
Problem 4:
SOLVED Werden Grössen angepasst und danach weitere Elemente hinzugefügt, sind die Buttons nicht mehr schön bündig mit dem Raster
Problem 5:
SOLVED Statt "-" steht eine 1 in den Buttons, mit denen Zeilen gelöscht werden können
Problem 6, aufgetreten nach der Lösung der restlichen Probleme:
SOLVED Die direkte Eingabe einer Zahl ins
Number of Columns / of Rows
Feld funktioniert nicht mehr
Version 15:
Disable the possibility of removing all the Columns or Rows
- funktioniert, jedoch nicht ganz perfekt
Version 16:
Adding Information
Version 17:
Troubleshooting
Problem 1:
Es passiert immer noch manchmal, dass trotzdem alles auf dem Feld gelöscht wird
Problem 2:
Manchmal hat es mehr Felder (grid lines) als Grid Elemente
Problem 3:
Manchmal gibt es zu viele Buttons
Problem 4:
Die Zahlen verschwinden manchmal in den Input Feldern in den Settings
LÖSUNG 1-4:
SOLVED Wieder zurück zu Version 14, neue Lösung für P15 suchen. Deshalb Problem 5:
Problem 5:
HOLD Es sollten nicht alle Felder gelöscht werden können, min 1 sollte stehenbleiben
Problem 6:
SOLVED Manchmal, nachdem ein grösseres Feld gelöscht wird, entsteht ein grosses Feld mit der inkorrekten Überschrift.
Ich habe mich entschieden, die Areas dem responsive code vorzuziehen, da es meiner Meinung eine wichtiger Funktionalität ist. Dafür kann ich beim get the code auf ein Tutorial verweisen, wie man den Code responsive machen kann.
Version 18:
Add Areas. Erste Anpassung: Sichtbarer Grid nicht mit ID's erkennbar, sondern mit grid-area: X / X / span 1 / span 1
Version 19:
Add Areas. Zweite Anpassung: Areas erstellen können, ohne richtige Ausgabe
Version 20:
Add Areas. Dritte Anpassung: Code ausgeben
Version 21:
Kleine Änderungen, Links etc. Fehlersuche für nächste Version
Version 22:
Troubleshooting
Problem 1:
Da die Namen der Areas als ID gespeichert werden, können keine Namen die mit Nummern beginnen verwendet werden.
Lösung:
Falls die erste Zahl eine Nummer ist, vorne "area_" hinzufügen. SOLVED.
Problem 2:
Man kann den HTML Code nur über die Buttons kopieren, nicht jedoch manuell, da die function alle 1.5 sekunden aktualisiert.
Lösung:
Ausgabe stattdessen immer wenn etwas gecklickt wird. SOLVED.
Problem 3:
Wenn man das "get the code" Popup Fenster öffnet, braucht der HTML Code eine Weile, bi er schön dargestellt wird.
Lösung:
Anstelle innerText und \n innerHTMl verwenden und die HTML in Entities umwandeln. SOLVED.
Problem 4:
Wenn man Number Rows in den Settings anpasst und kleiner macht, verschwinden die "1fr" nicht aus dem Code
Lösung:
Lag an einem Schreibfehler. SOLVED.
Problem 5:
Irgendwo habe ich noch jQuery verwendet. Das sollte ich noch ausmerzen. SOLVED
Problem 6:
Wenn man Sonderzeichen in den Namen der Area eingibt, kann sie nicht richtig gespeichert werden.
Lösung:
Sonderzeichen nun gesperrt. SOLVED.
Version 23:
Usability Anpassungen
Wenn man über ein Feld hovert, gibt es einen sichtbaren Effekt, sodass besser erkennbar ist, dass das Feld klickbar ist
In den Settings befindet sich ein Link zu einem kurzen Tutorial über das Tool
Wenn man eine Area mit einem Namen speichern will, der bereits vorhanden ist, gibt es nun eine Meldung
Wenn man eine Area ohne Namen speichern will, gibt es eine Meldung
Eventuell später noch einzubauende Funktionalitäten (neben den anderen Prioritäten):
Die Areas sollten auch kleiner gemacht werden können, nicht nur grösser.
Verhindern, dass alle Felder gelöscht werden können
Browser Support: Das Tool für Safari aufbereiten