In my forum,
1.I have an ample amount of space to use it for extending the post created by user.It rather looks clumpsy now.I want to utilize the space so that the post looks good,like the homepage is screen friendly using code:
@media screen and (min-width: 1400px) {
.wrap { max-width: 1500px; }
}
I want the post to be such
eg.
Please suggest how to do this
Any suggestion will be helpful
not a developer, but i think this may help:
https://meta.discourse.org/t/material-design-for-discourse/28864
My forum slightly increases post size by:
.topic-body{
min-width: 65%;
}
You can adjust as needed.
Consider readability before making it too wide:
I ended up going 75% because we are a very media heavy site. That’s the great part about Discourse, you can make it whatever you want it to be as long as you make sure it doesn’t conflict with other elements on the page.
I had 75 originally but line breaks in the “reply by new topic” button looked really weird, along with the topic links in the gutter.
I think the team has plans to move the topic links below the posts and clear out the gutter in a later release, but until then just be mindful of the gutter content.
Brilliant! Thank you for this snippet!
I changed my Topic Body as follows (by adding to my CSS):
.topic-body {
min-width: 80%;
}
After switching to 80%, I noticed that the Topic Timeline scrunches over the Topic Body starting at 1260px, until the time when it naturally disappears for mobile (maybe 800px?)
So I added this little snippet to my CSS to remove the timeline when the screen size shrinks below 1260px…
@media screen and (max-width: 1260px) {
.topic-timeline {
display: none;
}
}
Works like a charm now!
これくらいの方が理にかなっていると思います：
@media screen and (min-width: 1260px) {
.topic-body {
min-width: 80%;
}
}
試していませんが、おそらくおっしゃる通りだと思います！私の CSS はいつも最善の手法とは限りません！ただ、ページが望む動きをするまで、いくつかのアプローチを試しているだけです！今、新しいコミュニティの構築に取り組んでいます。もし同じような必要が生じたら、その結果についてまた報告します！より良い（おそらく）解決策を共有してくださり、ありがとうございます！
また、この CSS を使用したテーマコンポーネントも共有します。これは、すべてのテーマを手動で編集するのを避けるための現在推奨されている方法です。
このコンポーネントをリファクタリングし、拡張しました。
混同を避けるため、また他の場所でも使用できるように、サイズは % から px で指定されるようになりました。
.topic-post:not(.d-toc-post) .topic-body {
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$additional_post_width});
}
この合計式の最初の 2 つの部分は、標準的な Discourse SCSS から取得されています。
セパレータやモデレータアクション投稿のサイズを大きくするなどの小さな UI 改善も行われ、DiscoTOC 投稿では奇妙な挙動を示すため、現在は無効化されています。
また、プレビューが投稿の幅と一致するように、エディタの最大幅を増加させるオプションも追加しました。完全に同じ幅ではありませんが、標準のものにも同様の問題があります。
とても素敵ですね、@Alex_P。もしマテリアルデザインテーマで動作するようにできれば素晴らしいです。その場合の課題は、投稿の左側にあるアバターが横から投稿の上部に飛び移ってしまうことです。