govuk_tech_docs 1.4.0 → 1.5.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -27,6 +27,7 @@ $desktop-breakpoint: 992px !default;
27
27
  @import "modules/page-review";
28
28
  @import "modules/phase-banner";
29
29
  @import "modules/skip-link";
30
+ @import "modules/search";
30
31
  @import "modules/contribution-banner";
31
32
  @import "modules/technical-documentation";
32
33
  @import "modules/toc";
@@ -0,0 +1,137 @@
1
+ @include screen {
2
+ .page-title + .search {
3
+ margin-top: $gutter;
4
+ }
5
+
6
+ .search {
7
+ @include core-16;
8
+ margin-bottom: $gutter-half;
9
+ height: 40px;
10
+ .search__label {
11
+ position: absolute;
12
+ left: -9999em;
13
+ top: auto;
14
+ width: 1px;
15
+ height: 1px;
16
+ overflow: hidden;
17
+ }
18
+ .form-control {
19
+ @include box-sizing(border-box);
20
+ @include core-19;
21
+ width: 100%;
22
+ padding: 5px 4px 2px;
23
+ border: 2px solid $text-colour;
24
+ appearance: none;
25
+
26
+ &:focus {
27
+ outline: 3px solid $focus-colour;
28
+ outline-offset: 0;
29
+ }
30
+ }
31
+ }
32
+ }
33
+
34
+ @include print {
35
+ .search {
36
+ display: none;
37
+ }
38
+ }
39
+
40
+ html.has-search-results-open {
41
+ overflow: hidden;
42
+ .app-pane__content {
43
+ overflow: hidden;
44
+ }
45
+ }
46
+ .search-results {
47
+ display: none;
48
+ &.is-open {
49
+ display: block;
50
+ }
51
+ }
52
+
53
+ .search-results {
54
+ position: absolute;
55
+ top: 60px;
56
+ left: 0;
57
+ right: 0;
58
+ bottom: 0;
59
+ z-index: 600;
60
+ overflow-x: scroll;
61
+ -webkit-overflow-scrolling: touch;
62
+ -ms-overflow-style: none;
63
+ @include media(tablet) {
64
+ padding: 22px 20px 0 30px;
65
+ top: 0;
66
+ // The width of the sidebar
67
+ left: 330px;
68
+ }
69
+ }
70
+ .search-results__inner {
71
+ position: relative;
72
+ background: $white;
73
+ border-top: 1px solid $grey-2;
74
+ max-width: 40rem;
75
+ padding: 15px;
76
+ @include media(tablet) {
77
+ padding: 15px 200px 50px 40px;
78
+ border: 1px solid $grey-2;
79
+ &::after {
80
+ content: '';
81
+ position: absolute;
82
+ top: 10px;
83
+ left: -9px;
84
+ width: 10px;
85
+ height: 20px;
86
+ background: no-repeat file-url('search-result-caret.svg') center right;
87
+ background-size: contain;
88
+ }
89
+ }
90
+ }
91
+ .search-results__title {
92
+ @include bold-27;
93
+ margin-bottom: $gutter;
94
+ }
95
+ .search-results__close {
96
+ @include core-16;
97
+ position: absolute;
98
+ top: 18px;
99
+ right: 20px;
100
+ appearance: none;
101
+ background: none;
102
+ border: 0;
103
+ padding: 0;
104
+ &:focus {
105
+ outline: 3px solid $focus-colour;;
106
+ outline-offset: 0;
107
+ }
108
+ &::after {
109
+ content: '';
110
+ display: inline-block;
111
+ vertical-align: middle;
112
+ padding-left: 8px;
113
+ height: 18px;
114
+ width: 18px;
115
+ background: no-repeat file-url('govuk-icn-close.png') center right;
116
+ @include device-pixel-ratio {
117
+ background-image: file-url('govuk-icn-close@2x.png');
118
+ }
119
+ background-size: contain;
120
+ }
121
+ }
122
+ .search-results__close-label {
123
+ position: absolute;
124
+ left: -9999em;
125
+ top: auto;
126
+ width: 1px;
127
+ height: 1px;
128
+ overflow: hidden;
129
+ }
130
+ .search-result {
131
+ margin-bottom: $gutter;
132
+ }
133
+ .search-result mark {
134
+ background-color: transparent;
135
+ color: inherit;
136
+ font-weight: bold;
137
+ }
@@ -36,6 +36,10 @@
36
36
  margin: 0 ($gutter + 2px) $gutter;
37
37
  }
38
38
 
39
+ .has-search-results-open & {
40
+ visibility: hidden;
41
+ }
42
+
39
43
  // Headings
40
44
  h1 {
41
45
  @include bold-48;
@@ -5,6 +5,7 @@ require 'middleman-autoprefixer'
5
5
  require 'middleman-sprockets'
6
6
  require 'middleman-livereload'
7
7
  require 'middleman-syntax'
8
+ require 'middleman-search'
8
9
 
9
10
  require 'nokogiri'
10
11
  require 'chronic'
@@ -91,5 +92,17 @@ module GovukTechDocs
91
92
  context.redirect from, to
92
93
  end
93
94
  end
95
+
96
+ if context.config[:tech_docs][:enable_search]
97
+ context.activate :search do |search|
98
+ search.resources = ['']
99
+
100
+ search.fields = {
101
+ title: { boost: 100, store: true, required: true },
102
+ content: { boost: 50, store: true },
103
+ url: { index: false, store: true },
104
+ }
105
+ end
106
+ end
94
107
  end
95
108
  end
@@ -1,3 +1,3 @@
1
1
  module GovukTechDocs
2
- VERSION = "1.4.0".freeze
2
+ VERSION = "1.5.0".freeze
3
3
  end
@@ -0,0 +1,13 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg width="13px" height="23px" viewBox="0 0 13 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
4
+ <title>Page 1</title>
5
+ <desc>Created with Sketch.</desc>
6
+ <defs></defs>
7
+ <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
8
+ <g fill="#FFFFFF">
9
+ <polygon id="Fill-1" points="11.6343 0.8004 0.7043 11.8004 11.6343 22.8004 13 22.8004 13 0.8004"></polygon>
10
+ <polyline id="Stroke-2" stroke="#B4B4B4" points="11.6346 22.8004 0.7046 11.8004 11.6346 0.8004 11.6346 0.8004"></polyline>
11
+ </g>
12
+ </g>
13
+ </svg>
@@ -0,0 +1,16 @@
1
+ <% if config[:tech_docs][:enable_search] %>
2
+ <div class="search" data-module="search">
3
+ <form action="https://www.google.co.uk/search" method="get" role="search">
4
+ <input type="hidden" name="as_sitesearch" value="<%= config[:tech_docs][:host] %>"/>
5
+ <label for="search" class="search__label">Search (via Google)</label>
6
+ <input type="text" id="search" name="q" placeholder="Search" aria-controls="search-results" class="form-control" />
7
+ </form>
8
+ <div id="search-results" class="search-results" aria-hidden="true" role="dialog" aria-labelledby="search-results-title">
9
+ <div class="search-results__inner">
10
+ <button class="search-results__close">Close<span class="search-results__close-label"> search results</span></button>
11
+ <h2 id="search-results-title" class="search-results__title" aria-live="polite">Results</h2>
12
+ <div class="search-results__content"></div>
13
+ </div>
14
+ </div>
15
+ </div>
16
+ <% end %>
@@ -44,6 +44,7 @@
44
44
  <div class="app-pane__body"<%= " data-module=\"#{yield_content(:toc_module)}\"" if content_for? :toc_module %>>
45
45
  <div class="app-pane__toc">
46
46
  <div class="toc" data-module="table-of-contents">
47
+ <%= partial "layouts/search" %>
47
48
  <a href="#" class="toc__close js-toc-close" aria-controls="toc" aria-label="Hide table of contents"></a>
48
49
  <nav id="toc" class="js-toc-list toc__list" aria-labelledby="toc-heading"<%= " data-module=\"collapsible-navigation\"" if config[:tech_docs][:collapsible_nav] %>>
49
50
  <%= yield_content :sidebar %>
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: govuk_tech_docs
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.4.0
4
+ version: 1.5.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Government Digital Service
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2018-07-03 00:00:00.000000000 Z
11
+ date: 2018-07-19 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: activesupport
@@ -122,6 +122,20 @@ dependencies:
122
122
  - - "~>"
123
123
  - !ruby/object:Gem::Version
124
124
  version: 3.0.0
125
+ - !ruby/object:Gem::Dependency
126
+ name: middleman-search
127
+ requirement: !ruby/object:Gem::Requirement
128
+ requirements:
129
+ - - ">="
130
+ - !ruby/object:Gem::Version
131
+ version: '0'
132
+ type: :runtime
133
+ prerelease: false
134
+ version_requirements: !ruby/object:Gem::Requirement
135
+ requirements:
136
+ - - ">="
137
+ - !ruby/object:Gem::Version
138
+ version: '0'
125
139
  - !ruby/object:Gem::Dependency
126
140
  name: nokogiri
127
141
  requirement: !ruby/object:Gem::Requirement
@@ -284,10 +298,12 @@ files:
284
298
  - lib/assets/javascripts/_modules/in-page-navigation.js
285
299
  - lib/assets/javascripts/_modules/navigation.js
286
300
  - lib/assets/javascripts/_modules/page-expiry.js
301
+ - lib/assets/javascripts/_modules/search.js
287
302
  - lib/assets/javascripts/_modules/table-of-contents.js
288
303
  - lib/assets/javascripts/_start-modules.js
289
304
  - lib/assets/javascripts/_vendor/fixedsticky.js
290
305
  - lib/assets/javascripts/_vendor/jquery.js
306
+ - lib/assets/javascripts/_vendor/jquery.mark.js
291
307
  - lib/assets/javascripts/_vendor/lodash.js
292
308
  - lib/assets/javascripts/_vendor/modernizr.js
293
309
  - lib/assets/javascripts/govuk_tech_docs.js
@@ -322,6 +338,7 @@ files:
322
338
  - lib/assets/stylesheets/modules/_header.scss
323
339
  - lib/assets/stylesheets/modules/_page-review.scss
324
340
  - lib/assets/stylesheets/modules/_phase-banner.scss
341
+ - lib/assets/stylesheets/modules/_search.scss
325
342
  - lib/assets/stylesheets/modules/_skip-link.scss
326
343
  - lib/assets/stylesheets/modules/_technical-documentation.scss
327
344
  - lib/assets/stylesheets/modules/_toc.scss
@@ -362,10 +379,12 @@ files:
362
379
  - lib/source/images/govuk-icn-numbered-list@2x.png
363
380
  - lib/source/images/open-government-licence.png
364
381
  - lib/source/images/open-government-licence_2x.png
382
+ - lib/source/images/search-result-caret.svg
365
383
  - lib/source/layouts/_analytics.erb
366
384
  - lib/source/layouts/_footer.erb
367
385
  - lib/source/layouts/_header.erb
368
386
  - lib/source/layouts/_page_review.erb
387
+ - lib/source/layouts/_search.erb
369
388
  - lib/source/layouts/core.erb
370
389
  - lib/source/layouts/layout.erb
371
390
  homepage: https://github.com/alphagov/tech-docs-gem