Skip to content

GitLab

R
rp
Commit 77ab5980 authored by cynddl's avatar cynddl
Browse files
Options

Cleanup base template and add API calls for upvote/downvote/reject/publish in templates

parent 5f8c1d10
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 70 deletions
apps/rp/templates/rp/article_list.html
View file @ 77ab5980
......@@ -58,8 +58,8 @@
</thead>
<tbody>
{% for article in object_list|slice:":10" %}
<tr class="empty-row"><td colspan="8"></td></tr>
<tr>
<tr id="row_empty_{{article.id}}" class="empty-row"><td colspan="8"></td></tr>
<tr id="row_{{article.id}}">
<td class="icon-cell"><i class="fa fa-dot-circle-o" aria-hidden="true" style="color:red"></i></td>
<td>{{article.id}}</td>
<td>{{article.created_at |date:'d/m/y'}}<br />{{article.created_at |date:'H:i'}}</td>
......@@ -67,33 +67,39 @@
<td class="title-cell"><a target="_blank" href="{{article.url}}"><strong>{{article.title}}</strong></a></td>
<td>
<ul class="votes-list">
<li><a href="">+{{article.und_score_up}} <i class="fa fa-thumbs-up" aria-hidden="true" style="color:green"></i></a></li>
<li><a href="">-{{article.und_score_down}} <i class="fa fa-thumbs-down" aria-hidden="true" style="color:red"></i></a></li>
<li class="actions-item" onclick="javascript:call_upvote({{article.id}})">
<span id="count_up_{{article.id}}">{{article.und_score_up}}</span>
<i class="fa fa-thumbs-up" aria-hidden="true" style="color:green"></i>
</li>
<li class="actions-item" onclick="javascript:call_downvote({{article.id}})">
<span id="count_down_{{article.id}}">{{article.und_score_down}}</span>
<i class="fa fa-thumbs-down" aria-hidden="true" style="color:red"></i>
</li>
</ul>
</td>
<td>{{article.und_votes.first.username}}</td>
<td class="actions-cell">
<ul class="actions-list">
{% if filter_view == 'flux' %}
<li class="actions-item-draft"><a href="#">
<li class="actions-item actions-item-draft"><a href="#">
<i class="fa fa-chevron-right" aria-hidden="true"></i> Mettre en attente</a>
</li>
<li class="actions-item-reject"><a href="#">
<i class="fa fa-times" aria-hidden="true"></i> Rejeter</a>
<li class="actions-item actions-item-reject" onclick="javascript:call_reject({{article.id}})">
<i class="fa fa-times" aria-hidden="true"></i> Rejeter
</li>
{% else %}
<li class="actions-item-edit"><a href="#">
<li class="actions-item actions-item-edit"><a href="#">
<i class="fa fa-pencil" aria-hidden="true"></i> Éditer</a>
</li>
<li class="actions-item-publish"><a href="#">
<i class="fa fa-check" aria-hidden="true"></i> Publier</a>
<li class="actions-item actions-item-publish" onclick="javascript:call_publish({{article.id}})">
<i class="fa fa-check" aria-hidden="true"></i> Publier
</li>
{% endif %}
</ul>
</td>
</tr>
{% if filter_view != 'flux' %}
<tr class="tags-row">
<tr id="row_tags_{{article.id}}" class="tags-row">
<td colspan="8">
<strong>Tags</strong> tags tags
</td>
......@@ -105,4 +111,63 @@
</div>
</div>
</div>
<script>
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
var csrftoken = getCookie('csrftoken');
function csrfSafeMethod(method) {
// these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
function call_upvote(id) {
$.post("/api/articles/" + id + "/upvote/", function response(data) {
$("#count_up_" + id).text(data.und_score_up);
});
}
function call_downvote(id) {
$.post("/api/articles/" + id + "/downvote/", function response(data) {
$("#count_down_" + id).text(data.und_score_down);
});
}
function call_reject(id) {
$.post("/api/articles/" + id + "/reject/", function response(data) {
$("#row_" + id).hide();
$("#row_empty_" + id).hide();
$("#row_tags_" + id).hide();
});
}
function call_publish(id) {
$.post("/api/articles/" + id + "/publish/", function response(data) {
$("#row_" + id).hide();
$("#row_empty_" + id).hide();
$("#row_tags_" + id).hide();
});
}
</script>
{% endblock %}
static/build/css/tables.css
View file @ 77ab5980
......@@ -44,6 +44,11 @@ table.article-table td.actions-cell {
background-color: #ebf3ff;
padding: 1rem 1.5rem;
}
li.actions-item {
cursor: pointer;
}
table.article-table ul {
padding: 0;
margin: 0;
......
templates/base.html
View file @ 77ab5980
......@@ -3,30 +3,21 @@
<!-- Header -->
<html>
<head>
<title>Soutenez La Quadrature du Net !</title>
<title>Revue de presse de La Quadrature du Net</title>
<meta charset="utf-8" />
<meta name="author" content="La Quadrature du Net" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Open graph -->
<meta property="og:title" content="Soutenez La Quadrature du Net !" />
<meta property="og:url" content="https://soutien.laquadrature.net/" />
<!-- FIXME: Change the OG image -->
<meta property="og:image" content="https://soutien.laquadrature.net/static/img/anim_3.gif" />
<meta property="og:title" content="Revue de presse de La Quadrature du Net" />
<meta property="og:url" content="https://www.laquadrature.net/rp/" />
<meta property="og:site_name" content="La Quadrature du Net" />
<meta property="og:description" content="Depuis sa création, La Quadrature du Net agit sans relâche pour qu'Internet demeure un outil de partage, de libre expression, d'émancipation et permette la participation de tous au débat démocratique." />
<meta property="og:description" content="" />
<!-- Twitter cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@laquadrature" />
<meta name="twitter:title" content="Soutenez la Quadrature du Net&nbsp!">
<meta name="twitter:image" content="https://soutien.laquadrature.net/static/img/anim_3.gif">
<meta name="twitter:description" content="Depuis sa création, La Quadrature du Net agit sans relâche pour qu'Internet demeure un outil de partage, de libre expression, d'émancipation et permette la participation de tous au débat démocratique.">
<!-- Styles -->
<!-- Styles and scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- <link rel="stylesheet" href="/static/css/bootstrap.css" media="all"> -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/static/css/font-awesome.css" media="all">
<link rel="stylesheet" href="/static/css/fonts.css" media="all">
......@@ -135,57 +126,14 @@
<nav class="navbar navbar-toggleable-md">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<a class="navbar-brand" href="/"><img class="float-left" src="/static/img/logo.png" alt=""></a>
<ul class="navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link" href="#add-account">Vous êtes Padawan</a></li>
</ul>
</div>
</nav>
</div>
<!--
<div class="visible-xs visible-sm">
<nav id="toolbar" class="navbar navbar-default navbar-white">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/">
<img src="/static/img/logo.png" alt="">
</a>
</div>
<ul class="nav navbar-nav">
<li class="pull-right"><a href="#login">Se connecter</a></li>
<li class="pull-right collapsible-menu"><a href="#action-menu">Menu</a>
</li>
</ul>
</div>
<span class="menu-collapsed-target" id="perso-menu"></span>
<div class="menu-collapsed">
<ul class="nav navbar-nav">
<li><a href="/perso/logout">Déconnexion</a></li>
<li><a href="/perso">Page Perso</a></li>
<li><a href="#">Fermer</a></li>
</ul>
</div>
<span class="menu-collapsed-target" id="action-menu"></span>
<div class="menu-collapsed">
<ul class="nav navbar-nav">
<li> <a href="/why" >À quoi sert votre don&nbsp;?</a></li>
<li> <a href="/what" >Que fait LQDN&nbsp;?</a></li>
<li> <a href="/who" >Comment fonctionne LQDN&nbsp;?</a></li>
<li> <a href="/faq" >FAQ</a></li>
<li> <a href="/material" >Relayer</a></li>
<li> <a href="/" >Home</a></li>
<li><a href="#">Fermer</a></li>
</ul>
</div>
</nav>
</div> -->
<section class="text-center container-fluid white">
<div id="subtitle" class="row justify-content-center">
<div class="page-header col-md-10">
......
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