Skip to content

GitLab

Commit e9e19be1 authored by Lucas Gueiros's avatar Lucas Gueiros
Browse files

Merge branch '3-atualizacao-dos-componentes' into 'master' 

Resolve "Atualização dos componentes"

Closes #3

See merge request !4
parents 90c77434 dff4d02d
Expand all Hide whitespace changes
Inline Side-by-side
dsgov/templates/dsgov/components/carousel.html
View file @ e9e19be1
......@@ -4,24 +4,43 @@
{% block content %}
<div class="row">
<div class="col-sm-12 col-md-8">
<div class="col-sm-12 col-md-12" style="height: 550px;">
<div class="br-carousel" data-circular="true" aria-label="Carrossel de Exemplo" aria-roledescription="carousel">
<div class="carousel-button">
<button class="br-button carousel-btn-prev terciary circle" type="button" aria-label="Anterior"><i class="fas fa-chevron-left" aria-hidden="true"></i>
<button class="br-button carousel-btn-prev terciary circle" type="button" aria-label="Anterior">
<i class="fas fa-chevron-left" aria-hidden="true"></i>
</button>
</div>
<div class="carousel-stage">
{% for imagem in imagens %}
<div class="carousel-page" active="active" role="group" aria-roledescription="slide" aria-live="polite">
<div class="carousel-content">
<img class="ml-4" src="{{ imagem.image }}" alt="Imagem"/>
<div class="h3 carousel-title">{{ imagem.legenda }}</div>
</div>
<div class="carousel-page" active="active" role="group" aria-roledescription="slide" aria-live="polite">
<div class="carousel-content bg-blue-10">
<div class="h3 carousel-title">Página 1</div>
</div>
{% endfor %}
</div>
<div class="carousel-page" role="group" aria-roledescription="slide" aria-live="polite">
<div class="carousel-content bg-violet-warm-10">
<div class="h3 carousel-title">Página 2</div>
</div>
</div>
<div class="carousel-page" role="group" aria-roledescription="slide" aria-live="polite">
<div class="carousel-content bg-yellow-5">
<div class="h3 carousel-title">Página 3</div>
</div>
</div>
<div class="carousel-page" role="group" aria-roledescription="slide" aria-live="polite">
<div class="carousel-content bg-green-cool-10">
<div class="h3 carousel-title">Página 4</div>
</div>
</div>
<div class="carousel-page" role="group" aria-roledescription="slide" aria-live="polite">
<div class="carousel-content bg-orange-vivid-10">
<div class="h3 carousel-title">Página 5</div>
</div>
</div>
</div>
<div class="carousel-button">
<button class="br-button carousel-btn-next terciary circle" type="button" aria-label="Próximo"><i class="fas fa-chevron-right" aria-hidden="true"></i>
<button class="br-button carousel-btn-next terciary circle" type="button" aria-label="Próximo">
<i class="fas fa-chevron-right" aria-hidden="true"></i>
</button>
</div>
<div class="carousel-step">
......
dsgov/templates/dsgov/components/header.html
View file @ e9e19be1
......@@ -3,92 +3,109 @@
{% load static %}
{% block content %}
<header class="br-header {{ extra_classes }}">
<header class="br-header mb-4 {{ extra_classes }}" id="header" data-sticky="data-sticky">
<div class="container-lg">
<div class="header-top">
<div class="header-logo">
<img src="{{ logo_url }}" alt="logo"/>
<span class="br-divider vertical"></span>
<div class="header-sign" style="{{ header_sign_style }}">{{ title_extra }}</div>
</div>
<div class="header-actions">
<div class="header-links dropdown">
<button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Acesso Rápido"><i class="fas fa-ellipsis-v" aria-hidden="true"></i>
</button>
<div class="br-list">
<div class="header">
<div class="title">Acesso Rápido</div>
</div>
{% for link in links %}
<a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">{{ link.label }}</a>
{% endfor %}
</div>
<div class="header-logo">
<img src="{{ logo_url }}" alt="logo"/>
<span class="br-divider vertical"></span>
<div class="header-sign" style="{{ header_sign_style }}">{{ title_extra }}</div>
</div>
<span class="br-divider vertical mx-half mx-sm-1"></span>
<div class="header-functions dropdown">
<button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Funcionalidades do Sistema"><i class="fas fa-th" aria-hidden="true"></i>
</button>
<div class="br-list">
<div class="header">
<div class="title">Funcionalidades do Sistema</div>
<div class="header-actions">
<div class="header-links dropdown">
<button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Acesso Rápido">
<i class="fas fa-ellipsis-v" aria-hidden="true" style="{{ links_style }}"></i>
</button>
<div class="br-list">
<div class="header">
<div class="title" style="{{ links_style }}">Acesso Rápido</div>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 1"><i class="fas fa-chart-bar" aria-hidden="true" style="{{ items_style }}"></i><span class="text">Funcionalidade 1</span>
</button>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 2"><i class="fas fa-headset" aria-hidden="true" style="{{ items_style }}"></i><span class="text">Funcionalidade 2</span>
</button>
<a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 1</a>
<a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 2</a>
<a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 3</a>
<a class="br-item {{ extra_classes }}" href="javascript:void(0)" style="{{ links_style }}">Link de acesso 4</a>
<select class="bg-blue-warm-vivid-90 rounder-lg border-solid-none" name="languages" id="languages" style="{{ items_style }}" onchange="changeLanguage()">
<option value="pt-br" selected>PT</option>
<option value="en">EN</option>
<option value="es">ES</option>
</select>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 3"><i class="fas fa-comment" aria-hidden="true" style="{{ items_style }}"></i><span class="text">Funcionalidade 3</span>
</button>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 4"><i class="fas fa-adjust" aria-hidden="true" style="{{ items_style }}"></i><span class="text">Funcionalidade 4</span>
</button>
</div>
<span class="br-divider vertical mx-half mx-sm-1"></span>
<div class="header-functions dropdown">
<button class="br-button circle small" type="button" data-toggle="dropdown" aria-label="Abrir Funcionalidades do Sistema">
<i class="fas fa-th" aria-hidden="true" style="{{ links_style }}"></i>
</button>
<div class="br-list">
<div class="header">
<div class="title" style="{{ title_style }}">Funcionalidades do Sistema</div>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 1">
<i class="fas fa-chart-bar" aria-hidden="true" style="{{ items_style }}"></i>
<span class="text" style="{{ title_style }}">Funcionalidade 1</span>
</button>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 2">
<i class="fas fa-headset" aria-hidden="true" style="{{ items_style }}"></i>
<span class="text" style="{{ title_style }}">Funcionalidade 2</span>
</button>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 3">
<i class="fas fa-comment" aria-hidden="true" style="{{ items_style }}"></i>
<span class="text" style="{{ title_style }}">Funcionalidade 3</span>
</button>
</div>
<div class="br-item {{ extra_classes }}">
<button class="br-button circle small" type="button" aria-label="Funcionalidade 4">
<i class="fas fa-adjust" aria-hidden="true" style="{{ items_style }}"></i>
<span class="text" style="{{ title_style }}">Funcionalidade 4</span>
</button>
</div>
</div>
</div>
</div>
<div class="header-search-trigger">
<button class="br-button circle" type="button" aria-label="Abrir Busca" data-toggle="search" data-target=".header-search"><i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
{% if show_login %}
<div class="header-search-trigger">
<button class="br-button circle" type="button" aria-label="Abrir Busca" data-toggle="search" data-target=".header-search">
<i class="fas fa-search" aria-hidden="true" style="{{ items_style }}"></i>
</button>
</div>
<div class="header-login">
<div class="header-sign-in">
<button class="br-sign-in small" type="button" data-trigger="login">
<i class="fas fa-user" aria-hidden="true"></i>
<span class="d-sm-inline">{{ label_button_login }}</span>
</button>
<button class="br-sign-in small" type="button" data-trigger="login">
<i class="fas fa-user" aria-hidden="true"></i>
<span class="d-sm-inline">{{ label_button_login }}</span>
</button>
</div>
<div class="header-avatar"></div>
</div>
{% endif %}
</div>
</div>
</div>
<div class="header-bottom">
<div class="header-menu">
<div class="header-menu-trigger">
<button class="br-button small circle" type="button" aria-label="Menu" data-toggle="menu" data-target="#main-navigation" id="navigation"><i class="fas fa-bars" aria-hidden="true" style="color: #FFFFFF;"></i>
</button>
</div>
<div class="header-info">
<div class="header-title" style="{{ title_style }}">{{ title }}</div>
<div class="header-subtitle" style="{{ title_style }}">{{ subtitle }}</div>
<div class="header-menu">
<div class="header-menu-trigger" id="header-navigation">
<button class="br-button small circle" type="button" aria-label="Menu" data-toggle="menu" data-target="#main-navigation" id="navigation">
<i class="fas fa-bars" aria-hidden="true" style="color: #FFFFFF;"></i>
</button>
</div>
<div class="header-info">
<div class="header-title" style="{{ title_style }}">{{ title }}</div>
<div class="header-subtitle" style="{{ title_style }}">{{ subtitle }}</div>
</div>
</div>
</div>
<div class="header-search">
<div class="br-input has-icon">
<label for="searchbox-7548">Texto da pesquisa</label>
<input id="searchbox-7548" type="text" placeholder="{{ search_placeholder }}"/>
<button class="br-button circle small" type="button" aria-label="Pesquisar">
<i class="fas fa-search" aria-hidden="true"></i>
<div class="header-search" id="main-searchbox">
<div class="br-input has-icon">
<label for="searchbox">Texto da pesquisa</label>
<input id="searchbox" type="text" placeholder="{{ search_placeholder }}"/>
<button class="br-button circle small" type="button" aria-label="Pesquisar">
<i class="fas fa-search" aria-hidden="true"></i>
</button>
</div>
<button class="br-button circle search-close ml-1" type="button" aria-label="Fechar Busca" data-dismiss="search">
<i class="fas fa-times" aria-hidden="true" style="{{ links_style }}"></i>
</button>
</div>
<button class="br-button circle search-close ml-1" type="button" aria-label="Fechar Busca" data-dismiss="search"><i class="fas fa-times" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</header>
......
dsgov/templates/dsgov/components/menu.html
View file @ e9e19be1
This diff is collapsed.
dsgov/templates/dsgov/components/pagination.html 0 → 100644
View file @ e9e19be1
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block content %}
<nav class="br-pagination" aria-label="paginação" data-total="10" data-current="1">
<ul>
<li>
<button class="br-button circle" type="button" data-previous-page="data-previous-page" aria-label="Voltar página">
<i class="fas fa-angle-left" aria-hidden="true"></i>
</button>
</li>
<li>
<a class="page active" href="javascript:void(0)" aria-label=" página 1">1</a>
</li>
<li>
<a class="page" href="javascript:void(0)" aria-label=" página 2">2</a>
</li>
<li>
<a class="page" href="javascript:void(0)" aria-label=" página 3">3</a>
</li>
<li>
<a class="page" href="javascript:void(0)" aria-label=" página 4">4</a>
</li>
<li class="pagination-ellipsis">
<button class="br-button circle" type="button" data-toggle="dropdown" aria-label="Abrir ou fechar a lista de paginação">
<i class="fas fa-ellipsis-h" aria-hidden="true"></i>
</button>
<div class="br-list" role="menu">
<a class="br-item" href="javascript:void(0)" aria-label=" página 5" role="menuitem">5</a>
<a class="br-item" href="javascript:void(0)" aria-label=" página 6" role="menuitem">6</a>
<a class="br-item" href="javascript:void(0)" aria-label=" página 7" role="menuitem">7</a>
<a class="br-item" href="javascript:void(0)" aria-label=" página 8" role="menuitem">8</a>
<a class="br-item" href="javascript:void(0)" aria-label=" página 9" role="menuitem">9</a>
</div>
</li>
<li>
<a class="page" href="javascript:void(0)" aria-label=" página 10">10</a>
</li>
<li>
<button class="br-button circle" type="button" data-next-page="data-next-page" aria-label="Página seguinte">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</button>
</li>
</ul>
</nav>
{% endblock %}
\ No newline at end of file
dsgov/templatetags/br_components.py
View file @ e9e19be1
......@@ -132,28 +132,39 @@ def br_footer(copyright="", lists="", logo_url="", acesso_a_info_image="", emec_
return render_to_string('dsgov/components/footer.html', context)
@register.simple_tag
def br_carousel(imagens=""):
context = {
'imagens': imagens
}
def br_carousel(slides=None, responsivo=True):
context = {
'slides': slides or [],
'responsivo': responsivo
}
return render_to_string('dsgov/components/carousel.html', context)
return render_to_string('dsgov/components/carousel.html', context)
@register.simple_tag
def br_menu():
def br_menu(icon_style="", text_color=""):
context = {
"icon_style": icon_style,
"text_color": text_color
}
return render_to_string('dsgov/components/menu.html', context)
@register.inclusion_tag('dsgov/components/breadcrumb.html')
def br_breadcrumb(pages=""):
return {
'pages': pages,
}
@register.simple_tag
def br_breadcrumb():
def br_pagination(pages=""):
context = {
'pages': pages,
}
return render_to_string('dsgov/components/breadcrumb.html', context)
return render_to_string('dsgov/components/pagination.html', context)
tests/django_dsgov_test1/django_dsgov_test1/urls.py
View file @ e9e19be1
......@@ -76,5 +76,6 @@ urlpatterns = [
{'icon': 'fas fa-star', 'content': 'Texto principal 2', 'meta': 'Meta 2'}
]}), name="list"),
path("breadcrumb/", TemplateView.as_view(template_name = 'examples_breadcrumb.html'), name="breadcrumb"),
path("pagination/", TemplateView.as_view(template_name = 'examples_pagination.html'), name="pagination"),
path("tag/", TemplateView.as_view(template_name = 'examples_tag.html'), name="tag"),
]
tests/django_dsgov_test1/templates/examples_pagination.html 0 → 100644
View file @ e9e19be1
{% extends "dsgov/base.html" %}
{% load br_components %}
{% load static %}
{% block title %}
Exemplo de Pagination
{% endblock %}
{% block content %}
<div class="container">
{% br_pagination %}
</div>
{% endblock %}
\ No newline at end of file
tests/django_dsgov_test1/templates/index.html
View file @ e9e19be1
......@@ -104,6 +104,16 @@
</div>
</div>
</div>
<div class="br-item" role="listitem">
<div class="row align-items-center">
<div class="col-auto">
<i class="fa-solid fa-sitemap" aria-hidden="true"></i>
</div>
<div class="col">
<a href="{% url 'pagination' %}">Exemplos de Pagination</a>
</div>
</div>
</div>
</div>
</div>
{% 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