Increasing post width with CSS?

Внести вклад UX
1

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.

b1.png1840×616 40.4 KB

Please suggest how to do this

1 лайк
How can i increase the width of a single post
How to increase width of topic
Discourse with a very widescreen browser
2

Any suggestion will be helpful

3

not a developer, but i think this may help:

https://meta.discourse.org/t/material-design-for-discourse/28864

1 лайк
4

My forum slightly increases post size by:

.topic-body{
  min-width: 65%;
}

You can adjust as needed.

5 лайков
5

Consider readability before making it too wide:

http://baymard.com/blog/line-length-readability

8 лайков
Reduce Page Margins
Perfectionist - the default curve interface
6

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.

7

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.

8

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?)

See Screenshot of problem

Monosnap%202018-12-05%2014-37-36
Monosnap 2018-12-05 14-37-36.jpg800×768 127 KB

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!

5 лайков
9

Я думаю, что что-то вроде этого имеет больше смысла:

@media screen and (min-width: 1260px) {
  .topic-body {
    min-width: 80%;
  }
}
1 лайк
10

Я этого ещё не пробовал, но, думаю, вы правы! Мой CSS не всегда самый лучший вариант! Я просто перепробую несколько разных подходов, пока не добьюсь нужного результата на странице! Сейчас я работаю над созданием нового сообщества. Если мне понадобится то же самое, я обязательно отпишусь, как всё пойдёт! Спасибо, что поделились ещё одним (вероятно, более хорошим) решением!

11

Вот также мой компонент темы с этим CSS. Это сейчас рекомендуемый способ, чтобы избежать ручного редактирования всех тем.

6 лайков
12

Я рефакторировал и расширил этот компонент.

Размер теперь указывается в пикселях вместо процентов, чтобы избежать путаницы и можно было использовать его в других местах.

.topic-post:not(.d-toc-post) .topic-body {
  width: calc(#{$topic-body-width} + (#{$topic-body-width-padding} * 2) + #{$additional_post_width});
}

Первые две части суммы здесь взяты из стандартного SCSS Discourse.

Есть несколько небольших улучшений интерфейса, например, увеличен размер разделителей и постов с действиями модераторов. Также функция теперь отключена для постов DiscoTOC, так как здесь она ведёт себя странно.

Кроме того, я добавил опцию для увеличения максимальной ширины редактора, чтобы предпросмотр соответствовал ширине поста. Ширина не совсем одинаковая, но в стандартной версии есть та же проблема.

2 лайка
13

Очень здорово, @Alex_P. Было бы здорово, если бы вы могли адаптировать это для темы Material Design. Проблема в том, что аватар слева от сообщения перемещается с боковой позиции над самим сообщением.