From de0eb4135b1118d11253bd816637d902e16f4fae Mon Sep 17 00:00:00 2001
From: ronardcaktus <rluna@caktusgroup.com>
Date: Wed, 6 Sep 2023 21:12:08 -0400
Subject: [PATCH 1/2] Change chart color and hide region chart on small screen

---
 .../templates/country/country_detail.html     | 61 +++++++++----------
 1 file changed, 30 insertions(+), 31 deletions(-)

diff --git a/apps/countries/templates/country/country_detail.html b/apps/countries/templates/country/country_detail.html
index 176cf00..4366a5e 100644
--- a/apps/countries/templates/country/country_detail.html
+++ b/apps/countries/templates/country/country_detail.html
@@ -9,7 +9,7 @@
     <div class="jumbotron">
         <div class="container pt-4">
             <div class="row">
-                <div class="col-3">
+                <div class="col-lg-3 col-md-7 col-sm-6">
                     {% for country in countries %}
                     <div class="card">
                         <div class="card-header pb-1">
@@ -36,36 +36,36 @@ <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">
                             <p class="h6 text-center pt-2">Economic Indicators per citizen (US Dollar)</p>
@@ -127,8 +127,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>
@@ -147,7 +146,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, {

From ac1b84446aeb075756d4696eb504c2cc3e29f7fe Mon Sep 17 00:00:00 2001
From: ronardcaktus <rluna@caktusgroup.com>
Date: Wed, 6 Sep 2023 21:33:13 -0400
Subject: [PATCH 2/2] Change layout and remove top 10 from navbar

---
 apps/countries/templates/base.html                   | 4 ----
 apps/countries/templates/country/country_detail.html | 5 ++---
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/apps/countries/templates/base.html b/apps/countries/templates/base.html
index 0bc4f60..df2d0e7 100644
--- a/apps/countries/templates/base.html
+++ b/apps/countries/templates/base.html
@@ -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>
diff --git a/apps/countries/templates/country/country_detail.html b/apps/countries/templates/country/country_detail.html
index 4366a5e..0d5cdca 100644
--- a/apps/countries/templates/country/country_detail.html
+++ b/apps/countries/templates/country/country_detail.html
@@ -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-lg-3 col-md-7 col-sm-6">
+                <div class="col-lg-3 col-md-12 col-sm-12">
                     {% for country in countries %}
                     <div class="card">
                         <div class="card-header pb-1">
@@ -67,7 +66,7 @@ <h5>Country</h5>
                 </div>
                 <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 -->