Skip to content

Commit 4634c7b

Browse files
KhadijaMahangaDavidLemayian
KhadijaMahanga
authored and
DavidLemayian
committed
[Feature] HURUmap-Apps:Land Implement "Discover" banner as floating box (#95)
* add a discover floating box * styling floating div * fix typo * hurumap land database url * PR request changes * fix floating div position * changed floating div link * font weight * add right arrow on banner * add comment on homepage template
1 parent 3d46b8e commit 4634c7b

File tree

4 files changed

+118
-36
lines changed

4 files changed

+118
-36
lines changed

‎docker-compose.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ services:
2525
- DJANGO_SETTINGS_MODULE=${HURUMAP_APP}.settings
2626
- DATABASE_URL=postgresql://hurumap:hurumap@db:5432/${HURUMAP_APP}
2727
- DJANGO_SECRET_KEY=somethingsecret
28-
- HURUMAP_URL='http://localhost:8000'
28+
- HURUMAP_URL="http://localhost:8000"
2929
- PGHOST=db
3030
- PGDATABASE=${HURUMAP_APP}
3131
- PGUSER=hurumap

‎hurumap_land/static/css/hurumap_land.scss

Lines changed: 52 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@
88
// Fonts
99
@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
1010

11+
$brand-color-light-green: #b6d9e2;
12+
$brand-color-solid-light-green: #269c94;
1113
$brand-color-solid-green: #279c94;
14+
$brand-color-gray: #b1b1b1;
1215
$font-raleway: 'Raleway', sans-serif;
1316

1417
// Heading font
@@ -84,6 +87,54 @@ span.img-bg {
8487

8588
// Homepage
8689

90+
// Map Explainer; floating box
91+
.map-explainer-wrapper {
92+
position: absolute;
93+
top: 70px;
94+
display: flex;
95+
align-items: center;
96+
justify-content: center;
97+
width: 100%;
98+
height: 27em;
99+
}
100+
.map-explainer {
101+
display: inline-block;
102+
border-radius: 2px;
103+
width: 450px;
104+
max-width: 100%;
105+
height: auto;
106+
background-color: #ffffff;
107+
padding: 20px 30px 30px;
108+
text-align: center;
109+
color: rgb(8, 74, 73);
110+
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.23);
111+
112+
.cross {
113+
float: right;
114+
margin-top: -12px;
115+
margin-right: -20px;
116+
color: $brand-color-gray;
117+
}
118+
119+
hr {
120+
border-color: $brand-color-light-green;
121+
margin: 0;
122+
}
123+
124+
a {
125+
border-radius: 24px;
126+
padding: 5px 15px 7px;
127+
max-width: 100%;
128+
text-overflow: ellipsis;
129+
overflow: hidden;
130+
font-size: 13px;
131+
color: #fff;
132+
font-weight: 600;
133+
border: 0px;
134+
background-color: $brand-color-solid-light-green;
135+
}
136+
}
137+
87138
// How it works
88139
.how-it-works {
89140
img {
@@ -95,7 +146,7 @@ span.img-bg {
95146
.showcase-stories {
96147
top: -60px;
97148
position: relative;
98-
padding: 15px;
149+
padding: 15px 30px 0px;
99150
max-width: 1024px;
100151
margin: 0 auto;
101152

@@ -153,4 +204,3 @@ span.img-bg {
153204

154205
}
155206
}
156-

‎hurumap_land/static/img/icons/blurbs/button-arrow.svg

Lines changed: 3 additions & 0 deletions
Loading

‎hurumap_land/templates/homepage.html

Lines changed: 62 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{% extends 'homepage.html' %}{% load sass_tags humanize partition static %}
22

3-
{% block head_meta_description %}{{ HURUmap.name }} provides useful facts and
3+
{% block head_meta_description %}{{ HURUMAP.name }} provides useful facts and
44
data about land ownership in South Africa. Compare places using tables and maps,
55
download data, and embed charts on your site.{% endblock %}
66

@@ -15,40 +15,69 @@
1515
</li>
1616
{% endblock header_menu %}
1717

18-
{% block header_content %}
19-
<div class="content-container clearfix bg-color-secondary text-center">
20-
<div class="wrapper">
21-
<h1>Discover the Data behind our Land</h1>
22-
<h4>{{ HURUMAP.name }} provides useful facts and data about land ownership in South Africa.</h4>
23-
</div>
24-
</div>
25-
{% endblock header_content %}
26-
27-
{% block how_it_works %}
28-
<div class="wrapper clearfix how-it-works">
29-
<h1>How It Works</h1>
30-
<br/>
31-
<div class="column-third">
32-
<p><span class="img-bg rounded bg-color-primary"><img src="{% static 'img/icons/blurbs/checklist.svg' %}"/></span></p>
33-
<h3>Find Facts</h3>
34-
<p>Land ownership data is broken down by province and category: agricultural land, erven and urban land and sectional title land. </p>
35-
</div>
36-
<div class="column-third">
37-
<p><span class="img-bg rounded bg-color-primary"><img src="{% static 'img/icons/blurbs/analysis.svg' %}"/></span></p>
38-
<h3>Visualize</h3>
39-
<p>Our library of charts gives you insight into land data from provinces you research. Look for them on profile pages. You can embed the charts on your own site. </p>
18+
<!-- Empty header content to override top discover banner -->
19+
{% block header_content %}{% endblock header_content %}
20+
21+
{% block content_container %}
22+
23+
<div class="clearfix">
24+
<div id="slippy-map"></div>
25+
<!-- Map Explainer; floating discover banner -->
26+
<div class="map-explainer-wrapper">
27+
<div class="map-explainer">
28+
<i class="fa fa-times cross"
29+
onclick="javascript:$('.map-explainer-wrapper').css('display', 'none')"></i>
30+
<div style="padding-bottom: 2%">
31+
<h2 class="font-weight-bold" style="font-size: 2em">
32+
Discover the stories behind <br/> our <span style="color: #269a92;">land</span></h2>
33+
<hr>
34+
</div>
35+
<p>{{ HURUMAP.name }} gives journalist and civic activists
36+
useful facts and data about land ownership in South Africa</p>
37+
<a class="btn btn-primary btn-sm text-uppercase font-weight-light"
38+
href="{{HURUMAP.url}}/profiles/country-ZA-south-africa/">
39+
EXPLORE SOUTH AFRICA
40+
<img class="border-0" src="{% static 'img/icons/blurbs/button-arrow.svg' %}"
41+
alt="button arrow"
42+
style="height:15px; width: 18px; box-shadow: none; object-fit: contain;">
43+
</a>
44+
</div>
45+
</div>
4046
</div>
41-
<div class="column-third-end">
42-
<p><span class="img-bg rounded bg-color-primary"><img src="{% static 'img/icons/blurbs/visualization.svg' %}"/></span></p>
43-
<h3>Get Context</h3>
44-
<p>Pre-computed land statistics are presented alongside each data point so you can see how each place fits into a large context.</p>
47+
48+
<div class="showcase how-it-works bg-tan text-center">
49+
{% block how_it_works %}
50+
<div class="wrapper clearfix how-it-works">
51+
<h1>How It Works</h1>
52+
<br/>
53+
<div class="column-third">
54+
<p><span class="img-bg rounded bg-color-primary"><img src="{% static 'img/icons/blurbs/checklist.svg' %}"/></span></p>
55+
<h3>Find Facts</h3>
56+
<p>Land ownership data is broken down by province and category: agricultural land, erven and urban land and sectional title land. </p>
57+
</div>
58+
<div class="column-third">
59+
<p><span class="img-bg rounded bg-color-primary"><img src="{% static 'img/icons/blurbs/analysis.svg' %}"/></span></p>
60+
<h3>Visualize</h3>
61+
<p>Our library of charts gives you insight into land data from provinces you research. Look for them on profile pages. You can embed the charts on your own site. </p>
62+
</div>
63+
<div class="column-third-end">
64+
<p><span class="img-bg rounded bg-color-primary"><img src="{% static 'img/icons/blurbs/visualization.svg' %}"/></span></p>
65+
<h3>Get Context</h3>
66+
<p>Pre-computed land statistics are presented alongside each data point so you can see how each place fits into a large context.</p>
67+
</div>
68+
</div>
69+
<div class="clearfix"></div>
70+
<div class="wrapper" style="margin: 30px auto;">
71+
<a href="/help" class="btn btn-lg bg-bottle-green">Learn more</a>
72+
</div>
73+
{% endblock %}
4574
</div>
46-
</div>
47-
<div class="clearfix"></div>
48-
<div class="wrapper" style="margin: 30px auto;">
49-
<a href="/help" class="btn btn-lg bg-bottle-green">Learn more</a>
50-
</div>
51-
{% endblock %}
75+
76+
{% include 'blocks/showcase.html' %}
77+
78+
{% include 'blocks/partners.html' with extra_css_class='bg-tan' %}
79+
80+
{% endblock content_container %}
5281

5382
{% block homepage_javascripb_libs %}
5483
{{ block.super }}

0 commit comments

Comments
 (0)