I am trying to make a simple skeleton template that is the general layout of my site. I changed it to make the three columns be inherited by child templates. But for some reason nothing at all shows up except the navbar. Also, my title and inheritance seems to not be working. That is gonna be my next question. :p
base.html
{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
<meta name="viewport" content="width=device-width, initial-size=1">
<title>{% block title %}{% endblock %} - MyFlask</title>
{% endblock %}
{% block navbar %}
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">MyFlask</a>
</div>
</div>
</nav>
{% endblock %}
<body>
<div class="col-xs-2">
{% block sidebar_left %}{% endblock %}
</div>
<div class="col-xs-8">
{% block center %}{% endblock %}
</div>
<div class="col-xs-2">
{% block sidebar_right %}{% endblock %}
</div>
</body>
index.html
{% extends "base.html" %}
{% block title%}Index{% endblock %}
{% block sidebar_left %}
<p>Text.</p>
{% endblock %}
{% block center %}
<div class="alert alert-info fade in">
Sample info popup.
×
</div>
<div class="text-center h2">Session info:</div>
<p class="text-center"><b>Browser:</b> <kbd>{{ browser }}</kbd></p>
<hr>
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-warning">Button 1</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Button 2</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Button 3</button>
</div>
</div>
{% endblock %}
{% block sidebar_right %}
<p>Text.</p>
{% endblock %}
There is a lot wrong with your code.
First of all, your nav element should be within the body tag. I guess this is the reason why nothing shows up. Basically ALL 'visible' html should be within the body tag.
Second, you need to wrap your .col-xs-x classes with a .container and .row element for the bootstrap grid system to work properly. Bootstrap grid system
Related
The news saved in the system will come to my page. I pulled data from django. Currently the data is coming one after the other. I want to pull 3 data side by side after it's will be 3 data below again and so it will go like that. How can i do this?
My kategori.html:
{% extends "homebase.html" %}
{% block title %} {{ setting.title }} {% endblock %}
{% block keywords %} {{ setting.keywords }} {% endblock %}
{% block description %} {{ setting.description }} {% endblock %}
{% block head %}
<link rel="icon" type='image/png' href='{{ setting.icon.url }}'/>
{% endblock %}
{% block header %}{% include 'header.html'%}{% endblock %}
{% block sidebar %}{% include "sidebar.html" %}{% endblock %}
{% block content %}
{% load static %}
<section id="news" data-stellar-background-ratio="2.5">
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12">
<div class="section-title wow fadeInUp" data-wow-delay="0.1s">
<h2>TIBBİ BİRİMLER KATEGORİSİ</h2>
</div>
</div>
<div class="col-md-4 col-sm-6" >
<!-- NEWS THUMB -->
<div class="news-thumb wow fadeInUp" data-wow-delay="0.4s">
{% for rs in category %}
<a href="kategori.html">
<img src="{{rs.image.url}}" class="img-responsive" alt="">
</a>
<div class="news-info">
<span>{{rs.create_at}}</span>
<h3>{{rs.title}}</h3>
<p>{{rs.description}}</p>
<div class="author">
<div class="author-info">
<p>{{rs.keywords}}</p>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
{% endblock %}
{% block footer %}{% include "footer.html" %}{% endblock %}
My page's screenshots for rn:
enter image description here
(included website image) Essentially, on my website it displays the "Browse Topics" as well as the list of Topics indented as though it is 3fr(It is navigation so it should be on the left) while the "2 Rooms Available" and their contents are displayed beneath but as 1fr. . X.X
Home.html Code
{% extends 'main.html' %}
{% block content %}
<style>
.home-container{
display: grid;
grid-template-columns: 1fr 3fr;
}
</style>
<div class="home-container">
<div>
<h3>Browse Topics</h3>
<hr>
<div>
All
</div>
{% for topic in topics %}
<div>
{{topic.name}}
</div>
{% endfor %}
</div>
<div>
<h5>{{room_count}} rooms available</h5>
Create Room
<div>
{% for room in rooms %}
<div>
Edit
Delete
<span>#{{room.host.username}}</span>
<h5>{{room.id}} -- {{room.name}}</h5>
<small>{{room.topic.name}}</small>
<hr>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock content %}
Website Image
When I remove the browse topic column then the other column moves to the 3fr spot.
SOmething commandeering the 1fr column
Main.html File
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-9'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>StudyBud</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
{% include 'navbar.html' %}
{% if messages %}
<ul class="messages">
{% for message in messages %}
<li></li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% block content %}
{% endblock content %}
</body>
</html>
Navbar.html File
<a href="/">
<h1>LOGO</h1>
</a>
<form method="GET" action="{% url 'home' %}">
<input type="text" name="q" placeholder="Search Rooms..." />
</form>
<a href="{% url 'login' %}">Login<a/>
<hr>
To start with - these divs seem to have gotten out of synch. They are closing off your home container too early. Try removing the last .
{% endfor %}
</div>
</div>
If you just put the raw html you have provided into a .html file and test, that seems to behave as you'd expect, with topic in 1fr and rooms in 3fr. If browse topics is still in your 3fr region, you may need to check your main.html template to see if something else is interfering.
Edit after additional files provided
<a href="{% url 'login' %}">Login<a/>
See the closing <a/> tag in your navbar file? That is mucking up everything. Replace it with </a>
Somebody can help me how to solve this problem, why my templatetags isn't rendered in the template? but, only rendered as None instead.
Previously I working with Django==1.10.4.
1. templatetags/total_tags.py, I already created __init__.py inside this folder.
from django import template
from myapp.models import Category
register = template.Library()
#register.simple_tag
def total_categories():
"""
{% load total_tags %}
{% total_categories %}
used in: `includes/menus_dashboard.html`
"""
print(Category.objects.all()) # this worked well
Category.objects.all().count()
2. myapp/dashboard.html
{% extends "base.html" %}
{% load i18n %}
{% block title %}{% trans "Dashboard" %} :: {{ block.super }}{% endblock %}
{% block content %}
<div class="ui two column stackable grid">
<div class="four wide column dashboard-menu">
{% include "includes/menus_dashboard.html" %}
</div>
</div>
{% endblock %}
3. includes/menus_dashboard.html
The templatetags of {% total_topics %} is similiar with {% total_categories %}
{% load total_tags %}
<div class="ui fluid large inverted vertical pointing menu">
<a class="active item">
Dashboard
</a>
<a class="item">
Categories <div class="ui small label">{% total_categories %}</div>
</a>
<a class="item">
Topics <div class="ui small label">{% total_topics %}</div>
</a>
<a class="item">
Moderators <div class="ui small label">2</div>
</a>
<div class="item">
<div class="ui icon input">
<input type="text" placeholder="Search threads...">
<i class="search icon"></i>
</div>
</div>
</div>
Another idea, I tried like this answer: https://stackoverflow.com/a/12143011. and handle it with #register.assignment_tag, but still doesn't work well and only None instead.
It seems if I use {% extends "base.html" %} it inherits the template correctly but the navbar doesn't use bootstrap.
If I use {% extends "bootstrap/base.html" %} it doesn't even work. I don't get errors but it just sets the title to Index and then the page is blank.
Another note: The only way I've gotten the navbar to show up is directly putting it inside index.html and using {% extends "bootstrap/base.html" %}
I am using Flask Web Development by Miguel Grinberg and the code is identical except the obvious content.
What am I doing wrong? And does anyone have good resources for slowly jumping into Flask that doesn't just dive in head first? I'm having trouble understanding the little nitpicky details.
base.html:
{% extends "bootstrap/base.html" %}
<html>
<head>
{% block head %}
<title>{% block title %}{% endblock %} - MyFlask</title>
{% endblock %}
</head>
<body>
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navbar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyFlask</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
</body>
</html>
index.html:
{% extends "base.html" %}
{% block title %}Index{% endblock %}
{% block page_content %}
<h3>Session info:</h3>
<p><b>Browser:</b> {{ browser }}</p>
{% endblock %}
When using the template inheritance it is common to define the structure of the layout in the base template, and then provide the specific details of each child template in the blocks (like content, page_content, etc).
In the above example where the base template itself is a child template (of "bootstrap/base.html"), the same pattern can be used.
Instead of defining HTML tags (like <html>, <head>, etc.) it's better to use the corresponding blocks. Flask bootstrap defines such blocks corresponding to each of these HTML tags, where child templates can override.
So if you change the base.html template as follows, then the index template can use the layout defined in bootstrap/base:
{% extends "bootstrap/base.html" %}
{% block head %}
{{ super() }}
<title>{% block title %}{% endblock %} - MyFlask</title>
{% endblock %}
{% block navbar %}
<div class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navbar</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">MyFlask</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>Home</li>
<li></li>
</ul>
</div>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
{% block page_content %}{% endblock %}
</div>
{% endblock %}
Note that in the head block, we are using super() to bring whatever Flask bootstrap has defined in the head block (could be loading CSS, JS files, etc.). This allows the base.html template to customize the head section. However if you do not require this control and only want to specify the title of the page, then you can avoid overwriting head block and just define the title block. To do this change base.html file to start like:
{% extends "bootstrap/base.html" %}
{% block title %}{% block page_name %}{% endblock %} - MyFlask{% endblock %}
Removing {% block head %} ... section.
And then modify your index.html template to define the page_name block instead of title:
{% extends "base.html" %}
{% block page_name %}Index{% endblock %}
{% block page_content %}
<h3>Session info:</h3>
<p><b>Browser:</b> {{ browser }}</p>
{% endblock %}
Now the title of the index page will be "Index - MyFlask", so you could have a common suffix for the title of all the pages.
Or if you need each page to have their own specific title, you may define the title block in there, overriding the title block in base.html.
I can edit a parent child relationship using the TablularInline and StackedInline classes, however I would prefer to list the child relationships as a change list as there is a lot of information and the forms are too big. Is there an inline change list available in DJango admin or a way or creating one?
There's no such functionality built in, but I don't think it would be hard to create your own AdminInline subclass (and an accompanying template for it) that would do this. Just model it off TabularInline, but display fields' data directly instead of rendering form fields.
So I was actually able to achieve this with quite the hack. Django Admin needs some updates and InlineAnything would be one.
Download Library: https://github.com/smartlgt/django-fakeinline
class MyInlineTest(FakeInline):
def __init__(self, parent_model, admin_site):
super().__init__(parent_model, admin_site)
self.template = Template('')
self.admin_site = admin_site
def get_fields(self, request, obj=None):
dpaa = DisplayProductAccessAdmin(DisplayProductAccess, self.admin_site)
dpaa.change_list_template = 'test.html'
self.template = Template(dpaa.changelist_view(request, {}).rendered_content)
return FakeInline.get_fields(self, request, obj=obj)
Then in your test.html, take most of the contents of the change_list.html from Django. Since we're using Jazzmin let's go with that.
{% load i18n admin_urls static admin_list jazzmin %}
{% block extrastyle %}
<link rel="stylesheet" href="{% static 'vendor/select2/css/select2.min.css' %}">
{% if cl.formset or action_form %}
<script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
{% endif %}
{{ media.css }}
{% if not actions_on_top and not actions_on_bottom %}
<style>
#changelist table thead th:first-child {width: inherit}
</style>
{% endif %}
{% endblock %}
{% block extrahead %}
{{ media.js }}
{% endblock %}
{% block content %}
<div class="col-12">
<div class="card card-primary card-outline">
<div class="card-header">
<h4 class="card-title">{{ title }}{% block pretitle %}{% endblock %}</h4>
<div class="card-tools form-inline">
{% block date_hierarchy %}{% if cl.date_hierarchy %}{% date_hierarchy cl %}{% endif %}{% endblock %}
{% block search %}
{% search_form cl %}
{% endblock %}
</div>
</div>
<div class="card-body">
<form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %}enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
<div id="content-main">
{% if cl.formset and cl.formset.errors %}
<p class="errornote">
{% if cl.formset.total_error_count == 1 %}
{% trans "Please correct the error below." %}
{% else %}
{% trans "Please correct the errors below." %}
{% endif %}
</p>
{{ cl.formset.non_form_errors }}
{% endif %}
<div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
<div class="row">
<div class="col-12">
{% if cl.formset %}
<div>{{ cl.formset.management_form }}</div>
{% endif %}
{% block result_list %}
<div class="row">
<div class="col-12 col-sm-8">
{% if action_form and actions_on_top and cl.show_admin_actions %}
{% admin_actions %}
{% endif %}
</div>
<div class="col-12 col-sm-4">
{% block object-tools %}
{% block object-tools-items %}
{% change_list_object_tools %}
{% endblock %}
{% endblock %}
</div>
</div>
<hr/>
{% result_list cl %}
{% if action_form and actions_on_bottom and cl.show_admin_actions %}
<div class="row">
<div class="col-12">
{% admin_actions %}
</div>
</div>
{% endif %}
{% endblock %}
</div>
</div>
<div class="row">
{% block pagination %}{% pagination cl %}{% endblock %}
</div>
</div>
</div>
</form>
</div>
</div>
<br class="clear"/>
</div>
{% endblock %}
{% block extrajs %}
<script type="text/javascript" src="{% static 'vendor/select2/js/select2.min.js' %}"></script>
<script type="text/javascript" src="{% static 'jazzmin/js/change_list.js' %}"></script>
{% endblock %}