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>
Related
I have a project where I have a paginated nav-tab with bootstrap.
The problem is that, anytime I refresh the page or I change the page with my pagination buttons, the active element is always the element n° 1 of the list.
This is probably due to the fact that I need to activate it upon opening the page with an if condition within the forloop. Let me post some code to be more clear
template
<input type="hidden" id="quizProfileId" value="{{pk}}">
<div class="card">
<div class="card-body">
<h4 class="card-title ms-3">New {{quiz_attempt.question.question_subject}} Quiz</h4>
<div class="row">
<div class="col-md-9">
<div class="tab-content text-muted mt-4 mt-md-0" id="v-pills-tabContent">
{% for quiz in quizzes %}
<div class="tab-pane {% if forloop.counter == 1 %}active{% endif %} ms-3 questionsObj" id="question{{quiz.question_draft.question.id}}" value="{{quiz.question_draft.question.id}}">
<h5 class="text-dark">{{quiz.question_draft.question.text}}</h5>
<div class="list-group mt-3">
{% for image in quiz.question_draft.question.questionimage_set.all %}
<a href="{{image.image.url}}" target="_blank">
<img src="{{image.image.url}}" alt="" width="100px" height="100px">
</a>
<br>
{% endfor %}
{% for answer in quiz.question_draft.answerdraft_set.all|shuffle %}
<a href="#"
data-pk="{{quiz.question_draft.question.id}}"
id="answer{{answer.answer.id}}" data-answerId="{{answer.answer.id}}"
class="
list-group-item answer question{{quiz.question_draft.question.id}} list-group-item-action
{% if quiz.question_draft.is_answered == True and answer.answer.is_correct == True %}bg-success{% endif %}
{% if answer.is_answered == True and answer.is_correct == True %}bg-success disabled
{% elif answer.is_answered == True and answer.is_correct == False %}bg-danger disabled
{% elif quiz.question_draft.is_answered == True %} disabled
{% endif %}
">
<b>{{forloop.counter0|to_char}}</b>    {{answer.answer.text}}
</a>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="form-group mt-3 mb-3">
{% if quiz_profile.is_completed != True %}
<form id="finishQuiz" action="{% url 'quiz:finish_test' pk=pk %}" method="get">
<button type="submit" class="btn btn-sm btn-success" id="finishButton" >Finish Test</button>
Save
Cancel Test
</form>
{% else %}
Quiz Report
{% endif %}
</div>
</div>
<div class="row">
<div class="nav nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
{% for quiz in pages %}
<a class="btn btn-sm btn-outline-secondary custom m-1
{% for answer in quiz.question_draft.answerdraft_set.all %}
{% if answer.is_answered == True and answer.is_correct == True %}bg-success{% endif %}
{% endfor %}
{% if quiz.question_draft.is_correct == False %}bg-danger{% endif %}
{% if forloop.counter == 1 %}active{% endif %} "
id="questionButton{{quiz.question_draft.question.id}}"
data-bs-toggle="pill" href="#question{{quiz.question_draft.question.id}}">{{ pages.start_index|add:forloop.counter0 }}
</a>
{% endfor %}
</div>
</div>
</div>
</div>
<div class="row mt-3">
<div class="col-md-9">
</div>
<div class="col-md-3">
<ul class="pagination">
{% if pages.has_previous %}
<li class="page-item">
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ pages.previous_page_number }}"><i class="fas fa-angle-double-left"></i></a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a>
</li>
{% endif %}
{% for i in paginator.page_range %}
<li class="page-item {% if pages.number == i%} active {% endif %} %}" >
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ i }}" >{{i}}</a>
</li>
{% endfor %}
{% if pages.has_next %}
<li class="page-item">
<a class="page-link" href="{% url 'quiz:study_quiz' pk=pk %}?page={{ pages.next_page_number }}" ><i class="fas fa-angle-double-right"></i></a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a>
</li>
{% endif %}
</ul>
</div>
</div>
</div>
</div>
I think that in particular {% if forloop.counter == 1 %}active{% endif %} is the main reason of this problem. On the other side, I don't know how to give the class active only to the first element when I load the page for the first time.
And in the same time, I would like to load the first element of the second page, when I load the second page and so on.
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
I am following a django book to learn django.I tried implementing pagination on a differnt website,it worked.But it's not working in my fyp.Each page has 3 objects as specified by me but the links to change pages are not appearing.
My views.py:-
from django.shortcuts import render
from .models import song_thumb
from django.core.paginator import Paginator,EmptyPage,PageNotAnInteger
from django.views.generic import ListView
# Create your views here.
class SongListView(ListView):
model=song_thumb
context_object_name='artists'
paginate_by=3
template_name='home.html'
my template:
{% block content %}
<form class="" action="mediaplayer.html" method="get">
<div class="data-content">
{% for artist in artists %}
<div class="container">
<div id="img-1" class="tabcontent">
<div class="blog-content">
<div class="row">
<div class="col-sm">
<div class="card" style="width: 18rem;">
<div class="img">
<img class="img-thumbnail" src="{{ artist.img.url }}" alt="">
</div>
<div class="card-body">
<div class="title">
<p>{% trans 'Artist:' %} {{artist.artist}} </p><br>
<p>{% trans 'Title:' %} {{artist.song_title}}</p><br>
<p>{% trans 'Album:' %} {{artist.album}}</p><br>
<p>{% trans 'Duration' %} {{artist.song_duration}}</p><br>
</div>
<audio controls>
<source src='{{ artist.song.url }}' type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
</form>
{% include "pagination.html" with page=page_obj %}
{% endblock %}
my pagination.html:
<div class="pagination">
<span class="step-links">
{% if page.has_previous %}
Previous
{% endif %}
<span class="current">
Page {{ page.number }} of {{ page.paginator.num_pages }}.
</span>
{% if page.has_next %}
Next
{% endif %}
</span>
</div>
The pages have 3 objects each as specified by me.But the links to change page numbers are not showing up.
Change your pagination code like this:
<!-- Pagination -->
{% if is_paginated %}
<ul class="pagination justify-content-center mb-4">
{% if page_obj.has_previous %}
<li class="page-item">
<a class='page-link' href='?page=1'>First</a>
</li>
<li class="page-item">
<a class='page-link' href='?page={{ page_obj.previous_page_number }}'>«</a>
</li>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<li class="page-item disabled">
<a class='page-link' href='?page={{ num }}'>{{ num }}</a>
</li>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<li class="page-item">
<a class='page-link' href='?page={{ num }}'>{{ num }}</a>
</li>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<li class="page-item">
<a class='page-link' href='?page={{ page_obj.next_page_number }}'>»</a>
</li>
<li class="page-item">
<a class='page-link' href='?page={{ page_obj.paginator.num_pages }}'>Last</a>
</li>
{% endif %}
</ul>
{% endif %}
No need to create separate page for pagination, you can use your template page also for same. I had same issue and for that i referred many solution and this one worked for me here is the pagination code I had used in my project
{% if is_paginated %}
{% if page_obj.has_previous %}
<a class="btn btn-outline-info mb-4" href="?page=1">First</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.previous_page_number }}">Previous</a>
{% endif %}
{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
<a class="btn btn-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
<a class="btn btn-outline-info mb-4" href="?page={{ num }}">{{ num }}</a>
{% endif %}
{% endfor %}
{% if page_obj.has_next %}
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.next_page_number }}">Next</a>
<a class="btn btn-outline-info mb-4" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
{% endif %}
{% endif %}
Here is the best tutorial about pagination i hope this will help you
https://www.youtube.com/watch?v=acOktTcTVEQ
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 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!