トピックのスタイリング変更に関する詳細 - フィードバック

間違いではありませんが、原因はこれらのコンポーネントの設定方法の違いにあります。一方はd-iconを使用し、もう一方は現時点ではそれに適していません。それが変更されることを願っているので、もし方法を知っていればぜひ協力してください。

新しいスタイリングではより多くのスペースが必要になりますが、現在のパディングが多すぎることは同意します。

これは、トグルの考案以来、デザイナーの間で継続的に議論されてきたことです。正しい答えも間違った答えもありません。


Screenshot 2023-11-14 at 1.48.35 PM

これは、デザインセッションからのアイデアの1つで、個人的には非常に気に入っています。サムとcvxのコメント(の一部)を解決します。次のイテレーションでこれを試してみます。

「いいね!」 3
これまでの私の考え...

とても良さそうに見えます!

「いいね!」 4

シェブロンは左側の方が良いと思います。ほとんどの人は右側には気づかないと思います。マウスが上に移動するまで、通常のテキスト(コードブロックのようなもの)のように見えます。危うく見逃すところでした。

「いいね!」 3

(14. :wink:) 最近追加されたクリックハンドラにより、リンクをクリックしたり、コードコピーボタンを使用したり、画像を展開しようとしたり、テキストを選択しようとしたりすると、詳細ブロックが折りたたまれるようになります… :open_mouth:

「いいね!」 4

これには完全に同意します。過去数日間、複数の詳細ブロックを読み逃しそうになりました。一見するとコードブロックと似ているためだと思います。

これはコードではありません

これはコードです
「いいね!」 8

奇妙なことに、リンクをクリックすると機能します。詳細が閉じますが、リンクも開きます。他のシナリオは試していません。そして、もう少し洗練されたJavaScriptの作業が必要であることには同意します😜

シェブロンの位置について、@jordan.vidrine さん、どう思いますか?
もう一度イテレーションを行うべきでしょうか?もしかしたら、私が元々考えていたように、シェブロンの代わりに通常の三角形を使用し、開いたときにのみ背景を表示するというのはどうでしょうか?

「いいね!」 1

シェブロンは引き続き使用すべきだと思いますが、左側に配置するのは良いアイデアだと思います。

「いいね!」 1

何か別のことを指していますか? ここにはクリックハンドラーを追加していません。

ハンドラーがありました。チャーリーが本日2c941c4で削除しました。 :slightly_smiling_face:

ハッ!ワオ、何がこれをやっているのかと思ったよ。目の前なのに見えなかった。

「いいね!」 2

どこにでもホバーして > ハイライト > クリックで閉じるというアイデアは本当に気に入っていましたが、他のクリックの伝播を見落としていました :woman_facepalming:

引用内の詳細を見逃すのも非常に簡単です。背景のハイライトがほとんど見えず、シェブロンがテキストから遠く離れているためです。

「いいね!」 5

最新版について、いくつか細かい点を挙げさせていただきます…

矢印は中央揃えではなく、ベースラインで揃えるべきでしょうか?これは複数行の例で中央揃えにするよりも私には良いように思えますが、主観的なものかもしれません。

中央揃え

ベースライン

パディングは引用文と合わせるべきでしょうか?現時点では上部が少し窮屈に感じます。

コンテナ全体にパディングを追加する場合、最後の要素のパディングは削除した方が良いかもしれません。これはコンテンツの種類が多いため、少し難しいかもしれませんが、例えば次のような方法はどうでしょうか。

details > :last-child {
  padding-bottom: 0;
}

引用文内に配置された場合に、背景が埋もれないように、もう少し濃い色にするべきだという点には同意します。

概要

このテキストは非表示になります

このために、何らかの変数を使用できるのではないかと思います。もし details の背景が次のようなもので設定されている場合:

:root {
  --d-details-bg: var(--primary-100);
}

details {
  background: var(--d-details-bg);
}

引用文で上書きできるかもしれません。引用文の変数で、一般的な「もっと濃くする必要がある」というものも用意できるかもしれません。このような状況が他に他にありましたでしょうか…

blockquote {
  --darker-quote-bg: var(--primary-200);
  --d-details-bg: var(--darker-quote-bg);
}
「いいね!」 4

100%これです。現在の原因でなくても、それは単なるエラーです。

「いいね!」 3

この目的には、rgba(var(--primary-rgb),0.25) のようなものを使用するのが好きです。これは、それが含まれている要素の現在の背景を少し暗くするだけだからです。

「いいね!」 2

全体的に、最新のイテレーションは出荷準備が整うまであと一歩だと感じています :hugs:

解決できるかどうかわからない、些細な不満が一つあります。

決してブロッカーではありませんが、グレーのパネルは、それが一つのエンティティであるかのように思わせます。

「いいね!」 3

はい、境界線などでより明確にすることで解決できると思います。本日確認します。

「いいね!」 1

全体的に気に入っています。とはいえ、この提案が目に留まりました。

テキスト要素の背景を選択することは、完璧なライトグレーの色合いを探すようなものだと感じることがあります。

var(--primary-not-so-light-you-cant-see-it-but-not-so-dark-it-looks-clunky)

しかし、あなたはもうすぐそこまで来ているようですし、全体的に気に入っています。

「いいね!」 5

コードブロックの背景の暗化を、引用ブロックと同じように追加します。

これで問題は解決するはずです @sam

「いいね!」 2

さらに2点(15番と16番とでも言いましょうか :wink:

  • サマリー要素の実際のクリック可能領域が、カーソルを変更してホバー時にハイライトされる要素よりも小さいです。
  • そのため、ホバー時の背景色と、要素を展開したときのそれに続く変化により、要素を展開したときに一瞬背景色が点滅します。

編集:
17. レンダリングされた投稿とコンポーザーの間の不一致:



「いいね!」 2