Skip to content

Commit

Permalink
fix(nossas): add css classes to footer plugin
Browse files Browse the repository at this point in the history
  • Loading branch information
@miguelzinh3
miguelzinh3 committed Mar 14, 2024
1 parent 109515a commit 599a500
Show file tree
Hide file tree
Showing 3 changed files with 118 additions and 54 deletions.
150 changes: 107 additions & 43 deletions app/nossas/design/static/design/scss/nossas.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,45 +328,131 @@ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg width='41' height='
// Footer
.footer {
border-top: 2px solid $dark;
padding-bottom: 0.5rem;
padding-left: 1.5rem;
padding-right: 1.5rem ;
padding-top: 3rem;

.footer-brand {
display: block;
width: 214px;
.footer-content {
display: flex;

.footer-info {
margin-left: 3rem;
}

.footer-brand {
display: block;
width: 214px;
}

.footer-social-media {
display: flex;
gap: 1rem;
width: 250px;
}

.footer-institutional {
display: flex;
flex-direction: column;
font-size: 21px;
line-height: 27.5px;
margin-top: 1.5rem;
text-align: left;
}

.footer-btn-group {
display: flex;
flex-direction: column;
padding-bottom: 1.5rem;
padding-top: 1.5rem;

a {
font-weight: bold;
text-transform: uppercase;
}
}
}

.social-media {
display: flex;
gap: 1rem;
.footer-line {
font-size: 16px;
text-align: center;
}
}

.footer-btn-group {
a {
text-transform: uppercase;
font-weight: bold;
@include media-breakpoint-down(xl) {
.footer {
.footer-content {
.footer-info {
margin-left: 0;
}
}
}
}

@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
.footer {
.footer-brand {
margin: 0 auto;
}
.footer-content {
justify-content: center;

.social-media {
justify-content: space-between;
gap: 0;
padding: 0 ($spacer * 2);
}
.footer-info {
margin-left: 0;
}

.footer-btn-group {
> div {
.footer-brand {
margin: 0 auto;
}

.footer-institucional {
text-align: center;
}

.footer-social-media {
justify-content: space-between;
gap: 0;
padding: 0 ($spacer * 2);
}

.footer-btn-group {
> div {
margin: 0 auto;
}
}
}
}
}

// Footer Menu
.footer-menu {
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 1rem;
height: 450px;
padding-left: 3rem;
padding-top: 3rem;
width: 100%;

.footer-menu-item {
display: flex;
flex-direction: column;

.nav-link {
font-family: $headings-font-family;
font-size: 29px;
font-weight: bold;
line-height: 31px;
padding-bottom: 10px;
text-transform: uppercase;
}
}
}

@include media-breakpoint-down(lg) {
.footer-menu {
display: none;
}
}

// Button Group (Admin)
.widget-bg-btn-group {
input[type="input"]:checked + label.widget-bg-btn,
Expand Down Expand Up @@ -532,28 +618,6 @@ $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg width='41' height='
}
}

// Footer
.footer {
.institutional {
font-size: 21px;
line-height: 27.5px;
}

.nav-link {
font-family: $headings-font-family;
text-transform: uppercase;
font-weight: bold;
font-size: 29px;
line-height: 31px;
padding-bottom: 10px;
}

.footer-line {
font-size: 16px;
text-align: center;
}
}

// Headline
.headline {
position: relative;
Expand Down
2 changes: 1 addition & 1 deletion app/nossas/design/templates/nossas/footer_menu.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% load menu_tags %}

{% for child in children %}
<div class="mb-3 me-5 d-flex flex-column" style="max-width:216px;">
<div class="footer-menu-item">
<a class="nav-link text-white" href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">{{ child.attr.i18n_menu_title }}</a>
{% if child.children %}
{% show_menu from_level to_level extra_inactive extra_active "nossas/footer_submenu.html" "" "" child %}
Expand Down
20 changes: 10 additions & 10 deletions app/nossas/plugins/templates/nossas/plugins/site_footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
{% load menu_tags %}

<div class="footer bg-azul-nossas text-white px-4 pt-5 pb-2">
<div class="footer bg-azul-nossas text-white">
<div class="container-fluid">
<div class="d-flex justify-content-center">
<div>
<div class="footer-content">
<div class="footer-info">
<a class="footer-brand" href="{{ request.scheme|add:'://'|add:request.current_site.domain }}">
{% include "nossas/svg/brand-lg.svg" %}
</a>
<p class="institutional mt-4 text-center text-md-start d-flex flex-column">
<p class="footer-institutional">
{% if request.current_site.institutionalinformation %}
<span>{{ request.current_site.institutionalinformation.address_line }}</span>
<span>{{ request.current_site.institutionalinformation.city }}/{{ request.current_site.institutionalinformation.state }} - CEP {{ request.current_site.institutionalinformation.zipcode }}</span>
<span>{{ request.current_site.institutionalinformation.contact_mail }} | {{ request.current_site.institutionalinformation.contact_phone }}</span>
{% endif %}
</p>
<div class="social-media" style="width: 315px;">
<div class="footer-social-media">
<a href="https://instagram.com/_nossas">
{% include "nossas/svg/instagram.svg" %}
</a>
Expand All @@ -31,9 +31,9 @@
{% include "nossas/svg/youtube.svg" %}
</a>
</div>
<div class="footer-btn-group d-flex flex-column py-4">
<div class="footer-btn-group">
<div>
<a href="/quem-somos/trabalhe-conosco" class="btn bg-white text-azul-nossas mb-2">
<a href="/quem-somos/trabalhe-conosco" class="btn bg-white text-azul-nossas mb-3">
Trabalhe conosco
</a>
</div>
Expand All @@ -44,10 +44,10 @@
</div>
</div>
</div>
<div class="d-none d-sm-flex flex-column flex-wrap pt-5 ps-5" style="height:450px;">
<div class="footer-menu">
{% show_menu 0 100 100 100 "nossas/footer_menu.html" %}
</div>
</div>
<p class="footer-line">© 2023. NOSSAS. Site desenvolvido por Amí Comunicação & Design e Nome da Empresa de Desenvolvimento</p>
<p class="footer-line">© 2023. NOSSAS. Site desenvolvido por Amí Comunicação & Design.</p>
</div>
</div>
</div>

0 comments on commit 599a500

Please sign in to comment.