Nur die ersten 20 (?) Parteien in Tabellen anzeigen und darunter ein Button "Weitere anzeigen"

[fenglisch]

Mit sehr vielen Parteien (Initiativen etc.) kann die Auswertung sehr lang und unübersichtlich werden (beim Mitwirk-O-Mat kann die Tabelle schnell mal aus > 100 Einträgen bestehen, was besonders am Smartphone unangenehm wird).

Mein Vorschlag: In "resultsShortTable" und "resultsByPartyTable" jeweils nur die obersten x Einträge anzeigen (z. B. 20, kann in definition.js angepasst werden). Darunter ein Button "Weitere anzeigen", wodurch weitere x Einträge angezeigt werden können. In "resultsByThesisTable" direkt alle Thesen anzeigen, aber wenn die Antworten zu einer These ausgeklappt werden, erneut nur die Antworten der obersten x Parteien anzeigen und darunter den Button "Weitere anzeigen".

[msteudtn]

Diese Funktion gab es bereits in einer früheren Version. ;-) Sie ist dann mangels Bedarf wieder entfernt wurden.

Für den Einsatz als "Wahl-o-Mat" ergab das auch Sinn. (vgl. Urteil des Verwaltungsgericht Köln zur Europawahl 2019, dass alle Parteien ausgewählt / angezeigt werden müssen.) ABER für den Einsatz als Umfrage-Werkzeug ist die Funktion berechtigt und wird wieder eingebaut.

[msteudtn]

• neue Erweiterung EXTRAS/addon_limit_results.js
• wird in der DEFINITION.JS aktiviert
• Es erscheint ein Button unter den Ergebnissen
• Die übrigen Ergebnisse werden am Anfang geladen aber gleich ausgeblendet
• Die ausgeblendeten Ergebnisse werden auf Knopfdruck wieder eingeblendet

zu erledigen:

• [ ] sanftes Einblenden / Ausblenden
• [ ] Button für "weniger Ergebnisse anzeigen" aktivieren (Funktion fehlt noch)

[fenglisch]

Fantastisch, danke! Dass der Button automatisch die weiteren Ergebnisse in allen drei Tabellen ausklappt, ist optimal. Denkbar wären auch drei Buttons jeweils am Ende der Tabelle, die jeweils ebenfalls das Ausklappen der weiteren Ergebnisse in den beiden anderen Tabellen auslösen, aber das wäre vermutlich komplizierter umzusetzen.

Einen Bug habe ich jedoch gefunden: Das Addon kollidiert mit der automatischen Anpassung der iframge height. Wenn ich in der defintion.js stehen habe: var addons = ["extras/addon_check_iframe_resize_same_domain.js"], dann funktioniert das. Wenn da jedoch steht var addons = ["extras/addon_check_iframe_resize_same_domain.js", "extras/addon_limit_results.js"], dann funktioniert nur das Zweite. Wenn ich die Instanz, in der beide Addons aktiviert sein sollen, direkt öffne (nicht im iframe), kommt auch nicht wie sonst die Fehlermeldung in der Konsole Uncaught TypeError: this.frameElement is null

Anschauen kannst du dir das Ergebnis hier: https://www.lebendiges-lueneburg.de/spielwiese/ Oben sind in der definition.js beide Addons aktiviert, unten nur iframe-resize; sonst sind die beiden identisch.

Liegt der Fehler bei mir? 🤔

[fenglisch]

Wegen der Platzierung des Buttons habe ich mir überlegt, dass position: fixed in der unteren rechten Ecke gut passen könnte. Sobald das Addon mit dem iframe kompatibel ist, würde ich dafür einfach eine CSS-Regel schreiben :-)

[msteudtn]

siehe Ticket #32. :)

[fenglisch]

Zur Positionierung des Buttons: Die aktuelle Position erscheint mir nicht optimal, der Button nach unten verschwindet, wenn ich eine der Tabellen ausklappe. Wenn ich dann doch nochmal nach oben ins Ranking schaue oder mir die Antworten aller Parteien auf eine These anzeigen lasse, dann weiß ich nicht, dass ich erstmal nach ganz unten muss, um weitere Ergebnisse sehen zu können (und auch wenn ich es wüsste, wäre es ziemlich umständlich).

Ich hab mir deshalb gedacht, dass position: sticky gut funktionieren würde. Hier kannst du dir das anschauen: https://lebendiges-lueneburg.de/lg-limit/ Sowohl auf dem Desktop als auch mobil funktioniert es gut.

Das Problem entsteht jedoch bei der Einbettung als iframe: https://lebendiges-lueneburg.de/spielwiese Da ist der Button quasi-statisch, da der iframe ja genauso hoch ist wie der Inhalt und damit keinen oberen Rand hat, an dem der Button haften könnte. Nur wenn ich in meinem Inspektor die Höhe auf z. B. 1000px setze, funktioniert der Sticky-Effekt, wenn ich im iframe nach unten scrolle und in der Parent-Seite ganz oben bin

Ich hab leider keine gute Idee, wie sich das lösen ließe. Ich könnte mir auch drei Buttons vorstellen. Im Ranking und in der resultsByPartyTable wären die logischerweise ganz unten. In der resultsByThesisTable ist das aber schon wieder komplizierter, da ich da ja im Grunde am Ende jeder These einen Button bräuchte.

Da stecke ich gerade und komme nicht weiter. Hast du eine Idee?

[msteudtn]

ich hatte kürzlich ein Gespräch mit einem UX-Experten. Sein Vorschlag war den Hinweis "Weitere Ergebnisse laden" nicht als Button darunter darzustellen, sondern als Text in der letzten (neuen) Tabellenspalte. Dann müsste das natürlich auch in den anderen beiden Tabellen / Listen erscheinen. z.B.

Hauptansicht	...
Partei 1	...
Partei 2	...
Partei 3	...
weniger anzeigen	mehr anzeigen

sortiert nach Fragen	...
ja / nein	Frage 1
ja / nein	Frage 2
ja / nein	Frage 3
ja / nein	- Partei 1
ja / nein	- Partei 2
ja / nein	- Partei 3
ja / nein	Frage 4
weniger anzeigen	mehr anzeigen

[fenglisch]

Das ergibt aus meiner Sicht voll Sinn. Das untere Ende einer Tabelle (bzw. die letzte Spalte) ist ja auch der Ort, wo man danach suchen würde.

Für die Umsetzung stelle ich mir noch die Frage: Wenn ich in der resultsShortTable zweimal auf Mehr anzeigen klicke, sodass die obersten 30 Ergebnisse angezeigt werden, werden in den unteren Tabellen, wenn ich sie ausklappe, auch direkt die obersten 30 angezeigt oder wieder nur die ersten 10, sodass ich nochmal bei Bedarf nochmal auf Mehr anzeigen muss? Kürzer formuliert: Ist die Wirkung global oder nur auf die Tabelle bezogen? Was ist intuitiver?

Ich glaube, ich tendiere zu der nicht-globalen Variante. Wenn ich in der oberen Tabelle aus Neugierde so oft auf Mehr anzeigen klicke, bis alle 100+ Ergebnisse angezeigt werden, dann wären die unteren Tabellen damit wieder überlastet, v. a. die resultsByThesisTable

[msteudtn]

Ich habe im Moment die "globale" Lösung eingebaut. (Also 1x Klicken = 3 Tabellen/Listen erweitern) Das erschien mir wiederum logischer.

Ich hoffe, dass sich das bei den Nutzern mit dem (zukünftigen) weniger anzeigen-Feld dann von selbst löst.

[msteudtn]

So, ist jetzt im Merge #46 drin.

Änderungen

• neu: Möglichkeit, weniger Ergebnisse anzuzeigen
• neu / verändert: Die Buttons erscheinen nun direkt unter der jeweiligen Ergebnistabelle / -liste. Vorher gab es nur einen Button am Ende.
• Außerdem habe ich hier langsam angefangen jQuery zu entfernen. Es gibt jetzt eine eigene FadeIn / FadeOut-Funktion in GENERAL.JS, welche auf neue Werte in der DEFAULT.CSS zurück greift.

Bekannte Bugs

• Das Skript berechnet die Werte anhand des vorherigen Wertes. Bei "krummen" Zahlen kann es rückwärts also irgendwann zu Verschiebungen kommen.
  • z.B. 12 Ergebnisse, Start: 5 + 5 = 10 + 5 = 12 (max.)
  • 12 (max.) - 5 = 7 - 5 = 02 - 5 = 01 (min.)
  • 01 (min.) + 5 = 6 + 5 = 11 + 5 = 12 (max.)
• Wenn man in der rechten Ergebnistabelle (sortiert nach Parteien / Standpunkte) ein Ergebnis auswählt (öffnet) und dann "Weniger anzeigen" klickt, bleiben die Antworten weiterhin offen. (z.B. Antworten von Partei 20 anschauen und dann "weniger anzeigen" um nur noch 10 Parteien in der Liste zu haben.) Der Bug hat mehrere Gründe:
  • Die Antworten werden in einer eigenen Zeile #resultsByPartyAnswersToQuestion UNTER der Zeile #resultsByPartyHeading angezeigt. Es wird aber nur #resultsByPartyHeading ausgeblendet. #resultsByPartyHeading beinhaltet außerdem den +/- Button zum Öffnen und Schließen von #resultsByPartyAnswersToQuestion. Hier liegt bereits eine Ausblenden-Funktion dahinter.
  • #resultsByPartyAnswersToQuestion werden (noch) über jQuery fadeIn() / fadeOut() ausgeblendet, während alle anderen Elemente langsam auf natives JavaScript umgestellt wurden. (neue Funktionen GENERAL.JS / fnFadeIn() fnFadeOut()) Im weiteren jQuery-Rückbau wird das sicherlich korrigiert.

[fenglisch]

Das ist schon deutlich besser!

In der #resultsShortTable ist es meiner Meinung nach schon einwandfrei. Mir erscheint es lediglich intuitiver, wenn der "Mehr anzeigen"-Button zuerst, also links, und der "Weniger anzeigen"-Button dahinter, also rechts, erscheint.

In der #resultsByThesisTable wiederum sollten die Buttons meiner Meinung nach am Ende jeder #resultsByThesisAnswersToQuestionX angezeigt werden. Bei vielen Thesen sehe ich die Buttons unter der Tabelle nicht auf Anhieb und selbst wenn ich weiß, dass sie da sind, müsste ich für jedes "Mehr anzeigen" (oder "Weniger anzeigen") erst ganz nach unten scrollen und dann wieder hoch. Vor allem am Handy ist das nicht praktisch.

Durch ein Button-Paar am Ende jeder #resultsByThesisAnswersToQuestionX könnten die Buttons ganz unter der Tabelle auch verschwinden. Aktuell können die etwas verwirrend sein: Wenn alle Thesen eingeklappt sind, ändert sich sichtbar nichts, wenn ich die Buttons nutze (die #resultsShortTable wird zwar länger oder kürzer, aber das sehe ich nur an einer Änderung des Scrollbars). Wäre es möglich, die Platzierung der Buttons entsprechend zu ändern?

Was mir noch auffiel: In der Standalone-Variante ist für mich als Nutzer angenehm, dass sich die Position nicht ändert, wenn ich mehr oder weniger Ergebnisse anzeigen lasse. Im iframe hingegen springe ich teilweise wieder in die #resultsByThesisTable, wenn ich mir in einer der unteren Tabellen mehr Ergebnisse anzeigen lasse. Ich fürchte aber, dass sich da nicht viel machen lässt (außer das Intervall auf eine kleine Zahl stellen, z. B. je 5 Ergebnisse mehr oder weniger, damit die Sprünge nicht so groß sind).

[fenglisch]

Und der Bug in der #resultsByPartyTable, den du schon beschrieben hast, ist in der Tat blöd. Dafür vielleicht einfach ein neues Ticket erstellen und dieses hier schließen?

[msteudtn]

[...] Mir erscheint es lediglich intuitiver, wenn der "Mehr anzeigen"-Button zuerst, also links, und der "Weniger anzeigen"-Button dahinter, also rechts, erscheint.

Mein Gedanke war, dass rechts "Mehr" = "Weiter" ist und dann links "Weniger" = "Zurück", so wie bei den Suchergebnissen beim Online-Shopping oder bei der Suchmaschine.

In der #resultsByThesisTable wiederum sollten die Buttons meiner Meinung nach am Ende jeder #resultsByThesisAnswersToQuestionX angezeigt werden.

Das ist ein guter Einwand. Das schaue ich mir mal an.

In der Standalone-Variante ist für mich als Nutzer angenehm, dass sich die Position nicht ändert, wenn ich mehr oder weniger Ergebnisse anzeigen lasse. Im iframe hingegen springe ich teilweise wieder in die #resultsByThesisTable, wenn ich mir in einer der unteren Tabellen mehr Ergebnisse anzeigen lasse. [...]

Das konnte ich nicht nachvollziehen. Eventuell hast du auf der "Spielwiese" bereits etwas geändert als ich es probiert habe.

Und der Bug in der #resultsByPartyTable, den du schon beschrieben hast, ist in der Tat blöd. Dafür vielleicht einfach ein neues Ticket erstellen und dieses hier schließen?

Dafür wird es vermutlich ein (sehr großes) Sammelticket "jQuery-Rückbau" geben oder so etwas.

[msteudtn]

So, im Merge #50 werden die Buttons in der linken Tabelle #resultsByThesisTable nun unter jeder Frage angezeigt (#resultsByThesisAnswersToQuestionX).

Die Sortierung ist unverändert rechts / "Weiter" und links / "Weniger".

Es wurde im Grunde nur die EXTRAS/ADDON_LIMIT_RESULTS.JS angepasst.

[fenglisch]

Top, klappt ausgezeichnet!