Компактный стиль сообщений

Здравствуйте,

Стиль сообщений по умолчанию в Discourse от 2022-01-01, на мой взгляд, слишком громоздкий, отвлекающий и неэкономный в использовании пространства. Предлагаю два исправления:

  1. Элементы управления сообщениями можно разместить более компактно и аккуратно — посмотрите на мой эскиз; мне больше всего нравятся варианты дизайна v2 и v4.
  2. Допустим, для мобильных устройств некоторые кнопки должны отображаться всегда, например: [Лайки, Изменить, Ответить, …ещё], но для настольных версий (Windows/Mac/Linux) можно всегда показывать только [Лайки, Изменить], а остальные элементы управления — только при наведении курсора мыши на каждое сообщение.

PS Перемещение кнопки «Лайки» в другую часть сообщения (очень-очень далеко :smiley:) — это осознанное решение. Это значительно снизит количество бессмысленных лайков: «лайки просто так», «лайки за смайлик», «лайки за шутку», «лайки за «вау, я снова тебя вижу»», «лайки из-за хорошего настроения» и т. д. — тех самых немотивированных лайков, которые сейчас ставятся слишком часто без реального смысла.

Кто-нибудь может помочь создать такой стиль, пожалуйста?

1 лайк

Привет, @GVG!
У меня есть несколько идей, как решить вашу проблему:

FAQ

1. Первоначальное решение

  • Вы можете изменить стиль Discourse с помощью пользовательских стилей (userstyles).

2. Зачем использовать пользовательские стили?

  • «Настройте любой веб-сайт так, чтобы он выглядел и ощущался именно так, как вы хотите». — https://userstyles.org/

3. Как это может решить мою проблему?

  • Вы можете применить CSS-стиль, чтобы сделать это сообщение компактным в Discourse.

4. Плюсы?

  • Уже существуют пользовательские стили для компактных сообщений, которые можно адаптировать для Discourse, если вы захотите.
  • Userstyles просты в использовании и внедрении.
  • Если эта идея окажется привлекательной и жизнеспособной, возможно, Discourse примет этот стиль в качестве официального.
  • Это работает прямо в браузере, и вы можете поделиться этим стилем с другими.

5. Минусы?

  • Если вы отключите визуальный стиль, компактное сообщение исчезнет.
  • Для манипулирования сайтом требуются знания CSS и JavaScript.

6. Идея? Мое мнение?

  • Я думаю, что вашу идею можно реализовать с помощью userstyles или создания собственной темы для Discourse.

7. Есть ли у вас менее сложные идеи?

  • Создайте тему и настройте её под свои нужды, например, добавив идею компактного сообщения.

8. Ссылки?

Без необходимости перемещать иконки и меню (к тому же на ваших скриншотах не показаны другие элементы, такие как количество правок, упоминание того, кому мы ответили, и т. д.), вы можете начать с работы над отступами:

По умолчанию:

.post-menu-area {
    margin: 20px 0;
}

Настройка:

.post-menu-area {
    margin: 0;
}

Сравнение:

Перемещение иконок и кнопок действий не всегда тривиально и может потребовать более глубокой доработки.

2 лайка

@Canapin, что ты думаешь о моей идее пользовательских стилей? Ты считаешь, что это плохо? Хороша ли эта идея?

  • Я хотел бы узнать твоё мнение, потому что с помощью этого кода мы можем создать пользовательские стили для Discourse.

Userstyles работают только на стороне клиента и обычно для конкретного сайта (я использую userstyles и создавал некоторые из них).

Если кто-то хочет предложить улучшения общего внешнего вида Discourse, любое предложение можно оставить в канале ux. Если никто не создаст компонент темы или не включит желаемые изменения в сам Discourse, любой пользователь, полагаю, может найти своё решение: будь то компонент темы (если он администратор) или решение на стороне клиента (если нет), с использованием собственного CSS через любой браузерный плагин, который ему по душе.

Но в таком случае это уже, пожалуй, не совсем обсуждение, ориентированное на Discourse.


@GVG, посмотрите, пожалуйста, на связанное обсуждение, оно может вас заинтересовать:

2 лайка

НЕТ, ваше сообщение выглядит как классическая спам-реклама вашего веб-сервиса.

Спасибо, но: а) уменьшить отступы я могу и сам; б) этого НЕ достаточно, потому что эти активные элементы тратят и создают слишком много места. Поэтому главная цель — переместить кнопки управления сообщением из их текущего места в другое, где они будут занимать гораздо меньше пространства.

@GVG

НЕТ, ваше сообщение выглядит как классический спам-реклама вашего веб-сервиса.

    1. извините :frowning: моя цель заключалась в том, чтобы выполнить пользовательские настройки клиентской части Discourse с помощью userstyles — это сработало бы, если вам не нужно создавать тему. Я думаю, что ваша идея очень верна — я просто хотел помочь вам с MVP (минимально жизнеспособным продуктом) — хотел, чтобы все ощутили пользовательский опыт с помощью userstyles, не обязательно разрабатывая какой-либо плагин или тему.
    1. Я рассматривал это как то, что я часто делаю на многих сайтах, когда хочу выполнить кастомизацию.
    1. Ссылки, которые они опубликовали, были ссылками на то, что я изучал и читал.
    1. Если это вам не помогло, приношу извинения. Я ошибся.

@Canapin

  1. Я нашел ваши слова очень интересными, но:
  • моя цель заключалась в том, чтобы внести некоторые клиентские настройки в Discourse с помощью пользовательских стилей (userstyles) — это сработало бы, если вам не нужно создавать тему.
  • я просто хотел помочь с MVP (минимально жизнеспособным продуктом) — хотел, чтобы все оценили пользовательский опыт с помощью пользовательских стилей, не обязательно разрабатывая плагин или тему.
  • например, есть репозиторий под названием refined-github, где публикуются улучшения для GitHub — даже есть браузерное расширение для реализации этого.
    1. Моя идея была бы похожа на этот репозиторий. Возможно, мы могли бы создать refined-discourse — файл userstyles.css, содержащий различные визуальные улучшения в формате MVP. Тогда сообщество сможет увидеть, что лучше всего работает и что имеет смысл.
    2. Это было бы действительно круто: видеть необходимые изменения, даже не обязательно реализуя или создавая тему или плагин.
    3. Я подумал об этом, поскольку идея компактных сообщений мне очень понравилась. Я подумал, что это можно настроить с помощью пользовательских стилей — это был бы простой способ.
    4. Это то, что я называю «экспериментом Волшебника страны Оз». Вам не нужно тратить много времени на разработку идеи, если вы создадите файл userstyles.css.
    • Эксперимент Волшебника страны Оз: В области взаимодействия человека с компьютером эксперимент Волшебника страны Оз — это исследовательский эксперимент, в котором испытуемые взаимодействуют с компьютерной системой, которую они считают автономной, но которая на самом деле управляется или частично управляется невидимым человеком.
      • Люди могли бы увидеть улучшенный UX/UI, не имея темы или плагина.
      • Для тех, кто использует пользовательские стили, это может показаться темой или плагином, но на самом деле это не так.
      • это выглядит как идея для MVP (минимально жизнеспособного продукта).
  1. Это плохая идея?
  • это был последний вопрос: можете ли вы согласиться с моим мнением или точкой зрения по этому поводу.
  • хочу получить больше обратной связи ;D

Ссылки

Думали ли вы о том, как это будет работать для более длинных постов? Тогда вы прочитаете его, а чтобы поставить лайк, придётся прокрутить вверх, а затем снова вниз, чтобы прочитать следующий пост.

2 лайка

Логически согласен, это хороший контраргумент, но не очень удачный, потому что:

  • Больше всего мне нравится стиль v4, когда элементы управления сообщением появляются справа от поста, так что по вертикали их можно разместить «как можно ниже — в конце сообщения и у нижнего края экрана». Панель управления даже может динамически перемещаться по вертикали к каждому сообщению, приближаясь к текущему положению курсора мыши! :wink: Так что это не проблема.
  • Большинство пользователей, которые пишут и читают большие посты, для ответов используют точные цитаты текста или всегда могут ответить на тему в целом — поэтому кнопка «Ответить» не очень необходима.
  • Как я уже говорил ранее про «для мобильных» — из-за отсутствия свободного места справа и наличия сенсорных экранов основные кнопки управления всё равно должны отображаться всегда и в стандартных местах — похоже, это лучший дизайн для узких вертикальных мобильных экранов.
  • Вы всегда можете предпочесть v3, где основные элементы управления сообщением остаются внизу или что-то подобное.

Так что, если вы предпочитаете оставить элементы управления сообщением внизу — это нормально, но я всё же прошу помочь минимизировать всё свободное вертикальное пространство над и под ними, а также отображать элементы управления (кроме Лайк/Редактировать) только при наведении курсора мыши (для настольных компьютеров).

1 лайк

Не нужно никаких сторонних инструментов для настройки Discourse без лишних хлопот.

Вы можете сделать это здесь: https://theme-creator.discourse.org/. Именно для этого этот инструмент и создан.

Вы можете создавать темы из меню своего профиля: https://theme-creator.discourse.org/my/themes

Все элементы оформления форума описаны здесь: https://theme-creator.discourse.org/styleguide/

А для стиля самих постов: https://theme-creator.discourse.org/styleguide/organisms/post

Изменения CSS в ваших новых темах применяются в реальном времени, перезагружать страницы не нужно.

Подробнее:


Можете уточнить? Вы просите нас проявить креативность и предложить другие идеи или написать для вас CSS?

2 лайка