Barra de Progresso

[Canapin (Coin-coin le Canapin)]

	Resumo	Adiciona uma barra de progresso ao seu site
	Prévia	\[todo\]
	Repositório	\u003chttps://github.com/Canapin/Discourse-progress-bar\u003e
	Guia de Instalação	Como instalar um tema ou componente de tema
	Novo nos Temas do Discourse?	Guia para iniciantes sobre como usar Temas do Discourse

Instalar este componente de tema

Barra de Progresso do Discourse

Descrição

Este componente adiciona uma barra de progresso a qualquer outlet disponível no seu site.

É melhor usado com scripts que atualizam o valor da barra de progresso automaticamente, fazendo uma requisição PUT para /admin/theme/[theme_component_ID]/setting com a carga {\"name\":\"current_value\",\"value\":\"[yourNewValue]\"}.

A barra de progresso é otimizada para caber nos seguintes outlets:

• above-main-container
• above-site-header
• before-header-panel
• below-site-header
• before-sidebar-sections

Caso de Uso

Este componente foi desenvolvido para exibir publicamente o progresso de doação em um fórum financiado pela comunidade.

Um script personalizado usou webhooks do Ko-fi para atualizar dinamicamente a barra de progresso para cada doação.

Ter uma barra de progresso se tornou um enorme incentivo para a comunidade doar.
Anteriormente, apenas um tópico fixado era usado, e a meta de doação era alcançada ao longo de vários meses.
Com a barra de progresso, a meta de doação foi alcançada em alguns dias nos últimos anos!

Esta barra de progresso pode obviamente ser usada para outros fins. Compartilhe para o que você a utiliza!

Capturas de Tela

Desktop

above-main-container

before-sidebar-sections

above-site-header

before-header-panel (apenas desktop)

below-site-header

Mobile

above-main-container e below-site-header

before-sidebar-sections

above-site-header

Configurações

Configuração	Descrição
content_before	Texto exibido acima da barra de progresso (HTML permitido). Padrão: \u003cstrong\u003eProgresso das doações\u003c/strong\u003e
content_after	Texto exibido abaixo da barra de progresso (HTML permitido). Padrão: vazio
progress_bar_width	Largura do contêiner da barra de progresso. Padrão: 50%
progress_bar_height	Altura da barra de progresso. Padrão: 10px
max_value	Valor máximo para a barra de progresso. Padrão: 300
current_value	Valor atual da barra de progresso. Padrão: 150
value_display	Formato de exibição do valor mostrado ao lado da barra de progresso. Placeholders disponíveis: {current}, {max}, {percentage}. Exemplos:\u003cbr\u003e{percentage}% mostra 33%.\u003cbr\u003e{current} de {max} patinhos de borracha mostra 9 de 15 patinhos de borracha. Padrão: {percentage}%
hide_when_full	Ocultar a barra de progresso quando estiver cheia. Padrão: false
outlet_name	Localização do site onde a barra de progresso é exibida. Outlets recomendados: above-main-container, above-site-header, before-header-panel, below-site-header, before-sidebar-sections. Padrão: above-main-container
display_on_mobile	Mostrar a barra de progresso em dispositivos móveis. Padrão: true
display_on_homepage	Mostrar a barra de progresso na página inicial. Padrão: true
url_must_contain	URLs onde a barra de progresso é exibida. Padrão: `/latest
progress_bar_color	Valor CSS de fundo válido. Exemplos:\u003cbr\u003e#FC0FC0\u003cbr\u003ergb(252,15,192)\u003cbr\u003evar(--tertiary)\u003cbr\u003elinear-gradient(0deg, white 0%, var(--tertiary) 100%)\u003cbr\u003eNota: se vazio, uma cor dinâmica é usada de vermelho (0%) a verde (100%). Padrão: var(--tertiary)

Agradecimentos

Agradecimentos a @Arkshine, por ajuda geral com o código e conselhos