Skip to content

Commit

Permalink
#69 fix full navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@skivinen
skivinen committed Jan 22, 2021
1 parent 64c489f commit f973228
Show file tree
Hide file tree
Showing 4 changed files with 79 additions and 26 deletions.
2 changes: 1 addition & 1 deletion prodekoorg/static/scss/footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
padding-left: 0;
color: white;
font-family: Raleway, Helvetica, sans-serif;
background-color: $blue-dark;
background-color: $blue-normal;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

@include phone {
Expand Down
72 changes: 61 additions & 11 deletions prodekoorg/static/scss/navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,60 @@

#navbar-full {
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);
background-color: $blue-normal;
color: white;

#navbar-logo {
width: 40px;
height: 40px;
.navbar-logo-container {
.navbar-brand {
margin: 0 auto;

#navbar-logo {
height: 3em;
}
}
}

.auth-btn {
max-width: 160px;
.profile-icon, .auth-btn, {
padding-left: 1.2rem;
}

.nav-item {
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
padding-left: 0.2em;
padding-right: 0.2em;
a {
color: white;
}

.dropdown-menu {
background-color: $blue-normal;
border-radius: 0;

.dropdown-item {
&:hover {
background-color: $blue-light;
}
}
}
}

.nav-link {
line-height: 1.1;
cursor: pointer;

&.show, &:hover {
color: rgba(255, 255, 255, 0.8);
}
}

.profile-icon {
color: $blue-dark;
color: white;
font-size: 25px;

&:hover {
color: darken($blue-dark, 5%);
color: darken(white, 5%);
}
}
}
Expand All @@ -37,11 +66,12 @@
width: 100%;
max-height: 100vh;
overflow-y: auto;
background-color: white;
background-color: $blue-normal;
color: white;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.2);

a.level-0 {
color: black;
color: white;
}

[data-bs-toggle~='collapse'] {
Expand Down Expand Up @@ -89,13 +119,33 @@
.lang-picker {
font-weight: bold;
font-size: 1.2rem;
margin-left: 0.6em;

a {
color: white;
text-decoration: none;
padding-left: 0.3em;

&:hover {
color: rgba(255, 255, 255, 0.8);
}
}

span {
padding-left: 0.3em;
}

.lang {
text-decoration: underline;
}
}

.auth-btn {
letter-spacing: 0.5px;
text-transform: uppercase;
i {
font-size: 1.8rem;
color: white;
&:hover {
color: rgba(255, 255, 255, 0.8);
}
}
}
29 changes: 16 additions & 13 deletions prodekoorg/templates/layout-components/navbar-full.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,21 @@
{% trans "Membership" as apply %}
{% trans "Profile" as profile %}

<div id="navbar-full" class="navbar navbar-expand-lg navbar-light d-none d-lg-block">
<div class="collapse navbar-collapse">
<div id="navbar-full" class="navbar navbar-expand-lg navbar-dark d-none d-lg-block">
<div class="container-fluid collapse navbar-collapse navbar-logo-container">
<a class="navbar-brand" href="/">
<img id="navbar-logo" src="{% static 'images/logos/prodeko-logo-middleblue-nav.png' %}" />
<img id="navbar-logo" src="{% static 'images/logos/prodeko-logo-text-white.png' %}" alt="Prodeko logo" />
</a>
</div>
<div class="container-fluid collapse navbar-collapse">
<ul class="navbar-nav justify-content-center align-items-center w-100">
{% for child in children %}
{% if child.get_descendants %}
<li class="nav-item dropdown mr-3">
<a class="nav-link" id="navbarDropdown-{{ forloop.counter }}" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ child.get_menu_title }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown-{{ forloop.counter }}">
<div class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDropdown-{{ forloop.counter }}">
{% for kid in child.get_descendants %}
<a class="dropdown-item" href="{{ kid.get_absolute_url }}">{{ kid.get_menu_title }}</a>
{% endfor %}
Expand All @@ -31,24 +33,25 @@
{% endif %}
{% endfor %}
</ul>
{% if user.is_authenticated %}
<a href="{% url 'auth_prodeko:profile' %}" class="profile-icon mr-4" data-bs-trigger="hover" data-bs-content="{% trans profile %}">
<i class="fas fa-user-circle"></i>
</a>
{% endif %}
<div class="lang-picker d-flex flex-row justify-content-center">
<a href="{% page_language_url 'fi' %}" class="{% if LANGUAGE_CODE == 'fi' %}lang{% endif %} mr-1" >FI</a>
<span>/</span>
<a href="{% page_language_url 'en' %}" class="{% if LANGUAGE_CODE == 'en' %}lang{% endif %} ml-1">EN</a>
</div>
{% if user.is_authenticated %}
<a href="{% url 'auth_prodeko:profile' %}" class="profile-icon mr-4" data-bs-trigger="hover" data-bs-content="{% trans profile %}">
<i class="fas fa-user-circle"></i>
</a>
{% endif %}
{% if not user.is_authenticated %}
<a href="{% url 'auth_prodeko:login' %}" class="auth-btn btn btn-block btn-primary mx-4" role="button">
{% trans login %}
<a href="{% url 'auth_prodeko:login' %}" class="auth-btn mr4">
<i class="fas fa-sign-in-alt"></i>
</a>
{% else %}
<a href="{% url 'auth_prodeko:logout' %}" class="auth-btn btn btn-block btn-primary mx-4" role="button">
{% trans logout %}
<a href="{% url 'auth_prodeko:logout' %}" class="auth-btn mr4">
<i class="fas fa-sign-out-alt"></i>
</a>
{% endif %}
</div>
</div>
</div>
2 changes: 1 addition & 1 deletion prodekoorg/templates/layout-components/navbar-mobile.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% trans "Membership" as apply %}
{% trans "Profile" as profile %}

<div id="navbar-mobile" class="d-flex justify-content-between navbar navbar-expand-lg navbar-light d-lg-none">
<div id="navbar-mobile" class="d-flex justify-content-between navbar navbar-expand-lg navbar-dark d-lg-none">
<a class="navbar-brand" href="/">
<img id="navbar-logo" src="{% static 'images/logos/prodeko-logo-text-blue.png' %}" />
</a>
Expand Down

0 comments on commit f973228

Please sign in to comment.