Modernisierung des Foundation-Themes

Das Designteam nimmt kleine, aber wirkungsvolle Änderungen/Anpassungen am Foundation-Theme vor, um es näher an modernen Webstandards auszurichten. Um diese Änderungen live auf Meta anzuzeigen, treten Sie dieser Gruppe bei:

https://meta.discourse.org/g/modernized-foundation

Wir werden diese Änderung über die neue Funktion Upcoming Changes live schalten, die in Discourse verfügbar ist. Dies ermöglicht es Website-Betreibern, die Änderungen für jede von ihnen angegebene Gruppe zu aktivieren, um die Einführung der Änderungen zu testen, ohne befürchten zu müssen, dass Themes oder aktuelle Anpassungen möglicherweise beschädigt werden.

Was wird sich ändern?

Kopfzeile wird in der Höhe reduziert

Wir haben die Größe der Kopfzeile zusammen mit einigen Symbolen und Avataren leicht verkleinert, um den Bildschirmplatz besser auszunutzen.

Standard-Schaltflächen

Wir wechseln von einem grauen Standard-Schaltflächenhintergrund zu einem transparenten / „sekundären“ Hintergrund mit einem Rahmen.

  • Entfernung des grauen Hintergrunds
  • Hinzufügen von Rahmen
  • Symbolfarbe passt zur Textfarbe
  • Schaltflächen haben jetzt eine festgelegte Höhe

Schaltfläche „Neues Thema erstellen“ auf der Themenseitenliste

Anpassung an Horizon und Zuweisung einer „CTA“-Hintergrundfarbe von tertiary

Entfernung vieler grauer Hintergründe

Themenseitenliste

  • Entfernung des 3 px dicken oberen Randes
  • Verkleinerung der Schriftgröße der Tabellenkopfdaten
  • einheitliche Farbe für Tabellendaten
  • Farbwertänderung für gelesen/ungelesen
  • leichte Erhöhung der Schriftstärke für ungelesen

Kategorien

  • Linksbündigkeit des Textes
  • Entfernung des dicken linken farbigen Randes
  • leicht abgerundete Abzeichen
  • dünnerer Rand der Box

Navigationsleiste

  • Die Navigations-Pills auf Themenseitenlisten haben die gleiche Höhe wie die Schaltflächen in diesem Bereich
  • dunklere Text- und Symbolfarbe beim ausgewählten Kit

Seitenleiste

  • Symbol und Text haben die gleiche Farbe
  • dunklerer Text und dunklere Symbole
  • hellerer „aktiver“ Hintergrund
  • stärkere aktive Schriftstärke

Willkommensbanner

  • ausgeglichener Abstand
  • Variablen für einfachere Links-/Rechts-/Mitten-Ausrichtung über Anpassung hinzugefügt
  • Schriftstärke der Kopfzeile verringert
  • Schriftgröße der Untertitel verringert

Kalender

  • grauer Hintergrund von „Schaltflächen“ entfernt
  • Grau nur zur Kennzeichnung von „aktiv“ verwenden
  • Wechsel zu „gerahmtem transparentem“ Schaltflächen-Styling

Dropdowns

  • Abstand zum Dropdown-Container hinzugefügt
  • Höhe, Abstand, Lücke entsprechen jetzt den Seitenleistenelementen
    • Vereinheitlichung von „klickbaren Listen“
  • Rahmen erbt die Variable --d-border-radius

Neue Variablen

Einige der hier vorgenommenen Änderungen werden durch zusätzliche Variablen eingeführt, die dem Kern hinzugefügt werden.

Ausrichtung des Willkommensbanners

Die Ausrichtung des Willkommensbanners kann nun geändert werden über:

// Standard
  --welcome-banner-text-align: center;
  --welcome-banner-search-menu-margin-inline: auto;

// Benutzerdefiniert
  --welcome-banner-text-align: left;
  --welcome-banner-search-menu-margin-inline: 0 auto;

Schaltflächenhöhe

Wir werden nun eine festgelegte Schaltflächenhöhe haben über:

// Standard
  --button-height: var(--space-8);

Schriftautoglättung

Wir tun dies bereits in Horizon, es ist sinnvoll, es auf Foundation zu übertragen.

// neuer Standard
--webkit-font-smoothing: antialiased;
29 „Gefällt mir“

Die Ausklappliste der Gist-Schaltfläche hat eine Scrollleiste (vielleicht overflow auf dem fk-d-menu?) und benötigt wahrscheinlich nicht dieselbe min-width: 200px wie andere solche dropdown-menu-Klassen.

Edit: schon erledigt :smiley:

6 „Gefällt mir“

Ich sehe das moderne Foundation-Theme, aber warum habe ich immer noch das alte Kategorien-Layout?

Ich denke, Meta verwendet in seiner Website-Einstellung „Desktop-Kategorieseitenstil“ nicht „Boxen mit Unterkategorien“, sondern nur „Kategorien“.

1 „Gefällt mir“

Hoppla, ich ging davon aus, dass die Screenshots im Meta-Theme aufgenommen wurden, aber ich habe nicht einmal daran gedacht, das zu überprüfen.


Kleines, aber seltsames Verhalten. Beim regulären Theme löst das Loslassen der Maustaste auf sofort die Animationsfolge zum Anzeigen oder Schließen der Seitenleiste aus.

Beim neuen Theme gibt es beim Loslassen der Maustaste auf , wenn die Seitenleiste geschlossen ist, eine Millisekunde Verzögerung, bevor die Schiebeanimation ausgelöst wird. Das passiert nicht, wenn wir auf das Symbol klicken, während die Seitenleiste sichtbar ist.


Kann ich die Gruppe verlassen, um Änderungen mit dem alten Theme zu vergleichen? Ich sehe die Option zum Verlassen nicht.

2 „Gefällt mir“

Oh ja, das habe ich behoben… Sie sollten die Gruppe jetzt nach Belieben verlassen können

4 „Gefällt mir“

Würden Sie mir bitte erlauben, die Gruppe @modernized-foundation zu verlassen.
Bearbeitung: Nachdem ich die Gruppe verlassen habe, kann ich nun einen Vergleichs-Screenshot der neuen Themen-Schaltfläche hinzufügen.
image

Es scheint, dass einige Icon-Farben nicht gut mit der WCAG-Farbpalette harmonieren.
image

Und zum Beispiel unterstützt die Gruppenauswahl oben links auf der Gruppenseite nicht wirklich zwei Zeilen.

So sieht es aus, wenn ich mich abmelde.

2 „Gefällt mir“

Mir gefallen die meisten Änderungen. Sie sind subtil. Bei manchen sehe ich den Unterschied nicht einmal, es sei denn, ich schaue mir die CSS-Werte an :smile: (Seitenleisten-Symbol und Textfarben, Farben für gelesene und ungelesene Themen in der Themenliste)

Vorher / Nachher
image image

Mir gefällt die hervorgehobene Schaltfläche „Neues Thema“. Ich habe sie vor langer Zeit auf meinem Forum tatsächlich so angepasst, \u003csmall\u003e(bis mein Code kaputt ging und ich mich nicht mehr darum gekümmert habe)\u003c/small\u003e.


Vorher / Nachher


Das gefällt mir auch; Zumindest im dunklen Farbschema war das Dunkelblau auf Dunkelgrau eine seltsame Kombination.


Vorher / Nachher

Obwohl mir der neue Schaltflächenstil gefällt, habe ich das Gefühl, dass ihnen in bestimmten Bereichen, insbesondere in der Fußzeile des Themas, der Kontrast zum Hintergrund fehlt.
Es sieht unordentlich aus. Die Schaltflächen sehen nicht so aus, als gehörten sie zu einem bestimmten Bereich, anders als bei der vorherigen Version. Sie „sitzen“ dort einfach nur. Ich weiß nicht, ob das Sinn ergibt.

4 „Gefällt mir“

[quote=“jordan.vidrine, post:1, topic:395331”]Schriftgröße der Tabellenkopfdaten verkleinern
[/quote]

Dies scheint bei einigen Bildschirmgrößen in der Lese- und Themenaktivität zu funktionieren

Aber sobald ich die Breite etwas reduziere, scheinen „Replies“ und „activity“ zu groß zu sein (Dies ist auch ein Problem bei /latest)

Ein ähnliches Problem besteht bei „updated“ und „activity“ unter /my/activity/bookmarks

[quote=“jordan.vidrine, post:1, topic:395331”]Icon-Farbe entspricht der Textfarbe
[/quote]

Ein weiteres Beispiel, bei dem Icon- und Textfarbe nicht übereinstimmen, ist die Erweiterungsschaltfläche in meinem Profil

So sieht es aus, wenn ich die Gruppe verlasse:

[quote=“jordan.vidrine, post:1, topic:395331”]Themenliste
[/quote]Ich glaube, Sie haben nicht erwähnt, dass nicht nur die Schriftgröße der Tabellenüberschriften, sondern auch die Größe der Zahlen in den Spalten „Replies“, „Views“ und „Activity“ verkleinert zu sein scheint.

5 „Gefällt mir“

Vielen Dank für das Vorher/Nachher. Ich dachte, es fehle im OP.

Beide diese Änderungen sehen seltsam aus: die Nachher-Seite sieht viel weniger kontrastreich aus und könnte A11y-Probleme verursachen, oder?

Ich mache mich auf den Weg zur neuen Gruppe für eine Testfahrt!

2 „Gefällt mir“

Das Wort „Link“ in der Themenübersicht wird nur teilweise angezeigt, nachdem ich der Gruppe beigetreten bin:

Screenshot aufgenommen unter Add link to sidebar category setting to new admin menu in categories section of the sidebar

Und der Text in diesem Modal ist beim Darüberfahren schwer zu lesen. Ich denke, der Kontrast war vorher besser

Ich freue mich sehr auf diese Änderung des Standardstils. Wann wird sie ungefähr veröffentlicht?

1 „Gefällt mir“

Sucheingabe und Senden sind gequetscht!

squish!

Bearbeiten: nur auf Mobilgeräten

3 „Gefällt mir“

Tolles Feedback / Fehlerfindung bisher. Danke für die Updates.

4 „Gefällt mir“

Das ist ein guter Hinweis. Ich finde den neuen Button-Stil auch recht nett, aber aus irgendeinem Grund fühlt es sich in diesem Bereich (mit so vielen davon zusammen) nicht ganz richtig an.

4 „Gefällt mir“

Die nicht gelesene Schriftstärke ist dicker als bei gelesenen Themen.
Auf dem Desktop ist es mir nicht aufgefallen, aber auf dem Handy sehe ich es.

Es wirkt auf mich etwas stumpf.

Mir gefiel, dass Discourse sich meistens für eine reine Farbänderung entschieden hat, was eleganter wirkte als der kanonische Stärkeunterschied, den wir bei vielen Forensoftware sehen.

Jetzt haben wir beides. Der Unterschied ist subtil, aber ich würde nur eine Farbänderung bevorzugen :paintbrush:

3 „Gefällt mir“

Die neuesten Änderungen sollten bald aus der PR hier live geschaltet werden: