Rodapé responsivo fácil

[Discourse]

	Resumo	Easy Responsive Footer permitirá que você crie um rodapé totalmente responsivo usando apenas texto simples.
	Pré-visualização	Pré-visualizar no Discourse Theme Creator
	Link do Repositório	https://github.com/discourse/Discourse-easy-footer
	Novo em Temas do Discourse?	Guia para iniciantes sobre o uso de Temas do Discourse

Instale este componente de tema

Como este é um #componente de tema #oficial mantido pela equipe do Discourse, solicitações de #suporte, Contribute > Bug, Contribute > UX e Contribute > Feature podem ser feitas nas respectivas categorias aqui no Meta, e devem ser marcadas com a tag apropriada do componente de tema. Clique em um link abaixo para iniciar uma.

 Suporte  Bug  UX  Recurso

Recursos

Desktop

Mobile

Configurações

Nome	Descrição
heading	Texto para o cabeçalho no rodapé — você pode usar o nome do seu site, por exemplo — Comprimento máximo: 25 caracteres
blurb	Insira um breve resumo sobre sua comunidade — Comprimento máximo: 180 caracteres
sections	Seções a serem exibidas no rodapé
small links	Links pequenos na parte inferior do rodapé, como Termos de Serviço e Privacidade
social links	Links sociais que você deseja adicionar ao rodapé
show footer on login required page	Marque esta configuração se quiser que o rodapé seja exibido na página que exige login (aplica-se apenas se seu site for privado)
svg icons	Lista de ícones do FontAwesome 7 usados na configuração de links sociais acima.

Existem seis configurações neste componente que ajudarão a configurá-lo facilmente

1. Cabeçalho

Texto para o cabeçalho no rodapé — você pode usar o nome do seu site, por exemplo — Comprimento máximo: 25 caracteres

2. Resumo

Um breve resumo sobre sua comunidade — Comprimento máximo: 180 caracteres

3. Seções de links

Adicione seções de links. O número ideal de seções é seis. Um item por linha nesta ordem: Texto, título
Texto: o que aparece no rodapé
Título: o texto que aparece quando o item é passado com o mouse.

4. Links

Adicione links às seções de links. Um item por linha nesta ordem:
Pai, texto, URL, alvo, título
É uma boa ideia manter o número de links em cada seção semelhante
Pai: o nome da seção pai sob a qual este link aparece. Use o valor texto da lista acima
Texto: o texto que aparece para este link
URL: o caminho para o qual este item aponta. Você pode usar caminhos relativos também.
Alvo: Escolha se este item será aberto em uma nova aba ou na mesma aba. Use vazio para abrir o link em uma nova aba, ou use self para abri-lo na mesma aba.
Título: o texto que aparece quando o link é passado com o mouse.

5. Links pequenos

Você pode adicionar links pequenos na parte inferior do rodapé, como Termos de Serviço e Privacidade. Um item por linha nesta ordem:
Texto, URL, alvo
Texto: O texto que aparece para o link pequeno
URL: O caminho do link
Alvo: Use vazio para abrir o link em uma nova aba e use self para abri-lo na mesma aba

6. Links sociais

Insira os links sociais que você deseja adicionar ao rodapé neste formato:
provedor, título, URL, alvo
Provedor: é o nome do provedor, como Facebook ou Twitter
Título: O texto que aparece quando o link é passado com o mouse
URL: O caminho que você deseja que o link tenha
Alvo: Use vazio para abrir o link em uma nova aba e use self para abri-lo na mesma aba

Observações

1. Deixei os itens de espaço reservado como padrões para o componente, para que você possa ver facilmente como suas configurações devem parecer.

2. Este componente usará o esquema de cores do seu tema para gerar as cores usadas nos elementos nele. Mas todos os elementos têm classes exclusivas adicionadas a eles, caso você queira substituir algo.

3. Como este componente usa configurações de tema, significa que posso atualizá-lo no futuro para corrigi-lo ou melhorá-lo, e os dados que você inserir não serão perdidos

Hospedado por nós? Componentes de tema estão disponíveis para uso em nossos planos Pro, Business e Enterprise.

[Johani (Joe)]

Empurrei algumas correções.

Principais alterações:

• o componente agora usa variáveis CSS, tornando-o compatível com o modo escuro

• algumas correções nas media queries para resolver o bug relatado por @mbauman

• adicionei uma configuração que permite controlar se o rodapé deve ser exibido ou não em páginas que exigem login

  

https://github.com/discourse/Discourse-easy-footer/commit/a694b1ba8e31d5b24b2d0fd8e2b6190bf987527b

@rolando

Aumentei a largura do meu .wrap (1200px) com media queries para que, após uma certa resolução, o fórum fique mais largo. Se eu ativo o rodapé responsivo, o .wrap fica mais estreito (1100px), mas apenas na “parte do quadro” e não no .d-header .wrap nem no .footer, que permanecem em (1200px). Assim que desativo o rodapé responsivo, tudo fica mais largo (1200px) como pretendido.

A causa aqui é a especificidade do CSS. Seu CSS tem como alvo .wrap e funciona, mas este componente também possui CSS que tem como alvo #main-outlet e adiciona algumas propriedades a ele para manter o rodapé no final, mesmo em páginas curtas.

Discourse-easy-footer/common/common.scss at main · discourse/Discourse-easy-footer · GitHub

O seletor #main-outlet é mais específico que o seu seletor .wrap — porque é baseado em ID, então ele sobrescreve seus estilos.

Você pode corrigir isso adicionando este CSS:

#main {
  #main-outlet {
    width: 1200px; // ou qualquer largura que você queira usar
  }
}

@Edward_Legaspi

Olá. Existe uma maneira de limitar o número de colunas do rodapé a 3?

Claro, remova todas as colunas extras que você não precisa nas configurações e você terá três colunas.

@PoojaPatel

Após a atualização, estou recebendo um erro no console do Chrome como abaixo.

Não consegui reproduzir esse problema, mas o erro sugere que suas configurações estão incorretas. Pode verificar novamente e garantir que você seguiu as instruções abaixo de cada configuração? Se o seu problema persistir, pode compartilhar um link para o site onde você está vendo o problema?

---

Fiz uma pequena limpeza e excluí as respostas para bugs que serão corrigidos assim que você atualizar o componente. Se o seu problema persistir, sinta-se à vontade para postar sobre isso novamente.

[dadberg (Interstellar)]

Será que o texto do cabeçalho (This is a header) dentro do [Easy Footer Theme Component by Joe] pode ser substituído por um logotipo?

Tentei exportar o componente para alterar os arquivos hbs, mas não consegui. Acho que preciso de algumas dicas.

Qualquer insight será muito apreciado

[dax (Daniela)]

Dependendo do que você deseja fazer, você pode simplesmente tentar algo como isto:

• nas configurações do tema Easy responsive footer, exclua o texto dentro da configuração Blurb. Se desejar, você pode até excluir o texto dentro da configuração Heading.

• crie um novo componente de tema e adicione na aba Common > CSS

  .custom-footer .first-box .blurb::before {
      background-image: url(LOGO-URL);
      background-repeat: no-repeat;
      display: inline-block;
      content: "";
      /*altere as configurações abaixo com base no tamanho do seu logotipo*/
      background-size: 200px 200px;
      width: 200px;
      height: 200px;
  }
  

e o resultado será algo como isto:

[dadberg (Interstellar)]

Resolvido!

Minha crença no ecossistema de código aberto foi inicialmente fortalecida por pessoas incríveis como você.

[Jcava5 (John)]

Deveria haver uma opção para personalizar as cores do fundo e do texto com CSS. Por padrão, não combina com o cabeçalho.

Do contrário, funciona muito bem! Obrigado!

[thaidb]

Olá, Joe, podemos adicionar mais um widget aqui mesmo?

[b481]

Isso resultou na exibição do logotipo no ::before da blurb nos resultados da busca, mesmo após eu especificar isso no componente

div.below-footer-outlet.custom-footer.ember-view > div.wrap > div.flexbox > div.first-box > .blurb::before {
    background-image: url(image url);
}

Existe alguma maneira de garantir que ele não apareça nos resultados da busca, mas continue aparecendo no rodapé?

[littleviolette]

Obrigado pelo rodapé incrível! Tenho tido problemas para exibir o logotipo do TikTok do Font Awesome. Tentei adicionar fab-tiktok, fa-tiktok, fas-tiktok e tiktok nas configurações de ícones SVG, mas nenhum deles exibe o logotipo do TikTok.

Obrigado pela sua ajuda!

[bekircem]

Quero alterar o limite de 25 caracteres para o título. Vou posicionar o título com CSS. Qual é a maneira mais fácil de fazer isso?

[keegan (Keegan George)]

@bekircem
Vai além do limite de caracteres pode quebrar algumas coisas, mas você pode tentar:

.custom-footer .first-box .heading {
   visibility: hidden;
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
}

Usar visibility: hidden, no entanto, ainda manterá o espaço em branco. No entanto, dependendo do tamanho do seu título, você pode tentar fazer isso em vez disso:

.custom-footer .first-box .heading {
   visibility: hidden;
   position: relative; 
}

.custom-footer .first-box .heading::after {
   content: "This is something that is longer than 25 characters";
   visibility: visible;
   display: block;
   position: absolute;
   top: 0;
}

[bekircem]

É possível adicionar textos a seções de link sem o atributo href?

[IAmGav (Gavin Perch)]

Basta adicionar um # onde a URL vai

[bekircem]

Neste caso, ainda aparece como um URL clicável. Existe uma maneira de adicionar sem obter a tag a?

[Johani (Joe)]

@bekircem

Existe uma maneira de adicionar sem obter a tag a?

Você pode adicionar este CSS ao seu tema em algum lugar

.custom-footer a[href="#"] {
  pointer-events: none;
}

[pfaffman (Jay Pfaffman)]

Eu submeti isto:

Fix: add pluginId to modifyClass

Isso deve corrigir uma depreciação com pluginId ausente. Eu não testei , mas parece certo para mim.

EDIT: Mas não está certo de forma alguma.

[umbergerba (B.A. Umberger)]

FYI BUG >>> Se eu adicionar o seguinte… “Community, Tags List, /tags, self, List of all Tags”… uma linha horizontal é exibida no frontend. Se eu remover o [espaço] entre “Tags List” e alterá-lo para “TagsList”, o HR desaparece.

[mkschulze (M. Schulze)]

Olá, tenho dois problemas com os links sociais e os ícones Fontawesome.

1. Tento configurar outros ícones Fontawesome 5 na área Social, mas eles não aparecem.
   Quero <i></i>

2. Configurei o link do GitHub e ele já mostra o ícone na página, embora eu realmente não tenha adicionado o ícone na lista de ícones svg.

EDIT: Resolvi apenas usando o nome do ícone “home”

[AquaL1te]

Ao usar este componente de tema no meu telefone, a largura não está definida para a largura da tela. A largura se estende, quase ao tamanho de um monitor de desktop.

O teste pode ser feito aqui: https://forum.tzm.community/

Certifique-se de abri-lo em um telefone (ou use a opção de depuração em seu navegador, no Firefox você pode acionar o bug usando o perfil Linux do Galaxy Note 20).

[dax (Daniela)]

O componente foi corrigido. Você precisa atualizá-lo.