I set up a project for test purpose, it works. But in another project, the above code doesn't work. The content of the turbo-stream appears in raw html and replaces the whole site.
//_parts/_dashboard_user_ranking.stream.html.twig
<turbo-stream action="update" target="the_frame_id" >
<template>
{{ include ("_parts/_dashboard_user_ranking.html.twig") }}
</template>
</turbo-stream>
//index.html.twig
{% block body %}
{{ parent()}}
<main class="container row overflow-auto">
<div class="col-md-10 mx-auto">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="{{ path('app_dashboard_rankings',{period:'5jours'}) }}">5 jours</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'3mois'}) }}">3 mois</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'1an'}) }}">1 an</a>
</li>
{% for group in groups %}
<li class="nav-item">
<a class="nav-link" href="{{ path('app_dashboard_rankings',{period:'1an', groupID:group.id}) }}">{{ group.groupName }}</a>
</li>
{% endfor %}
</ul>
<turbo-frame id="the_frame_id"></turbo-frame>
</div>
</main>
{{ include ("footer.html.twig") }}
{% endblock %}
And finally the controller :
// classements seuls
#[Route('/classements-{period}-{groupID}', name: 'app_dashboard_rankings')]
public function classements(
Request $request,
FollowPointsRepository $followPointsRepository,
string $period = '5jours',
int $groupID = 0
): Response
{
// ...
// ...
$request->setRequestFormat(TurboBundle::STREAM_FORMAT);
return $this->render('_parts/_dashboard_user_ranking.stream.html.twig',[
'isUserInTop'=>$isUserInTop,
'classement'=>$classement
]);
}
As for the config, it is the same as in the test purpose project.
Related
Here is a code for my navbar:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">BRAND</a>
<div class="navbar-collapse">
<ul class="navbar-nav mr-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="#">ITEM 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 3</a>
</li>
{% endif %}
</ul>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<p class="navbar-text">Logged in as:</p>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
{% endif %}
</ul>
</div>
</nav>
And here is my .css file for paddings, and I am guessing that something has to be added here, but I can't figure out what..
#media (min-width: 992px) {
.navbar-nav > .nav-item {
padding-right: 1.5rem;
}
}
#media (min-width: 992px) {
.navbar-brand {
padding-right: 2rem;
}
}
What happens is this:
Wrong alignment
What do I need to do, to get the right side of the navbar to verically align with other items? I have tried to include style="vertical-align:middle to the .css file and to nav-item and nav-link, but it doesn't help.
there is problem with P tag which has text 'Logged in As'.
P tag has margin bottom which is creating problem with alignment.
so you can remove that margin using mb-0 class.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">BRAND</a>
<div class="navbar-collapse">
<ul class="navbar-nav mr-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="#">ITEM 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ITEM 3</a>
</li>
{% endif %}
</ul>
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %}
<li class="nav-item">
<p class="navbar-text mb-0">Logged in as:</p>
</li>
<li class="nav-item">
<a class="nav-link" href="/logout">Logout</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="/login">Login</a>
</li>
{% endif %}
</ul>
</div>
</nav>
How do I align this menu properly? I have tried using inline-block for the li tag but that didn't align this.
Here's the current code, please help with ideas
<nav class="navbar navbar-expand-md">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'index' %}">Active Listings</a>
</li>
<li class="nav-item">
Category
</li>
<li class="nav-item">
Sell
</li>
</ul>
<ul class="navbar-nav ml-auto">
<div>
{% if user.is_authenticated %}
welcome, <strong>{{ user.username }}</strong>.
{% else %}
Not signed in.
{% endif %}
</div>
{% 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>
</nav>
Try to add display flex and align items center. this will 100% solve your problem
ul {
display: flex;
align-items: center;
}
I have the following recursive macro which works fine but not the way i want it.
I want to display my menu like in this codepen, hover over services.
How can i get the same structure of the generated html ?
{% extends '::base.html.twig' %}
{% import _self as forms %}
{% macro recursive(item) %}
{% import _self as forms %}
<li class="nav-item">
{% if item.__children|length %}
{% if item.treeLevel == 0 %}
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
{{ item.name }}
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
{% for item in item.__children %}
{{ forms.mega(item) }}
{% endfor %}
</div>
{% endif %}
{% endif %}
{% if item.__children is empty %}
<a class="nav-link" href="#">{{ item.name }}</a>
{% endif %}
</li>
{% endmacro %}
{% macro mega(item) %}
{% import _self as forms %}
<ul class="">
{% if item.__children|length %}
{% for item in item.__children %}
{{ forms.mega(item) }}
{% endfor %}
{% endif %}
<li>
<a class="dropdown-item" href="#">{{ item.name }}</a>
</li>
</ul>
{% endmacro %}
{% block body %}
{{ dump(tree) }}
{% if tree %}
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
{% for item in tree %}
{{ forms.recursive(item) }}
{% endfor %}
</ul>
</div>
</nav>
{% endif %}
{% endblock %}
EDIT:
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Homepage</a>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Idea
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<ul class="">
<li>
<a class="dropdown-item" href="#">Company</a>
</li>
</ul>
<ul class="">
<ul class="">
<li>
<a class="dropdown-item" href="#">asdasd</a>
</li>
</ul>
<li>
<a class="dropdown-item" href="#">Services</a>
</li>
</ul>
<ul class="">
<li>
<a class="dropdown-item" href="#">Google</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
I'm looking for improve my Django website and especially the CSS part. I don't have knowledge about CSS because I'm beginning to learn this library.
I'm using Bootstrap 3 and I would like to get your opinions about columns using and the cutting of my Django website.
It's the first time I'm using .col-md-x and I don't know if it's true? My website application will be use with a large screen but also tablet or smartphone.
I have two examples :
Global website page
Variant
Can I write my script in order to get this kind of things? Is it correct to write CSS/Bootstrap3 like this?
Thank you
EDIT :
My script for base template looks like this :
<!DOCTYPE html>
<html>
<head>
{% load staticfiles %}
{% load static %}
{% load user_tags %}
<title> DatasystemsEC - Page non trouvée </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% get_static_prefix %}{{ mytheme }}/css/Base_Not_Found.css"/>
</head>
<!-- #################### -->
<!-- Upper navigation bar -->
<!-- #################### -->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="navbar-header">
<a class="navbar-brand" href="http://www.datasystems.fr/"> DatasystemsEC </a>
</div>
<!-- Home tab -->
<ul class="nav navbar-nav">
<li> <span class="glyphicon glyphicon-home"></span> Accueil </li>
{% if user.is_authenticated %}
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<span class="glyphicon glyphicon-info-sign">
</span> Informations Mairie
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li> <span class="glyphicon glyphicon-pencil"></span> Créer/Editer les informations de la Mairie </li>
<li> <span class="glyphicon glyphicon-home"></span> Consulter les informations de la Mairie </li>
</ul>
</li>
<!-- Resume Tab with acts -->
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-file">
</span> Actes Etat Civil <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-user">
</span> Fiches Individuelles
</a>
<ul class="dropdown-menu">
<li>Accueil Fiches Individuelles</li>
<li>Création Fiches Individuelles</li>
<li>Consultation Fiches Individuelles</li>
{% if request.user|has_group:"admin" %}
<li>Edition Fiches Individuelles</li>
<li>Suppression Fiches Individuelles</li>
{% endif %}
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-baby-formula"></span> Actes de Naissance</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Naissance</li>
<li>Création Actes de Naissance</li>
<li>Consultation Actes de Naissance</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-eye-open"></span> Actes de Reconnaissance / Adoption </a>
<ul class="dropdown-menu">
<li>Accueil Actes de Reconnaissance</li>
<li>Création Actes de Reconnaissance</li>
<li>Consultation Actes de Reconnaissance</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-heart"></span> Actes de Mariage</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Mariage</li>
<li>Création Actes de Mariage</li>
<li>Consultation Actes de Mariage</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-flash"></span> Actes de Divorce</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Divorce</li>
<li>Création Actes de Divorce</li>
<li>Consultation Actes de Divorce</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-fire"></span> Actes de Décès</a>
<ul class="dropdown-menu">
<li>Accueil Actes de Décès</li>
<li>Création Actes de Décès</li>
<li>Consultation Actes de Décès</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <span class="glyphicon glyphicon-book">
</span> Tables Annuelles & Décennales <b class="caret"></b></a>
<ul class="dropdown-menu">
<li class="dropdown dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-file">
</span> Edition Tables annuelles
</a>
<ul class="dropdown-menu">
<li>Naissances</li>
<li>Reconnaissances</li>
<li>Mariages</li>
<li>Décès</li>
</ul>
</li>
<li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-book"></span> Edition Tables décennales</a>
<ul class="dropdown-menu">
<li>Naissances</li>
<li>Reconnaissances</li>
<li>Mariages</li>
<li>Décès</li>
</ul>
</li>
</ul>
</li>
<li class = "dropdown">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown">
<span class="glyphicon glyphicon-list-alt">
</span> Recensement
<b class = "caret"></b>
</a>
<ul class = "dropdown-menu">
<li> <span class="glyphicon glyphicon-th-list"></span> Liste Recensement </li>
<li> <span class="glyphicon glyphicon-file"></span> Edition de l'Attestation de Recensement </li>
</ul>
</li>
{% endif %}
<ul class="nav navbar-nav navbar-right">
{% if user.is_authenticated %}
<li></span> Déconnexion </li>
<li><a>{{user.username}} </a></li>
{% else %}
<li><span class="glyphicon glyphicon-log-in"></span> Connexion </align></li>
{% endif %}
{% if request.user|has_group:"admin" %}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/admin.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"visiteur"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/visiteur.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"employé"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/employé.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"officier"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/officier.png' %}{{ user.get_profile.avatar }}">
{% elif request.user|has_group:"maire"%}
<img style="display: inline-block; height: 30px; margin-top: 10px; margin-right:30px" src="{% static 'images/maire.png' %}{{ user.get_profile.avatar }}">
{% endif %}
</ul>
</ul>
</div>
</div>
</div>
</nav>
<script>
(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);
</script>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="logo">
<img src="{% static 'images/logo.png' %}" class="img-responsive center-block" alt="Logo">
</div>
</div>
<div class="col-md-10">
<div class="title">
{% block title %}
{% endblock %}
</div>
</div>
</div>
</div>
{% if user.is_authenticated %}
<div class="container-fluid">
<div class="row">
<div class="col-md-2 sidebar1">
<div class="left-navigation">
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-home"></span> Accueil</strong></h5>
<li> Accueil</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-book"></span> Informations Mairie</strong></h5>
{% if request.user|has_group:"admin" %}
<li>Créer/Editer les informations</li>
{% endif %}
<li>Consulter les informations</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Actes Etat Civil</strong></h5>
<li>Fiches Identités</li>
<li>Actes de Naissance</li>
<li>Actes de Reconnaissance / Adoption</li>
<li>Actes de Mariage</li>
<li>Actes de Divorce</li>
<li>Actes de Décès</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Tables Annuelles & Décennales</strong></h5>
<li>Tables Annuelles</li>
<li>Tables Décennales</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span>Recensement</strong></h5>
<li>Liste de Recensement</li>
<li>Attestation de Recensement</li>
</ul>
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-book"></span> DatasystemsDOC</strong></h5>
<li>Individus</li>
<li>Tables</li>
<li>Recensement</li>
</ul>
{% if request.user|has_group:"admin" %}
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Configuration</strong></h5>
<li>Thème</li>
</ul>
{% endif %}
<ul class="list">
<h5><strong><span class="glyphicon glyphicon-baby-formula"></span> Aide & Support</strong></h5>
<li>Besoin d'aide ?</li>
<li>Mentions légales</li>
</ul>
</div>
</div>
<body>
<div class="col-md-10">
{% block content %}
{% endblock content %}
</div>
</body>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<footer>
<p class="text-muted footer"> © DatasystemsEC 2017 - Tous droits réservés <br /> Version Démo</p>
</footer>
</div>
</div>
</div>
{% endif %}
</html>
I added some classes row and .col-md-x. I want to structure my script correctly with Bootstrap grid but I never made this before.
I have a few suggestions for you--
no.1
you are saying that your website will be viewed in all screen sizes so you have to make it responsive.
In order to make a site responsive in bootstrap you need to use all the responsive grid classes---col-sm-* col-xs-* col-md-* col-lg-*. Your design will not look proper in xs and sm devices.
no.2
You don't need to use col-md-* in the nav as it automatically takes full width.
no.3
in the variant portion You are using a blank .col-md-1 that's not how you achieve blank spacing in bootstrap rather use offset classes. Use .col-md-1 col-md-offset-1 it will create a blank column.
no.4
Your design won't look good in extra small devices. Try to introduce more rows for xs devices in order to stack your contents in the middle portion(although this is subjective as I don't know what contents you are going to have..just a general idea from my side.)
I have a bootstrap menu whith a dropdown. It used to work but something happened. I click on it and nothing happens.
<ul class="nav navbar-nav navbar-right">
<li class="{% if this.page.id == 'home' %}active{% endif %}">Főoldal</li>
{% if user %}
<li class="dropdown">
{{ user.name }}<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>New post
</li>
<li class="divider"></li>
<li><a data-request="onLogout" data-request-data="redirect: '/good-bye'">Logout</a>
</li>
</ul>
</li>
{% else %}
<li class="">Login</li>
{% endif %}
</ul>
At the bottom:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="{{ 'assets/js/bootstrap.min.js'|theme }}"></script>
Update: Checked with the original example but still not working so the problem is somewhere in the js part. But the JS is there.
u missed a </ul> after {% endif %}
see http://jsfiddle.net/26vpc9o3/1/
<ul class="nav navbar-nav navbar-right">
<li class="{% if this.page.id == 'home' %}active{% endif %}">Főoldal</li>
{% if user %}
<li class="dropdown">
{{ user.name }}<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>New post</li>
<li class="divider"></li>
<li><a data-request="onLogout" data-request-data="redirect: '/good-bye'">Logout</a></li>
</ul>
</li>
{% else %}
<li class="">Login</li>
{% endif %}
</ul>
Solved. The bootstrap js was included twice. I didnt noticed it because the bootstrap wasnt in its name.