Skip to content

Commit

Permalink
🚧 initial draft
Browse files Browse the repository at this point in the history
  • Loading branch information
@krmax44
krmax44 committed Aug 22, 2023
1 parent 6735dae commit b764c8a
Show file tree
Hide file tree
Showing 4 changed files with 213 additions and 263 deletions.
332 changes: 113 additions & 219 deletions fragdenstaat_de/templates/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,240 +12,134 @@
{% endif %}

<header id="header">
<div class="container">
<nav class="navbar navbar-fds bg-body">
{% page_url "home" as home_url %}
<a href="{{ home_url|default:'/' }}" class="navbar-brand navbar-brand-fds">
{% render_svg "img/header_logo.svg" %}
<span class="visually-hidden visually-hidden-focusable">{% block nav_brand_name %}{{ SITE_NAME }}{% endblock %}</span>
</a>
{% url 'foirequest-list' as requests_url %}
{% block nav %}
<div class="navbar-expand-md">
<button class="navbar-toggler ms-auto position-relative z-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#menu" aria-controls="menu" aria-label="{% translate "Toggle main menu" %}">
<span class="navbar-toggler-icon"></span>
{% translate "Menu" %}
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="menu" aria-labelledby="menu-label">
<div class="offcanvas-header">
{% render_svg "img/header_logo.svg" %}
<h5 id="menu-label" class="visually-hidden">{% translate "Main Menu" %}</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{% translate "Close" %}"></button>
</div>
<div class="offcanvas-body d-flex flex-column">
<ul class="navbar-nav navbar-nav-primary">
<li class="nav-item dropdown">
<a class="nav-link 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>

{% page_url "campaigns" as campaigns_url %}
<li class="nav-item">
<a class="nav-link {% if request.path == campaigns_url %}active{% endif %}" href="{{ campaigns_url|default:'/kampagnen/' }}">
{% blocktrans %}Campaigns{% endblocktrans %}
</a>
</li>

{% page_url "blog" as blog_url %}
<li class="nav-item">
<a class="nav-link {% if request.path|startswith:blog_url %}active{% endif %}" 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 class="nav-item">
<a class="nav-link {% if request.path == lawsuits_url %}active{% endif %}" href="{{ lawsuits_url|default:'/klagen/' }}">
{{ lawsuits_title }}
</a>
</li>

</ul>
<ul class="navbar-nav navbar-nav-secondary me-auto">

{% page_url "about" as about_url %}
{% if about_url %}
{% page_attribute "menu_title" "about" as about_title %}
{% endif %}
<li class="nav-item">
<a class="nav-link {% if request.path|startswith:about_url %}active{% endif %}" href="{{ about_url|default:"/ueber-uns/" }}">
{{ about_title }}
</a>
</li>

{% page_url "newsletter" as newsletter_url %}
{% if newsletter_url %}
<li class="nav-item">
<a class="nav-link {% if request.path|startswith:newsletter_url %}active{% endif %}" href="{{ newsletter_url }}">{% translate "Newsletter" %}</a>
</li>
{% endif %}

{# Show either donate or signin as last item #}
{% page_url "donate" as donate_url %}
{% if request.user.is_authenticated %}
<li class="nav-item logged-in">
<a class="nav-link fw-bold 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>
{% else %}
{% url 'account-login' as login_url %}
<li class="nav-item">
<a class="nav-link {% if request.path|startswith:login_url %}active{% endif %}" href="{% url 'account-login' %}?next={{ request.path|urlencode }}">
<i class="fa fa-sign-in" aria-hidden="true"></i>
{% blocktrans %}Sign in{% endblocktrans %}
</a>
</li>
{% endif %}
</ul>
<div class="d-md-none">
<hr/>
<form action="{{ requests_url }}" method="get">
<p>{% blocktrans %}Search requests, authorities, investigations etc.{% endblocktrans %}</p>
<div class="input-group">
<input type="text" name="q" class="form-control">
<button type="submit" class="btn btn-outline-primary">
{% translate "Search" %}
</button>
</div>
</form>
</div>
</div>
</div>
</div>
{% endblock nav %}

<ul class="navbar-nav ms-auto d-flex flex-row">

{% block nav_search %}
<li class="nav-item {% block nav_search_class %}d-none {% if request.user.is_authenticated %}d-sm-block{% else %}d-md-block{% endif %}{% endblock nav_search_class %}">
<button class="nav-link fw-bold me-2" data-bs-toggle="modal" data-bs-target="#search-modal" aria-label="{% translate "Search" %}" title="{% translate "Search" %}">
<i class="fa fa-search" aria-hidden="true"></i>
<span class="d-none d-lg-inline-block">{% translate "Search" %}</span>
<nav class="navbar navbar-fds bg-body">
<div class="container">
<ul class="nav-ul w-100">
<li class="d-md-none">
<button class="btn" id="toggle-mobile-nav">
<span class="navbar-toggler-icon"></span>
<span class="visually-hidden">{% trans "Menu" %}</span>
</button>
</li>
{% endblock nav_search %}

{% block nav_donate %}
<li class="nav-item ms-2 {% block nav_donate_class %}{% if request.user.is_authenticated %}d-md-none{% endif %}{% endblock nav_donate_class %}">
<a class="nav-link fw-bold text-danger" href="{{ donate_url|default:'/spenden/' }}?pk_campaign=site-header&pk_keyword={{ request.path | urlencode }}" aria-label="{% translate "Donate" %}" title="{% translate "Donate" %}">
<i class="fa fa-heart" aria-hidden="true"></i>
<span class="d-none d-sm-inline">{% translate "Donate" %}</span>
{% page_url "home" as home_url %}
<li class="nav-logo">
<a href="{{ home_url|default:'/' }}"
class="navbar-brand navbar-brand-fds">
{% render_svg "img/header_logo.svg" %}
<span class="visually-hidden visually-hidden-focusable">
{% block nav_brand_name %}{{ SITE_NAME }}{% endblock %}
</span>
</a>
</li>
{% endblock nav_donate %}

{% block nav_account_login %}
<li class="d-md-none">
{% if request.user.is_authenticated %}
<li class="nav-item ms-2 align-self-center">
<button class="btn py-0 pe-0" type="button" data-bs-toggle="offcanvas" data-bs-target="#user-menu" aria-controls="user-menu" aria-label="{% translate "Toggle account menu" %}">
{% if request.user.profile_photo %}
<img width="32" height="32" src="{% thumbnail request.user.profile_photo 64x64 %}" alt="{{ request.user.get_full_name }}" class="img-fluid rounded-circle">
{% else %}
<div class="rounded-circle text-bg-callout d-flex justify-content-center align-items-center" style="aspect-ratio: 1/1; height: 32px">
<i class="fa fa-user" aria-hidden="true"></i>
<span class="visually-hidden">{{ request.user.first_name }}</span>
</div>
{% endif %}
</button>
</li>
{% endif %}
{% endblock %}
</ul>
{% if request.user.is_authenticated %}
<div class="offcanvas offcanvas-end" tabindex="-1" id="user-menu" aria-labelledby="user-menu-label">
<div class="offcanvas-header text-bg-callout">
<h5 id="user-menu-label" class="visually-hidden">{% translate "Account Menu" %}</h5>
{% if request.user.profile_photo %}
<img width="32" height="32" src="{% thumbnail request.user.profile_photo 64x64 %}" alt="{{ request.user.get_full_name }}" class="img-fluid rounded-circle">
<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 %}
<div class="flex-column">
<span class="d-block text-truncate">{{ request.user.get_full_name }}</span>
<small class="d-block text-truncate">{{ request.user.email }}</small>
</div>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{% translate "Close" %}"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
{% for menu_item in menu_items.before_request %}
<li class="nav-item">
<a class="nav-link" href="{{ menu_item.url }}">
{{ menu_item.label }}
</a>
</li>
{% endfor %}
{% for menu_item in menu_items.before_settings %}
<li class="nav-item">
<a class="nav-link" href="{{ menu_item.url }}">
{{ menu_item.label }}
</a>
</li>
{% endfor %}
{% for menu_item in menu_items.after_settings %}
<li class="nav-item">
<a class="nav-link" href="{{ menu_item.url }}">
{{ menu_item.label }}
</a>
</li>
{% endfor %}
<li class="nav-item">
<hr/>
<form action="{% url 'account-logout' %}" method="post">
{% csrf_token %}
<button type="submit" class="nav-link">
{% blocktrans %}Log out{% endblocktrans %}
</button>
</form>
</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>

<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>
</li>
{% endif %}
{% page_url "newsletter" as newsletter_url %}
{% if newsletter_url %}
<li class="nav-sm">
<a class="" href="{{ newsletter_url }}">{% translate "Newsletter" %}</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>

{% 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>
</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>
</ul>
</div>
{% 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 %}
</div>
</nav>
</div>
<div class="modal" tabindex="-1" id="search-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<form action="{% block nav_search_url %}{% url 'foirequest-list' %}{% endblock nav_search_url %}" method="get">
<button type="button" class="btn-close float-end" data-bs-dismiss="modal" aria-label="{% translate "Close" %}"></button>
<p>{% blocktrans %}Search requests, authorities, investigations etc.{% endblocktrans %}</p>
<li>
<a class="" href="{{ lawsuits_url|default:'/klagen/' }}">{{ lawsuits_title }}</a>
</li>

<li class="ms-md-auto nav-search">
<form action="{{ requests_url }}" method="get">
<div class="input-group">
<input type="text" name="q" class="form-control" data-focus="true">
<input type="search"
name="q"
class="form-control"
placeholder="{% translate "Search" %}">
<button type="submit" class="btn btn-outline-primary">
{% translate "Search" %}
<i class="fa fa-search" aria-hidden="true"></i>
<span class="sr-only">{% translate "Search" %}</span>
</button>
</div>
</form>
</div>
</div>
</div>
</li>
</ul>
</ul>
</div>
</nav>
</header>
1 change: 1 addition & 0 deletions frontend/javascript/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import 'froide/frontend/javascript/snippets/color-mode'
import './donation-form'
import './magnifier'
import './misc'
import './navbar'
import './slider.js'
import './smooth-scroll'
import './top-banner'
Expand Down
3 changes: 3 additions & 0 deletions frontend/javascript/navbar.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
document.querySelector('#toggle-mobile-nav')?.addEventListener('click', () => {
document.querySelector('#nav-menu')?.classList.toggle('show')
})
Loading

0 comments on commit b764c8a

Please sign in to comment.