Commit 671b9985 authored by Eduardo Silva's avatar Eduardo Silva
Browse files

criacao do arquivo footer_tags para gerenciar as tags do footer e atualizacao...

criacao do arquivo footer_tags para gerenciar as tags do footer e atualizacao da visualizacao do footer para receber a nova forma de renderizacao #5
parent 669d5e7f
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<footer class="br-footer">
<div class="container-lg">
<div class="logo">
<img src="{{ logo_url }}" alt="Imagem"/>
</div>
<div class="br-list horizontal" data-toggle="data-toggle" data-sub="data-sub">
{% for list_html in rendered_lists %}
{{ list_html|safe }}
{% endfor %}
</div>
<div class="d-none d-sm-block">
<div class="row align-items-end justify-content-between py-5">
<div class="col">
<div class="social-network">
<div class="social-network-title">Redes Sociais</div>
<div class="d-flex">
<a class="br-button circle" href="javascript:void(0)" aria-label="Compartilhar por Facebook">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
</a>
<a class="br-button circle" href="javascript:void(0)" aria-label="Compartilhar por Twitter">
<i class="fab fa-twitter" aria-hidden="true"></i>
</a>
<a class="br-button circle" href="javascript:void(0)" aria-label="Compartilhar por Linkedin">
<i class="fab fa-linkedin-in" aria-hidden="true"></i>
</a>
<a class="br-button circle" href="javascript:void(0)" aria-label="Compartilhar por Whatsapp">
<i class="fab fa-whatsapp" aria-hidden="true"></i>
</a>
</div>
</div>
</div>
<div class="col assigns text-right">
<img class="ml-4" src="{{ acesso_a_info_image }}" alt="Imagem"/>
<img class="ml-4" src="{{ emec_image }}" alt="Imagem"/>
</div>
</div>
</div>
</div>
<span class="br-divider my-3"></span>
<div class="container-lg">
<div class="info">
<div class="text-down-01 text-medium pb-3"><strong>{{ copyright }}</strong></div>
</div>
</div>
</footer>
{% endblock %}
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<div class="col-2"><a class="br-item header" href="javascript:void(0)">
<div class="content text-down-01 text-bold text-uppercase">{{ title }}</div>
<div class="support"><i class="fas fa-angle-down" aria-hidden="true"></i>
</div></a>
<div class="br-list"><span class="br-divider d-md-none"></span><a class="br-item" href="javascript:void(0)">
{% for item in items %}
{% if not forloop.last %}
<div class="content">{{ item.content }}</div></a><a class="br-item" href="javascript:void(0)">
{% else %}
<div class="content">Nulla occaecat eiusmod</div></a><span class="br-divider d-md-none"></span>
{% endif %}
{% endfor %}
</div>
</div>
{% endblock %}
...@@ -105,32 +105,6 @@ def br_list(title, items): ...@@ -105,32 +105,6 @@ def br_list(title, items):
} }
return render_to_string("dsgov/components/list.html", context) return render_to_string("dsgov/components/list.html", context)
@register.simple_tag
def br_list_footer(title, items):
context = {
"title": title,
"items": items,
}
return render_to_string("dsgov/components/list_footer.html", context)
@register.simple_tag
def br_footer(copyright="", lists="", logo_url="", acesso_a_info_image="", emec_image=""):
rendered_lists = [
br_list_footer(list_data['title'], list_data['items']) for list_data in lists
]
context = {
'copyright': copyright,
'rendered_lists': rendered_lists,
"logo_url": logo_url,
"emec_image": emec_image,
"acesso_a_info_image": acesso_a_info_image
}
return render_to_string('dsgov/components/footer.html', context)
@register.simple_tag @register.simple_tag
def br_carousel(slides=None, responsivo=True): def br_carousel(slides=None, responsivo=True):
......
from django import template
from django.utils.html import format_html
from django.templatetags.static import static
from django.template.loader import render_to_string
from django.utils.safestring import mark_safe
register = template.Library()
# --- TAGS DE BLOCO PRINCIPAIS DO FOOTER (RODAPÉ) ---
@register.tag(name='br_footer')
def do_footer(parser, token):
bits = token.split_contents()
extra_class = ''
for bit in bits[1:]:
if bit.startswith('class='):
extra_class = bit.split('=', 1)[1]
nodelist = parser.parse(('end_br_footer',))
parser.delete_first_token()
return FooterNode(nodelist, extra_class)
class FooterNode(template.Node):
def __init__(self, nodelist, extra_class):
self.nodelist = nodelist
self.extra_class = extra_class
def render(self, context):
content = self.nodelist.render(context)
try:
resolved_extra = template.Variable(self.extra_class).resolve(context)
except:
resolved_extra = self.extra_class.strip('"') if self.extra_class else ''
full_class = 'br-footer'
if resolved_extra:
full_class += f' {resolved_extra}'
return format_html('<footer class="{}">{}</footer>', full_class, mark_safe(content))
@register.tag(name='br_footer_main')
def do_footer_main(parser, token):
"""
Agrupa a parte principal do footer dentro de um container-lg.
Isso resolve o problema do container global.
"""
nodelist = parser.parse(('end_br_footer_main',))
parser.delete_first_token()
return MainContentNode(nodelist)
class MainContentNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
content = self.nodelist.render(context)
return format_html('<div class="container-lg">{}</div>', mark_safe(content))
# --- TAGS DE COLUNAS E ITENS DO FOOTER ---
@register.tag(name='br_footer_columns_group')
def do_footer_columns_group(parser, token):
"""Envolve todas as colunas no wrapper horizontal necessário."""
nodelist = parser.parse(('end_br_footer_columns_group',))
parser.delete_first_token()
return ColumnsGroupNode(nodelist)
class ColumnsGroupNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
content = self.nodelist.render(context)
return format_html('<div class="br-list horizontal" data-toggle="data-toggle" data-sub="data-sub">{}</div>', mark_safe(content))
@register.tag(name='br_footer_column')
def do_footer_column(parser, token):
nodelist = parser.parse(('end_br_footer_column',))
parser.delete_first_token()
return FooterColumnNode(nodelist)
class FooterColumnNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
content = self.nodelist.render(context)
# Cada coluna é um bloco completo e autocontido.
return format_html('<div class="col-2">{}</div>', mark_safe(content))
@register.tag(name='br_item_header')
def do_item_header(parser, token):
nodelist = parser.parse(('end_br_item_header',))
parser.delete_first_token()
return ItemHeaderNode(nodelist)
class ItemHeaderNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
content = self.nodelist.render(context)
return format_html(
'''<a class="br-item header" href="javascript:void(0)">
<div class="content text-down-01 text-bold text-uppercase">{}</div>
<div class="support"><i class="fas fa-angle-down" aria-hidden="true"></i></div>
</a>''',
mark_safe(content)
)
@register.tag(name='br_footer_list')
def do_footer_list(parser, token):
nodelist = parser.parse(('end_br_footer_list',))
parser.delete_first_token()
return FooterListNode(nodelist)
class FooterListNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
content = self.nodelist.render(context)
return format_html(
'<div class="br-list"><span class="br-divider d-md-none"></span>{}<span class="br-divider d-md-none"></span></div>',
mark_safe(content)
)
@register.tag(name='br_item')
def do_item(parser, token):
try:
tag_name, href = token.split_contents()
except ValueError:
href = '"#"'
nodelist = parser.parse(('end_br_item',))
parser.delete_first_token()
return ItemNode(nodelist, href)
class ItemNode(template.Node):
def __init__(self, nodelist, href):
self.nodelist = nodelist
self.href = href
def render(self, context):
content = self.nodelist.render(context)
resolved_href = template.Variable(self.href).resolve(context)
return format_html('<a class="br-item" href="{}"><div class="content">{}</div></a>', resolved_href, mark_safe(content))
# --- TAGS DE LOGO, REDES SOCIAIS E COPYRIGHT DO FOOTER ---
@register.simple_tag
def br_logo(src, alt=""):
"""Tag Simples e direta para o logo."""
return format_html('<div class="logo"><img src="{}" alt="{}"/></div>', src, alt)
@register.tag(name='br_footer_social_section')
def do_footer_social_section(parser, token):
"""
Esta tag agora lida com TODA a seção social,
incluindo o layout de linha e colunas, resolvendo o problema de coordenação.
"""
nodelist = parser.parse(('end_br_footer_social_section',))
parser.delete_first_token()
return SocialSectionNode(nodelist)
class SocialSectionNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
# A tag filha vai popular essas listas no contexto
social_links = []
assign_images = []
with context.push(social_links=social_links, assign_images=assign_images):
self.nodelist.render(context)
# Agora construímos o HTML com os dados coletados
social_links_html = ''.join([format_html(
'<a class="br-button circle" href="{}" aria-label="{}"><i class="fab {}" aria-hidden="true"></i></a>',
link['href'], link['aria_label'], link['icone']
) for link in social_links])
assign_images_html = ''.join([format_html(
'<img class="ml-4" src="{}" alt="{}"/>',
img['src'], img['alt']
) for img in assign_images])
return format_html(
'''<div class="d-none d-sm-block">
<div class="row align-items-end justify-content-between py-5">
<div class="col">
<div class="social-network">
<div class="social-network-title">Redes Sociais</div>
<div class="d-flex">{}</div>
</div>
</div>
<div class="col assigns text-right">{}</div>
</div>
</div>''',
mark_safe(social_links_html),
mark_safe(assign_images_html)
)
@register.simple_tag(takes_context=True)
def br_footer_rede_social(context, href, icone, aria_label):
# Esta tag agora não retorna HTML, apenas adiciona dados à lista.
context['social_links'].append({'href': href, 'icone': icone, 'aria_label': aria_label})
return ''
@register.simple_tag(takes_context=True)
def br_footer_imagem(context, src, alt):
# Esta tag agora não retorna HTML, apenas adiciona dados à lista.
context['assign_images'].append({'src': src, 'alt': alt})
return ''
@register.tag(name='br_footer_copyright')
def do_footer_copyright(parser, token):
nodelist = parser.parse(('end_br_footer_copyright',))
parser.delete_first_token()
return FooterCopyrightNode(nodelist)
class FooterCopyrightNode(template.Node):
def __init__(self, nodelist):
self.nodelist = nodelist
def render(self, context):
content = self.nodelist.render(context)
# O copyright gerencia seu próprio container e o divider.
return format_html(
'''<span class="br-divider my-3"></span>
<div class="container-lg">
<div class="info">
<div class="text-down-01 text-medium pb-3">{}</div>
</div>
</div>''',
mark_safe(content)
)
...@@ -29,40 +29,7 @@ urlpatterns = [ ...@@ -29,40 +29,7 @@ urlpatterns = [
{'label': 'Link de acesso 3'}, {'label': 'Link de acesso 3'},
{'label': 'Link de acesso 4'} {'label': 'Link de acesso 4'}
]}), name="headers"), ]}), name="headers"),
path("footer/", TemplateView.as_view(template_name = 'examples_footer.html', extra_context={"list": [ path("footer/", TemplateView.as_view(template_name = 'examples_footer.html'), name="footer"),
{'title': 'Categoria 1', 'items': [
{'content': 'Est ex deserunt'},
{'content': 'Qui esse'},
{'content': 'Nulla occaecat eiusmod'}
]},
{'title': 'Categoria 2', 'items': [
{'content': 'Deserunt'},
{'content': 'Ad deserunt nostrud'},
{'content': 'Ex qui laborum consectetur aute commodo'},
{'content': 'Ad deserunt nostrud'}
]},
{'title': 'Categoria 3', 'items': [
{'content': 'Duis incididunt consectetur'},
{'content': 'Qui esse'},
{'content': 'Ex qui laborum consectetur aute commodo'},
{'content': 'Duis incididunt consectetur'}
]},
{'title': 'Categoria 4', 'items': [
{'content': 'Est ex deserunt'},
{'content': 'Qui esse'},
{'content': 'Nulla occaecat eiusmod'}
]},
{'title': 'Categoria 5', 'items': [
{'content': 'Deserunt'},
{'content': 'Nulla occaecat eiusmod'},
{'content': 'Ad deserunt nostrud'},
{'content': 'Qui esse'},
]},
{'title': 'Categoria 6', 'items': [
{'content': 'Ad deserunt nostrud'},
{'content': 'Ex qui laborum consectetur aute commodo'},
]},
]}), name="footer"),
path("carousel/", TemplateView.as_view(template_name = 'examples_carousel.html', extra_context = {"imagens":[ path("carousel/", TemplateView.as_view(template_name = 'examples_carousel.html', extra_context = {"imagens":[
{'legenda': 'Bem vindo a UFRPE', 'image': 'https://s2.glbimg.com/KU72T67vVh5Pdgv5Ls2TT4dv09k=/0x0:1920x1080/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2019/S/d/t7a9OdQ1AUyswqkYCJSg/urfpe-recife.jpg'}, {'legenda': 'Bem vindo a UFRPE', 'image': 'https://s2.glbimg.com/KU72T67vVh5Pdgv5Ls2TT4dv09k=/0x0:1920x1080/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2019/S/d/t7a9OdQ1AUyswqkYCJSg/urfpe-recife.jpg'},
{'legenda': 'Testando Imagem', 'image': 'https://s2-g1.glbimg.com/8AWiNTCt0_3fRLaCj7nFeisLb2U=/0x0:1280x960/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2022/D/6/cBnRd8QmuP1kXgcpdu9A/codai-sao-lourenco.jpeg'}, {'legenda': 'Testando Imagem', 'image': 'https://s2-g1.glbimg.com/8AWiNTCt0_3fRLaCj7nFeisLb2U=/0x0:1280x960/984x0/smart/filters:strip_icc()/i.s3.glbimg.com/v1/AUTH_59edd422c0c84a879bd37670ae4f538a/internal_photos/bs/2022/D/6/cBnRd8QmuP1kXgcpdu9A/codai-sao-lourenco.jpeg'},
......
{% extends "dsgov/base.html" %} {% extends "dsgov/base.html" %}
{% load br_components %} {% load footer_tags %}
{% load static %} {% load static %}
{% block title %} {% block title %}
...@@ -7,7 +7,186 @@ ...@@ -7,7 +7,186 @@
{% endblock %} {% endblock %}
{% block content %} {% block content %}
<div class="container">
{% br_footer lists=list copyright="© 2024 UFRPE | Todos os direitos reservados" logo_url="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" emec_image="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" acesso_a_info_image="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" %} <br>
</div> <p><strong>Exemplo de Footer Principal (Cor azul):</strong></p>
{# Exemplo de footer principal (Cor azul) #}
{% br_footer %}
{# O conteúdo principal fica dentro deste bloco de container #}
{% br_footer_main %}
{% br_logo src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-negative.png" alt="Logo Negativo" %}
{# Todas as colunas ficam dentro deste grupo #}
{% br_footer_columns_group %}
{# Coluna 1 #}
{% br_footer_column %}
{% br_item_header %}Categoria 1{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
{% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
{% br_item '#' %}Ex qui laborum consectetur aute commodo{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{# Coluna 2 #}
{% br_footer_column %}
{% br_item_header %}Categoria 2{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Deserunt{% end_br_item %}
{% br_item '#' %}Adipisicing culpa et ad consequat{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{# Coluna 3 #}
{% br_footer_column %}
{% br_item_header %}Categoria 3{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Duis incididunt consectetur{% end_br_item %}
{% br_item '#' %}Adipisicing culpa et ad consequat{% end_br_item %}
{% br_item '#' %}Duis incididunt consectetur{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{# Coluna 4 #}
{% br_footer_column %}
{% br_item_header %}Categoria 4{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
{% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
{% br_item '#' %}Qui esse{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{# Coluna 5 #}
{% br_footer_column %}
{% br_item_header %}Categoria 5{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
{% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
{% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{# Coluna 6 #}
{% br_footer_column %}
{% br_item_header %}Categoria 6{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
{% br_item '#' %}Qui esse{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{% end_br_footer_columns_group %}
{# Seção de Redes Sociais que organiza suas próprias colunas e linhas #}
{% br_footer_social_section %}
{% br_footer_rede_social href="#" icone="fa-facebook-f" aria_label="Facebook" %}
{% br_footer_rede_social href="#" icone="fa-twitter" aria_label="Twitter" %}
{% br_footer_rede_social href="#" icone="fa-linkedin-in" aria_label="LinkedIn" %}
{% br_footer_rede_social href="#" icone="fa-whatsapp" aria_label="WhatsApp" %}
{% br_footer_imagem src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" alt="Logo 1" %}
{% br_footer_imagem src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-negative.png" alt="Logo 2" %}
{% end_br_footer_social_section %}
{% end_br_footer_main %}
{# O copyright fica fora do container principal #}
{% br_footer_copyright %}
Texto destinado a exibição de informações relacionadas à&nbsp;<strong>licença de uso.</strong>
{% end_br_footer_copyright %}
{% end_br_footer %}
<br>
<p><strong>Exemplo de Footer Invertido (Cor branca):</strong></p>
{# Exemplo de footer invertido (Cor branca) #}
{% br_footer class="inverted" %} <!-- A classe "inverted" aplica o estilo de fundo branco -->
{# O conteúdo principal fica dentro deste bloco de container #}
{% br_footer_main %}
{% br_logo src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-positive.png" alt="Logo Positivo" %}
{# Todas as colunas ficam dentro deste grupo #}
{% br_footer_columns_group %}
{# Coluna 1 #}
{% br_footer_column %}
{% br_item_header %}Categoria 1{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
{% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
{% br_item '#' %}Ex qui laborum consectetur aute commodo{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{# Coluna 2 #}
{% br_footer_column %}
{% br_item_header %}Categoria 2{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Deserunt{% end_br_item %}
{% br_item '#' %}Adipisicing culpa et ad consequat{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{# Coluna 3 #}
{% br_footer_column %}
{% br_item_header %}Categoria 3{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Duis incididunt consectetur{% end_br_item %}
{% br_item '#' %}Adipisicing culpa et ad consequat{% end_br_item %}
{% br_item '#' %}Duis incididunt consectetur{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{# Coluna 4 #}
{% br_footer_column %}
{% br_item_header %}Categoria 4{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
{% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
{% br_item '#' %}Qui esse{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{# Coluna 5 #}
{% br_footer_column %}
{% br_item_header %}Categoria 5{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
{% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
{% br_item '#' %}Nulla occaecat eiusmod{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{# Coluna 6 #}
{% br_footer_column %}
{% br_item_header %}Categoria 6{% end_br_item_header %}
{% br_footer_list %}
{% br_item '#' %}Ad deserunt nostrud{% end_br_item %}
{% br_item '#' %}Qui esse{% end_br_item %}
{% end_br_footer_list %}
{% end_br_footer_column %}
{% end_br_footer_columns_group %}
{# Seção de Redes Sociais que organiza suas próprias colunas e linhas #}
{% br_footer_social_section %}
{% br_footer_rede_social href="#" icone="fa-facebook-f" aria_label="Facebook" %}
{% br_footer_rede_social href="#" icone="fa-twitter" aria_label="Twitter" %}
{% br_footer_rede_social href="#" icone="fa-linkedin-in" aria_label="LinkedIn" %}
{% br_footer_rede_social href="#" icone="fa-whatsapp" aria_label="WhatsApp" %}
{% br_footer_imagem src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-positive.png" alt="Logo 1" %}
{% br_footer_imagem src="https://cdngovbr-ds.estaleiro.serpro.gov.br/design-system/images/logo-assign-positive.png" alt="Logo 2" %}
{% end_br_footer_social_section %}
{% end_br_footer_main %}
{# O copyright fica fora do container principal #}
{% br_footer_copyright %}
Texto destinado a exibição de informações relacionadas à&nbsp;<strong>licença de uso.</strong>
{% end_br_footer_copyright %}
{% end_br_footer %}
{% endblock %} {% endblock %}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment