starts move to bootstrap4
This commit is contained in:
artus
100
website/static/css/dashboard.css
Normal file
100
website/static/css/dashboard.css
Normal file
@@ -0,0 +1,100 @@
|
||||
body {
|
||||
font-size: .875rem;
|
||||
}
|
||||
|
||||
.feather {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
|
||||
/*
|
||||
* Sidebar
|
||||
*/
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 100; /* Behind the navbar */
|
||||
padding: 48px 0 0; /* Height of navbar */
|
||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.sidebar-sticky {
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: calc(100vh - 48px);
|
||||
padding-top: .5rem;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
|
||||
}
|
||||
|
||||
@supports ((position: -webkit-sticky) or (position: sticky)) {
|
||||
.sidebar-sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar .nav-link {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.sidebar .nav-link .feather {
|
||||
margin-right: 4px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.sidebar .nav-link.active {
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
.sidebar .nav-link:hover .feather,
|
||||
.sidebar .nav-link.active .feather {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.sidebar-heading {
|
||||
font-size: .75rem;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/*
|
||||
* Content
|
||||
*/
|
||||
|
||||
[role="main"] {
|
||||
padding-top: 48px; /* Space for fixed navbar */
|
||||
}
|
||||
|
||||
/*
|
||||
* Navbar
|
||||
*/
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
font-size: 1rem;
|
||||
background-color: rgba(0, 0, 0, .25);
|
||||
box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
|
||||
}
|
||||
|
||||
.navbar .form-control {
|
||||
padding: .75rem 1rem;
|
||||
border-width: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.form-control-dark {
|
||||
color: #fff;
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
border-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
|
||||
.form-control-dark:focus {
|
||||
border-color: transparent;
|
||||
box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
|
||||
}
|
||||
@@ -1,84 +1,97 @@
|
||||
<!DOCTYPE html>
|
||||
{% load staticfiles %} {% load bootstrap3 %} {% load navbar %}
|
||||
{% load staticfiles %} {% load bootstrap4 %} {% load navbar %}
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<title>{% block title %}La maraude{% endblock %}</title>
|
||||
{% bootstrap_css %}{% bootstrap_javascript %}
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/base.css" />
|
||||
<link rel="stylesheet" type="text/css" href="/static/css/dashboard.css" />
|
||||
{% block extrastyle %}{% endblock %}
|
||||
{% if stylesheets %}{% for stylesheet in stylesheets %}<link rel="stylesheet" type="text/css" href="{% static stylesheet %}" />{% endfor %}{% endif %}
|
||||
{% block extrahead %}{% endblock %}
|
||||
{% block blockbots %}<meta name="robots" content="NONE,NOARCHIVE" />{% endblock %}
|
||||
</head>
|
||||
<body {% block extra_body_attrs %}{% endblock %}>
|
||||
<div class="container-fluid">
|
||||
<!-- START: Navigation Bar -->
|
||||
<div class="row">
|
||||
<nav class="navbar navbar-static-top navbar-default">
|
||||
<div class="container-fluid">
|
||||
<!-- Brand and toggle get grouped for better mobile display -->
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false">
|
||||
<span class="sr-only">Toggle navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="/">Maraude ALSA</a>
|
||||
</div>
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="navbar-collapse">
|
||||
<ul class="nav navbar-nav navbar-left">
|
||||
{% if user.is_authenticated %}
|
||||
<li class="dropdown {% active namespace="maraudes" append=True %}">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% bootstrap_icon "road" %} Maraudes</span></a>
|
||||
{% include "maraudes/menu.html" %}
|
||||
</li>
|
||||
<li class="dropdown {% active namespace="notes" append=True %}">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{% bootstrap_icon "pencil" %} Notes</span></a>
|
||||
{% include "notes/menu.html" %}
|
||||
</li>
|
||||
{% else %}
|
||||
<li {% active namespace="statistiques" %}><a href="{% url "statistiques:index" %}">{% bootstrap_icon "stats" %} Statistiques</a></li>
|
||||
<!-- START: Navigation Bar -->
|
||||
<nav class="navbar fixed-top navbar-dark bg-dark">
|
||||
<a class="navbar-brand" href="/">Maraude ALSA</a>
|
||||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse" id="navbar-collapse">
|
||||
<ol class="breadcrumb navbar-text">
|
||||
{% block breadcrumbs %}
|
||||
<li>{{ page_header }}</li>
|
||||
{% if page_header_small %}<li>{{ page_header_small }}</li>{% endif %}
|
||||
{% endblock %}
|
||||
</ol>
|
||||
{% if user.is_authenticated %}
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
Menu <span class="glyphicon glyphicon-menu-hamburger"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="{% url "statistiques:index" %}"><span class="glyphicon glyphicon-stats"></span> Statistiques</a></li>
|
||||
{% if user.is_superuser %}
|
||||
<li><a href="/admin/"><span class="glyphicon glyphicon-wrench"></span> Administration</a></li>
|
||||
{% endif %}
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="{% url "utilisateurs:index" %}"><span class="glyphicon glyphicon-user"></span> {{ user }}</a></li>
|
||||
<li><a href="/logout/"><span class="glyphicon glyphicon-log-out"></span> Déconnexion</a></li>
|
||||
</ul>
|
||||
<ol class="breadcrumb navbar-text">
|
||||
{% block breadcrumbs %}
|
||||
<li>{{ page_header }}</li>
|
||||
{% if page_header_small %}<li>{{ page_header_small }}</li>{% endif %}
|
||||
{% endblock %}
|
||||
</ol>
|
||||
</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</nav>
|
||||
<!-- END: Navigation Bar -->
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
|
||||
<div class="sidebar-sticky">
|
||||
{% if user.is_authenticated %}
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="dropdown">
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
|
||||
Menu <span class="glyphicon glyphicon-menu-hamburger"></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="{% url "statistiques:index" %}"><span class="glyphicon glyphicon-stats"></span> Statistiques</a></li>
|
||||
{% if user.is_superuser %}
|
||||
<li><a href="/admin/"><span class="glyphicon glyphicon-wrench"></span> Administration</a></li>
|
||||
{% endif %}
|
||||
<li role="separator" class="divider"></li>
|
||||
<li><a href="{% url "utilisateurs:index" %}"><span class="glyphicon glyphicon-user"></span> {{ user }}</a></li>
|
||||
<li><a href="/logout/"><span class="glyphicon glyphicon-log-out"></span> Déconnexion</a></li>
|
||||
</ul>
|
||||
<h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted">
|
||||
<span>Maraudes</span>
|
||||
</h6>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'maraudes:index' %}" class="nav-link {% active namespace="maraudes" append=True %}">Maraudes</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'maraudes:planning' %}" class="nav-link {% active namespace="maraudes" append=True %}">Planning</a>
|
||||
</li>
|
||||
</ul>
|
||||
<h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted">
|
||||
<span>Notes</span>
|
||||
</h6>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'notes:liste-maraude' %}" class="nav-link {% active namespace="notes" append=True %}">Par maraudes</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="{% url 'notes:liste-sujet' %}" class="nav-link {% active namespace="notes" append=True %}">Par sujets</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
<h6 class="sidebar-heading px-3 mt-4 mb-1 text-muted">
|
||||
<span>Menu</span>
|
||||
</h6>
|
||||
<ul class="nav flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link {% active namespace="statistiques" append=True %}" href="{% url "statistiques:index" %}">Statistiques</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
</div><!-- /.navbar-collapse -->
|
||||
</div><!-- /.container-fluid -->
|
||||
</nav>
|
||||
</div>
|
||||
<!-- END: Navigation Bar -->
|
||||
<div class="row">
|
||||
<div class="col-lg-10 col-lg-push-2 col-md-9 col-md-push-3">
|
||||
{% block sidebar %}{% endblock %}
|
||||
</div>
|
||||
</nav>
|
||||
<main role="main" class="col-md-10 ml-sm-auto px-4">
|
||||
<div class="d-flex justify-content-between">
|
||||
{% bootstrap_messages %}
|
||||
{% block page_content %}{% endblock %}
|
||||
</div>
|
||||
<div class="col-lg-2 col-lg-pull-10 col-md-3 col-md-pull-9">
|
||||
{% block sidebar %}{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
{% extends "base.html" %}
|
||||
{% load bootstrap3 %}
|
||||
{% load bootstrap4 %}
|
||||
|
||||
{% block sidebar %}
|
||||
{% include "login.html" %}
|
||||
{% endblock %}
|
||||
|
||||
{% block page_content %}
|
||||
<div class="col-md-8">
|
||||
<div class="jumbotron">
|
||||
<h2>Présentation</h2>
|
||||
<p>L'Association pour le Logement des Sans-Abri organise une maraude psychosociale dans la ville de Mulhouse.</p>
|
||||
@@ -16,15 +15,10 @@
|
||||
<p>La mission de la Maraude est de créer du lien avec des personnes en errance dans l'objectif d'opérer un ancrage.</p>
|
||||
<p>Reconnaissables par leurs vêtements oranges, les maraudeurs sont disponibles pour informer et orienter vers les
|
||||
services compétents, ou simplement échanger autour d'un café offert.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="jumbotron">
|
||||
<h2>{% bootstrap_icon "time" %} Horaires</h2>
|
||||
<h2>Horaires</h2>
|
||||
<ul><li>lundi de 19h à 23h</li>
|
||||
<li>mardi de 19h à 23h</li>
|
||||
<li>jeudi de 19h à 23h</li>
|
||||
<li>vendredis de 16h à 20h</li></ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user