govuk_admin_template 6.2.0 → 6.3.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +9 -0
- data/README.md +1 -1
- data/app/views/govuk_admin_template/_govspeak_help.html.erb +1 -1
- data/app/views/govuk_admin_template/style_guide/index.html.erb +23 -23
- data/app/views/layouts/govuk_admin_template.html.erb +3 -3
- data/lib/govuk_admin_template/engine.rb +2 -1
- data/lib/govuk_admin_template/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: f39bd23768b666ab1447c1992cd1d6d532e5442a
|
|
4
|
+
data.tar.gz: f90cc5fd517db3823f33127b1899450fff58117b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 877916e509a24e23200dceda6d4d36929db8b99c486641e9f13bb3093a016216d45d6fbd49cce3f9e43850c64a2d4eab4d5cc6733b6832e7f7e88b9ffa517f66
|
|
7
|
+
data.tar.gz: 17e5c098d0feff3d8b02a3b0b82b215671111791715c51948b36638bfc9c73c3dd4dd07206e1e9e43072c7e2ee61260ee2d4cafa090c81605a050b1c72eec96f
|
data/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,12 @@
|
|
|
1
|
+
# Unreleased
|
|
2
|
+
|
|
3
|
+
# 6.3.0
|
|
4
|
+
|
|
5
|
+
* Add `assets:clobber` placeholder rake task
|
|
6
|
+
* Allow setting a class on the root `<html>` tag
|
|
7
|
+
* Replace references to design principles style-guide with the new location.
|
|
8
|
+
* Add ids to styleguide headings so we can link to them.
|
|
9
|
+
|
|
1
10
|
# 6.2.0
|
|
2
11
|
|
|
3
12
|
* Add `GOVUKAdmin.setDimension` to allow setting custom dimensions for GA
|
data/README.md
CHANGED
|
@@ -156,7 +156,7 @@ Example navbar_items:
|
|
|
156
156
|
|
|
157
157
|
### Date formats
|
|
158
158
|
|
|
159
|
-
The [gem includes](lib/govuk_admin_template/engine.rb) date and time formats which match the
|
|
159
|
+
The [gem includes](lib/govuk_admin_template/engine.rb) date and time formats which match the recommended styles for [dates](https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#dates) and [times](https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#times).
|
|
160
160
|
|
|
161
161
|
```ruby
|
|
162
162
|
# 1 January 2013
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<div class="govspeak-help">
|
|
2
2
|
<h2>Writing style</h2>
|
|
3
|
-
<p>For style, see the <a href="https://www.gov.uk/
|
|
3
|
+
<p>For style, see the <a href="https://www.gov.uk/topic/government-digital-guidance/content-publishing">style guide</a></p>
|
|
4
4
|
|
|
5
5
|
<h2>Formatting help</h2>
|
|
6
6
|
<%= yield :format_specific_help %>
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
<p class="lead">Admin app UIs are powered by <a href="http://getbootstrap.com/css/">bootstrap 3.3.2</a>, using <a href="https://github.com/twbs/bootstrap-sass/tree/v3.3.3">bootstrap SASS</a> v3.3.3 (<a href="https://github.com/twbs/bootstrap-sass/blob/v3.3.3/assets/stylesheets/bootstrap/_mixins.scss">mixins</a>), but maintaining bootstrap 2 button styles. This guide documents how we use bootstrap, where the apps have diverged from default styles and any custom styles needed to fill in the gaps.</p>
|
|
10
10
|
|
|
11
|
-
<h2>Grid</h2>
|
|
11
|
+
<h2 id="grid">Grid</h2>
|
|
12
12
|
<p class="lead">Apps use the <a href="http://getbootstrap.com/css/#grid">default bootstrap</a> <strong>12 column scaleable responsive grid</strong>.</p>
|
|
13
13
|
<div class="row add-bottom-margin">
|
|
14
14
|
<div class="grid-example col-md-2">col-md-2</div>
|
|
@@ -20,9 +20,9 @@
|
|
|
20
20
|
</div>
|
|
21
21
|
<hr>
|
|
22
22
|
|
|
23
|
-
<h2>Forms</h2>
|
|
23
|
+
<h2 id="forms">Forms</h2>
|
|
24
24
|
|
|
25
|
-
<h3>Conditionally revealing content</h3>
|
|
25
|
+
<h3 id="forms-conditionally-revealing-content">Conditionally revealing content</h3>
|
|
26
26
|
<div class="row">
|
|
27
27
|
<div class="col-md-6 lead">
|
|
28
28
|
<p>
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
</form>
|
|
71
71
|
</div>
|
|
72
72
|
|
|
73
|
-
<h3>Input widths</h3>
|
|
73
|
+
<h3 id="forms-input-widths">Input widths</h3>
|
|
74
74
|
<div class="row">
|
|
75
75
|
<div class="col-md-6 lead">
|
|
76
76
|
<p>Bootstrap 3 inputs always <a href="http://getbootstrap.com/css/#forms">extend to the size of their container</a>. The recommendation from Bootstrap is to wrap form elements with grid classes. Sometimes this isn’t suitable, for instance if a page isn’t using a grid.</p>
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
</div>
|
|
108
108
|
</div>
|
|
109
109
|
|
|
110
|
-
<h4 class="add-bottom-margin">Inputs in a grid</h4>
|
|
110
|
+
<h4 id="forms-input-widths-inputs-in-a-grid" class="add-bottom-margin">Inputs in a grid</h4>
|
|
111
111
|
<div class="row">
|
|
112
112
|
<div class="col-md-1">
|
|
113
113
|
<input class="input-md-1 form-control" value="input-md-1" />
|
|
@@ -130,7 +130,7 @@
|
|
|
130
130
|
</div>
|
|
131
131
|
<hr>
|
|
132
132
|
|
|
133
|
-
<h2>Buttons</h2>
|
|
133
|
+
<h2 id="buttons">Buttons</h2>
|
|
134
134
|
<div class="row">
|
|
135
135
|
<p class="col-md-6 lead">Despite using bootstrap 3 apps use the classic bootstrap button styles — the buttons have better affordance and clearer focus and active states. The source to override the buttons with the originals is from <a href="https://gist.github.com/Erve1879/6167373">https://gist.github.com/Erve1879/6167373</a>.</p>
|
|
136
136
|
<div class="col-md-6">
|
|
@@ -143,7 +143,7 @@
|
|
|
143
143
|
<a href="#" class="btn btn-link">Link</a>
|
|
144
144
|
</div>
|
|
145
145
|
</div>
|
|
146
|
-
<h3 class="add-vertical-margins">Which button style should be used</h3>
|
|
146
|
+
<h3 id="buttons-which-button-style-should-be-used" class="add-vertical-margins">Which button style should be used</h3>
|
|
147
147
|
<div class="row">
|
|
148
148
|
<p class="col-md-6 lead">Start with <code>btn-default</code>. Buttons should always be the default grey unless there is a good reason otherwise. Buttons that initiate a user action (ie lead to a form, pop-up a modal) should be grey.</p>
|
|
149
149
|
<div class="col-md-6">
|
|
@@ -176,10 +176,10 @@
|
|
|
176
176
|
</div>
|
|
177
177
|
<hr>
|
|
178
178
|
|
|
179
|
-
<h2>Dates</h2>
|
|
179
|
+
<h2 id="dates">Dates</h2>
|
|
180
180
|
<div class="row">
|
|
181
181
|
<p class="col-md-6 lead">
|
|
182
|
-
The gem includes date and time formats which match the <a href="https://www.gov.uk/
|
|
182
|
+
The gem includes date and time formats which match the recommended styles for <a href="https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#dates">dates</a> and <a href="https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#times">times</a>.
|
|
183
183
|
</p>
|
|
184
184
|
<section class="col-md-6">
|
|
185
185
|
<h2 class="remove-top-margin">Default</h2>
|
|
@@ -205,7 +205,7 @@
|
|
|
205
205
|
</div>
|
|
206
206
|
<hr>
|
|
207
207
|
|
|
208
|
-
<h2>Page headers with subtitles</h2>
|
|
208
|
+
<h2 id="page-headers-with-subtitles">Page headers with subtitles</h2>
|
|
209
209
|
<div class="row">
|
|
210
210
|
<p class="col-md-6 lead">Page headers have a single pixel bottom-border. Subtitles - if used - run underneath this.</p>
|
|
211
211
|
<section class="headers col-md-6">
|
|
@@ -231,7 +231,7 @@
|
|
|
231
231
|
</div>
|
|
232
232
|
<hr>
|
|
233
233
|
|
|
234
|
-
<h2>Tables</h2>
|
|
234
|
+
<h2 id="tables">Tables</h2>
|
|
235
235
|
<div class="row">
|
|
236
236
|
<div class="col-md-6 lead">
|
|
237
237
|
<p>Tables should use the Bootstrap 3 classes <code>table table-bordered</code>. The row of table headings should have the admin template class <code>table-headers</code>.</p>
|
|
@@ -258,7 +258,7 @@
|
|
|
258
258
|
</table>
|
|
259
259
|
</div>
|
|
260
260
|
</div>
|
|
261
|
-
<h3>Filterable tables</h3>
|
|
261
|
+
<h3 id="tables-filterable-tables">Filterable tables</h3>
|
|
262
262
|
<div class="row">
|
|
263
263
|
<div class="col-md-6 lead">
|
|
264
264
|
<p>Using the <a href="https://github.com/alphagov/govuk_admin_template/blob/master/app/assets/javascripts/govuk-admin-template/modules/filterable_table.js">filterable-table module</a> and the <a href="https://github.com/alphagov/govuk_admin_template/tree/master/app/views/govuk_admin_template/_table_filter.html.erb">table_filter partial</a> any table can be filtered. The module performs a simple match against the content of each row, if there’s no match the row is hidden.</p>
|
|
@@ -310,7 +310,7 @@
|
|
|
310
310
|
</div>
|
|
311
311
|
<hr>
|
|
312
312
|
|
|
313
|
-
<h2>Links</h2>
|
|
313
|
+
<h2 id="links">Links</h2>
|
|
314
314
|
<div class="row">
|
|
315
315
|
<div class="col-md-6 lead">
|
|
316
316
|
<p>To match bootstrap’s muted text, a muted link class is available.</p>
|
|
@@ -326,7 +326,7 @@
|
|
|
326
326
|
</div>
|
|
327
327
|
</div>
|
|
328
328
|
|
|
329
|
-
<h3>Links in Bootstrap components</h3>
|
|
329
|
+
<h3 id="links-links-in-bootstrap-components">Links in Bootstrap components</h3>
|
|
330
330
|
<div class="row">
|
|
331
331
|
<div class="col-md-3">
|
|
332
332
|
<h4 class="add-bottom-margin">List group with content</h4>
|
|
@@ -400,7 +400,7 @@
|
|
|
400
400
|
</div>
|
|
401
401
|
<hr>
|
|
402
402
|
|
|
403
|
-
<h2>Nav lists</h2>
|
|
403
|
+
<h2 id="nav-lists">Nav lists</h2>
|
|
404
404
|
<div class="row">
|
|
405
405
|
<p class="col-md-4 lead">
|
|
406
406
|
<a href="http://stackoverflow.com/questions/18281636/what-replaces-nav-lists-in-bootstrap-3">Bootstrap 3 removed</a> the <code>nav-list</code> classes and <a href="http://getbootstrap.com/2.3.2/components.html#navs">design pattern</a>. For backwards compatibility these styles have been put back, but it’s advised to avoid this pattern.
|
|
@@ -458,15 +458,15 @@
|
|
|
458
458
|
</div>
|
|
459
459
|
<hr>
|
|
460
460
|
|
|
461
|
-
<h2>Big number</h2>
|
|
461
|
+
<h2 id="big-number">Big number</h2>
|
|
462
462
|
<p class="big-number text-muted">100 hits</p>
|
|
463
463
|
<hr>
|
|
464
464
|
|
|
465
|
-
<h2>Big message</h2>
|
|
465
|
+
<h2 id="big-message">Big message</h2>
|
|
466
466
|
<p class="big-message text-muted">A big message</p>
|
|
467
467
|
<hr>
|
|
468
468
|
|
|
469
|
-
<h2>Highlights</h2>
|
|
469
|
+
<h2 id="highlights">Highlights</h2>
|
|
470
470
|
<div class="row add-bottom-margin">
|
|
471
471
|
<p class="col-md-6 lead">Highlights are a reproduction of the <a href="https://www.gov.uk/vat-rates">GOV.UK answer style</a> and use colours from the <a href="https://www.gov.uk/service-manual/user-centered-design/resources/colour-palettes">style guide palette</a>. They are predominantly used on dashboards (see transition).</p>
|
|
472
472
|
<div class="col-md-6">
|
|
@@ -498,7 +498,7 @@
|
|
|
498
498
|
</div>
|
|
499
499
|
<hr>
|
|
500
500
|
|
|
501
|
-
<h2>Callouts</h2>
|
|
501
|
+
<h2 id="callouts">Callouts</h2>
|
|
502
502
|
<div class="row">
|
|
503
503
|
<p class="col-md-6 lead">A component for drawing attention to particular content, which is more subtle than a highlight.</p>
|
|
504
504
|
<div class="col-md-6">
|
|
@@ -541,7 +541,7 @@
|
|
|
541
541
|
</div>
|
|
542
542
|
<hr>
|
|
543
543
|
|
|
544
|
-
<h2>No content</h2>
|
|
544
|
+
<h2 id="no-content">No content</h2>
|
|
545
545
|
<div class="row">
|
|
546
546
|
<p class="col-md-6 lead">A large but light style which applies to the empty state. The bordered version mimics bootstrap table styles.</p>
|
|
547
547
|
<div class="col-md-6">
|
|
@@ -552,10 +552,10 @@
|
|
|
552
552
|
</div>
|
|
553
553
|
<hr>
|
|
554
554
|
|
|
555
|
-
<h2>Analytics</h2>
|
|
555
|
+
<h2 id="analytics">Analytics</h2>
|
|
556
556
|
<div class="row">
|
|
557
557
|
<div class="col-md-6">
|
|
558
|
-
<h3>Auto Track Events</h3>
|
|
558
|
+
<h3 id="analytics-auto-track-events">Auto Track Events</h3>
|
|
559
559
|
<p>Adding this module to a page will cause an event to be sent to Google Analytics with
|
|
560
560
|
a specified action, label and value</p>
|
|
561
561
|
</div>
|
|
@@ -570,7 +570,7 @@
|
|
|
570
570
|
</div>
|
|
571
571
|
<div class="row">
|
|
572
572
|
<div class="col-md-6">
|
|
573
|
-
<h3>Track Click</h3>
|
|
573
|
+
<h3 id="analytics-track-click">Track Click</h3>
|
|
574
574
|
<p>This module is intended as an easy way to track individual button/link
|
|
575
575
|
clicks as events in Google Analytics. Groups of buttons may end up
|
|
576
576
|
redirecting to the same place, meaning they’re not trackable via URLs
|
|
@@ -8,9 +8,9 @@
|
|
|
8
8
|
allow_google_analytics_stub = (Rails.env.development? || (Rails.env.test? && GovukAdminTemplate::Config.enable_google_analytics_in_tests))
|
|
9
9
|
%>
|
|
10
10
|
<!DOCTYPE html>
|
|
11
|
-
<!--[if lte IE 7]><html class="no-js lte-ie7" lang="en"><![endif]-->
|
|
12
|
-
<!--[if IE 8]><html class="no-js ie8" lang="en"><![endif]-->
|
|
13
|
-
<!--[if gt IE 8]><!--><html class="no-js" lang="en"><!--<![endif]-->
|
|
11
|
+
<!--[if lte IE 7]><html class="no-js lte-ie7 <%= yield(:html_class) %>" lang="en"><![endif]-->
|
|
12
|
+
<!--[if IE 8]><html class="no-js ie8 <%= yield(:html_class) %>" lang="en"><![endif]-->
|
|
13
|
+
<!--[if gt IE 8]><!--><html class="no-js <%= yield(:html_class) %>" lang="en"><!--<![endif]-->
|
|
14
14
|
<head>
|
|
15
15
|
<meta charset="utf-8">
|
|
16
16
|
<title><%= content_for?(:page_title) ? yield(:page_title) : app_title %></title>
|
|
@@ -11,7 +11,8 @@ module GovukAdminTemplate
|
|
|
11
11
|
end
|
|
12
12
|
|
|
13
13
|
# User friendly GOV.UK date formats, based on:
|
|
14
|
-
# https://www.gov.uk/
|
|
14
|
+
# https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#dates
|
|
15
|
+
# https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#times
|
|
15
16
|
initializer 'govuk_admin_template.date_formats' do |app|
|
|
16
17
|
# 1 January 2013
|
|
17
18
|
Date::DATE_FORMATS[:govuk_date] = '%-e %B %Y'
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: govuk_admin_template
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 6.
|
|
4
|
+
version: 6.3.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GOV.UK Dev
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-
|
|
11
|
+
date: 2017-12-04 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|