Ausrichtung der Quote-Leiste auf Mobilgeräten

[Don]

Hallo

Auf Mobilgeräten hat die Zitatleiste mehr Schaltflächen als zuvor. Jetzt gibt es auch „Zitat kopieren“ und „KI fragen“, was sie breiter macht und auf kleineren Bildschirmen leicht über den Bildschirm hinausgehen kann, insbesondere bei Sprachen, bei denen diese Bezeichnungen länger übersetzt werden.

In ungarischer Sprache ist es noch schlimmer…

Ich denke, eine der besten Lösungen ist wahrscheinlich, die Schaltflächen in einer Spalte anzuordnen. Jetzt lösen die Schaltflächen den (Composer, Modal, Toast) aus und schließen die Zitatleiste, nicht wie zuvor, als sie in der Zitatleiste auf (Bearbeiten, KI fragen) geöffnet waren. Wir haben mehr freien Speicherplatz und können diese Schaltflächen viel einfacher handhaben.

Etwas wie das:

Mobil / CSS

.quote-button {
  .buttons {
    flex-direction: column;
    > *:not(:last-child) {
      border-bottom: 1px solid var(--primary-low);
    }
    > .btn,
    .ai-post-helper__trigger {
      width: 100%;
      padding: 0.65em;
      justify-content: flex-start;
    }        
  }
}

[Moin]

Es gab ein Design-Experiment, um den Text vor Hide text in text select popup menu - Feedback zu entfernen. Aber Ihre Lösung gefällt mir noch besser!

[chapoi]

Du hast absolut Recht, dass die aktuelle Implementierung zu wünschen übrig lässt.

Dein Vorschlag gefällt mir auf den ersten Blick, aber wie verhält er sich, wenn man ein Wort am rechten Rand auswählt („pretty“ in diesem Fall zum Beispiel) oder einen größeren Textabschnitt? Beide Situationen könnten es auch aus dem Bildschirm schieben. Generell ist die Positionierung dieser Dinge oft der schwierige Teil.

Ich würde es gerne in Aktion sehen, zusätzlich zu Screenshots, wenn möglich.

(Aber wir sollten die aktuelle horizontale Überlaufproblematik auf jeden Fall beheben!)

[Don]

@chapoi

aber wie verhält es sich, wenn man ein Wort am rechten Rand auswählt (in diesem Fall zum Beispiel „pretty“) oder einen größeren Textblock? Beide Situationen könnten es auch vom Bildschirm schieben. Im Allgemeinen ist die Positionierung dieser Dinge oft der schwierige Teil.

Es richtet sich ziemlich gut aus.

Hier ist die Demo des Theme-Creators: Theme Creator

[chapoi]

Ich habe eine ähnliche Lösung im Kern in diesem Commit hinzugefügt.

Danke, dass du das angesprochen hast, @Don !