Skip to content

Commit 0c1e194

Browse files
author
Brendan Sudol
committedJul 10, 2017
unify footer, responsive fixes
·
v2.20.1v2.11.0
1 parent a43736a commit 0c1e194

File tree

3 files changed

+150
-278
lines changed

3 files changed

+150
-278
lines changed
 

‎.csslintrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
--exclude-list=./node_modules
1+
--exclude-list=./node_modules,./public/swagger

‎public/swagger/crime-data-style.css

+27
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@
99
}
1010
.site .swagger-ui-wrap .info_title {
1111
font-family: serif;
12+
font-size: 28px;
13+
margin-bottom: 16px;
1214
}
1315
.site .swagger-ui-wrap .info p,
1416
.site .swagger-ui-wrap .info ol li,
@@ -74,3 +76,28 @@
7476
.flex-justify {
7577
justify-content: space-between;
7678
}
79+
80+
.site .swagger-ui-wrap {
81+
min-width: inherit;
82+
}
83+
84+
#api-key-current, .sandbox {
85+
overflow: auto;
86+
}
87+
88+
.info_description {
89+
word-wrap: break-word;
90+
}
91+
92+
.endpoint .heading h3 {
93+
max-width: 100%;
94+
overflow: hidden;
95+
text-overflow: ellipsis;
96+
white-space: nowrap;
97+
}
98+
99+
@media (max-width: 40rem) {
100+
.heading .options {
101+
display: none !important;
102+
}
103+
}

‎public/swagger/index.html

+122-277
Original file line numberDiff line numberDiff line change
@@ -12,210 +12,72 @@
1212
<body>
1313
<div class="site">
1414
<div class="clearfix p1 fs-10 sm-fs-12 line-height-1 bg-white">
15-
<img
16-
class="mr-tiny align-bottom"
17-
alt="US flag"
18-
width="18"
19-
height="12"
20-
src="/img/usa-flag.png"
21-
/>
22-
An official website of the United States government
15+
<img class="mr-tiny align-bottom" alt="US flag" width="18" height="12" src="/img/usa-flag.png" /> An official website of the United States government
2316
</div>
24-
<header class="pt3 pb2 md-p0 flex items-center bg-blue white">
25-
<div class="md-flex flex-auto items-baseline px2 md-px6">
26-
<div class="flex-auto">
27-
<div class="inline-block">
28-
<span class="mb1 fs-10 md-fs-12 caps bold line-height-1 blue-light-508 block">
29-
Federal Bureau of Investigation
30-
</span>
31-
<a href="/" class="fs-24 md-fs-32 serif line-height-1 white">
32-
Crime Data Explorer
33-
</a>
34-
</div>
35-
</div>
17+
<header class="py2 md-p0 flex items-center bg-blue white">
18+
<div class="flex-auto items-baseline px2 md-px6">
19+
<div class="center"><span class="mb1 fs-10 md-fs-12 caps bold line-height-1 blue-light-508 block">Federal Bureau of Investigation</span><a href="/" class="fs-24 md-fs-32 serif line-height-1 white">Crime Data Explorer</a></div>
3620
</div>
3721
</header>
38-
39-
<main class="site-main swagger-section container mx-auto my3">
40-
<form class="bg-white hide p3" id="api-key-container">
41-
<div>
42-
<label class="block bold mb1 serif" for="api-key">Add your API key</label>
43-
<input class="border border-blue col-6 monospace" type="text" id="api-key">
44-
<button class="btn btn-primary" id="api-key-btn">Update</button>
45-
</div>
46-
<p class="mb0 mt1">You can signup for one at <a class="underline" href="https://api.data.gov/signup/">https://api.data.gov/signup/</a>.</p>
47-
<div class="hide" id="api-key-current">
48-
<span class="bold">Current API key:</span>
49-
<span class="monospace mr1" id="current"></span>
50-
</div>
51-
</form>
52-
53-
<div class="swagger-ui-wrap" id="swagger-ui">
54-
<div class="mt3 mb8 fs-14 caps sans-serif center">
55-
<img
56-
class="align-middle mr1"
57-
width="30"
58-
height="30"
59-
src="/img/loading.svg"
60-
alt="loading..."
61-
/>
62-
Loading
63-
</div>
64-
</div>
65-
</main>
66-
<footer class="py6 bg-blue white">
67-
<div class="px2 md-px6">
68-
<div class="sm-col col-12 sm-col-4 mt1 mb4">
69-
<span class="mb1 fs-10 md-fs-12 caps bold line-height-1 blue-light-508 block">
70-
Federal Bureau of Investigation
71-
</span>
72-
<a class="fs-24 md-fs-32 serif line-height-1 white" href="/">
73-
Crime Data Explorer
74-
</a>
75-
<span class="block fs-10">
76-
<a
77-
class="white"
78-
href="https://github.com/18F/crime-data-frontend/blob/master/CHANGELOG.md"
79-
>
80-
Changelog
81-
</a>
82-
</span>
83-
<div class="mt3">
84-
<img
85-
alt="Crime Data Explorer (CDE) logo"
86-
class="mr3"
87-
src="/img/cde-logo.png"
88-
style="width:130px;"
89-
/>
22+
<main class="site-main">
23+
<div class="swagger-section container mx-auto px1 my6">
24+
<form class="bg-white hide p3" id="api-key-container">
25+
<div>
26+
<label class="block bold mb1 serif" for="api-key">Add your API key</label>
27+
<input class="border border-blue col-6 monospace" type="text" id="api-key">
28+
<button class="btn btn-primary" id="api-key-btn">Update</button>
29+
</div>
30+
<p class="mb0 mt1">You can signup for one at <a class="underline" href="https://api.data.gov/signup/">https://api.data.gov/signup/</a>.</p>
31+
<div class="hide" id="api-key-current">
32+
<span class="bold">Current API key:</span>
33+
<span class="monospace mr1" id="current"></span>
34+
</div>
35+
</form>
36+
<div class="swagger-ui-wrap" id="swagger-ui">
37+
<div class="mt3 mb8 fs-14 caps sans-serif center">
9038
<img
91-
alt="Federal Bureau of Investigation (FBI) logo"
92-
src="/img/fbi-logo.png"
93-
style="width:130px;"
39+
class="align-middle mr1"
40+
width="30"
41+
height="30"
42+
src="/img/loading.svg"
43+
alt="loading..."
9444
/>
45+
Loading
9546
</div>
9647
</div>
97-
<div class="sm-col col-12 sm-col-4 px2 mb3 md-m0 fs-14 white">
48+
</div>
49+
</main>
50+
<footer class="px2 md-px6 py3 md-py6 bg-blue white">
51+
<div class="clearfix sm-mxn2">
52+
<div class="sm-col col-12 sm-col-4 sm-px2 mt1 mb4">
53+
<span class="mb1 fs-10 md-fs-12 caps bold line-height-1 blue-light-508 block">Federal Bureau of Investigation</span><a href="/" class="fs-24 md-fs-32 serif line-height-1 white">Crime Data Explorer</a><span class="block fs-10">v2.9.1 - <a class="white" href="https://github.com/18F/crime-data-frontend/blob/master/CHANGELOG.md">Changelog</a></span>
54+
<div class="mt3"><img alt="Crime Data Explorer (CDE) logo" class="mr3" src="/img/cde-logo.png" style="width:130px;" /><img alt="Federal Bureau of Investigation (FBI) logo" src="/img/fbi-logo.png" style="width:130px;" /></div>
55+
</div>
56+
<div class="sm-col col-12 sm-col-4 sm-px2 mb3 md-m0 fs-14 white">
9857
<div class="mb1 bold fs-18 serif blue-light-508">Contact us</div>
9958
<div class="mb3">
100-
<div class="bold">
101-
Criminal Justice Information Services (CJIS) Division
102-
</div>
103-
<a
104-
class="mr1 pr1 white border-white border-right"
105-
href="mailto:cjis_comm@leo.gov"
106-
>
107-
cjis_comm@leo.gov
108-
</a>
109-
<a class="white" href="tel:3046254995">(304) 625-4995</a>
110-
</div>
59+
<div class="bold">Crime Statistics Management Unit</div><a class="mr1 pr1 white" href="mailto:crimestatsinfo@fbi.gov">crimestatsinfo@fbi.gov</a></div>
11160
<div class="bold">FBI Uniform Crime Reporting Program</div>
112-
<div>
113-
<span class="mr1 pr1 border-right border-white">
114-
1000 Custer Hollow Road
115-
</span>
116-
<span>Clarksburg, WV 26306</span>
117-
</div>
61+
<div><span class="mr1 pr1 border-right border-white">1000 Custer Hollow Road</span><span>Clarksburg, WV 26306</span></div>
11862
<div class="mt3">
119-
<div class="inline-block">
120-
<img
121-
class="mr1 align-middle"
122-
width="20"
123-
src="/img/github.svg"
124-
alt="github"
125-
/>
126-
<a
127-
class="white"
128-
href="https://github.com/18F/crime-data-explorer"
129-
>
130-
GitHub
131-
</a>
132-
</div>
133-
<div class="inline-block ml3">
134-
<img
135-
class="mr1 align-middle"
136-
width="20"
137-
src="/img/twitter.svg"
138-
alt="twitter"
139-
/>
140-
<a class="white" href="https://twitter.com/fbi">@FBI</a>
141-
</div>
63+
<div class="inline-block"><img class="mr1 align-middle" width="20" src="/img/github.svg" alt="github" /><a class="white" href="https://github.com/18F/crime-data-explorer">GitHub</a></div>
64+
<div class="inline-block ml3"><img class="mr1 align-middle" width="20" src="/img/twitter.svg" alt="twitter" /><a class="white" href="https://twitter.com/fbi">@FBI</a></div>
14265
</div>
14366
</div>
144-
<div class="sm-col col-12 sm-col-4 px2 fs-14">
145-
<div class="px2 mb3 md-m0 clearfix">
146-
<ul class="col col-12 sm-col-6 m0 p0 fs-14 list-style-none left-bars">
147-
<li class="mb1">
148-
<a class="cursor-pointer white caps" href="/">Home</a>
149-
</li>
150-
<li class="mb1">
151-
<a
152-
class="cursor-pointer white caps"
153-
href="/explorer/violent-crime"
154-
>
155-
Explorer
156-
</a>
157-
</li>
158-
<li class="mb1">
159-
<a class="cursor-pointer white caps" href="/about">About</a>
160-
</li>
161-
<li class="mb1">
162-
<a
163-
class="cursor-pointer white caps"
164-
href="/downloads-and-docs"
165-
>
166-
Downloads & Documentation
167-
</a>
168-
</li>
67+
<div class="sm-col col-12 sm-col-4 sm-px2 fs-14">
68+
<div class="mb3 md-m0 clearfix">
69+
<ul class="col col-6 m0 p0 fs-12 list-style-none left-bars muted-bars">
70+
<li class="mb1"><a class="cursor-pointer white caps" href="/">Home</a></li>
71+
<li class="mb1"><a class="cursor-pointer white caps" href="/explorer/violent-crime">Explorer</a></li>
72+
<li class="mb1"><a class="cursor-pointer white caps" href="/about">About</a></li>
73+
<li class="mb1"><a class="cursor-pointer white caps" href="/downloads-and-docs">Downloads &amp; Documentation</a></li>
16974
</ul>
170-
<ul class="col col-12 sm-col-6 m0 p0 fs-14 list-style-none left-bars">
171-
<li class="mb1">
172-
<a
173-
href="https://github.com/18F/crime-data-frontend/blob/master/LICENSE.md"
174-
class="cursor-pointer white caps"
175-
to="https://github.com/18F/crime-data-frontend/blob/master/LICENSE.md"
176-
>
177-
License
178-
</a>
179-
</li>
180-
<li class="mb1">
181-
<a class="cursor-pointer white caps" href="#!">Feedback</a>
182-
</li>
183-
<li class="mb1">
184-
<a
185-
href="https://www.fbi.gov/privacy_policy"
186-
class="cursor-pointer white caps"
187-
to="https://www.fbi.gov/privacy_policy"
188-
>
189-
Privacy Policy
190-
</a>
191-
</li>
192-
<li class="mb1">
193-
<a
194-
href="https://www.fbi.gov/services/records-management/foipa"
195-
class="cursor-pointer white caps"
196-
to="https://www.fbi.gov/services/records-management/foipa"
197-
>
198-
FOIA
199-
</a>
200-
</li>
201-
<li class="mb1">
202-
<a
203-
href="https://www.usa.gov/"
204-
class="cursor-pointer white caps"
205-
to="https://www.usa.gov/"
206-
>
207-
USA.GOV
208-
</a>
209-
</li>
210-
<li class="mb1">
211-
<a
212-
href="https://www.fbi.gov/accessibility"
213-
class="cursor-pointer white caps"
214-
to="https://www.fbi.gov/accessibility"
215-
>
216-
Accessibility
217-
</a>
218-
</li>
75+
<ul class="col col-6 m0 p0 fs-12 list-style-none left-bars muted-bars">
76+
<li class="mb1"><a class="cursor-pointer white caps" href="https://github.com/18F/crime-data-frontend/blob/master/LICENSE.md">License</a></li>
77+
<li class="mb1"><a class="cursor-pointer white caps" href="https://www.fbi.gov/privacy_policy">Privacy Policy</a></li>
78+
<li class="mb1"><a class="cursor-pointer white caps" href="https://www.fbi.gov/services/records-management/foipa">FOIA</a></li>
79+
<li class="mb1"><a class="cursor-pointer white caps" href="https://www.usa.gov/">USA.GOV</a></li>
80+
<li class="mb1"><a class="cursor-pointer white caps" href="https://www.fbi.gov/accessibility">Accessibility</a></li>
21981
</ul>
22082
</div>
22183
</div>
@@ -238,92 +100,75 @@
238100
<script src="/swagger/vendor/lib/swagger-oauth.js"></script>
239101
<script>
240102
;(function() {
241-
window.swaggerUi = new SwaggerUi({
242-
url: 'https://crime-data-api.fr.cloud.gov/static/swagger.json',
243-
dom_id: 'swagger-ui',
244-
operationsSorter: 'alpha',
245-
docExpansion: 'list',
246-
onComplete: function() {
247-
showApiKeyForm()
248-
$('#api-key-btn').on('click', handleApiKeyChange)
249-
addCssClasses()
250-
restructureEndpointHeadings()
251-
},
252-
})
253-
254-
function addCssClasses() {
255-
$('.info_description.markdown > p').each(function(i, p) {
256-
var $p = $(p)
257-
$p.addClass('sans-serif')
258-
})
259-
}
260-
261-
function changeApiKey(apiKey) {
262-
var auth = new SwaggerClient.ApiKeyAuthorization('api_key', apiKey, 'query')
263-
window.swaggerUi.api.clientAuthorizations.add('auth_name', auth)
264-
}
265-
266-
function handleApiKeyChange(e) {
267-
e.preventDefault()
268-
var $field = $('#api-key')
269-
var $btn = $('#api-key-btn')
270-
271-
changeApiKey($field.val())
272-
updateCurrentApiKeyUI($field.val())
273-
274-
$field.val('')
275-
}
276-
277-
function restructureEndpointHeadings() {
278-
$('.resource > .heading').each(function(i, heading) {
279-
var $heading = $(heading)
280-
var $h2 = $heading.children('h2')
281-
var $options = $heading.children('.options')
282-
283-
var $flex = $('<div class="flex flex-justify"></div>')
284-
var split = $h2.text().split(' : ')
285-
var $p = $('<p class="mb0"></p>')
286-
287-
if (split.length === 1) return
288-
289-
$h2.text(split[0])
290-
$p.text(split[1])
291-
292-
$flex.append($h2)
293-
$flex.append($options)
294-
295-
$heading.append($flex)
296-
$heading.append($p)
297-
})
298-
}
299-
300-
function sanitize(str) {
301-
var div = document.createElement('div')
302-
div.appendChild(document.createTextNode(str))
303-
return div.innerHTML
304-
}
305-
306-
function showApiKeyForm() {
307-
var $container = $('#api-key-container')
308-
var $target = $('#api_info')
309-
$target.append($container)
310-
$container.removeClass('hide')
311-
}
312-
313-
function updateCurrentApiKeyUI(newKey) {
314-
var cleaned = sanitize(newKey)
315-
var $container = $('#api-key-current')
316-
$container.removeClass('hide')
317-
$container.children('#current').text(cleaned)
318-
}
319-
320-
window.swaggerUi.load()
321-
322-
const docsKey = 'iiHnOKfno2Mgkt5AynpvPpUQTEyxE77jo1RU8PIv'
323-
changeApiKey(docsKey)
324-
updateCurrentApiKeyUI(docsKey)
325-
$('#api-key').val(docsKey)
326-
})()
327-
</script>
103+
window.swaggerUi = new SwaggerUi({
104+
url: 'https://crime-data-api.fr.cloud.gov/static/swagger.json',
105+
dom_id: 'swagger-ui',
106+
operationsSorter: 'alpha',
107+
docExpansion: 'list',
108+
onComplete: function() {
109+
showApiKeyForm()
110+
$('#api-key-container').on('submit', handleApiKeyChange)
111+
restructureEndpointHeadings()
112+
},
113+
})
114+
115+
function changeApiKey(apiKey) {
116+
var auth = new SwaggerClient.ApiKeyAuthorization('api_key', apiKey, 'query')
117+
window.swaggerUi.api.clientAuthorizations.add('auth_name', auth)
118+
}
119+
120+
function handleApiKeyChange(e) {
121+
e.preventDefault()
122+
var val = $('#api-key').val()
123+
changeApiKey(val)
124+
updateCurrentApiKeyUI(val)
125+
}
126+
127+
function restructureEndpointHeadings() {
128+
$('.resource > .heading').each(function(i, heading) {
129+
var $heading = $(heading)
130+
var $h2 = $heading.children('h2')
131+
var $options = $heading.children('.options')
132+
var $flex = $('<div class="flex flex-justify"></div>')
133+
var split = $h2.text().split(' : ')
134+
var $p = $('<p class="mb0"></p>')
135+
if (split.length === 1) return
136+
$h2.text(split[0])
137+
$p.text(split[1])
138+
$flex.append($h2)
139+
$flex.append($options)
140+
$heading.append($flex)
141+
$heading.append($p)
142+
})
143+
}
144+
145+
function sanitize(str) {
146+
var div = document.createElement('div')
147+
div.appendChild(document.createTextNode(str))
148+
return div.innerHTML
149+
}
150+
151+
function showApiKeyForm() {
152+
var $container = $('#api-key-container')
153+
var $target = $('#api_info')
154+
$target.append($container)
155+
$container.removeClass('hide')
156+
}
157+
158+
function updateCurrentApiKeyUI(newKey) {
159+
var cleaned = sanitize(newKey)
160+
var $container = $('#api-key-current')
161+
$container.removeClass('hide')
162+
$container.children('#current').text(cleaned)
163+
}
164+
165+
window.swaggerUi.load()
166+
167+
var docsKey = 'iiHnOKfno2Mgkt5AynpvPpUQTEyxE77jo1RU8PIv'
168+
changeApiKey(docsKey)
169+
updateCurrentApiKeyUI(docsKey)
170+
$('#api-key').val(docsKey)
171+
})()
172+
</script>
328173
</body>
329174
</html>

0 commit comments

Comments
 (0)
Please sign in to comment.