Django : Plotly plot shows on localhost but not on heroku - html

I am trying to display some plots(created with plotly) on my page, it works totally fine on localhost but when deployed on heroku the plots are not shown.
code to create plot in views.py
def icons(request, name):
l1 = testtable.objects.values()
d1 = []
d2 = []
for i in l1:
d1.append(i["d1"])
d2.append(i["d2"])
fig =px.bar(x=d1,y=d2)
photo = plotly.io.to_html(fig,config= {'displayModeBar': False})
fig2 = px.line(x=d1, y=d2)
photo1 = plotly.io.to_html(fig2,config= {'displayModeBar': False})
return render(request, 'icons.html', {'name':name,"photo":photo,"photo1":photo1})
code in icons.html
{% extends 'index.html' %} {% block content %}
<div class="content icon-content">
<div class="container icon-container">
<h3 class="icon-heading">Quick Launch</h3>
<div class="icon-bar">
<a class="active" href="#"><i class="fas fa-hand-pointer fa-2x"></i><span>Time In/Out</span></a>
<i class="fa-solid fa-copy fa-2x"></i><span>My Attendance Record</span>
<i class="fa-solid fa-calendar-minus fa-2x"></i><span>My Leave List</span>
<i class="fa-solid fa-file-invoice-dollar fa-2x"></i><span>My Payslips</span>
<i class="fa-solid fa-calendar-check fa-2x"></i><span>Apply Leave</span>
<i class="fa-solid fa-calendar-days fa-2x"></i><span>My Timesheet</span>
<i class="fa-solid fa-people-group fa-2x"></i><span>My Team</span>
</div>
</div>
<hr>
<div class="container icon-container">
<h3 class="icon-heading">Pending My Approval</h3>
<div class="icon-bar">
<a class="active" href="#"><i class="fa-solid fa-file-circle-check fa-2x"></i><span>Leave</span></a>
<i class="fa-solid fa-user-check fa-2x"></i><span>Attendance Regularization</span>
<i class="fa-solid fa-business-time fa-2x"></i><span>Timesheet</span>
</div>
</div>
<div>
{% if photo %} {{ photo|safe }} {% else %}
<p>No graph was provided.</p>
{% endif %}
</div>
<div>
{% if photo1 %} {{ photo1|safe }} {% else %}
<p>No graph was provided.</p>
{% endif %}
</div>
</div>
{% endblock %}
When run on heroku
When run on localhost

Related

Unwanted gaps appear on the template (Django)

I give the products to the page with the loop in the template, but there is a problem. There is a gap on the page and I can't find the reason. Most likely because of HTML codes. I will be glad if you help.
This gap in the middle
products.html
<!-- STORE -->
<div id="store">
<!-- row -->
<div class="row">
<!-- Product Single -->
{% for product in products %}
{% if product.available %}
<div class="col-md-4 col-sm-6 col-xs-6">
<div class="product product-single">
<div class="product-thumb">
<div class="product-label">
<span>New</span>
{% if product.sale %}
<span class="sale">-{{product.sale}}%</span>
{% endif %}
</div>
<button class="main-btn quick-view"><i class="fa fa-search-plus"></i> Göz At</button>
<img src="{{product.main_image.url}}" alt="">
</div>
<div class="product-body">
{% if product.sale %}
<h3 class="product-price">{{product.discount}} AZN <del class="product-old-price">{{product.price}} AZN</del></h3>
{% else %}
<h3 class="product-price">{{product.price}} AZN</h3>
{% endif %}
<div class="product-rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o empty"></i>
</div>
<h2 class="product-name">{{product.name}}</h2>
<div class="product-btns">
<button class="main-btn icon-btn"><i class="fa fa-heart"></i></button>
<button class="main-btn icon-btn"><i class="fa fa-exchange"></i></button>
<button class="primary-btn add-to-cart"><i class="fa fa-shopping-cart"></i> Səbətə At</button>
</div>
</div>
</div>
</div>
{% endif %}
{% endfor %}
<!-- /Product Single -->
</div>
<!-- /row -->
</div>
<!-- /STORE -->

Iterogation JSON datafile in Jekyll produces double output

I try to build a documentation site with Jekyll and thought it might be a good idea to store the main links in a JSON datafile.
Here's the JSON file:
{
"home": {
"name": "Home",
"path": "/",
"icon": "fas fa-home"
},
"faq": {
"name": "FAQ",
"path": "/faq",
"icon": "fas fa-question"
},
"manuals": {
"name": "Anleitungen",
"path": "/manuals",
"icon": "fas fa-book-open"
}
}
Here's my template (part of it):
<div class="navbar-menu">
<div class="navbar-start">
{% for rubrik in site.data.navigation %}
{% for part in rubrik %}
<a class="navbar-item{% if page.url == part.path %} is-active{% endif %}" href="{{ part.path }}">
<span class="icon"><i class="{{ part.icon }}"></i></span><span>{{ part.name }}</span>
</a>
{% endfor %}
{% endfor %}
</div>
</div>
This actually produces this output:
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item" href="">
<span class="icon"><i class=""></i></span><span></span>
</a>
<a class="navbar-item is-active" href="/">
<span class="icon"><i class="fas fa-home"></i></span><span>Home</span>
</a>
<a class="navbar-item" href="">
<span class="icon"><i class=""></i></span><span></span>
</a>
<a class="navbar-item" href="/faq">
<span class="icon"><i class="fas fa-question"></i></span><span>FAQ</span>
</a>
<a class="navbar-item" href="">
<span class="icon"><i class=""></i></span><span></span>
</a>
<a class="navbar-item" href="/manuals">
<span class="icon"><i class="fas fa-book-open"></i></span><span>Anleitungen</span>
</a>
</div>
</div>
You see the output is doubled, once with empty variables of the outer loop, secondly with correct values from the inner loop.
Any hints? Is this a bug or am I just using it wrong? Haven't seen any advice that a for-loop is just for one level. Jinja2 for instance can do this. My Jekyll version used is 4.0 (newest).
Many thanks in advance.
Regards, Thomas
When you loop in site.data.navigation, the loop returns an array like ["home", {"name"=>"Home", "path"=>"/", "icon"=>"fas fa-home"}].
If you try this code, you will certainly understand what's happening.
{% for rubrik in site.data.navigation %}
<p>rubrik = {{ rubrik | inspect }}</p>
<ul>
{% for part in rubrik %}
<li>part = rubrik[{{ forloop.index0 }}] = {{ part | inspect }}</li>
{% endfor %}
</ul>
{% endfor %}
In your case you can simply target rubrik[1] element like this :
<div class="navbar-menu">
<div class="navbar-start">
{% for rubrik in site.data.navigation %}
{% assign p = rubrik[1] %}
<a class="navbar-item{% if page.url == p.path %} is-active{% endif %}" href="{{ p.path }}">
<span class="icon"><i class="{{ p.icon }}"></i></span><span>{{ p.name }}</span>
</a>
{% endfor %}
</div>
</div>

How to use a HTML variable inside another

I have a piece of code that loops through some objects. I have another set of objects that I want to loop through too. Is there a way I can use the for loop.counter to increase the image object?
<div class="row">
{% for project in projects.all %}
<div class="col-md-4 col-sm-6">
<div class="news-section-single">
<div class="news-img-main">
<div class="news-img"><img src="{{ images.{{ forloop.counter }}.image.url }}" alt="" data-popupalt-original-title="null" title="">
<div class="news-list">
<ul>
<li><i class="fa fa-clock-o" aria-hidden="true"></i> {{ project.date }}</li>
</ul>
</div>
</div>
</div>
<div class="news-head">
<h3>{{ project.title }}</h3>
</div>
</div>
</div>
{% endfor %}
</div>
Hope that makes sense what I'm trying to do.
I'm sure someone will tell me I'm trying to do the wrong thing so here is my views.py
def projects(request):
projects = Project.objects.all()
images = ProjectImage.objects.all()
return render(request, 'projects.html', {'projects': projects,
'images': images})
And my models.py
class Project(models.Model):
title = models.CharField(max_length=250)
body = models.TextField()
date = models.DateField()
def __str__(self):
return self.title
class ProjectImage(models.Model):
project = models.ForeignKey(Project, related_name='images', on_delete='CASCADE')
image = models.ImageField()
Well, indeed, you don't want to do any of this. You have a relationship between Project and ProjectImage, you should just pass the projects to the template and use that relationship there.
{% for project in projects %}
...
{% for image in project.images.all %}
<div class="news-img">
<img src="{{ image.image.url }}" alt="" data-popupalt-original-title="null" title="">
</div>
{% endfor %}
...
{% endfor %}
This is what i used in the end.
<div class="row">
{% for project in projects.all %}
<div class="col-md-4 col-sm-6">
<div class="news-section-single">
<div class="news-img-main">
<div class="news-img"><img src="{{ project.images.first.image.url }}" alt="" data-popupalt-original-title="null" title="">
<div class="news-list">
<ul>
<li><i class="fa fa-clock-o" aria-hidden="true"></i> {{ project.date }}</li>
</ul>
</div>
</div>
</div>
<div class="news-head">
<h3>{{ project.title }}</h3>
</div>
</div>
</div>
{% endfor %}
</div>

Dropdown menu display under my page content

I have a dropdown menu using boostrap card that look like this :
I set z-index property to 1000 for the card div, position absolute. This card is in a horizontal menu at the top of my page with a position fixed. My body have a relative position and my div with the content of my page have a relative position too.
This is the render of my page :
And there is my HTML code :
<body>
<div id="body">
<div class="header">
<div class="row">
<div class="col-1 col-sm-1">
<button class="hamburger">☰</button>
</div>
<!--<div class="col-1 col-sm-1 col-lg-1 offset-lg-2" id="spanSearch">
<h4><span class="badge indigo hide">{# block badge_research %}{% endblock #}</span></h4>
</div>
<div class="col-2 offset-2 col-sm-2 offset-sm-3 col-md-2 offset-md-3 col-lg-2 offset-lg-3">
<div class="search d-inline pull-right">
</i>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
</div>
!-->
<div class="col-7 col-sm-6 col-md-6 col-lg-6 offset-lg-5">
<ul class="list-inline pull-right downMenu inline">
<li class="nav-item dropdown btn-group">
<a class="nav-link" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="false"> {% if is_granted("IS_AUTHENTICATED_REMEMBERED") %} <img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="50" height="50"> {% else %} {{ 'acreat.mailing.nav.account'|trans }} {% endif %}</a>
<div class="dropdown-menu top dropdown" no-escape aria-labelledby="dropdownMenu1">
<div class="card">
<div class="card-block">
<div class="container-fuild">
<div class="row">
<div class="col-3">
<img src="{{ asset('/Image/contact.png') }}" class="img-circle" width="200" height="112">
</div>
<div class="col-9">
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{{ 'acreat.mailing.nav.myaccount'|trans }}
{{ 'acreat.mailing.nav.changepassword'|trans }}
{% if is_granted('ROLE_PREVIOUS_ADMIN') %}
{{'acreat.mailing.admin.impersonalisation'|trans}}
{% endif %}
</div>
</div>
<div class="card-footer text-center">
{{ 'acreat.mailing.nav.logout'|trans }}
{% else %}
{{ 'acreat.mailing.nav.login'|trans }}
</div>
{% endif %}
</div>
</div>
</div>
</li>
</ul>
<div class="search d-inline inline pull-right">
</i>
<form class="form-inline waves-effect waves-light" id="form">
<input class="form-control tags inline" id="search" type="text" placeholder="Search" onkeydown="keyDown()">
</form>
</div>
<div class="inline pull-right spanSearch">
<h5>{% block badge_research %}{% endblock %}</h5>
</div>
</div>
</div>
</div>
{% if is_granted("IS_AUTHENTICATED_REMEMBERED") %}
{% block navbar %}
<div class="sidebar blue-grey darken-4 no-escape" id="navbar">
<div class="user-box no-escape">
<a class="logo no-escape" href="/" title="Retour à l'accueil">
<img src ="https://www.acreat.com/sites/acreat.com/themes/acreat/images/logo.png" class="img-fluid text-center no-escape"></img>
</a>
<h5 class="text-center">{{ 'acreat.mailing.title.website'|trans }}</h5>
</div>
<div class="list-group panel no-escape" aria-expanded="true">
<i class="fa fa-dashboard margin-right"></i> <span>{{ 'acreat.mailing.nav.dashboard'|trans }}</span>
<i class="fa fa-tasks margin-right"></i><span>{{ 'acreat.mailing.nav.inbox'|trans }}<i class="fa fa-angle-down" id="wrapperArrow"></i></span>
<div class="collapse show no-escape" id="menu0">
<a href="/message/template/{{app.user.id}}" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.addmessage'|trans }}</span>
</a>
{%- set numberNotSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status !='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).andWhere("u.status !='SUBMITTED'").getQuery().getResult() -%}
<a href="/message/viewNotSent" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.messagenotsent'|trans }}
<span class="badge badge-primary badge-pill align-right">{{ numberNotSent[0][1] }}</span>
</span>
</a>
{%- set numberSent = doctrine.createQueryBuilder().select('COUNT(u.id)').from('CoreBundle:Message', 'u').where("u.status ='COMPLETED'")
.andWhere("u.account = " ~ app.user.id).getQuery().getResult() -%}
<a href="/message/viewSent" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.messagesent'|trans }}
<span class="badge badge-primary badge-pill align-right">{{ numberSent[0][1] }}</span>
</span>
</a>
<a href="/message/viewDraft" class="list-group-item no-escape" data-parent="#sidebar" aria-expanded="true">
<span>{{ 'acreat.mailing.nav.draft'|trans }}</span>
</a>
</div>
<i class="fa fa-list margin-right"></i> <span>{{ 'acreat.mailing.nav.mailinglist'|trans }}</span>
</i> <span>{{ 'acreat.mailing.nav.member'|trans }}</span>
{%- if is_granted('ROLE_ADMIN') -%}
<div id="adminBottom" class="no-escape">
<i class="fa fa-envelope margin-right"></i> <span >{{ 'acreat.mailing.nav.administration'|trans }}<i class="fa fa-angle-down" id="wrapperArrow2"></i></span>
<div class="collapse show no-escape" id="menu4">
{{ 'acreat.mailing.nav.administrationlist'|trans }}
{{ 'acreat.mailing.nav.administrationaccount'|trans }}
{{ 'acreat.mailing.nav.administrationnewsletter'|trans }}
{{ 'acreat.mailing.nav.administrationparameters'|trans }}
</div>
</div>
{%- endif -%}
</div>
</div>
{% endblock navbar %}
{%- endif -%}
<div id="content">
{% block body %}
{%- if app.user == false -%}
<main class="col-12 col-md-12 col-xs-12 col-lg-12 col-xl-12">
{%- else -%}
<main class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 ">
{%- endif -%}
{% block flashmessage %}
{% for flashMessage in app.session.flashbag.get('notice') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('fail') %}
<div class="alert alert-danger" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% for flashMessage in app.session.flashbag.get('success') %}
<div class="alert alert-success" role="alert">
{{ flashMessage }}
</div>
{% endfor %}
{% endblock flashmessage %}
{% block main %}
{%- block breadcrumb -%}{%- endblock -%}
<section></section>
{%- block confirmation -%}{%- endblock -%}
{% endblock main %}
{% block fos_user_content %}
{% endblock fos_user_content%}
</main>
{% endblock body %}
</div>
</div>
</body>
Thanks for the help
You should set z-index for fixed parent element, not for card

Django: Bootstrap Accordion not working on Regroup content

Django with Bootstrap 3
I am working on a dashboard view for an FAQ system. I have set up the articles to be grouped by section. The section names are the headers in a list-group that when clicked will expand another list-group containing all the articles related to that group.
The issue that I am having is that I would like to set up the collapse to work like an accordion. I have followed bootstrap 3’s guide to accomplish this but when I click a new section open none of the prior open sections collapse close. I have exhausted other guides but the code looks correct yet the accordion functionality is not working.
My code:
{% block content %}
<div class="iron-faq">
<div class="container">
<div class="col-md-6">
<h3>Sections</h3>
<div class="list-group" id="accordion" aria-multiselectable="true">
{% regroup articles by section as section_list %}
{% for section in section_list %}
<a href="#section-{{ section.grouper.id }}"
class="list-group-item list-header"
data-toggle="collapse"
data-parent="#accordion"
data-target="#section-{{ section.grouper.id }}"
aria-controls="section-{{ section.grouper.id }}">
<i class="fa fa-bars"></i> {{ section.grouper }}
<span class="badge pull-right">{{ section.grouper.article_count }}</span>
</a>
<div class="panel-collapse collapse" id="section-{{ section.grouper.id }}">
{% for article in section.list %}
<a href="{{ article.get_absolute_url }}" class="list-group-item">
{{ article.title }}
</a>
{% endfor %}
</div>
{% endfor %}
</div>
</div>
<div class="col-md-6">
<h3>Useful Articles</h3>
<div class="list-group">
<div class="favorites">
{% for favorite in favorites %}
<a href="{{ favorite.get_absolute_url }}" class="list-group-item">
<h5 class="list-group-item-heading">{{ favorite.title }}</h5>
<p class="list-group-item-text">{{ favorite.section.name }}</p>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
You have to wrap each section with:
<div class="panel"></div>
So your html would look like the following:
{% block content %}
<div class="iron-faq">
<div class="container">
<div class="col-md-6">
<h3>Sections</h3>
<div class="list-group" id="accordion" aria-multiselectable="true">
{% regroup articles by section as section_list %}
{% for section in section_list %}
<div class="panel">
<a href="#section-{{ section.grouper.id }}"
class="list-group-item list-header"
data-toggle="collapse"
data-parent="#accordion"
data-target="#section-{{ section.grouper.id }}"
aria-controls="section-{{ section.grouper.id }}">
<i class="fa fa-bars"></i> {{ section.grouper }}
<span class="badge pull-right">{{ section.grouper.article_count }}</span>
</a>
<div class="panel-collapse collapse" id="section-{{ section.grouper.id }}">
{% for article in section.list %}
<a href="{{ article.get_absolute_url }}" class="list-group-item">
{{ article.title }}
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-6">
<h3>Useful Articles</h3>
<div class="list-group">
<div class="favorites">
{% for favorite in favorites %}
<a href="{{ favorite.get_absolute_url }}" class="list-group-item">
<h5 class="list-group-item-heading">{{ favorite.title }}</h5>
<p class="list-group-item-text">{{ favorite.section.name }}</p>
</a>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
Hope this helps!