Skip to content

Commit

Permalink
Make dataset favouriting work on the new area page
Browse files Browse the repository at this point in the history
  • Loading branch information
@zarino @struan
zarino authored and struan committed Jan 9, 2024
1 parent 6c007f8 commit df6fc98
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 48 deletions.
22 changes: 22 additions & 0 deletions hub/static/css/_area.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,14 @@
grid-row: span 3;
}

.area-data-favourites {
display: none; // will be shown later on

svg {
margin: 0 0.33rem;
}
}

.area-data-more {
display: none; // will be shown later on
margin-top: map-get($spacers, 3);
Expand Down Expand Up @@ -130,3 +138,17 @@
display: none;
}
}

.area-content[data-section="favourites"] {
.area-data-favourites {
display: block;
}

.area-data-grid > :not(.dataset-card--favourite) {
display: none;
}

.area-section:not(:has(.dataset-card--favourite)) {
display: none;
}
}
26 changes: 13 additions & 13 deletions hub/static/js/area.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,19 +63,19 @@ function setUpAreaPage() {
trackEvent('area_page_switch_section', { "section": section })
})

// $('.js-favourite-this-dataset, .js-unfavourite-this-dataset').on('submit', function(e){
// e.preventDefault();
// var $form = $(this);
// $.ajax({
// url: $form.attr('action'),
// type: $form.attr('method') || 'get',
// data: $form.serialize(),
// accepts: 'application/json; charset=utf-8',
// dataType: 'json'
// }).done(function(){
// $form.parents('.dataset-card').toggleClass('dataset-card--favourite');
// });
// });
$('.js-favourite-this-dataset, .js-unfavourite-this-dataset').on('submit', function(e){
e.preventDefault();
var $form = $(this);
$.ajax({
url: $form.attr('action'),
type: $form.attr('method') || 'get',
data: $form.serialize(),
accepts: 'application/json; charset=utf-8',
dataType: 'json'
}).done(function(){
$form.parents('.dataset-card').toggleClass('dataset-card--favourite');
});
});

updateUI()
}
Expand Down
4 changes: 2 additions & 2 deletions hub/templates/hub/area/_favourite.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
<form action="{% url 'unfavourite_dataset' category.pk %}" method="POST" class="js-unfavourite-this-dataset">
<form action="{% url 'unfavourite_dataset' dataset.pk %}" method="POST" class="js-unfavourite-this-dataset">
{% csrf_token %}
<button type="submit" title="Unfavourite this dataset">
{% include 'hub/includes/icons/heart-full.html' %}
</button>
</form>
<form action="{% url 'favourite_dataset' category.pk %}" method="POST" class="js-favourite-this-dataset">
<form action="{% url 'favourite_dataset' dataset.pk %}" method="POST" class="js-favourite-this-dataset">
{% csrf_token %}
<button type="submit" title="Favourite this dataset">
{% include 'hub/includes/icons/heart-empty.html' %}
Expand Down
55 changes: 22 additions & 33 deletions hub/templates/hub/new_area_page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,11 @@ <h1 class="mb-2">{{ area.name }}</h1>
<div class="py-4 py-lg-5 bg-light area-content">
<div class="container mb-n3 mb-lg-n4">

<aside class="area-data-favourites mb-5 mb-lg-6">
<h2 class="h5 text-muted">Easy access to the datasets that matter to you</h2>
<p class="d-flex flex-wrap align-items-center text-muted">Tap the {% include 'hub/includes/icons/heart-empty.html' %} icon on any dataset to add it to your {% include 'hub/includes/icons/heart-empty.html' %} Favourites tab.</p>
</aside>

<section class="mb-5 mb-lg-6 area-section" id="mp">
<h2 class="mb-3 text-primary">MP</h2>
<div class="area-data-grid">
Expand Down Expand Up @@ -109,9 +114,6 @@ <h3 class="h5">MP profiles</h3>
<div class="card dataset-card area-data--md area-data--featured">
<div class="card-header">
<h3 class="h5">MP memberships</h3>
<form>
<button title="Favourite these datasets">{% include 'hub/includes/icons/heart-empty.html' %}</button>
</form>
</div>
<div class="card-body">
{% if mp.cen_member or mp.nzsg_member %}
Expand Down Expand Up @@ -150,9 +152,6 @@ <h4 class="h6 text-muted fw-bold">APPGs</h4>
<div class="card dataset-card area-data--md area-data--featured">
<div class="card-header">
<h3 class="h5">Relevant votes &amp; amendments</h3>
<form>
<button title="Favourite these datasets">{% include 'hub/includes/icons/heart-empty.html' %}</button>
</form>
</div>
<div class="card-body">
<table class="table mb-0">
Expand Down Expand Up @@ -183,12 +182,10 @@ <h3 class="h5">Relevant votes &amp; amendments</h3>
</div>
</div>

<div class="card dataset-card area-data--sm area-data--featured">
<div class="card dataset-card area-data--sm {% comment %} TODO: dataset-card--favourite? {% endcomment %} area-data--featured">
<div class="card-header">
<h3 class="h5">{{ mp.mp_last_elected|date:"Y"}} majority</h3>
<form>
<button title="Favourite this dataset">{% include 'hub/includes/icons/heart-empty.html' %}</button>
</form>
{% comment %} TODO: "Favourite" button {% endcomment %}
</div>
<div class="card-body">
<p class="card-text mb-0 display-6 lh-1 text-primary">
Expand All @@ -200,12 +197,10 @@ <h3 class="h5">{{ mp.mp_last_elected|date:"Y"}} majority</h3>
</div>
</div>

<div class="card dataset-card area-data--sm">
<div class="card dataset-card area-data--sm {% comment %} TODO: dataset-card--favourite? {% endcomment %}">
<div class="card-header">
<h3 class="h5">Date elected</h3>
<form>
<button title="Favourite this dataset">{% include 'hub/includes/icons/heart-empty.html' %}</button>
</form>
{% comment %} TODO: "Favourite" button {% endcomment %}
</div>
<div class="card-body">
<p class="card-text mb-0 display-6 lh-1 text-primary">
Expand Down Expand Up @@ -233,17 +228,15 @@ <h2 class="mb-3 text-primary">Public opinion</h2>

{% for dataset in categories.opinion %}
{% if dataset.is_range and dataset.data|length > 9 %}
<div class="card dataset-card area-data--lg{% if dataset.featured %} area-data--featured{% endif %}">
<div class="card dataset-card area-data--lg {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
{% elif dataset.is_range and dataset.data|length > 2 or dataset.data_type == "json" %}
<div class="card dataset-card area-data--md{% if dataset.featured %} area-data--featured{% endif %}">
<div class="card dataset-card area-data--md {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
{% else %}
<div class="card dataset-card area-data--sm{% if dataset.featured %} area-data--featured{% endif %}">
<div class="card dataset-card area-data--sm {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
{% endif %}
<div class="card-header">
<h3 class="h5">{{ dataset.label }}</h3>
<form>
<button title="Favourite this dataset">{% include 'hub/includes/icons/heart-empty.html' %}</button>
</form>
{% include "hub/area/_favourite.html" with dataset=dataset %}
</div>
<div class="card-body">
{% if dataset.data_type == "json" %}
Expand Down Expand Up @@ -297,17 +290,15 @@ <h2 class="mb-3 text-primary">Place</h2>

{% for dataset in categories.place %}
{% if dataset.is_range and dataset.data|length > 9 %}
<div class="card dataset-card area-data--lg{% if dataset.featured %} area-data--featured{% endif %}">
<div class="card dataset-card area-data--lg {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %} area-data--featured{% endif %}">
{% elif dataset.is_range or dataset.data_type == "json" %}
<div class="card dataset-card area-data--md{% if dataset.featured %} area-data--featured{% endif %}">
<div class="card dataset-card area-data--md {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %} area-data--featured{% endif %}">
{% else %}
<div class="card dataset-card area-data--sm{% if dataset.featured %} area-data--featured{% endif %}">
<div class="card dataset-card area-data--sm {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %} area-data--featured{% endif %}">
{% endif %}
<div class="card-header">
<h3 class="h5">{{ dataset.label }}</h3>
<form>
<button title="Favourite this dataset">{% include 'hub/includes/icons/heart-empty.html' %}</button>
</form>
{% include "hub/area/_favourite.html" with dataset=dataset %}
</div>
<div class="card-body">
{% if dataset.data_type == "json" %}
Expand Down Expand Up @@ -368,19 +359,17 @@ <h2 class="mb-3 text-primary">Movement</h2>

{% for dataset in categories.movement %}
{% if dataset.is_range and dataset.data|length > 9 %}
<div class="card dataset-card area-data--lg{% if dataset.featured %} area-data--featured{% endif %}">
<div class="card dataset-card area-data--lg {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
{% elif dataset.is_range or dataset.data_type == "json" %}
<div class="card dataset-card area-data--md{% if dataset.featured %} area-data--featured{% endif %}">
<div class="card dataset-card area-data--md {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
{% elif dataset.related_category and dataset.related_category.data.value|length > 6 %}
<div class="card dataset-card area-data--md{% if dataset.featured %} area-data--featured{% endif %}">
<div class="card dataset-card area-data--md {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
{% else %}
<div class="card dataset-card area-data--sm{% if dataset.featured %} area-data--featured{% endif %}">
<div class="card dataset-card area-data--sm {% if dataset.is_favourite or dataset.data.is_favourite %}dataset-card--favourite{% endif %} {% if dataset.featured %}area-data--featured{% endif %}">
{% endif %}
<div class="card-header">
<h3 class="h5">{{ dataset.label }}</h3>
<form>
<button title="Favourite this dataset">{% include 'hub/includes/icons/heart-empty.html' %}</button>
</form>
{% include "hub/area/_favourite.html" with dataset=dataset %}
</div>
<div class="card-body">
{% if dataset.data_type == "json" %}
Expand Down

0 comments on commit df6fc98

Please sign in to comment.