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!
Acho que algo assim faz mais sentido:
@media screen and (min-width: 1260px) {
.topic-body {
min-width: 80%;
}
}
Eu ainda não testei isso, mas suspeito que você está certo! Meu CSS nem sempre é a melhor abordagem! Eu apenas tento algumas soluções diferentes até conseguir que a página faça o que quero! Estou trabalhando na criação de uma nova comunidade agora. Se eu acabar precisando da mesma coisa, voltarei para contar como foi! Obrigado por compartilhar outra solução (provavelmente melhor)!
Aqui está também meu componente de tema com este CSS. É a maneira recomendada agora para evitar editar todos os temas manualmente.
Refatorei e estendi este componente.
O tamanho agora é especificado em px em vez de % para evitar confusão e permitir seu uso em outros lugares.
.topic-post:not(.d-toc-post) .topic-body {
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$additional_post_width});
}
As duas primeiras partes da soma aqui são extraídas do SCSS padrão do Discourse.
Há algumas pequenas melhorias na interface, como o aumento do tamanho dos separadores e das postagens de ação de moderador, e ela agora está desativada nas postagens do DiscoTOC, pois comporta-se de forma estranha ali.
Além disso, adicionei uma opção para aumentar a largura máxima do editor, fazendo com que a pré-visualização corresponda à largura da postagem. Não exatamente a mesma largura, mas o padrão também apresenta o mesmo problema.
Muito bom, @Alex_P. Se você pudesse fazer funcionar com o tema Material Design, seria ótimo. O problema ali é que o avatar à esquerda da postagem salta do lado para cima da própria postagem.