Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Mobile friendly #23

Merged
merged 2 commits into from
Sep 7, 2023
Merged

Mobile friendly #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
de0eb41
Change chart color and hide region chart on small screen
ronardcaktus Sep 7, 2023
ac1b844
Change layout and remove top 10 from navbar
ronardcaktus Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 0 additions & 4 deletions apps/countries/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,6 @@
<a class="nav-link" href="#" rel="nofollow">Compare Debt</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">
Top 10s
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Top 10 highest debt</a></li>
<li><a class="dropdown-item" href="#">Top 10 lowest debt</a></li>
Expand Down
64 changes: 31 additions & 33 deletions apps/countries/templates/country/country_detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,10 @@
{% block content %}

<main role="main">
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<div class="container pt-4">
<div class="row">
<div class="col-3">
<div class="col-lg-3 col-md-12 col-sm-12">
{% for country in countries %}
<div class="card">
<div class="card-header pb-1">
Expand All @@ -36,38 +35,38 @@ <h5>Country</h5>
{{ country.population_percentage_of_the_world }}</p>
</div>
</div>

<!-- Region GDP Chart -->
<canvas id="gdpChart" width="300" height="300"></canvas>
<script>
const ctx = document.getElementById('gdpChart').getContext('2d');
const gdpChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [
'Total Region GDP %',
'{{ country.name }} GPD %',
],
datasets: [{
label: 'GDP chart',
data: ["{{ country.total_region_gdp_pc_excluding_self }}", "{{ country.country_gdp_pc }}"],
backgroundColor: [
'rgba(90, 138, 211, 0.7)',
'rgba(220, 235, 2, 0.7)'
<div class="col-lg-12 d-none d-lg-block">
<!-- Region GDP Chart -->
<canvas id="gdpChart" width="300" height="300"></canvas>
<script>
const ctx = document.getElementById('gdpChart').getContext('2d');
const gdpChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [
'Total Region GDP %',
'{{ country.name }} GPD %',
],
hoverOffset: 4
}]
}
});
</script>

<p class="lead text-center fs-6 pt-4"> {{ country.name }}'s GDP %
of {{ country.region_formatted}}n region.</p>
datasets: [{
label: 'GDP chart',
data: ["{{ country.total_region_gdp_pc_excluding_self }}", "{{ country.country_gdp_pc }}"],
backgroundColor: [
'rgba(90, 138, 211, 0.7)',
'rgba(233, 116, 81, 0.7)'
],
hoverOffset: 4
}]
}
});
</script>

<p class="lead text-center fs-6 pt-4"> {{ country.name }}'s GDP %
of {{ country.region_formatted}}n region.</p>
</div>
</div>
<div class="col-9">
<div class="col-lg-9 col-md-12 col-sm-12">
<div class="container">
<div class="card">
<div class="card col-md-12 col-sm-12 col-xs-12">
<p class="h6 text-center pt-2">Economic Indicators per citizen (US Dollar)</p>
<div class="card-body">
<!-- Economic indicators Chart -->
Expand Down Expand Up @@ -127,8 +126,7 @@ <h5>Country</h5>
</script>
</div>
</div>
<!-- Some countries won't have GPD data, this ensures that -->
<!-- the graph only shows if the country has GDP data. -->
<!-- Some countries won't have GPD data, hence the conditional -->
{% if gdp_data %}
<div class="card-body pb-1">
<p class="h6 text-center">GDP 2007-2022 in (US Dollars)</p>
Expand All @@ -147,7 +145,7 @@ <h5>Country</h5>
data: gdp_model_data,
fill: false,
borderColor: '#54B4D3',
tension: 0.5,
tension: 0.2,
}],
};
const gdp_trend_chart = new Chart(ctx3, {
Expand Down
Loading