Commit 5f1da46d authored by cynddl's avatar cynddl

Add initial navigation menu for the frontend page

parent cc699d28
Pipeline #1155 passed with stages
in 2 minutes and 11 seconds
......@@ -6,8 +6,9 @@
{% block content-header %}
<div class="row justify-content-left">
<div class="col-md-6 offset-md-1">
<p>La revue de presse recense les articles de presse relatifs aux sujets de la Quadrature, compilés par ses bénévoles.
Voir aussi notre revue de presse internationale.</p>
<p>La revue de presse recense les articles de presse relatifs aux sujets de
la Quadrature. Elle est compilée chaque jour par ses bénévoles, à partir de
la presse francophone et internationale.</p>
</div>
<div class="col-md-4">
</div>
......@@ -16,27 +17,69 @@ Voir aussi notre revue de presse internationale.</p>
{% block content %}
<div class="row">
<div class="col-md-12 white-bg">
<div class="col-md-12 white-bg shadow-effect">
<div class="row">
<div class="col-md-10 offset-1">
<ul class="nav nav-compressed my-4">
<li class="nav-item">
<a class="nav-link active" href="#">
<span class="fa-stack fa-md">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-map-marker fa-stack-1x"></i>
</span>
Presse francophone
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span class="fa-stack fa-md">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-globe fa-stack-1x"></i>
</span>
Presse internationale
</a>
</li>
<li class="nav-item ml-auto">
<a class="nav-link disabled" href="#">
<span class="fa-stack fa-md">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-search fa-stack-1x"></i>
</span>
Rechercher
</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">
<span class="fa-stack fa-md">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-tags fa-stack-1x"></i>
</span>
Tags
</a>
</li>
<div class="well">
{% if is_paginated %}
<div class="pagination">
<span class="page-links">
<li class="nav-item pagination">
<span class="nav-text page-links">
{% if page_obj.has_previous %}
<a href="?page={{ page_obj.previous_page_number }}"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
<a href="?page={{ page_obj.previous_page_number }}" class="mr-2"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
{% endif %}
<span class="page-current">
Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
</span>
{% if page_obj.has_next %}
<a href="?page={{ page_obj.next_page_number }}"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
<a href="?page={{ page_obj.next_page_number }}" class="ml-2"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
{% endif %}
</span>
</div>
</li>
{% endif %}
<div class="row">
<div class="col-md-10 offset-1">
</ul>
{% for article in object_list %}
<section class="article-card d-flex">
......
......@@ -77,3 +77,17 @@ ul.nav.nav-integrated li {
padding: .4rem .8rem;
margin-left: .5rem;
}
.nav.nav-compressed li .nav-link {
padding-left: 0;
}
.nav .nav-text {
padding: 0.5em 1em;
display: flex;
align-items: center;
}
.nav.nav-compressed .active {
font-weight: bold;
}
......@@ -2,3 +2,15 @@
display: inline-block;
height: 1em;
}
.stacked-effect {
box-shadow: 0 -1px 1px rgba(0,0,0,0.15),
0 -20px 0 -10px #eee,
0 -20px 1px -9px rgba(0,0,0,0.15),
0 -40px 0 -20px #eee,
0 -40px 1px -19px rgba(0,0,0,0.15);
}
.shadow-effect {
box-shadow: 0 -1px 10px rgba(0, 0, 0, .15);
}
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