Foundationテーマの近代化

デザインチームは、モダンなウェブ標準により近づけるために、Foundationテーマに小規模ながら強力な変更/調整を加えています。これらの変更をmetaでライブで確認するには、このグループに参加してください。

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

これらの変更は、Discourseで利用可能になる新しいUpcoming Changes機能を通じてライブ化されます。これにより、サイト所有者は、テーマや現在のカスタマイズを壊す可能性を恐れることなく、指定したグループに対して変更を有効にし、変更のロールアウトをテストできるようになります。

変更点

ヘッダーの高さが縮小

画面の表示領域を有効活用するため、ヘッダーのサイズと一部のアイコンおよびアバターをわずかに縮小しました。

デフォルトボタン

デフォルトのボタンの背景をグレーから、枠線付きの透明/「セカンダリ」の背景に変更します。

  • グレーの背景を削除
  • 枠線の追加
  • アイコンの色をテキストの色に合わせる
  • ボタンに固定の高さを設定

トピック一覧ページの「新しいトピックを作成」ボタン

Horizonと合わせて、「CTA」(Call to Action)の背景色をtertiaryに変更します。

多くのグレーの背景の削除

トピック一覧

  • 3pxの太い上部ボーダーの削除
  • テーブルヘッダーデータのフォントサイズを縮小
  • テーブルデータ項目の色の統一
  • 既読/未読を示す色の値の変更
  • 未読のフォントウェイトをわずかに増加

カテゴリ

  • テキストの左揃え
  • 太い左側のカラーボーダーの削除
  • バッジの角をわずかに丸くする
  • ボックスのボーダーを細くする

ナビゲーションバー

  • トピック一覧ページのナビゲーションピルが、この領域のボタンと同じ高さになります
  • 選択キットのテキストとアイコンの色を濃くする

サイドバー

  • アイコンとテキストの色を一致させる
  • テキストとアイコンを濃くする
  • アクティブ時の背景を明るくする
  • アクティブ時のフォントウェイトを太くする

ウェルカムバナー

  • スペースのバランス調整
  • カスタマイズによる左右/中央揃えを容易にするための変数の追加
  • ヘッダーのフォントウェイトを減少
  • サブタイトルのフォントサイズを縮小

カレンダー

  • 「ボタン」からグレーの背景を削除
  • グレーは「アクティブ」を示すためにのみ使用
  • 「枠線付き透明」ボタンのスタイルに変更

ドロップダウン

  • ドロップダウンコンテナにパディングを追加
  • 高さ、パディング、間隔をサイドバーの項目と一致させる
    • 「クリック可能なリスト」の統一
  • ボーダーが --d-border-radius 変数を継承する

新しい変数

ここでの変更の一部は、コアに追加される追加の変数を通じて導入されます。

ウェルカムバナーの配置

ウェルカムバナーの配置は、以下を通じて変更できるようになります。

// デフォルト
  --welcome-banner-text-align: center;
  --welcome-banner-search-menu-margin-inline: auto;

// カスタム
  --welcome-banner-text-align: left;
  --welcome-banner-search-menu-margin-inline: 0 auto;

ボタンの高さ

ボタンの高さは、以下を通じて固定されるようになります。

// デフォルト
  --button-height: var(--space-8);

フォントスムージング

Horizonでは既に行われていますが、Foundationにも導入するのは理にかなっています。

// 新しいデフォルト
--webkit-font-smoothing: antialiased;
「いいね!」 29

gistボタンのドロップダウンにはスクロールバー(おそらくfk-d-menuoverflowがある)があり、他の同様のdropdown-menuクラスほどmin-width: 200pxを必要としないかもしれません。

編集:気にしないでください、すでに修正されました :smiley:

「いいね!」 6

モダンな基盤テーマは見えますが、なぜまだ古いカテゴリレイアウトが表示されるのでしょうか?

Metaは、サイト設定の「デスクトップカテゴリページのスタイル」で、「サブカテゴリ付きのボックス」ではなく「カテゴリのみ」を使用していると思います。

「いいね!」 1

おっと、スクリーンショットはメタで撮られたものだと仮定していましたが、確認することすら考えていませんでした。


奇妙な小さな動作です。通常のテーマでは、 のマウスボタンを離すと、すぐにサイドバーを表示または閉じるアニメーションがトリガーされます。

新しいテーマでは、サイドバーが閉じている状態で のマウスボタンを離すと、スライドアニメーションがトリガーされるまでに一瞬の待ち時間があります。サイドバーが表示されているときにアイコンをクリックした場合は発生しません。


古いテーマとの変更を比較するためにグループを離れることはできますか?離脱オプションが見当たりません。

「いいね!」 2

ああ、はい、修正しました…これでいつでも自由に抜けるはずです

「いいね!」 4

@modernized-foundation グループを離れることを許可していただけますか。
編集: グループを離れた後、新しいトピックボタンの比較スクリーンショットを追加できるようになりました。
image

wcag パレットでは、一部のアイコンの色がうまく機能していないようです。
image

そして、例えば、グループページの左上にあるグループセレクターは、2行を実際にはサポートしていません。

ログアウトすると、このようになります。

「いいね!」 2

変更点のほとんどは気に入っています。微妙な変更ですね。CSSの値を見比べないと違いが分からないものもあります :smile:(サイドバーのアイコンとテキストの色、トピックリストの既読と未読の色)

変更前 / 変更後
image image

強調された新しいトピックボタンは気に入っています。実は、かなり前に自分のフォーラムで同じようにカスタマイズしていました(コードが壊れて直すのが面倒になるまで)(until my code broke and I didn’t bother fixing it)


変更前 / 変更後


これも気に入っています。少なくともダークパレットでは、ダークグレーにダークブルーは奇妙な組み合わせでした。


変更前 / 変更後

新しいボタンのスタイルは気に入っていますが、特にトピックフッターなど、一部の領域では背景とのコントラストが不足していると感じます。
ごちゃごちゃして見えます。前のバージョンのように、ボタンが特定のセクションに属しているようには見えず、ただそこにあるだけのように見えます。意味が通じるか分かりませんが。

「いいね!」 4

これは、一部の画面サイズで「既読」および「トピック」アクティビティで機能しているようです

しかし、幅を少し狭めると、「返信」と「アクティビティ」が大きすぎるように見えます(これは/latestでも問題です)

/my/activity/bookmarksの「更新済み」と「アクティビティ」でも同様の問題があります

アイコンとテキストの色が一致していない別の例は、マイプロフィールでの展開ボタンです

グループを離れると、次のように表示されます。

[quote=“jordan.vidrine, post:1, topic:395331”]トピックリスト[/quote]テーブルヘッダーのフォントサイズだけでなく、「返信」、「閲覧数」、「アクティビティ」列の数字のサイズも小さくなっていることに言及していないと思います。

「いいね!」 5

ありがとうございます。前後比較を拝見しました。OP(投稿者)からは見落としていたようです。

どちらの変更も奇妙に見えます。「After」側はコントラストがはるかに低く、A11y(アクセシビリティ)の問題を引き起こす可能性があるのでは?

テストドライブのために新しいグループに向かいます!

「いいね!」 2

トピックマップの「リンク」という単語が、グループに参加した後に一部しか表示されません。

スクリーンショットは Add link to sidebar category setting to new admin menu in categories section of the sidebar で撮影されました。

また、このモーダルのテキストはホバー時に読みにくいです。以前の方がコントラストが良かったと思います。

デフォルトのスタイルへの変更を楽しみにしています。いつ頃リリースされる予定ですか?

「いいね!」 1

検索入力欄と送信ボタンが窮屈です!

squish!

編集:モバイルでのみ

「いいね!」 3

これまでのフィードバックやバグ報告はすべて素晴らしいものです。アップデートありがとうございます。

「いいね!」 4

これは良い指摘です。私も新しいボタンのスタイルはかなり良いと思いますが、このセクション(これらがたくさん集まっている場所)では何らかの理由でしっくりこない感じがします。

「いいね!」 4

未読のフォントの太さが既読のトピックよりも太くなっています。
デスクトップでは気付きませんでしたが、モバイルで確認できます。

私には少し鈍く見えます。

Discourseが、多くのフォーラムソフトウェアで見られる典型的な太さの違いよりもエレガントに感じられた、色の変更のみを選択した点が気に入っていました。

今では両方あります。違いは微妙ですが、私は色の変更だけの方が好みです :paintbrush:

「いいね!」 3

最新の変更は、こちらのプルリクエストからまもなく反映される予定です。