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!
Credo che qualcosa del genere abbia più senso:
@media screen and (min-width: 1260px) {
.topic-body {
min-width: 80%;
}
}
Non l’ho ancora provato, ma sospetto che tu abbia ragione! Il mio CSS non è sempre il metodo migliore! Provo semplicemente diversi approcci finché non riesco a far fare alla pagina ciò che voglio! Sto lavorando alla creazione di una nuova community. Se alla fine avrò bisogno della stessa cosa, farò sapere come va! Grazie per aver contribuito con un’altra soluzione (probabilmente migliore)!
Ecco anche il mio componente tema con questo CSS. È il metodo consigliato ora per evitare di modificare manualmente tutti i temi.
Ho refactorizzato e ampliato questo componente.
La dimensione è ora specificata in px invece che in % per evitare confusione e poterla utilizzare in altri contesti.
.topic-post:not(.d-toc-post) .topic-body {
width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$additional_post_width});
}
Le prime due parti della somma qui sono prese dallo SCSS standard di Discourse.
Ci sono alcuni piccoli miglioramenti dell’interfaccia utente, come l’aumento delle dimensioni dei separatori e dei post con azioni dei moderatori; inoltre, ora è disabilitato nei post di DiscoTOC perché si comporta in modo strano in quel contesto.
Inoltre, ho aggiunto un’opzione per aumentare la larghezza massima dell’editor, in modo che l’anteprima corrisponda alla larghezza del post. Non esattamente la stessa larghezza, ma quella standard presenta lo stesso problema.
Molto bello @Alex_P. Se potessi farlo funzionare con il tema Material Design sarebbe ottimo, il problema è che l’avatar a sinistra del post salta da un lato a sopra il post stesso.