Skip to content

Commit d31c203

Browse files
polycconpolyccon
committed
adds button and input styling
1 parent 544790b commit d31c203

File tree

5 files changed

+67
-18
lines changed

5 files changed

+67
-18
lines changed

Diff for: ‎src/static/results.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,9 @@ function drawBarChart(divid, data){
4343

4444
var margin = {
4545
top: 15,
46-
right: 70,
46+
right: 90,
4747
bottom: 15,
48-
left: 200
48+
left: 300
4949
};
5050

5151
var width = 960 - margin.left - margin.right,

Diff for: ‎src/static/style.css

+48-4
Original file line numberDiff line numberDiff line change
@@ -6,17 +6,61 @@
66
.arc path {
77
stroke: #fff;
88
}
9-
.display{
9+
.display-none{
10+
display: none;
11+
}
12+
.display-flex{
1013
display:flex;
1114
flex-direction: row;
1215
}
13-
.text-size{
14-
font-size:20px;
15-
}
1616
.text-color{
1717
color:red;
1818
}
1919
.body{
2020
text-align: center;
2121
font-family:sans-serif;
2222
}
23+
.button-styling{
24+
font-size: 15px;
25+
background-color: #2F4F4F;
26+
color: white;
27+
font-style: oblique 0deg;
28+
width:300px;
29+
height:50px;
30+
border-radius: 6px;
31+
border-size: 2px;
32+
text-shadow: -2px 0px;
33+
}
34+
input {
35+
border-radius: 6px;
36+
border-size: 2px;
37+
width:300px;
38+
height:50px;
39+
vertical-align: top;
40+
}
41+
.blink_text {
42+
43+
animation:1s blinker linear infinite;
44+
-webkit-animation:1s blinker linear infinite;
45+
-moz-animation:1s blinker linear infinite;
46+
47+
color: red;
48+
}
49+
50+
@-moz-keyframes blinker {
51+
0% { opacity: 1.0; }
52+
50% { opacity: 0.0; }
53+
100% { opacity: 1.0; }
54+
}
55+
56+
@-webkit-keyframes blinker {
57+
0% { opacity: 1.0; }
58+
50% { opacity: 0.0; }
59+
100% { opacity: 1.0; }
60+
}
61+
62+
@keyframes blinker {
63+
0% { opacity: 1.0; }
64+
50% { opacity: 0.0; }
65+
100% { opacity: 1.0; }
66+
}

Diff for: ‎src/templates/home.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,9 @@
77
</head>
88
<body class="body">
99
<h1>Welcome to the UK Crime Stats site</h1>
10-
<form action="{{ url_for('viewcrime') }}" method = 'POST'>
11-
<label for="keyword" class ="keyword">Enter an address in the UK:</label>
12-
<input type= 'text' name='location' placeholder='Enter postcode' id = 'location'>
13-
<button id="submit_button">Get stats</button>
10+
<form action="{{ url_for('viewcrime') }}" method ='POST'>
11+
<input type= 'text' name='location' placeholder='Enter a UK address' id = 'location'>
12+
<button type="submit" id="submit_button" class="button-styling">Get stats</button>
1413
</form>
1514
</body>
1615
</html>

Diff for: ‎src/templates/results.html

+9-5
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,21 @@
33
<head>
44
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6-
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
7-
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
6+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
7+
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
88
<link rel="stylesheet" href="/static/style.css">
99
</head>
1010
<body class="body">
11-
<div class="display">
11+
<div id="header">
12+
<h2> You are looking at crime stats for: <h2>
13+
<p class="blink_text">{{location}}<p>
14+
<div>
15+
<div class="display-flex">
1216
<div id="pie-chart"></div>
1317
<div id="bar-chart"></div>
14-
</div>
18+
</div>
1519
<form action="/">
16-
<input type="submit" value="Home page">
20+
<button type="submit" value="Home page" class="button-styling">Home page</button>
1721
</form>
1822
<script type="text/javascript" src="/static/results.js"></script>
1923
<script type="text/javascript">

Diff for: ‎src/views.py

+5-3
Original file line numberDiff line numberDiff line change
@@ -34,19 +34,21 @@ def healthz():
3434
def hello():
3535
return render_template('home.html')
3636

37+
3738
@app.route("/home")
3839
def home():
3940
return redirect("/")
41+
42+
4043
def get_data(location):
41-
# location = 'London'
4244
KEY = read_json('params.json', 'MAPQ')
4345
url1 = 'http://open.mapquestapi.com/geocoding/v1/address?'
44-
params1= dict(
46+
params1 = dict(
4547
key=KEY,
4648
location=location
4749
)
4850
resp1 = requests.get(url=url1, params=params1)
49-
ll= json.loads(resp1.text)['results'][0]['locations'][0]['displayLatLng']
51+
ll = json.loads(resp1.text)['results'][0]['locations'][0]['displayLatLng']
5052
latitude = ll['lat']
5153
longitude = ll['lng']
5254
url = 'https://data.police.uk/api/crimes-street/all-crime?'

0 commit comments

Comments
 (0)