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 curtidas

Alguém está com problemas ao criar Categorias? Toda vez que clico no menu hambúrguer, apenas um “+” é adicionado abaixo e não me leva a lugar nenhum.

4 curtidas

Mesmo comportamento aqui :frowning:

Eu não tinha notado, pois não criei uma nova categoria há um tempo.

3 curtidas

Acabei de testar isso e estou enfrentando o mesmo problema. Parece que o código usado para criar o menu suspenso de administração de categorias mudou no Discourse. Atualizar o tema para usar o seguinte código ao criar o menu suspenso parece resolver o problema:

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

Vamos corrigir isso muito em breve.

8 curtidas

Pergunta de iniciante, mas onde eu aplicaria isso?

1 curtida

Eu apliquei editando a seção /head do tema. Substituí este bloco de código:

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

por:

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

No entanto, ter que editar o tema manualmente não é o ideal. Vamos corrigir isso para que a alteração possa ser feita clicando no botão “Atualizar para a versão mais recente” do tema.

5 curtidas

Como posso alterar a cor do texto principal deste tema?

Além disso, este problema ainda persiste:

Os menus ‘‘novo’’ e ‘‘não lido’’ devem permanecer invisíveis, a menos que haja um novo tópico, como ocorre no tema original do Discourse.

Ainda está em andamento?

Sim, o mesmo para mim. Eu corrigi alternando para um tema diferente, criando a categoria e depois voltando ao tema Vincent.

Como faço para acessar os esquemas de cores extras mostrados na discussão original? Quero mudar para o Dark Green, mas só vejo o Vincent Dark disponível nas minhas configurações.

Como este tópico foi movido para #theme:broken-theme, parece provável que este tema não esteja mais sendo mantido. Tenho um conjunto de ajustes que uso em nosso fórum com uma extensão do Chrome, já que o vincent funcionava bem por conta própria, mas não tínhamos recursos para manter nosso próprio fork. Eles são um pouco opinativos, fazem ajustes para gosto pessoal, não cobrem tudo e podem estar um pouco desatualizados ou destinados a corrigir bugs que já foram corrigidos oficialmente, mas talvez sejam úteis para alguém.

/************************************ 
Correções e ajustes específicos para mobile
************************************/

/* Corrigir espaçamento interno inadequado */
.form-vertical, 
.user-main .about .primary,
.user-main .about .secondary,
.user-main .user-content {
    padding: 15px;
}

/* Corrigir logotipo do cabeçalho cortado na parte inferior */
.d-header #site-logo {
    max-height: 2.6em;
}

/* Corrigir mensagens de bloqueio/ocultação com tamanhos inconsistentes, corrigir espaço misterioso no lado direito dos tópicos de alguma forma */
.small-action {
    width: 100%;
}

/* Corrigir incorporações do YouTube não centralizadas */
.lazyYT-container {
    margin: 12px 20px;
}

/* Corrigir espaçamento interno da lista de tópicos em tablets */
#list-area .contents tbody td {
    padding: 10px 15px;
}

/************************************
Correções e ajustes genéricos e específicos para desktop 
************************************/

/* Corrigir fonte sendo sobrescrita por .font-helvetica em html */
html {
    font-family: "Assistant", sans-serif !important;
}

/* Emblemas de categoria quadrados */
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);
}

/* Corrigir tópicos muito estreitos e alinhamento estranho com controles na parte inferior da página */
.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%;
}

/* Corrigir contraste ruim nos rótulos de classificação da lista de tópicos quando o banner de novo tópico está visível */
.show-more.has-topics .alert {
    background: rgba(40,42,49,1);
}

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

/* Fazer blocos de código se integrarem melhor */
p>code, li>code, pre>code {
    background: rgba(255,255,255,0.09);
}

/* Corrigir incorporações do YouTube sem espaçamento interno */
.lazyYT.lazyYT-container {
    width: 100% !important;
}

/* Corrigir linhas coloridas à esquerda da categoria que não chegam ao fundo do contêiner da categoria */
.category-list tbody .category {
    display: table-cell;
}

/* Melhor layout de subcategorias (apenas desktop) */
.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;
}

/* Destacar posts fixados */
.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);
}

/* Melhor aparência e contraste no botão Novo Tópico desabilitado */

.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;
}

/* Espaçamento entre letras maior para melhor legibilidade */
* {
    letter-spacing: 0.2px;
}

/* Fontes maiores para melhor legibilidade */
a {
    font-size: 95%; /* o tema define 90% */
}

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

/* Corrigir UI com cores erradas na página de pesquisa */
.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;
}

/* Corrigir borda flutuante ao redor do editor para biografia do perfil */
.user-preferences .bio-composer {
    border: none;
}

/* Corrigir botão de colapso saindo do quadro na página de perfil */
.user-main .about .details .primary,
.user-main .about.collapsed-info .details .primary {
    width: auto;
}

/* Corrigir tamanho e cor da borda da nota do post */
.post-notice {
    width: calc(100% - 1.6em);
    border-top: none;
}

/* Corrigir tamanho do contêiner de links do post */
.post-links-container {
    margin-left: 0;
}

/* Corrigir barra de rolagem da biografia não estando à direita */
.user-main .about .details .primary .bio {
    max-width: none;
}

/* Destaque de link de categoria */
.category-list .subcategories .subcategory .badge-wrapper:hover .category-name {
    color: white;
}

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

/* Corrigir posts ocultos sendo divididos horizontalmente pelo link de mostrar */
.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 curtidas

Adoraria experimentar isso quando for corrigido.

1 curtida

Um dos temas mais bonitos. :heart_eyes:

Por que você parou de desenvolver o tema, @Johani? Posso ajudar com uma quantia em dinheiro se você ou outra pessoa puder continuar o trabalho para todos nós.

11 curtidas

Para sua informação, encontramos um problema de exibição recente que se manifestou usando este tema: Hosted: Message body resizing while scrolling.

Vejo que houve commits enviados para o repositório do tema há 21 dias, então acho que ele ainda está sendo mantido: Commits · discourse/discourse-vincent-theme · GitHub.

3 curtidas


Existe alguma solução para isso?

2 curtidas

Sei que isso está atrasado alguns meses, mas…

Hoje em dia, uso meu próprio fork do projeto que não sofre desses problemas. Mas se você quiser uma solução CSS simples, ainda tenho algumas das minhas correções antigas.

Aqui estão algumas que você pode achar relevantes:

/* Corrige o preenchimento excessivo no topo da página.
 * NOTA: Isso deve remover o grande espaço entre o conteúdo da sua página e o topo da página.
 */
#main-outlet {
    padding-top: 1.8em;
}

/* O wrap deve ser centralizado e ocupar apenas uma certa largura da tela.
 * NOTA: Este em específico pode ajudar a corrigir o problema de layout do seu tópico/posts!
 */
.wrap {
    max-width: 1110px;
    /* max-width: 60vw;*/
}

/* Corrige problemas com o layout da lista de Categorias.
 * NOTA: Existem maneiras muito melhores de fazer isso.
 */
#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;
}

/* Torna o texto em negrito realmente em negrito.
 * NOTA: Alternativamente, mude o font-weight padrão para o tema para 400.
 * O projeto original o define como 300 como o peso padrão usado por tudo, o que faz com que o texto em negrito/forte use algo como 400, pois são definidos como "mais forte".
 * Na maioria das fontes, isso é literalmente indistinguível de 300.
 */
b, strong {
    font-weight: 700;
}

/* Remove a margem do contêiner para links cruzados internos listados sob os posts. */
.post-links-container {
    margin-left: 0;
}

/* Melhora o design do texto "última visita" na lista de tópicos. */
.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);
}

/* Melhora o design do texto "última visita" no post do tópico. */
.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 curtidas

O tema Vincent apresenta bugs no celular quando usado.


Ele também não tem um seletor de tema por algum motivo:

Comparado a um tema diferente:

1 curtida

Parece que isso piorou as coisas.

2 curtidas

Este tema está atualmente marcado como broken, portanto, provavelmente não será compatível com as versões mais recentes ou componentes de tema.

3 curtidas

Definitivamente triste, este foi um ótimo tema quando funcionava.

2 curtidas

De alguma forma, isso estava funcionando como sempre (com aquele CSS postado anteriormente no tópico que corrigiu as bordas) para mim até que, estupidamente, vi uma nova atualização hoje…

Agora diz que há um erro

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

E está COMPLETAMENTE quebrado agora, lol.

Se sua instalação ainda estava funcionando como a minha, é fácil de consertar. Baixe o tema do github, abra common.css e mude

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

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

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

// to base color

(Esta é a nova mudança que o quebrou) para como costumava ser abaixo

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

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

// to base color

Que é o que tinha, depois comprima e carregue em seu site e use sua própria nova instalação. Ou tente consertar o que ele quebrou para ver o que ele estava tentando fazer.

Lembre-se de que isso carregará como um tema totalmente novo e não estará mais vinculado ao github se houver futuras atualizações, portanto, você pode querer manter a instalação original (não selecionável) caso seja corrigida/o suporte seja retomado. Por outro lado, instalá-lo você mesmo permite que você corrija ou altere o que quiser, já que não é mais gerenciado ativamente.

3 curtidas