I am building a web app that has an interactive map of venues in my hometown. The app is written in Django and the map itself is built using Folium, then is saved as map.html and rendered in a template as follows:
{% extends "venues/layout.html" %}
{% block body %}
{% include 'venues/map.html' %}
{% endblock %}
The layout.html file simply has a bootstrap navbar:
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top" id="navbar-default">
<a class="navbar-brand" href="/">CultureMapMilano</a>
<div>
<ul class="navbar-nav mr-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link"
href=""><strong>{{ user.username }}</strong></a>
</li>
{% endif %}
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">Log In</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'register' %}">Register</a>
</li>
{% endif %}
</ul>
</div>
</nav>
{% block body %}
{% endblock %}
<script src="" async defer></script>
</body>
The issue. When I click on the map the navbar simply disappears. It's still there in the DOM but it's behind the map.
I assume it's a problem I could fix with css but I don't know how to (adding a high z-index to the navbar didn't help).
Interestingly putting the %include% inside a means the map just doesn't show - no idea why.
Can someone suggest a way to fix this or a workaround?
Found the answer: just add a height property set to e.g. 90% when generating the Folium map.
Related
I tried to put 2 links in 1 tab but wasn't really successful here i is my navbar code:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<title>{% block title %} welcome to music stories{% endblock %}</title>
</style>
</head>
<body>
{% if user.is_authenticated %}
<div class='alert alert-success alert-dismissible fade show'>
<button type= 'btn' class="btn-close" data-bs-dismiss='alert'></button>
<p>{{user.username}}, welcome to music stories world</p>
</div>
{% else %}
<div class="alert alert-danger alert-dismissible fade show">
<button type="btn" class="btn-close" data-bs-dismiss='alert'></button>
Log In
</div>
{% endif %}
Home
<nav class="navbar text-dark bg-warning container-fluid">
<ul class="nav nav-tabs">
{% if user.is_authenticated %}
<li class="nav-item">
<a class='nav-link active' href="#">{{user.username}}</a><br>
<a class="nav-link" href=" {% url 'user:logout' ">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class='nav-link active' href="{% url 'login' %}"> Log In</a>
<a class="nav-link" href="{% url 'users:signup'%}">Sign Up</a>
</li>
{% endif %}
`<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle='dropdown' href="tags">tags</a>
<ul class="dropdown-menu">
<li><a class="nav-item" href="#">tag1</a></li>
<li><a class='nav-item' href="#">tag2</a></li>
<li><a class="nav-item" href="#">tag3</a></li>
</ul>
</li>
<li class="nav-item"><a class="nav-link">communication</a></li>
<li class="nav-item">
<a class="nav-link" href="{% url 'pages:musiclist' %}">music list</a>
</li>
<li class="nav-item">
<a class='nav-link' href="{% url 'pages:music_create' %}">add</a>
</li>
</ul>
</nav>
<div>
{% block content %}{% endblock %}
</div>
</body>
</html>
i wanted to put both username and logout both in 1 tab or login and logout ,how can i put 2 link in 1 tab to act like 1 tab?
i had a second question that is not related to topic but can i override .container of <body> in <nav>.
based on what I understood from your explanation is that you can use a DROPDOWN that contains username and logout (check this link).
about overriding the container class, the better solution is to add a class, with a different name like; container-main, in your css file with what you wish to be like and add it to you div.
I don't get it, If I remove the last <li> I'm not getting this error, here's my HTML,
I know I'm not closing a "if" tag correctly or something, the only solution for me is to remove the last last <li>
{% if request.get_full_path != "/addAssest/" and request.user.is_authenticated
%}
<div class="sidebar" style="height: 35%">
<div class="sidebar-wrapper">
<div class="logo">
<a
target="_blank"
href="https://www.creative-tim.com/product/black-dashboard-django"
class="simple-text logo-mini"
>
CC
</a>
<a
target="_blank"
href="https://www.creative-tim.com/product/black-dashboard-django"
class="simple-text logo-normal"
>
Crypto Castle
</a>
</div>
<ul class="nav">
<li class="{% if 'index' in segment %} active {% endif %}">
<a href="/">
<i class="tim-icons icon-chart-pie-36"></i>
<p>Dashboard</p>
</a>
</li>
<li class="{% if 'page-user' in segment %} active {% endif %}">
<a href="{% url 'profilePage' %}">
<i class="tim-icons icon-single-02"></i>
<p>User Profile</p>
</a>
</li>
<li class="{% if 'logout' in segment %} active {% endif %}">
<a href="{% url 'logout' %}">
<i class="tim-icons icon-user-run"></i>
<p>Logout</p>
</a>
</li>
</ul>
</div>
</div>
{% endif %}
Django template does not support multiline tags and tag escape tags as stated in this Ticket
You should edit your code :
{% if request.get_full_path != "/addAssest/" and request.user.is_authenticated
%}
to
{% if request.get_full_path != "/addAssest/" and request.user.is_authenticated %}
Note that most HTML linter will try to break your template tag so it is best to deactivate it
I have a question for you. I have the following structure:
__Base.html
__main_sidebar.html
__conto_economico.html
The _main_sidebar.html is the following:
{% block nav_links_ul %}
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
{% block nav_links_outer %}
<li class="nav-header">{% block nav_heading %}PERFORMANCE MONITORING{% endblock %}</li>
{% block nav_links %}
<li class="nav-item">
<a href="#" class="nav-link">
<i class="nav-icon fas fa-tachometer-alt"></i>
<p>Dashboard</p>
</a>
</li>
<li class="nav-item">
<a href="/conto_economico" class="nav-link">
<i class="nav-icon fas fa-chart-bar"></i>
<p>Conto Economico</p>
</a>
</li>
It is include in my base.html:
{% block nav_sidebar %}
{% include 'adminlte/lib/_main_sidebar.html' %}
{% endblock %}
My conto_economico.html is an extends of base.html
{% extends 'adminlte/base.html' %}
{% block content %}
{% endblock content %}
Now I want that, when I press on the link in my sidebar (ad example /conto_economico) and the new page is upload, I want tha the relative nav-link become nav-link active as the following:
<a href="/conto_economico" class="nav-link active">
Could I get it?
you may include your template with some context passed to it like
{% include 'adminlte/lib/_main_sidebar.html' with active_menu_item=active_menu_item %}
and then in your view when sending data to this template (or with a middleware) send a context key and value like:
context = {'active_menu_item': 'conto_economico', ...}
and then in your template check it out like:
<li class="nav-item">
<a href="/conto_economico"
class="nav-link {% if active_menu_item=='conto_economico' %} active {% endif %}">
<i class="nav-icon fas fa-chart-bar"></i>
<p>Conto Economico</p>
</a>
</li>
also note that you may need to change your extended view too.
let me know if that worked for you.
django include tempate tag
You can use as many blocks as you want. just name them unique.
two blocks cannot have the same name.
Base Template---
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="{% static 'cpanel/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'cpanel/css/main.css' %}">
<link rel="stylesheet" href="{% static 'cpanel/css/font_awesome_css_all.css' %}"/>
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Document</title>
{% block head %}
{% endblock head %}
</head>
<body>
{% block heading %}
block for heading
{% endblock heading %}
{% block content %}
block for content
{% endblock content %}
</body>
{% block script %}
block for script
{% endblock script %}
</html>
Child template---
{% extends 'base.html' %}
{% block head %}
{% endblock head %}
{% block heading %}
<ol class="breadcrumb mb-4">
<li class="breadcrumb-item active">Dashboard/Vendors</li>
</ol>
<hr>
{% endblock heading %}
{% block content %}
{% endblock content %}
When I click on the button to go to the post job page I want the navigation to show by extending base.html, but I don't want the post job button to show on the page anymore beings I'm on the post job page. How would I do this?
I don't really want to use javascript window.onload to remove it.
any other ideas or how would I do this in flask?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}JustRemote</title>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<body>
<header class="header">
<nav class="nav">
<a class="logo" href="{{ url_for('index') }}"ß"><span class="logo-char">J</span>ust<span class="logo-char">R</span>emote</a>
<ul class="nav-list">
<li class="nav-item">
<a class="nav-link" href="{{ url_for('index')}}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('index')}}">Tech</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('index')}}">Design</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('index')}}">Customer Service</a>
</li>
</ul>
</nav>
{% block button %}
<form class="post-job-form" action="{{ url_for('post_job') }}">
<button class="post-job" type="submit">Post Job :)</button>
</form>
{% endblock %}
</header>
{% block content %}
{% endblock %}
</body>
</html>
If I understand you correctly, doing this on the Post Jobs page should work.
{% extend "base.html" %}
{% block button %}{% endblock %}
{% block content %} Hi! {% endblock %}
I would like to create the links of the menu dynamically based on the Category models. I've used DetailView and ListView for create a list and detail page of a single category and it run fine.
Now I would like to see in base.html a new link in a "dropdown" menu every time the user add a new Category.
This is base.html
{% load static %}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>{% block head_title %}Test{% endblock head_title %}</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'list_tag' %}">Tag</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% for category in category_list %}
{{ category.category_name }}
{% endfor %}
</div>
</li>
</div>
</nav>
<div class="container">
<!-- INIZIO corpo centrale -->
{% block content %}
{% endblock content %}
<!-- FINE corpo centrale -->
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
This is list_category.html
{% extends 'base.html' %}
{% load static %}
{% block head_title %}Elenco Categorie | {{ block.super }}{% endblock head_title %}
{% block content %}
{% for category in category_list %}
<h1>{{ category.category_name }}</h1>
<hr>
{% endfor %}
{% endblock content %}
This is views.py
class CategoryList(ListView):
model = Category
context_object_name = 'category_list'
template_name = "list_category.html"
class SingleCategory(DetailView):
model = Category
template_name = "single_category.html"
When I use the code in base.html it was shown an empty menu.
How I can resolve?
UPDATE:
Using the solution of #ans2human in this post, I've created a file context_processors.py like below:
from .models import Category
def blog_menu(request):
link_menu = Category.objects.all()
return {
'link_menu': link_menu
}
Then I've added the string in settings.py:
'blog.context_processors.blog_menu',
The new strings of dropdown menu are these:
<li class="nav-item active dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="far fa-newspaper" id="img"></i> Blog
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#"></i> {{ link_menu }}</a>
</div>
</li>
Now I've this situation in the menu
It seems that work but not correctly. How I can resolve?
UPDATE 2
Good news!
Since I'm not a django expert, I had a trivial difficulty. By reasoning a little more, I found the solution.
Below the solution:
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
{% for link in link_menu %}
<a class="dropdown-item" href="{{ link.get_absolute_url }}"> {{ link.category_name }}</a>
{% endfor %}
</div>
def get_url(self):
return reverse('product-by-category',args=[self.slug])
{% for menu in links %}
<a class="dropdown-item" href="{{menu.get_url}}">{{menu.category_name}}</a>
{% endfor %}