Commit 659f6021 authored by root's avatar root

Rework the sidebar/navbar

parent 50a9fcf1
......@@ -90,12 +90,13 @@
<div class="card-body">
<h3 class="card-title">Mon adhésion</h3>
<div class="row m-2">
Ma cotisation est :
{% if user.is_paid_up %}
<span class="badge badge-success ml-3">à jour !</span>
{% else %}
<span class="badge badge-danger ml-3">non à jour !</span>
{% endif %}
<p>Ma cotisation
{% if user.is_paid_up %}
<span class="text-success"> à jour ! <i class="fa fa-smile-o" aria-hidden="true"></i></span>
{% else %}
<span class="text-danger"> n'est pas à jour ! <i class="fa fa-frown-o" aria-hidden="true"></i></span>
{% endif %}
</p>
</div>
<div class="row m-2">
......
......@@ -11,7 +11,6 @@
<div class="row">
<div class="col-12">
<h2>Mes factures</h2>
</div>
<table id="member_invoices" class="table table-striped table-borderless">
<thead>
<tr>
......@@ -36,12 +35,12 @@
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="col-12">
<h2>Mes paiements</h2>
</div>
<table id="member_payments" class="table table-striped table-borderless">
<thead>
......@@ -63,6 +62,7 @@
{% endfor %}
</tbody>
</table>
</div>
</div>
<div class="row">
......
/*!
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com)
* Code licensed under the Apache License v2.0.
* For details, see http://www.apache.org/licenses/LICENSE-2.0.
*/
/* Toggle Styles */
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.with-sidebar {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #f0f0f0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled #sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
width: 100%;
position: absolute;
padding: 15px;
}
#wrapper.toggled #page-content-wrapper {
position: absolute;
margin-right: -250px;
}
/* Sidebar Styles */
.sidebar-nav {
position: absolute;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #333;
font-size: 1.1em;
font-weight: bold;
}
.sidebar-nav li a:hover {
text-decoration: none;
background: white;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
font-size: 18px;
line-height: 60px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
@media(min-width:768px) {
#wrapper.with-sidebar {
padding-left: 250px;
}
#sidebar-wrapper {
width: 250px;
}
#page-content-wrapper {
padding: 20px;
padding-top: 2em;
position: relative;
}
body {
padding-top: 6em;
}
......@@ -132,24 +21,22 @@ header {
-webkit-user-select: none;
}
h1.default-logo {
font-size: 2em;
.default-logo {
font-size: 1.5em;
font-weight: bolder;
}
h1.default-logo {
.default-logo {
text-decoration: none !important;
}
h1.default-logo:after {
.default-logo:after {
content: "\\_o<";
color: #FF6600;
font-weight: normal;
font-family: monospace;
text-align: center;
font-size: 1em;
display: block;
}
h1.default-logo:hover:after {
.default-logo:hover:after {
content: "\\_x<";
}
......@@ -167,23 +54,6 @@ h2 {
display: inline;
}
/*
.panel > h2,
.panel > h3,
.panel > h4,
.panel > h5 {
border-bottom: 1px solid #d8d8d8;
margin-bottom: 1.25rem;
padding-bottom: 0.625rem;
}
.panel.callout > h2,
.panel.callout > h3,
.panel.callout > h4,
.panel.callout > h5 {
border-color: #B5F0FF;
}
*/
/* Tables */
table.full-width {
......
......@@ -15,65 +15,64 @@
<link rel="icon" type="image/x-icon" href="{% static "img/favicon.ico" %}" />
</head>
<body>
{% hijack_notification %}
<div id="wrapper" {% if user.is_authenticated %}class="with-sidebar"{% endif %}>
<!-- SIDEBAR -->
<!-- NAVBAR -->
{% if user.is_authenticated %}
<div id="sidebar-wrapper">
<!-- SIDEBAR LOGO -->
{% block sidenav-logo %}
<div class="text-center p-3">
<a href="{% url 'home' %}">
{% if SITE_LOGO_URL %}
<img src="{{ SITE_LOGO_URL }}" alt="" />
{% else %}
<h1 class="default-logo">COIN</h1>
{% endif %}
</a>
</div>
{% endblock %}
<!-- END SIDEBAR LOGO -->
<div class="navbar navbar-expand-lg fixed-top bg-light">
<!-- NAVBAR LOGO -->
{% block sidenav-logo %}
{% if SITE_LOGO_URL %}
<a class="navbar-brand" href="{% url 'home' %}">
<img src="{{ SITE_LOGO_URL }}" alt="" />
</a>
{% else %}
<a class="default-logo navbar-brand" href="{% url 'home' %}">
COIN
</a>
{% endif %}
{% endblock %}
<!-- END NAVBAR LOGO -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- SIDEBAR ITEM LIST -->
{% block sidenav %}
<ul class="sidebar-nav">{% include "menu_items.html" %}</ul>
{% endblock %}
<!-- END SIDEBAR ITEM LIST -->
</div>
<!-- NAVBAR ITEM LIST -->
{% block sidenav %}
{% include "menu_items.html" %}
{% endblock %}
<!-- END NAVBAR ITEM LIST -->
</div>
{% endif %}
<!-- END SIDEBAR -->
<!-- END NAVBAR -->
<!-- MAIN CONTENT -->
<div id="page-content-wrapper">
{% hijack_notification %}
<div id="main" class="container">
<!--
{% if not user.is_authenticated %}
<div class="row justify-content-center">
<h1>{{ SITE_HEADER }}</h1>
</div>
{% endif %}
-->
<!--
{% if not user.is_authenticated %}
<div class="row justify-content-center">
<h1>{{ SITE_HEADER }}</h1>
</div>
{% endif %}
-->
<!-- ACTUAL CONTENT -->
<div class="container-fluid">
{% block content %}{% endblock %}
</div>
<!-- END ACTUAL CONTENT -->
<!-- ACTUAL CONTENT -->
<div class="container-fluid">
{% block content %}{% endblock %}
</div>
<!-- END ACTUAL CONTENT -->
<!-- FOOTER -->
<div id="footer" class="row pt-5">
{% block footer %}
<div class="col-3 offset-2"><div class="line">&nbsp;</div></div>
<div class="col-2"><div class="duck"></div></div>
<div class="col-3"><div class="line">&nbsp;</div></div>
<p class="col-12 licence-sentence">Site propulsé par <a href="https://code.ffdn.org/FFDN/coin">COIN</a> sous licence AGPLv3.</p>
{% endblock %}
</div>
<!-- END FOOTER -->
</div>
<!-- END MAIN CONTENT -->
<!-- FOOTER -->
<div id="footer" class="row pt-5">
{% block footer %}
<div class="col-3 offset-2"><div class="line">&nbsp;</div></div>
<div class="col-2"><div class="duck"></div></div>
<div class="col-3"><div class="line">&nbsp;</div></div>
<p class="col-12 licence-sentence">Site propulsé par <a href="https://code.ffdn.org/FFDN/coin">COIN</a> sous licence AGPLv3.</p>
{% endblock %}
</div>
<!-- END FOOTER -->
</div>
......
{% load activelink %}
<li class="{% ifactive 'home' %}active{% endifactive %}"><a href="{% url 'home' %}"><i class="fa fa-home fa-fw"></i> Tableau de bord</a></li>
<li class="{% ifactive 'members:detail' %}active{% endifactive %}"><a href="{% url 'members:detail' %}"><i class="fa fa-user fa-fw"></i> Mes informations</a></li>
<li class="{% ifactive 'members:subscriptions' %}active{% endifactive %}"><a href="{% url 'members:subscriptions' %}"><i class="fa fa-cog fa-fw"></i> Mes abonnements</a></li>
<li class="{% ifactive 'members:invoices' %}active{% endifactive %}"><a href="{% url 'members:invoices' %}"><i class="fa fa-eur fa-fw"></i> Factures &amp; paiements</a></li>
{% if 'hardware_provisioning' in INSTALLED_APPS %}
<li class="{% ifactive 'hardware_provisioning:loan-list' %}active{% endifactive %}"><a href="{% url 'hardware_provisioning:loan-list' %}"><i
class="fa fa-exchange fa-fw"></i> Mon matériel</a></li>
{% endif %}
{% if 'maillists' in INSTALLED_APPS %}
<li class="{% ifactive 'maillists:lists-list' %}active{% endifactive %}"><a href="{% url 'maillists:lists-list' %}"><i
class="fa fa-envelope fa-fw"></i> Listes mail</a></li>
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Mon compte <span class="caret"></span></a>
<div class="dropdown-menu" aria-labelledby="themes">
<a class="dropdown-item" href="{% url 'members:detail' %}">
<i class="fa fa-user fa-fw"></i> Mes informations
</a>
<a class="dropdown-item" href="{% url 'members:subscriptions' %}">
<i class="fa fa-cog fa-fw"></i> Mes abonnements
</a>
<a class="dropdown-item" href="{% url 'members:invoices' %}">
<i class="fa fa-eur fa-fw"></i> Ma facturation
</a>
{% if 'hardware_provisioning' in INSTALLED_APPS %}
<a class="dropdown-item" href="{% url 'hardware_provisioning:loan-list' %}">
<i class="fa fa-exchange fa-fw"></i> Mon matériel
</a>
{% endif %}
{% if 'maillists' in INSTALLED_APPS %}
<a class="dropdown-item" href="{% url 'maillists:lists-list' %}">
<i class="fa fa-envelope fa-fw"></i> Listes mail
</a>
{% endif %}
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'members:password_change' %}">
<i class="fa fa-key fa-fw"></i> Modifier mon mot de passe
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="{% url 'members:logout' %}">
<i class="fa fa-power-off fa-fw"></i> Déconnexion
</a>
</div>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'members:contact' %}">
<i class="fa fa-life-ring fa-fw"></i> Contact / Support
</a>
</li>
{% if user.is_staff %}<li>
<li class="nav-item">
<a class="nav-link" href="{% url 'admin:index' %}">
<i class="fa fa-cogs fa-fw"></i> Administration
</a>
</li>
{% endif %}
<li class="{% ifactive 'members:contact' %}active{% endifactive %}"><a href="{% url 'members:contact' %}"><i class="fa fa-life-ring fa-fw"></i> Contact / Support</a></li>
<li class="divider"></li>
{% if user.is_staff %}<li><a href="{% url 'admin:index' %}"><i class="fa fa-cogs fa-fw"></i> Administration</a></li>{% endif %}
<li class="{% ifactive 'members:password_change' %}active{% endifactive %}"><a href="{% url 'members:password_change' %}"><i class="fa fa-key fa-fw"></i> Modifier mon mot de passe</a></li>
<li class="divider"></li>
<li class="{% ifactive '' %}active{% endifactive %}"><a href="{% url 'members:logout' %}"><i class="fa fa-power-off fa-fw"></i> Déconnexion</a></li>
</ul>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment