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!
Creo que algo así tiene más sentido:
@media screen and (min-width: 1260px) {
.topic-body {
min-width: 80%;
}
}
¡No lo he probado, pero sospecho que tienes razón! ¡Mi CSS no siempre es el mejor enfoque! ¡Simplemente pruebo diferentes enfoques hasta que consigo que la página haga lo que quiero! Ahora estoy trabajando en crear una nueva comunidad. Si al final necesito lo mismo, ¡volveré a informar sobre cómo va! ¡Gracias por aportar otra solución (probablemente mejor)!
Aquí también está mi componente de tema con este CSS. Ahora es la forma recomendada para evitar editar todos los temas manualmente.
He refactorizado y ampliado este componente.
El tamaño ahora se especifica en px en lugar de en % para evitar confusiones y poder utilizarlo en otros lugares.
.topic-post:not(.d-toc-post) .topic-body {
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$additional_post_width});
}
Las dos primeras partes de la suma aquí se toman del SCSS estándar de Discourse.
Hay algunas mejoras pequeñas en la interfaz de usuario, como aumentar el tamaño de los separadores y los mensajes de acción de moderador. Además, ahora está desactivado en los mensajes de DiscoTOC porque se comporta de manera extraña allí.
También he añadido una opción para aumentar el ancho máximo del editor, de modo que la vista previa coincida con el ancho del mensaje. No es exactamente el mismo ancho, pero el estándar tiene el mismo problema.
Muy bien, @Alex_P. Sería genial que pudiera funcionar con el tema Material Design. El problema es que el avatar a la izquierda del mensaje salta desde el lateral hacia arriba, por encima del propio mensaje.