govuk_admin_template 6.2.0 → 6.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|