Challenge map cleanup

app/forms.py

@@ -8,7 +8,7 @@
 class ProfileUpdateForm(ModelForm):
     class Meta:
         model = Profile
-        fields = ["description", "tags"]
+        fields = ["description", "tags", "country", "city"]
         hidden_fields = ["longitude", "latitude"]
 
     def __init__(self, *args, **kwargs):

app/migrations/0014_auto_20200927_1620.py

@@ -0,0 +1,23 @@
+# Generated by Django 3.1 on 2020-09-27 20:20
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('app', '0013_auto_20200919_0144'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='profile',
+            name='city',
+            field=models.CharField(blank=True, help_text='City of origin of user', max_length=30, null=True, verbose_name='city'),
+        ),
+        migrations.AddField(
+            model_name='profile',
+            name='country',
+            field=models.CharField(blank=True, help_text='Country of origin of user', max_length=30, null=True, verbose_name='country'),
+        ),
+    ]

app/models.py

@@ -87,6 +87,8 @@ class Profile(models.Model):
     description = models.TextField(
         blank=True, verbose_name="Description", help_text="User description."
     )
+    country = models.CharField(blank=True, null=True, max_length=30, verbose_name="country", help_text="Country of origin of user")
+    city = models.CharField(blank=True, null=True,max_length=30, verbose_name="city", help_text="City of origin of user")
     badges = models.ManyToManyField(
         Badge,
         blank=True,
@@ -109,7 +111,6 @@ def username(self):
     def __str__(self):
         return self.user.username
 
-
 class Challenge(models.Model):
     name = models.CharField(
         max_length=100, verbose_name="Name", help_text="Name of this challenge."

app/static/css/style.css

@@ -224,8 +224,22 @@ footer {
   justify-items: center;
 }
 
+#geocoder {
+  position: relative;
+  z-index: 1;
+  width: 50%;
+  left: 50%;
+  margin-left: -25%;
+  top: 10px;
+}
+
+.mapboxgl-ctrl-geocoder {
+  min-width: 100%;
+  margin-left:10%;
+}
+
 #map {
-  height: 50vh;
+  margin-top: 75px;
 }
 
 .form-section > label {

app/templates/base.html

@@ -20,6 +20,12 @@
   <script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
   <link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
 
+  <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
+  <link rel="stylesheet"href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"type="text/css"/>
+  <!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
+  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> 
+
   {% block head %}
   {% endblock %}
 

app/templates/challenge.html

@@ -13,11 +13,11 @@
 <h3>Heat map</h3>
 <p>Contributions by region</p>
 
-<div class="map-container frame w-100 h-50" id="challenge-frame">
+<!-- <div class="map-container frame w-100 h-50" id="challenge-frame">
   <div id="map"></div>
   <script src="{{ static('js/heatmap.js') }}"></script>
 </div>
-<br>
+<br> -->
 
 <br>
 <h3>Projects posted to this challenge</h3>
@@ -43,7 +43,7 @@ <h3>Projects posted to this challenge</h3>
           </div>
         </div>
         <div class="card-body content">
-          <p>{{ project.description|truncatechars(80) }}</p>
+          <p>{{ project.one_liner|truncatechars(80) }}</p>
         </div>
         <div class="card-footer content">
           {% for tag in project.tags.all()[:3] %}

app/templates/edit_profile.html

@@ -69,20 +69,25 @@
             <span class="text-primary info">{{ error }}</span>
           {% endfor %}
         </div>
-        <div class="form-section">
+        <!-- <div class="form-section">
           <label>Where are you from?</label>
-          <p>Click and drag the marker. </p>
           <div class="map-container w-100 h-50">
-            <div id="map">Map should be here</div>
+            <small>Country:</small>
+            <div class="input-control">
+              {{ form.country }}
+            </div>
+            <small>City:</small>
+            <div class="input-control">
+              {{ form.city }}
+            </div>
           </div>
-        </div>
+        </div> -->
         <br>
         <input type="submit" class="btn-primary u-pull-right animated" value="Save all">
       </div>
     </form>
   </div>
 </div>
-<script src="{{ static('js/map.js') }}"></script>
 <script>
   var simplemde = new SimpleMDE({ element: document.getElementById("id_description") });
 </script>

app/templates/explore.html

@@ -79,7 +79,7 @@ <h1 class="header-margin">{{ name|title }}s</h1>
               </div>
             </div>
             <div class="card-body content">
-              <p>{{ object.description|truncatechars(48) }}</p>
+              <p>{{ object.one_liner|truncatechars(48) }}</p>
             </div>
             <div class="card-footer content">
               {% for tag in object.tags.all()[:3] %}