Discourse Vincent theme

This post is a WIP

Beta testers needed for a new theme.


Theme repo:

GitHub - discourse/discourse-vincent-theme: v0.77

Compressed Screenshots:

will look much better on your screen, image compression cases artifacts / blur. Also, I will update the screenshots as the theme takes shape

Homepage

Composer

Topic page

Topic replies


Color schemes

Vincent Dark Blue

Vincent Dark Red

Vincent Dark Green

Vincent Dark Magenta

Vincent Dark Orange

Vincent Dark Teal


custom backgrounds

(these are samples only, you need to provide your own background images)


Installation:

Don’t forget to set the color scheme to one of the color schemes that come with the theme


The thin header is optional. If you want the thin header you need to add a theme component which you can find here:


This is a beta theme. Kindly report any issues in this post.

Feedback / suggestions welcome

42 лайка

У кого-то есть проблемы с созданием категорий? Каждый раз, когда я нажимаю на меню-гамбургер, под ним просто появляется «+», и меня никуда не перекидывает.

4 лайка

У меня то же самое поведение :frowning:

Я не заметил, так как давно не создавал новую категорию.

3 лайка

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

{{#if showCategoryAdmin}}
    {{categories-admin-dropdown
    onChange=(action "selectCategoryAdminDropdownAction")
  }}
{{/if}}

Мы исправим это очень скоро.

8 лайков

Вопрос от новичка, но где именно это нужно применить?

1 лайк

Я применил это, отредактировав секцию /head темы. Я заменил этот блок кода:

  {{#if showCategoryAdmin}}
    {{categories-admin-dropdown
      create=createCategory
      reorder=reorderCategories}}
  {{/if}}

на:

  {{#if showCategoryAdmin}}
      {{categories-admin-dropdown onChange=(action "selectCategoryAdminDropdownAction") }}
  {{/if}}

Однако необходимость вручную редактировать тему не является идеальным решением. Мы исправим это, чтобы изменение можно было внести, нажав кнопку «Обновить до последней версии» в теме.

5 лайков

Как я могу изменить основной цвет текста этой темы?

Также эта проблема всё ещё сохраняется:

Меню «Новое» и «Непрочитанное» должны быть невидимыми, если нет новых тем, как в оригинальной теме Discourse.

Эта работа всё ещё ведётся?

Да, у меня то же самое. Я исправил это, переключившись на другую тему, создав категорию, а затем вернувшись к теме Vincent.

Как получить доступ к дополнительным цветовым схемам, показанным в оригинальной теме? Я хочу переключиться на тёмно-зелёную, но в моих настройках доступна только схема Винсент Тёмная.

Поскольку эта тема была перемещена в #theme:broken-theme, скорее всего, данная тема больше не поддерживается. У меня есть набор правок, которые я использую на нашем форуме с помощью расширения для Chrome, так как решение Винсента работало достаточно хорошо само по себе, но у нас не было ресурсов для поддержки собственного форка. Они немного субъективны, вносят правки под личный вкус, не охватывают всё и могут быть немного устаревшими или предназначенными для исправления ошибок, которые уже официально исправлены, но, возможно, они будут полезны кому-то.

/************************************ 
Исправления и правки для мобильных устройств
************************************/

/* Исправить неправильные отступы */
.form-vertical, 
.user-main .about .primary,
.user-main .about .secondary,
.user-main .user-content {
    padding: 15px;
}

/* Исправить обрезку логотипа сайта в шапке снизу */
.d-header #site-logo {
    max-height: 2.6em;
}

/* Исправить сообщения о блокировке/скрытии разного размера, исправить загадочное пространство справа от тем каким-то образом */
.small-action {
    width: 100%;
}

/* Исправить центрирование вставок YouTube */
.lazyYT-container {
    margin: 12px 20px;
}

/* Исправить отступы в списке тем на планшетах */
#list-area .contents tbody td {
    padding: 10px 15px;
}

/************************************
Общие и специфичные для настольных ПК исправления и правки
************************************/

/* Исправить перезапись шрифта классом .font-helvetica для html */
html {
    font-family: "Assistant", sans-serif !important;
}

/* Квадратные цветные бейджи категорий */
span.badge-category-bg, span.badge-category-parent-bg, span.badge-category-parent-bg+.badge-category-bg {
    border-radius: 0;
}

.badge-wrapper.bullet .badge-category-parent-bg,
.badge-wrapper.bullet .badge-category-parent-bg+.badge-category-bg,
.extra-info-wrapper .badge-wrapper.bullet .badge-category-parent-bg {
    width: 4px;
    min-width: 4px;
}

span.badge-category-parent-bg {
    border-right: 1px solid rgba(0,0,0,0.2);
}

span.badge-category-parent-bg+.badge-category-bg {
    border-left: 1px solid rgba(0,0,0,0.2);
}

/* Исправить слишком узкие темы и странное выравнивание с элементами управления внизу страницы */
.topic-post {
    max-width: 758px;
}

.topic-post .embedded-posts {
    width: 758px;
}

#topic-title .title-wrapper {
    margin-left: 0;
    margin-right: 0;
    width: 758px;
}

#topic-title, .posts-wrapper {
    margin: 0;
    width: 758px;
}

html.desktop-view.not-mobile-device .topic-body {
    max-width: 758px;
}

.topic-body {
    width: 100%;
}

/* Исправить плохую контрастность меток сортировки в списке тем, когда виден баннер новой темы */
.show-more.has-topics .alert {
    background: rgba(40,42,49,1);
}

.alert.alert-info {
    background: rgba(19,20,24,1);
}

/* Сделать блоки кода лучше сочетающимися */
p>code, li>code, pre>code {
    background: rgba(255,255,255,0.09);
}

/* Исправить отсутствие отступов у вставок YouTube */
.lazyYT.lazyYT-container {
    width: 100% !important;
}

/* Исправить то, что цветные линии слева категорий не доходят до низа контейнера категории */
.category-list tbody .category {
    display: table-cell;
}

/* Улучшенная компоновка подкатегорий (только для настольных ПК) */
.not-mobile-device .category-list .subcategories {
    display: flex;
    flex-direction: column;
}

.not-mobile-device .category-list .subcategories .subcategory .badge.new-posts {
    display: inline-block;
    margin: 0 5px;
}

.not-mobile-device .category-list .subcategories .subcategory {
    height: 21px;
    align-items: center;
}

/* Подсветка закрепленных постов */
.topic-list-item.pinned  {
    background: rgba(200,200,255,0.06);
}

.topic-list tbody tr:nth-of-type(even).pinned {
    background: rgba(200,200,255,0.04);
}

/* Улучшенный внешний вид и контрастность для отключенной кнопки «Новая тема» */

.list-controls #create-topic[disabled],
.list-controls #create-topic.disabled {
    background-color: rgba(255,255,255,0.04);
    color: #888
}

.list-controls #create-topic[disabled]:hover,
.list-controls #create-topic.disabled:hover {
    background-color: rgba(255,255,255,0.06);
}

.list-controls #create-topic[disabled] svg,
.list-controls #create-topic.disabled svg {
    color: inherit;
}

/* Увеличенный межбуквенный интервал для лучшей читаемости */
* {
    letter-spacing: 0.2px;
}

/* Увеличенный размер шрифта для лучшей читаемости */
a {
    font-size: 95%; /* тема устанавливает 90% */
}

.search-link .blurb {
    font-size: 1em;
}

/* Исправить неверно окрашенный интерфейс на странице поиска */
.search-container .search-advanced-sidebar .search-advanced-title,
.search-container .search-advanced-sidebar .search-advanced-filters {
    background: rgba(255,255,255,0.04);
}

.search-container .search-advanced-sidebar .search-advanced-title.btn {
    background: rgba(255,255,255,0.04);
}

.search-advanced-options {
    background: rgba(0,0,0,0.3);
    margin-bottom: 10px;
}

/* Исправить плавающую рамку вокруг редактора для био профиля */
.user-preferences .bio-composer {
    border: none;
}

/* Исправить выход кнопки сворачивания за пределы рамки на странице профиля */
.user-main .about .details .primary,
.user-main .about.collapsed-info .details .primary {
    width: auto;
}

/* Исправить размер уведомления о посте и цвет границы */
.post-notice {
    width: calc(100% - 1.6em);
    border-top: none;
}

/* Исправить размер контейнера ссылок на посты */
.post-links-container {
    margin-left: 0;
}

/* Исправить то, что полоса прокрутки био находится не справа */
.user-main .about .details .primary .bio {
    max-width: none;
}

/* Подсветка ссылок на категории */
.category-list .subcategories .subcategory .badge-wrapper:hover .category-name {
    color: white;
}

.category-list .subcategories .subcategory .badge-wrapper .category-name {
    transition: color 0.3s;
}

/* Исправить разделение скрытых постов по горизонтали ссылкой разблокировки */
.post-hidden {
    position: relative;
}

.post-hidden .expand-hidden {
    position: absolute;
    top: 36px;
    left: 0;
    z-index: 1;
}

.post-hidden .post-menu-area,
.post-hidden .expand-hidden {
    opacity: 0.5;
}
}
3 лайка

С удовольствием попробую, когда это исправят.

1 лайк

Одна из самых красивых тем. :heart_eyes:

Почему вы прекратили разработку темы, @Johani? Я могу помочь с суммой денег, если вы или кто-то другой сможет продолжить работу ради всех нас.

11 лайков

К сведению, мы обнаружили недавнюю проблему с отображением, которая проявляется при использовании этой темы: Hosted: Message body resizing while scrolling.

Я вижу, что в репозиторий темы были внесены коммиты 21 день назад, поэтому, по-моему, она всё ещё поддерживается: Commits · discourse/discourse-vincent-theme · GitHub.

3 лайка


Есть ли какое-то решение этой проблемы?

2 лайка

Я знаю, что это сообщение написано с опозданием в несколько месяцев, но…

В настоящее время я использую свой собственный форк проекта, в котором эти проблемы отсутствуют. Однако, если вам нужно простое решение на CSS, у меня всё ещё есть некоторые из моих старых исправлений.

Вот несколько из них, которые могут оказаться для вас полезными:

/* Исправляет избыточный отступ в верхней части страницы.
 * ПРИМЕЧАНИЕ: Это должно убрать большой зазор между содержимым вашей страницы и её верхом.
 */
#main-outlet {
    padding-top: 1.8em;
}

/* Блок .wrap должен быть отцентрован и занимать определённую ширину экрана.
 * ПРИМЕЧАНИЕ: Это конкретное правило может помочь исправить проблему с макетом тем/сообщений!
 */
.wrap {
    max-width: 1110px;
    /* max-width: 60vw;*/
}

/* Исправляет проблемы с макетом списка категорий.
 * ПРИМЕЧАНИЕ: Существуют гораздо лучшие способы решения этой задачи.
 */
#topic-footer-buttons, .top-title-buttons, .user-badge, #user-card.show-badges .more-user-badges, .category-list tbody .category, .nav-pills>li, .layouts-nav-button>li {
    display: revert;
}
.nav-pills>li {
    display: flex;
}

/* Делает жирный текст действительно жирным.
 * ПРИМЕЧАНИЕ: Альтернативно, можно изменить значение font-weight по умолчанию для темы на 400.
 * В оригинальном проекте оно установлено на 300 как значение по умолчанию для всего, из-за чего жирный/сильно выделенный текст использует значение около 400, так как для него установлено "bolder".
 * На большинстве шрифтов это буквально неотличимо от 300.
 */
b, strong {
    font-weight: 700;
}

/* Убирает отступ у контейнера для внутренних перекрёстных ссылок, перечисленных под сообщениями. */
.post-links-container {
    margin-left: 0;
}

/* Улучшает дизайн текста «последний визит» в списке тем. */
.topic-list .topic-list-item-separator .topic-list-data span {
    color: var(--primary);
    border: 1px solid var(--secondary-very-high);
    font-weight: bold;
}
.topic-list .topic-list-item-separator .topic-list-data span {
    background-color: var(--secondary);
}

/* Улучшает дизайн текста «последний визит» в сообщении темы. */
.small-action.topic-post-visited .topic-post-visited-line {
    border-bottom: none;
}
.small-action.topic-post-visited .topic-post-visited-line .topic-post-visited-message {
    color: var(--primary);
    border: none;
    font-weight: bold;
}
.small-action.topic-post-visited .topic-post-visited-line .topic-post-visited-message {
    background-color: transparent;
}
4 лайка

Тема Vincent работает некорректно на мобильных устройствах при её использовании.


Также по какой-то причине у неё отсутствует выбор темы:

Для сравнения с другой темой:

1 лайк

Похоже, это только ухудшило ситуацию.

2 лайка

Эта тема в настоящее время помечена как broken, поэтому она, скорее всего, не будет совместима с последними версиями или компонентами тем.

3 лайка

Очень жаль, эта тема была отличной, когда работала.

2 лайка

Как-то это работало у меня так же, как всегда (с тем CSS, который был опубликован выше в теме и исправлял границы), пока я сегодня не увидел глупо новый апдейт…

Теперь выводится ошибка:

Error: @use rules must be written before any other rules. ╷ 4 │ @use "sass:math"; │ ^^^^^^^^^^^^^^^^ ╵ /var/www/discourse/common.scss 4:1 root stylesheet

И всё теперь полностью, совершенно сломано, ха-ха.

Если ваша установка до сих пор работала, как моя, то исправить это легко. Скачайте тему с GitHub, откройте common.css и измените

// functions  --------------------------------------------------------------------------------

// Calculate brightness value
@use "sass:math";

@function brightness($color) {
  @return math.div(red($color) + green($color) + blue($color), 255 * 3);
}

// to base color

(это новое изменение, которое всё сломало) на то, как было раньше, ниже:

// functions  --------------------------------------------------------------------------------

// Calculate brightness value
@function brightness($color) {
  @return (red($color) + green($color) + blue($color)) / (255 * 3);
}

// to base color

Это то, что там было. Затем заархивируйте и загрузите на свой сайт, используя свою собственную новую установку. Или попробуйте исправить то, что он сломал, чтобы понять, что он пытался сделать.

Имейте в виду, что это загрузит тему как совершенно новую, и она больше не будет связана с GitHub, если появятся будущие обновления. Поэтому, возможно, стоит сохранить оригинальную установку (неактивную) на случай, если проблему исправят или поддержка возобновится. С другой стороны, самостоятельная установка позволяет вам исправлять или изменять то, что вы хотите, поскольку тема больше не поддерживается активно.

3 лайка