1+ {# Load the tag library #}
2+ {% load django_bootstrap5 %}
3+
4+ {# Load lang #}
5+ {% load i18n %}
6+ {% get_current_language as LANGUAGE_CODE %}
7+
8+ {# Load CSS and JavaScript #}
9+
10+ {% bootstrap_css %}
11+ {% bootstrap_javascript %}
12+
13+ <!doctype html>
14+ < html lang ="{{ LANGUAGE_CODE }} " class ="h-100 ">
15+
16+ {% block header %}
17+
18+ < head >
19+ < meta charset ="utf-8 ">
20+ < meta name ="viewport " content ="width=device-width, initial-scale=1, shrink-to-fit=no ">
21+ < title > {% translate "Task manager" %}</ title >
22+ </ head >
23+ {% endblock %}
24+
25+ {% block navbar %}
26+
27+ < body class ="d-flex flex-column h-100 ">
28+ < header >
29+ <!-- Fixed navbar -->
30+ < nav class ="navbar navbar-expand-md navbar-light fixed-top bg-light ">
31+ < a class ="navbar-brand " href ="{% url 'index' %} "> {% translate "Task manager" %}</ a >
32+ < button class ="navbar-toggler " type ="button " data-toggle ="collapse " data-target ="#navbarCollapse "
33+ aria-controls ="navbarCollapse " aria-expanded ="false " aria-label ="Toggle navigation ">
34+ < span class ="navbar-toggler-icon "> </ span >
35+ </ button >
36+ < div class ="collapse navbar-collapse " id ="navbarCollapse ">
37+ < ul class ="navbar-nav mr-auto ">
38+ < li class ="nav-item ">
39+ < a class ="nav-link " href ="{% url 'users:user_list' %} "> {% translate "Users" %}</ a >
40+ </ li >
41+ {% if user.is_authenticated %}
42+ < li class ="nav-item ">
43+ < a class ="nav-link " href ="{% url 'statuses:status_list' %} "> {% translate "Statuses" %}</ a >
44+ </ li >
45+ < li class ="nav-item ">
46+ < a class ="nav-link " href ="{% url 'labels:label_list' %} "> {% translate "Labels" %}</ a >
47+ </ li >
48+ < li class ="nav-item ">
49+ < a class ="nav-link " href ="{% url 'tasks:task_list' %} "> {% translate "Tasks" %}</ a >
50+ </ li >
51+ {% endif %}
52+ </ ul >
53+ </ div >
54+ < div class ="collapse navbar-collapse flex-grow-0 " id ="navbarSupportedContent ">
55+ < ul class ="navbar-nav text-right ">
56+ {% if not user.is_authenticated %}
57+ < li class ="nav-item active ">
58+ < a class ="nav-link " href ="{% url 'login' %} "> {% translate "Log in" %}</ a >
59+ </ li >
60+ < li class ="nav-item active ">
61+ < a class ="nav-link " href ="{% url 'users:create_user' %} "> {% translate "Sign up" %}</ a >
62+ </ li >
63+ {% else %}
64+ < li class ="nav-item ">
65+ < a class ="nav-link disabled " href ="# " tabindex ="-1 " aria-disabled ="true ">
66+ {% translate "Logged in as" %}
67+ {{user.username }}</ a >
68+ </ li >
69+ < li class ="nav-item active ">
70+ < a class ="nav-link " href ="{% url 'logout' %} "> {% translate "Log out" %}</ a >
71+ </ li >
72+ {% endif %}
73+ </ ul >
74+ </ div >
75+ </ nav >
76+ </ header >
77+ {% endblock %}
78+
79+ <!-- Begin page content -->
80+ < main role ="main " class ="flex-shrink-0 mt-5 ">
81+ < div class ="container ">
82+ {% block content %}
83+ < h1 class ="mt-5 "> Sticky footer with fixed navbar</ h1 >
84+ < p class ="lead "> Pin a footer to the bottom of the viewport in desktop browsers with this
85+ custom HTML and
86+ CSS. A
87+ fixed navbar has been added with < code > padding-top: 60px;</ code > on the
88+ < code > main > .container</ code > .
89+ </ p >
90+ < p > Back to < a href ="../examples/sticky-footer/ "> the default sticky footer</ a > minus the
91+ navbar.</ p >
92+ {% endblock %}
93+
94+ </ div >
95+ </ main >
96+
97+ </ html >
0 commit comments