投稿（および小規模なアクション）すべてに、nth-child を使用して交互の色を設定しており、以下のようになります。
しかし、2.8 で新しく追加された「最後の訪問」は小規模なアクションとしてカウントされるため、これらの交互の投稿色に含まれてしまいます。
以下のような状態にするのが最も望ましいです。
「最後の訪問」バーが、nth-child による背景色の決定において子としてカウントされないようにしたいのです。
最初に考えたのは、JavaScript を使用して、最後の訪問バーの後に新しい div を追加することです。これは期待どおりに機能します。
以下のコードで実現できます。
<script type="text/discourse-plugin" version="0.8">
var addedElement;
api.onPageChange(() =>{
addedElement = false;
//window.onload = lastPostFix();
});
async function lastPostFix()
{
var elements = document.getElementsByClassName('topic-post-visited');
var newElement = document.createElement("div");
newElement.classList.add('small-action');
while(elements.length > 0 && !addedElement)
{
elements[0].parentNode.insertBefore(newElement, elements[0].nextSibling);
addedElement = true;
}
}
</script>
しかし、上下にスクロールすると、投稿が読み込まれなかったり、巨大な空白が表示されたり、3 番目の画像で何が起こっているのかわからないなど、多くの問題が発生します。
これを達成するための、より良い方法をご存知の方はいらっしゃいますか？
Don
2
このようなものを試してください。
.small-action.topic-post-visited {
height: 0;
}
それは確かにそれを薄くしますが、実際の問題はそこではありません。理想として挙げた例は、CSSを編集して行われました。これは基本的に些細なことです。問題は、投稿の背景色がnth-childセレクターによって行われ、.small-action.topic-post-visited要素が子としてカウントされ、望まない場合にnth-childを切り替えることです。
視覚的には、次のようになります。
ここで、明るい色が最後の訪問要素の背景として使用され、その上下の投稿が両方とも暗い色になります。
色の交互がこの新しい要素を無視する理想と比較してください。
バーがアンロードされるまで十分にスクロールすると、サイトが「最後に訪問した」バーが消えるときに何が色付けされるべきかを再決定するにつれて、投稿がすべて前後に点滅するという、楽しい動作も得られます。
これは非常に望ましくなく、交互の色を考慮すると、最後に訪問したインジケーターよりも私たちにとって価値があるため、これを適切に処理する方法、または機能を完全に無効にする方法を強く望んでいます。
応答がないことから、これが不可能だと仮定します。
この機能を完全に無効にするにはどうすればよいですか？
一時的なバーのために、すべての投稿が点滅するのは価値がありません。
Don
6
:nth-child または :nth-of-type では機能しません。これらは子要素をカウントするだけで、クラス固有ではなく、クラスでフィルタリングする方法もありません。
実際には :nth-child(2n of .topic-post) が必要になりますが、これはまだ Safari でしかサポートされていません。
しかし、次のようなものを試すことができます。
ヘッダー
これにより、小さなアクションを除外して、2番目の投稿ごとにクラス .every-second が追加されます。そのため、トピック投稿のみが対象となります。その後、CSS で簡単にターゲットを指定できます。
<script type="text/discourse-plugin" version="0.8">
api.addPostClassesCallback((attrs) => {
const postNum = attrs.post_number;
if (postNum % 2 === 0) {
return ['every-second']
}
});
</script>
CSS
.topic-post {
background: var(--primary-very-low);
&.every-second {
background: var(--primary-low);
}
}
.small-action.topic-post-visited {
height: 0;
}
トピック投稿の閲覧済みライン
スクロール
「いいね！」 1
Falco
(Falco)
7
より具体的なセレクターを使用して、純粋な CSS ソリューションに留めることはできませんか？
現在の CSS ルールのスニペットを共有していただけますか？
「いいね！」 1
saquetim
(Sérgio Saquetim)
8
CSSのみを使用して同じ効果を達成することは可能ですが、それは少しハッキーであり、投稿ストリームでのみ機能します。トピックリストでは機能しません。サファリだけが:nth-child(of <selector> syntax)を選択し、効果を適用できる属性は私が知る限り存在しないため、JavaScriptが必要になります。
@orangeandblack5、投稿内のarticle要素をターゲットにする必要があります。id属性はid=post_Nというパターンに従い、Nはストリーム内の投稿番号です。
したがって、以下のようなCSSで偶数のみをターゲットにすることができます。
.topic-post {
article[id$="0"], article[id$="2"], article[id$="4"], article[id$="6"], article[id$="8"] {
background-color: peachpuff;
}
}
試してみることはできますが、今週は小さなアクションも含まれます。可能であれば純粋なCSSソリューションを期待していましたが、それも成功していません。
豆知識 - すべての小さなアクションが同じように作られているわけではありません！
純粋なCSSのアイデアを試してみましたが、残念ながら、スレッドのロック解除やピン留めなど、一部の小さなアクションは完全な投稿としてカウントされ、色付けに使用できる独自のIDを取得しますが、すべてがそうではありません。
これは、@Donによって提供されたJS修正にも影響することに注意してください。これを回避する方法を見つけられるようにしますが、私のJSの知識はCSSよりもはるかに劣っています。
