Details zu Stiländerungen bei Themen - Feedback

Dies ist ein Feedback-Thema für das Experiment mit Styling-Änderungen für Details.

Ein Beispiel für das details-Tag mit BBCode:

Ein Beispiel für das details-Tag mit HTML:

Die Verwendung des HTML-Tags <details> scheint den Inhalt in die Zusammenfassung zu verschieben:

Oh, ich verstehe. Es wird keine automatische neue Zeile eingefügt und ich habe keine manuell hinzugefügt:

<details open>
<summary>
Dies ist ein offenes Details-Element
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>

Ja, das ist richtig. Es scheint, dass Sie beim Hinzufügen dieses Elements selbst keine p-Tags hinzugefügt haben, während das Einfügen-Tool für Details dies tun wird.

Ihre Version:

<details dir="ltr" open="">
<summary>
This is a HTML details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>

Einfüge-Tool:

<details dir="ltr" open="">
<summary>Summary</summary>
<p>This text will be hidden</p>
</details>

Das p-Tag, das vom Einfüge-Tool hinzugefügt wird, hält den Text in einer neuen Zeile.

Ah. Sie müssen die \u003cp\u003e-Tags nicht im vorhandenen Stil hinzufügen. Ich nehme an, dieser neue ist „ickier“.

Einige erste Rückmeldungen:

1. Ich habe das neue [details]-Element überblättert, als ich es zum ersten Mal sah. Es wurde einfach nicht als [details] registriert. Es mag sein, dass es “nur neu” ist, aber…
2. Es ist von vorherigem Design und der Standardbrowserimplementierung getrennt – der Pfeil befindet sich nach der Zusammenfassung statt davor, und der geschlossene Zustand zeigt in die Richtung, die zuvor (und standardmäßig) den geöffneten Zustand bedeutete.
   geschlossen:
   offen:
3. Das Button/Zusammenfassung-Element nimmt viel mehr Platz ein (zuvor war es ein semi-inline-Element)
   
   

   39fbd320470a56d690557dcf1ebc9798ac02382f272×238 2.09 KB
   vs
   

   a3fb90130fd87d41108a24ed0729f5451ce3e900286×402 2.51 KB
4. Wie oben zu sehen ist, war das Dreieck/Pfeil zuvor mit dem Text ausgerichtet und jetzt ist der Text “Summary” nicht mehr ausgerichtet, wegen des Button-Paddings (nichts ist mit irgendetwas ausgerichtet )
   
   

   ab4fb0a6f7cd98f304c30c176018e86b586b2ad2242×376 2.88 KB
5. Auf Mobilgeräten bleibt der Hintergrund des Buttons nach der Interaktion hervorgehoben
   
   

   958cd25a96de8fe709805f50e339070059efb5d8_2_344x140344×140 4.52 KB
6. Ich hätte für die Rahmen- statt der Hintergrundoption gestimmt – ich hätte es bevorzugt, wenn das Verbergen von Inhalten einfach das tut, ohne den Kontrast zu beeinträchtigen (hauptsächlich relevant bei eingebetteten Bildern und Emojis)
   
   

   5c7bc1c39495778f2cdcdf6349b748c4a888c201_2_690x180690×180 22.9 KB

Update:

7. Ein verkleinerter klickbarer Bereich:
   
   

   image1478×156 9.55 KB
   
   vs
   
   

   image1528×202 8.33 KB

Das war irgendwie der Sinn der Sache, dass es besser wird, bedeutet, dass man sich von der bisherigen Art und Weise entfernt, insbesondere vom Standard des Browsers. Wir folgen jetzt dem Muster der Schaltfläche “Antworten” am Ende von Beiträgen mit mehreren Antworten.

Gute Beobachtung!

Noch eine gute Beobachtung, ich werde mir das ansehen

Ich bin mir nicht sicher, ob wir hier ein schwarzes/dunkles Emoji auf einem dunklen/schwarzen Hintergrund lösen könnten…

Das ist auch etwas verwirrend, hast du vorher irgendwo anders als auf den Text geklickt? War es für dich üblich, hier zu klicken?

Screenshot 2023-11-14 at 10.44.44 AM1260×114 21.6 KB

Ja. Ich habe das ziemlich oft benutzt, besonders auf dem Handy. Der kleinere Bereich ist schwerer zu treffen. Ich glaube, das ist, wo mein Daumen auf dem Bildschirm ist.

Yup! Das ist eine der Erwartungen der Standardeinstellungen der Plattform: <details>, wie Kontrollkästchen/Radios und ihre <label>s, sehen auf eine bestimmte Weise aus und verhalten sich auch so. Ich mache das zum Beispiel auch bei GH:

Screenshot 2023-11-14 at 18.03.191290×462 43.9 KB

Hallo! Bitte entschuldigen Sie, wenn meine Frage nicht ganz korrekt ist
Wäre es möglich, eine Funktion hinzuzufügen, um versteckte Inhalte je nach Benutzergruppe anzuzeigen? Wenn der Benutzer beispielsweise nicht registriert ist oder keiner bestimmten Gruppe angehört, kann er die Details nicht einsehen und ihm wird ein modales Fenster angezeigt, in dem Anweisungen zum Erhalt des Zugangs enthalten sind (z. B. Registrierung)?
Ich weiß von Theme Components/Plugins, die das gesamte Thema oder die gesamte Kategorie ausblenden. Manchmal möchte man den Benutzern die Möglichkeit geben, nur primäre Informationen zu lesen.

Dies ist keine Funktion, die auf diese Weise genutzt wird, da normalerweise eine Kategorie auf bestimmte Gruppen oder Benutzer beschränkt ist und nicht Details innerhalb eines Beitrags in dieser Kategorie.

Davon abgesehen bin ich sicher, dass dies in einem Plugin umgesetzt werden könnte, aber dieses Thema wäre dafür nicht ideal.

Eine kleine Anmerkung, aber dieser Hintergrundfarbe des Zitats sieht leicht anders aus, dies ist die Art von „fast, aber nicht ganz“, die wie ein Fehler aussehen kann. Ich denke, es sollte entweder übereinstimmen oder offensichtlich anders sein.

Screenshot 2023-11-14 at 1.37.18 PM266×365 11.7 KB

Andere Gedanken…

Dies ist ein manuelles Zitat

Dies ist ein teilweises Zitat, das erweitert werden kann

Vielleicht übernehmen wir diesen Stil leicht? Gleiche Polsterung, Hintergrund und Erweiterung… wir müssten zumindest den Rand entfernen, damit es weniger zitatartig aussieht

Vielleicht ein ganz anderer Stil?

Es stört mich ein wenig, hier auf die Ausrichtung zu verzichten:

image438×330 43.7 KB

Das fällt am deutlichsten auf, wenn man mit einem Details-Block beginnt.

Hallo Ich denke nur laut nach… Ist die Kopfzeile standardmäßig erforderlich? Ich meine, sie verwendet meistens die Standardeinstellung Summary und wahrscheinlich wissen die meisten Benutzer nicht, dass sie eindeutig sein kann und vielleicht wäre es natürlicher, wenn der Text in details mit Auslassungspunkten abgeschnitten wird und am Ende ...mehr anzeigen angezeigt wird, wenn er eingeklappt ist, und weniger anzeigen, wenn er erweitert ist. Zum Beispiel wäre die erste Zeile des abgeschnittenen Inhalts automatisch die Kopfzeile. Dies könnte eine Standardansicht sein, aber Benutzer können bei Bedarf separat eine Kopfzeile hinzufügen?

Um fair zu sein: Die Implementierung besteht darin, dass das Klicken auf ein Label seinen Radiobutton setzen soll, nicht unbedingt, dass auch das Klicken auf die gesamte leere Zeile hinter einem Label funktioniert.

Wie würden Sie es finden, wenn der Hover-Zustand dauerhaft wäre? Dann wäre er als „Schaltfläche“ mit dem Text darunter und darüber ausgerichtet.

image1268×1122 162 KB

8. Der Chevron ist nicht mit dem Text ausgerichtet (er ist etwas zu hoch platziert)
   
   

   image234×112 1.25 KB
   vs
   (und es ist nicht das gleiche Chevron-Symbol? )
9. Das Komponistenmenü verwendet ein Dreieck, um die Detailfunktion anzuzeigen
   
   

   image464×258 6.64 KB
10. Ergänzung zu 2.
    Das Platzieren des Symbols nach dem Text erschwert die Erkennung, insbesondere beim schnellen Überfliegen eines Beitrags
11. Ergänzung zu 2.
    Bezüglich der Richtung, in die das Symbol zeigt: Da es als Umschalter fungiert, wäre es nicht sinnvoll, es umzukehren, sodass es den aktuellen Zustand und nicht die Aktion/den zukünftigen Zustand anzeigt (dies gilt auch für die Schaltfläche „Antworten“).
12. Es hat keinen Fokusstatus, wenn mit tab dorthin navigiert wird
13. Der Hover-Zustand ist nur sichtbar, wenn er geschlossen ist

Vielleicht … @awesomerobot Gedanken?

Kleiner Fehler – Wenn Sie ein Detail öffnen, scrollen Sie nach oben, bis Sie weitere Beiträge laden (und ein wenig mehr); wenn Sie zurückkehren, wird der Detailinhalt nicht gerendert (EDIT: oder geschlossen, aber ich würde hier nicht erwarten, dass er geschlossen wird)

Ja, die Behandlung als Schaltfläche könnte funktionieren … fast wie das vorhandene HTML-Details-Tag (plus ein Pfeil nach unten)

Auch…