diff --git a/_includes/glossary.html b/_includes/glossary.html new file mode 100644 index 00000000000..2841a116dad --- /dev/null +++ b/_includes/glossary.html @@ -0,0 +1,8 @@ + + diff --git a/_layouts/default.html b/_layouts/default.html index b11449ed12e..1803f7263b2 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -11,7 +11,7 @@ {{ content }} - + {% include glossary.html %} {% include footer.html %} diff --git a/_sass/_module.scss b/_sass/_module.scss index 542383aeb5f..248869fd24f 100644 --- a/_sass/_module.scss +++ b/_sass/_module.scss @@ -8,6 +8,7 @@ @import 'module/contributors'; @import 'module/election-header'; @import 'module/footer'; +@import 'module/glossary'; @import 'module/header'; @import 'module/header-nav'; @import 'module/hero'; diff --git a/_sass/base/_fonts.scss b/_sass/base/_fonts.scss index 6dfdc154075..0bf23f0da55 100644 --- a/_sass/base/_fonts.scss +++ b/_sass/base/_fonts.scss @@ -1,5 +1,6 @@ $font-family-sans-serif: 'Roboto', sans-serif !default; +$font-weight-lightest: 100; $font-weight-light: 300; $font-weight-normal: 400; $font-weight-bold: 700; diff --git a/_sass/module/_footer.scss b/_sass/module/_footer.scss index 69daf817987..e144895d838 100644 --- a/_sass/module/_footer.scss +++ b/_sass/module/_footer.scss @@ -2,7 +2,7 @@ @extend %section-border--major; @include font-size($font-size-small); background-color: $color-grey-5; - padding-bottom: $spacing-base * 2; + padding-bottom: $spacing-base * 6; a { text-decoration: none; diff --git a/_sass/module/_glossary.scss b/_sass/module/_glossary.scss new file mode 100644 index 00000000000..92784d5c478 --- /dev/null +++ b/_sass/module/_glossary.scss @@ -0,0 +1,175 @@ +// Borrowed from FEC +$background-color: $color-lochmara-blue; + +.glossary { +// @include transition(right, .3s); + background-color: $background-color; + bottom: 0; + color: $color-white; + max-width: 30rem; + overflow-y: scroll; + padding: 3rem; + position: fixed; + top: 0; + width: 75%; + z-index: $z-header-nav; + + &[aria-hidden='true'] { + display: block; + right: -100%; + transition: .5s; + } + + &[aria-hidden='false'] { + right: 0; + transition: .3s; + } + + h2 { + color: $color-white; + } + + .label { + color: $color-white; + } + + p { + color: $color-white; + } + + ul { + padding-left: 0; + list-style: none; + } + + [data-term]::after { + background-image: url('./images/down-arrow-white.svg'); + fill: $color-white; + } +} + +.glossary-close { + background-color: $background-color; + background-image: url('data:image/svg+xml;charset=utf8, %3Csvg%20%20fill%3D%27%23ffffff%27%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15.053%205.856a1.234%201.234%200%200%200-1.747-1.745l-3.9%203.895h.353L5.857%204.11a1.234%201.234%200%200%200-1.746%201.745l3.9%203.896v-.353l-3.9%203.895a1.234%201.234%200%200%200%201.746%201.745l3.9-3.895h-.353l3.9%203.895c.23.23.543.36.874.36a1.234%201.234%200%200%200%20.873-2.105l-3.9-3.895v.354l3.9-3.894z%22%2F%3E%3C%2Fsvg%3E'); + background-position: center center; + background-repeat: no-repeat; + background-size: 50%; + border: 0; + color: $color-white; + height: 4rem; + position: absolute; + right: 0; + top: 0; + width: 4rem; + + &:active, + &:hover { + background-color: $background-color; + color: $color-white; + } + + span { + position: absolute; + left: -999em; + } +} + +.glossary__item { + margin-bottom: $spacing-base; + + ol, + ul { + margin-left: $spacing-base * 2; + } + + a, + a:active, + a:visited, + a:visited:hover, + a:hover { + color: $color-lochmara-blue; + } + } + + +.glossary__term { + background-color: $background-color; + background-image: url('./images/down-arrow-white.svg'); + background-position: 100% 50%; + background-repeat: no-repeat; + border: none; + border-bottom: 1px solid $color-white; + border-color: $color-white; + color: $color-white; + padding-left: 0; + padding-bottom: $spacing-base; + text-align: left; + width: 100%; + text-transform: capitalize; + + + &[aria-expanded=true] { + background-image: url('./images/up-arrow-white.svg'); + } + + &:active, + &:hover { + background-color: $background-color; + color: $color-white; + } +} + +.glossary__definition { + margin-top: $spacing-base * 2; + margin-bottom: $spacing-base * 2.5; + font-weight: $font-weight-lightest; +} + +.glossary-toggle { + background-color: $brand-color; + color: $color-white; + font-weight: $font-weight-normal; + border: none; + bottom: 0; + margin: 0; + padding: 1rem 2rem; + position: fixed; + + @media all and (min-width: $grid--small) { + right: 2rem; + } + + @media print { + display: none; + } +} + +.glossary-search { + padding: 0; + padding-top: 1rem; + width: calc(100% - 1.4em); + font-weight: $font-weight-lightest; +} + +.glossary-search-label { + font-size: 1.4rem; +} + + +// Term classes +[data-term] { + cursor: pointer; + text-decoration: underline dotted; + white-space: nowrap; // prevent glossary icon from wrapping + &::after { + content: ''; + width: 1em; + height: 0.7em; + background-image: url('./images/down-arrow-white.svg'); + fill: $color-white; + background-repeat: no-repeat; + display: inline-block; + margin-left: 0.3rem; + margin-right: 0.5rem; + } +} diff --git a/assets/images/down-arrow-white.svg b/assets/images/down-arrow-white.svg new file mode 100644 index 00000000000..135c2a3b562 --- /dev/null +++ b/assets/images/down-arrow-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/images/up-arrow-white.svg b/assets/images/up-arrow-white.svg new file mode 100644 index 00000000000..531ad880769 --- /dev/null +++ b/assets/images/up-arrow-white.svg @@ -0,0 +1,3 @@ + + + diff --git a/package-lock.json b/package-lock.json index cf04cba809b..c082ac1a406 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1271,6 +1271,11 @@ "sprintf-js": "~1.0.2" } }, + "aria-accordion": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/aria-accordion/-/aria-accordion-1.0.0.tgz", + "integrity": "sha1-LcsluobJesINJYw/zccQhj+eoqI=" + }, "aria-query": { "version": "0.7.1", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-0.7.1.tgz", @@ -2510,7 +2515,7 @@ }, "buffer": { "version": "4.9.1", - "resolved": "http://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz", "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=", "requires": { "base64-js": "^1.0.2", @@ -5431,6 +5436,23 @@ "sparkles": "^1.0.0" } }, + "glossary-panel": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/glossary-panel/-/glossary-panel-1.0.0.tgz", + "integrity": "sha1-tHSlMJxyQcLS2uwTtE4F3HDtsfs=", + "requires": { + "aria-accordion": "1.0.0", + "list.js": "1.3.0", + "underscore": "^1.8.3" + }, + "dependencies": { + "underscore": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.9.1.tgz", + "integrity": "sha512-5/4etnCkd9c8gwgowi5/om/mYO5ajCaOgdzj/oW+0eQV9WxKBDZw5+ycmKmeaTXjInS/W0BzpGLo2xR2aBwZdg==" + } + } + }, "got": { "version": "8.3.1", "resolved": "https://registry.npmjs.org/got/-/got-8.3.1.tgz", @@ -6967,6 +6989,11 @@ "resolved": "https://registry.npmjs.org/lightercollective/-/lightercollective-0.1.0.tgz", "integrity": "sha512-J9tg5uraYoQKaWbmrzDDexbG6hHnMcWS1qLYgJSWE+mpA3U5OCSeMUhb+K55otgZJ34oFdR0ECvdIb3xuO5JOQ==" }, + "list.js": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/list.js/-/list.js-1.3.0.tgz", + "integrity": "sha1-bJ+cEGpqniaBv0GCPuT8EGehZFw=" + }, "listr": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/listr/-/listr-0.14.1.tgz", @@ -9886,7 +9913,7 @@ }, "readable-stream": { "version": "2.3.6", - "resolved": "http://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz", "integrity": "sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==", "requires": { "core-util-is": "~1.0.0", diff --git a/package.json b/package.json index 28cf43ba220..33ba5e8aca9 100644 --- a/package.json +++ b/package.json @@ -44,6 +44,7 @@ "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.2", "document-register-element": "^1.11.0", + "glossary-panel": "^1.0.0", "lodash": "^4.17.10", "moment": "^2.22.2", "prop-types": "^15.6.2", diff --git a/src/components/glossary.jsx b/src/components/glossary.jsx new file mode 100644 index 00000000000..0108d5aa9c5 --- /dev/null +++ b/src/components/glossary.jsx @@ -0,0 +1,18 @@ +const Glossary = require('glossary-panel'); + +// JSON file of terms and definitions +// var terms = require('terms'); + +const terms = [ + { term: 'adjustments', definition: 'A way to go back and fix past financial statements that were misstated because of a reporting error. Adjustments are used to fix mathematical errors, improper accounting methods, and overlooked facts in past periods.' }, + { term: 'advocacy group', definition: 'An organized group of people who use various forms of advocacy to influence public opinion and/or policy. For types of groups see https://www.opensecrets.org/527s/types.php.' }, + { term: 'auto-dialer', definition: 'An electronic device or software that automatically dials telephone numbers. Once the call has been answered, the autodialer either plays a recorded message or connects the call to a live person. Under the California Political Reform Act, certain telephone calls must include a disclaimer. (See FPPC Campaign Manual 8.10-11 for details.)' }, + { term: 'ballot', definition: 'The piece of paper, containing ballot measures, that a voter fills out on a specific day for a specific locality.' }, + { term: 'ballot committee', definition: 'According to the SoS, ballot measure committees are committees receiving money for promoting or defeating an initiative, referendum, recall petition, or any measure which has qualified for the ballot. See "How Is A Measure Committee Required To Use Its Funds?" in this document.' }, +]; + +// Optional configurion objects +// var selectors = { ... }; +// var classes = { ... }; + +document.addEventListener('DOMContentLoaded', new Glossary(terms)); diff --git a/src/index.jsx b/src/index.jsx index 051444cb89a..ad06295cf6e 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -1,2 +1,3 @@ // We need to include our components so they are included in the bundle import './components/contributions-table'; +import './components/glossary';