Skip to content

Commit

Permalink
💄 finalize navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@krmax44
krmax44 committed Sep 28, 2023
1 parent b764c8a commit e43ae3d
Show file tree
Hide file tree
Showing 9 changed files with 461 additions and 515 deletions.
49 changes: 0 additions & 49 deletions fragdenstaat_de/fds_blog/templates/fds_blog/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,55 +9,6 @@

{% block content %}
<div class="app app-blog">
<nav class="navbar navbar-expand-sm navbar-dark navbar-blog">
<div class="container">
<a class="navbar-brand" href="{% page_url 'blog' %}">{% trans "Freedom of Information investigations" %}</a>
<ul class="navbar-nav me-auto d-none d-sm-flex">
<li class="nav-item">
<a class="nav-link" href="{% url 'blog:article-latest-feed' %}" target="_blank" rel="noopener">
<span class="fa fa-rss" aria-hidden="true"></span>
<span class="visually-hidden">{% trans "RSS feed" %}</span>
</a>
</li>
</ul>
<div class="d-flex">
<ul class="navbar-nav ms-auto d-none d-sm-block">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="cat-navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{% trans "Categories" %}
</a>
<div class="dropdown-menu" aria-labelledby="cat-navbarDropdown">
{% for cat in categories %}
<a class="dropdown-item {% if cat == category %} active{% endif %}" href="{% url 'blog:article-category' category=cat.slug %}">
{{ cat.title }}
</a>
{% endfor %}
</div>
</li>
</ul>

<form class="ms-2 d-none d-md-inline" role="search" method="get" action="{% url 'blog:article-search' %}">
<div class="input-group d-flex d-md-none d-lg-flex">
{% if form %}
{{ form.q }}
{% else %}
<input class="form-control" type="text" name="q" placeholder="{% trans 'Search' %}" aria-label="{% trans 'Search' %}">
{% endif %}
<button class="btn btn-outline-light" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="visually-hidden">{% trans "Search" %}</span>
</button>
</div>
<button class="btn btn-outline-light d-none d-md-block d-lg-none" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="visually-hidden">{% trans "Search" %}</span>
</button>
</form>
</div>
</div>
</nav>

{% block content_blog %}{% endblock %}

</div>
{% endblock %}
222 changes: 119 additions & 103 deletions fragdenstaat_de/templates/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,18 @@
{% endif %}

<header id="header">
<nav class="navbar navbar-fds bg-body">
<nav class="bg-body">
<div class="container">
<ul class="nav-ul w-100">
<li class="d-md-none">
<button class="btn" id="toggle-mobile-nav">
<li class="d-md-none order-first">
<button class="btn nav-toggle-menu" data-target="main" aria-controls="menu-main">
<span class="navbar-toggler-icon"></span>
<span class="visually-hidden">{% trans "Menu" %}</span>
</button>
</li>

{% page_url "home" as home_url %}
<li class="nav-logo">
<li class="nav-logo order-first">
<a href="{{ home_url|default:'/' }}"
class="navbar-brand navbar-brand-fds">
{% render_svg "img/header_logo.svg" %}
Expand All @@ -33,113 +33,129 @@
</a>
</li>

<li class="d-md-none">
<li class="nav-sm z-3">
{% if request.user.is_authenticated %}
{% if request.user.profile_photo %}
<button class="btn user-profile p-0 rounded-circle">
<img width="32"
height="32"
src="{% thumbnail request.user.profile_photo 64x64 %}"
alt="{{ request.user.get_full_name }}"
class="w-100 h-100 rounded-circle">
</button>
{% else %}
<button class="btn rounded-circle text-bg-subtle d-flex justify-content-center align-items-center user-profile">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="visually-hidden">{{ request.user.first_name }}</span>
</button>
{% endif %}
</button>
{% else %}
{% url 'account-login' as login_url %}
{% page_url "donate" as donate_url %}
<a class="btn text-danger"
href="{{ donate_url|default:'/spenden/' }}?pk_campaign=site-header&pk_keyword={{ request.path | urlencode }}">
<i class="fa fa-heart" aria-hidden="true"></i>
<span class="visually-hidden">{% blocktrans %}Donate{% endblocktrans %}</span>
</a>
{% endif %}
</li>
<div class="">
{% if request.user.profile_photo %}
<button class="btn btn-link user-profile nav-toggle-menu"
data-target="user" aria-controls="menu-user">
<img width="32"
height="32"
src="{% thumbnail request.user.profile_photo 64x64 %}"
alt=""
class="rounded-circle"/>

<span class="d-none d-md-inline">{{ request.user.first_name }}</span>
</button>
{% else %}
<button class="btn btn-link user-profile nav-toggle-menu"
data-target="user" aria-controls="menu-user">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="d-none d-md-block">{{ request.user.first_name }}</span>
</button>
{% endif %}

<ul class="nav-menu dropdown-menu" id="menu-user">
{% include "menu/user_menu.html" %}
</ul>
</div>

{% else %}
{% url 'account-login' as login_url %}
<a href="{% url 'account-login' %}?next={{ request.path|urlencode }}" class="d-none d-md-block">
<i class="fa fa-sign-in" aria-hidden="true"></i>
{% blocktrans %}Sign in{% endblocktrans %}
</a>

{% page_url "donate" as donate_url %}
<a class="btn text-danger d-md-none"
href="{{ donate_url|default:'/spenden/' }}?pk_campaign=site-header&pk_keyword={{ request.path | urlencode }}">
<i class="fa fa-heart" aria-hidden="true"></i>
<span class="visually-hidden">{% blocktrans %}Donate{% endblocktrans %}</span>
</a>
{% endif %}
</li>

<ul class="nav-menu nav-menu-expanded" id="menu-main">
<li class="nav-break" aria-hidden="true"></li>

<ul class="nav-menu" id="nav-menu">
{% page_url "about" as about_url %}
{% if about_url %}
{% page_attribute "menu_title" "about" as about_title %}
<li class="ms-md-auto nav-sm">
<a href="{{ about_url|default:"/ueber-uns/" }}">{{ about_title }}</a>
{% url 'foirequest-list' as requests_url %}
<li class="nav-dropdown">
<a class="dropdown-toggle {% if request.path == requests_url %}active{% endif %}"
href="#"
data-bs-toggle="dropdown"
aria-expanded="false">{% blocktrans %}Requests{% endblocktrans %}</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="{{ requests_url }}">{% blocktrans %}See requests{% endblocktrans %}</a>
</li>
<li>
<a class="dropdown-item" href="{% url 'foirequest-make_request' %}">{% blocktrans %}Make request{% endblocktrans %}</a>
</li>
{% page_url "beginnersguide" as beginners_url %}
{% if beginners_url %}
<li>
<a class="dropdown-item" href="{{ beginners_url }}">{% blocktrans %}Beginner's guide{% endblocktrans %}</a>
</li>
{% endif %}
</ul>
</li>
{% endif %}
{% page_url "newsletter" as newsletter_url %}
{% if newsletter_url %}
<li class="nav-sm">
<a class="" href="{{ newsletter_url }}">{% translate "Newsletter" %}</a>
{% page_url "campaigns" as campaigns_url %}
<li class="">
<a class="" href="{{ campaigns_url|default:'/kampagnen/' }}">{% blocktrans %}Campaigns{% endblocktrans %}</a>
</li>
{% page_url "blog" as blog_url %}
<li class="">
<a class="" href="{{ blog_url|default:'/blog/' }}">{% blocktrans %}Investigations{% endblocktrans %}</a>
</li>
{% page_url "lawsuits" as lawsuits_url %}
{% if lawsuits_url %}
{% page_attribute "menu_title" "lawsuits" as lawsuits_title %}
{% endif %}
<li>
<a class="" href="{{ lawsuits_url|default:'/klagen/' }}">{{ lawsuits_title }}</a>
</li>
{% endif %}
{# Show either donate or signin as last item #}
{% page_url "donate" as donate_url %}
<li class="nav-sm">
<a class="text-danger"
href="{{ donate_url|default:'/spenden/' }}?pk_campaign=site-header&pk_keyword={{ request.path | urlencode }}">
<i class="fa fa-heart" aria-hidden="true"></i>
{% blocktrans %}Donate{% endblocktrans %}
</a>
</li>

<li class="nav-break" aria-hidden="true"></li>
<li class="ms-md-auto nav-search">
<form action="{{ requests_url }}" method="get">
<div class="input-group">
<input type="search"
name="q"
class="form-control"
placeholder="{% translate "Search" %}">
<button type="submit" class="btn btn-outline-primary">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="sr-only">{% translate "Search" %}</span>
</button>
</div>
</form>
</li>

{% url 'foirequest-list' as requests_url %}
<li class="">
<a class="dropdown-toggle {% if request.path == requests_url %}active{% endif %}"
href="#"
data-bs-toggle="dropdown"
aria-expanded="false">{% blocktrans %}Requests{% endblocktrans %}</a>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="{{ requests_url }}">{% blocktrans %}See requests{% endblocktrans %}</a>
{% page_url "about" as about_url %}
{% if about_url %}
{% page_attribute "menu_title" "about" as about_title %}
<li class="nav-sm order-md-first ms-md-auto">
<a href="{{ about_url|default:"/ueber-uns/" }}">{{ about_title }}</a>
</li>
<li>
<a class="dropdown-item" href="{% url 'foirequest-make_request' %}">{% blocktrans %}Make request{% endblocktrans %}</a>
{% endif %}

{% page_url "newsletter" as newsletter_url %}
{% if newsletter_url %}
<li class="nav-sm order-md-first">
<a class="" href="{{ newsletter_url }}">{% translate "Newsletter" %}</a>
</li>
{% page_url "beginnersguide" as beginners_url %}
{% if beginners_url %}
<li>
<a class="dropdown-item" href="{{ beginners_url }}">{% blocktrans %}Beginner's guide{% endblocktrans %}</a>
</li>
{% endif %}
</ul>
</li>
{% page_url "campaigns" as campaigns_url %}
<li class="">
<a class="" href="{{ campaigns_url|default:'/kampagnen/' }}">{% blocktrans %}Campaigns{% endblocktrans %}</a>
</li>
{% page_url "blog" as blog_url %}
<li class="">
<a class="" href="{{ blog_url|default:'/blog/' }}">{% blocktrans %}Investigations{% endblocktrans %}</a>
</li>
{% page_url "lawsuits" as lawsuits_url %}
{% if lawsuits_url %}
{% page_attribute "menu_title" "lawsuits" as lawsuits_title %}
{% endif %}
<li>
<a class="" href="{{ lawsuits_url|default:'/klagen/' }}">{{ lawsuits_title }}</a>
</li>
{% endif %}

<li class="ms-md-auto nav-search">
<form action="{{ requests_url }}" method="get">
<div class="input-group">
<input type="search"
name="q"
class="form-control"
placeholder="{% translate "Search" %}">
<button type="submit" class="btn btn-outline-primary">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="sr-only">{% translate "Search" %}</span>
</button>
</div>
</form>
</li>
{% page_url "donate" as donate_url %}
<li class="nav-sm order-md-first">
<a class="text-danger"
href="{{ donate_url|default:'/spenden/' }}?pk_campaign=site-header&pk_keyword={{ request.path | urlencode }}">
<i class="fa fa-heart" aria-hidden="true"></i>
{% blocktrans %}Donate{% endblocktrans %}
</a>
</li>
</ul>
</ul>
</ul>
</div>
</nav>
</div>
</nav>
</header>
33 changes: 33 additions & 0 deletions fragdenstaat_de/templates/menu/user_menu.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
{% load i18n %}
{% load account_tags %}

{% if request.user.is_authenticated %}
{% get_menu_items as menu_items %}
{% endif %}

{% if request.user.is_authenticated %}
{% for menu_item in menu_items.before_request %}
<li>
<a class="dropdown-item" href="{{ menu_item.url }}">{{ menu_item.label }}</a>
</li>
{% endfor %}
{% for menu_item in menu_items.before_settings %}
<li>
<a class="dropdown-item" href="{{ menu_item.url }}">{{ menu_item.label }}</a>
</li>
{% endfor %}
{% for menu_item in menu_items.after_settings %}
<li>
<a class="dropdown-item" href="{{ menu_item.url }}">{{ menu_item.label }}</a>
</li>
{% endfor %}
<li>
<hr class="dropdown-divider" />
</li>
<li>
<form action="{% url 'account-logout' %}" method="post" class="dropdown-item">
{% csrf_token %}
<button type="submit" class="btn btn-link p-0">{% blocktrans %}Log out{% endblocktrans %}</button>
</form>
</li>
{% endif %}
19 changes: 19 additions & 0 deletions frontend/javascript/misc/await-transition.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export default async function transitionDone(
el: HTMLElement | Array<HTMLElement> | NodeList
): Promise<void> {
if (el instanceof NodeList) {
await transitionDone([...el] as Array<HTMLElement>)
return
}

if (Array.isArray(el)) {
await Promise.all(el.map((e) => transitionDone(e)))
return
}

if (el.getAnimations().length !== 0) {
return new Promise((resolve) =>
el.addEventListener('transitionend', () => resolve(), { once: true })
)
}
}
Loading

0 comments on commit e43ae3d

Please sign in to comment.