From b193b42ad8977503917d2fc5cd3731fbd223b977 Mon Sep 17 00:00:00 2001 From: Dave Date: Mon, 10 Jan 2022 15:38:12 +0000 Subject: [PATCH 01/60] Journal article main content updates (#1101) * refactor main article width/gutters to grid * Add DNA string for testing * Potential fix for long urls * Move article columns to article-section scss file * Refactor article section for secondary column --- .../patterns/molecules/article-section.scss | 50 ++++++++++++++++++- .../patterns/molecules/view-selector.scss | 9 ++-- .../patterns/organisms/content-header.scss | 1 - 3 files changed, 53 insertions(+), 7 deletions(-) diff --git a/assets/sass/patterns/molecules/article-section.scss b/assets/sass/patterns/molecules/article-section.scss index b85734405..fbb5bd004 100644 --- a/assets/sass/patterns/molecules/article-section.scss +++ b/assets/sass/patterns/molecules/article-section.scss @@ -9,7 +9,8 @@ $arrow-size: 5; } p > a { - overflow-wrap: break-word; + word-wrap: break-word; + word-break: break-all; } } @@ -257,3 +258,50 @@ $arrow-size: 5; } } } + +.divider { + border-bottom: 1px solid $color-text-dividers; + grid-column: 2/12; + height: 1px; + width: 100%; + + @media only all and (min-width: #{get-rem-from-px($bkpt-site--x-wide)}em) { + grid-column: 1/13; + } +} + +.main-content-grid { + + @media only all and (min-width: #{get-rem-from-px($bkpt-site--medium)}em) { + grid-column: 2/12; + grid-row: 2; + } + + @media only all and (min-width: #{get-rem-from-px($bkpt-site--wide)}em) { + grid-column: 2/9; + } + + @media only all and (min-width: #{get-rem-from-px($bkpt-site--x-wide)}em) { + grid-column: 3/10; + grid-row: 1; + margin-left: 70px; + width: 100%; + } +} + +.secondary-column-grid { + display: grid; + + @media only all and (min-width: #{get-rem-from-px($bkpt-site--wide)}em) { + grid-column: 8/12; + grid-row: 2; + justify-self: end; + margin-left: 70px; + max-width: 200px; + } + + @media only all and (min-width: #{get-rem-from-px($bkpt-site--x-wide)}em) { + grid-column: 10/13; + grid-row: 1; + } +} diff --git a/assets/sass/patterns/molecules/view-selector.scss b/assets/sass/patterns/molecules/view-selector.scss index 31e37823d..c98f78c01 100644 --- a/assets/sass/patterns/molecules/view-selector.scss +++ b/assets/sass/patterns/molecules/view-selector.scss @@ -82,9 +82,8 @@ .view-selector--has-figures { display: inline-block; width: 100%; - @supports (display: flex) { - display: flex; - } + grid-column: 1/13; + grid-row: 1; } .view-selector__list { @@ -151,8 +150,8 @@ // Applied with js to stop the selector scrolling off the top of the screen. .view-selector { // Supply what was being provided by the grid now this element has been taken out the flow. - @include constrain-width(210, "max"); - width: 9.625rem; + grid-column: 1/3; + grid-row: 1; } .view-selector--fixed { diff --git a/assets/sass/patterns/organisms/content-header.scss b/assets/sass/patterns/organisms/content-header.scss index 46cfba4bf..bd84cc2e8 100644 --- a/assets/sass/patterns/organisms/content-header.scss +++ b/assets/sass/patterns/organisms/content-header.scss @@ -17,7 +17,6 @@ border-bottom: 1px solid $color-text-dividers; content: ""; display: block; - @include padding($content-header-padding - 1, "top"); width: 100%; } From 4a282e02266ec2e82585a7dfa5aa50de3dbc558b Mon Sep 17 00:00:00 2001 From: Dave Price Date: Fri, 14 Jan 2022 10:40:52 +0000 Subject: [PATCH 02/60] Initial work for creating share modal popup --- assets/js/components/Modal.js | 28 ++++++++++++++++++ assets/js/main.js | 1 + .../sass/patterns/molecules/modal-window.scss | 29 +++++++++++++++++++ .../components/modal-window.mustache | 8 +++++ 4 files changed, 66 insertions(+) create mode 100644 assets/js/components/Modal.js create mode 100644 assets/sass/patterns/molecules/modal-window.scss create mode 100644 source/_patterns/01-molecules/components/modal-window.mustache diff --git a/assets/js/components/Modal.js b/assets/js/components/Modal.js new file mode 100644 index 000000000..1e0f85cee --- /dev/null +++ b/assets/js/components/Modal.js @@ -0,0 +1,28 @@ +'use strict'; + +window.addEventListener('resize', function () { + if (window.innerWidth < 480) { + console.log('test'); + + const modalWindow = document.querySelector('.modal-container'); + const modalBtnClick = document.querySelector('.modal-click'); + const modalButtonClose = document.querySelector('.modal-content__button'); + + function modalToggle() { + modalWindow.classList.toggle('modal-content__show'); + } + + function windowOnClick(event) { + if (event.target === modalWindow) { + modalToggle(); + } + } + + if (document.querySelector('.modal-container')) { + modalBtnClick.addEventListener('click', modalToggle); + modalButtonClose.addEventListener('click', modalToggle); + window.addEventListener('click', windowOnClick); + } + + } +}); diff --git a/assets/js/main.js b/assets/js/main.js index dc94b395e..a2978c721 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -30,6 +30,7 @@ Components.MainMenu = require('./components/MainMenu'); Components.Math = require('./components/Math'); Components.MediaChapterListingItem = require('./components/MediaChapterListingItem'); Components.Metrics = require('./components/Metrics'); +Components.Modal = require('./components/Modal'); Components.Pager = require('./components/Pager'); Components.PersonalisedCoverDownload = require('./components/PersonalisedCoverDownload'); Components.Popup = require('./components/Popup'); diff --git a/assets/sass/patterns/molecules/modal-window.scss b/assets/sass/patterns/molecules/modal-window.scss new file mode 100644 index 000000000..81a4c4c78 --- /dev/null +++ b/assets/sass/patterns/molecules/modal-window.scss @@ -0,0 +1,29 @@ +.modal-container { + background-color: rgba(255,255,255,0.5); + height: 100%; + left: 0; + position: fixed; + top: 0; + width: 100%; + visibility: hidden; +} + +.modal-content { + background-color: #fff; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.22); + border-radius: 3px; + display: grid; + margin: 24px; + padding: 36px 24px; +} + +.modal-content__show { + opacity: 1; + visibility: visible; +} + +.modal-content__button { + grid-row: 1; + justify-self: end; + text-decoration: none; +} diff --git a/source/_patterns/01-molecules/components/modal-window.mustache b/source/_patterns/01-molecules/components/modal-window.mustache new file mode 100644 index 000000000..121096fb3 --- /dev/null +++ b/source/_patterns/01-molecules/components/modal-window.mustache @@ -0,0 +1,8 @@ + + +
+
+ This is a modal window + X +
+
\ No newline at end of file From 3e354738d983554392163444043a934cd0fbfad2 Mon Sep 17 00:00:00 2001 From: Dave Date: Mon, 24 Jan 2022 11:55:02 +0000 Subject: [PATCH 03/60] Add table variations and fix bug for lists inside tables (#1104) * Add table variations and fix bug for lists inside tables * Format code * Remove unwanted code * Reverting to original From ced7d4d34477f1639bb2a07ff2d767db7fd4c387 Mon Sep 17 00:00:00 2001 From: Dave Date: Tue, 25 Jan 2022 09:44:08 +0000 Subject: [PATCH 04/60] Table list indentation issue (#1105) * Add table variations and fix bug for lists inside tables * Format code * Remove unwanted code * Reverting to original * Update font, font-size for list items and paragraphs in tables From 0acea238121851da8d0f1cfd0a689d747fcd82d9 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Tue, 25 Jan 2022 13:54:40 +0000 Subject: [PATCH 05/60] Changes to js and adding data behaviour --- assets/js/components/Modal.js | 58 +++++++++++++------ .../sass/patterns/molecules/modal-window.scss | 4 ++ .../components/modal-window.mustache | 16 ++--- 3 files changed, 52 insertions(+), 26 deletions(-) diff --git a/assets/js/components/Modal.js b/assets/js/components/Modal.js index 1e0f85cee..bc2bcf7af 100644 --- a/assets/js/components/Modal.js +++ b/assets/js/components/Modal.js @@ -1,28 +1,48 @@ 'use strict'; -window.addEventListener('resize', function () { - if (window.innerWidth < 480) { - console.log('test'); +module.exports = class Modal { - const modalWindow = document.querySelector('.modal-container'); - const modalBtnClick = document.querySelector('.modal-click'); - const modalButtonClose = document.querySelector('.modal-content__button'); - - function modalToggle() { - modalWindow.classList.toggle('modal-content__show'); + constructor($elm, _window = window, doc = document) { + if (!$elm) { + return; } - function windowOnClick(event) { - if (event.target === modalWindow) { - modalToggle(); - } - } + this.$elm = $elm; + this.window = _window; + this.doc = doc; + + this.modalWindow = this.$elm.querySelector('.modal-container'); + this.$elm.querySelector('.modal-click').addEventListener('click', (event) => this.modalToggle(event)); + this.$elm.querySelector('.modal-content__button').addEventListener('click', (event) => this.modalToggle(event)); + this.window.addEventListener('click', (event) => this.windowOnClick(event)); + + this.window.addEventListener('resize', () => { + this.modalSetup(); + }); + + this.modalSetup(); + } - if (document.querySelector('.modal-container')) { - modalBtnClick.addEventListener('click', modalToggle); - modalButtonClose.addEventListener('click', modalToggle); - window.addEventListener('click', windowOnClick); + modalToggle(event) { + this.modalWindow.classList.toggle('modal-content__show'); + event.preventDefault(); + } + + windowOnClick(event) { + if (event.target === this.modalWindow) { + this.modalToggle(event); } + } + modalSetup() { + if (this.window.innerWidth < 480) { + this.$elm.classList.remove('modal-nojs'); + console.log('below'); + } else { + this.modalWindow.classList.remove('modal-content__show'); + this.$elm.classList.add('modal-nojs'); + console.log('above'); + } } -}); + +}; diff --git a/assets/sass/patterns/molecules/modal-window.scss b/assets/sass/patterns/molecules/modal-window.scss index 81a4c4c78..cb0ac42da 100644 --- a/assets/sass/patterns/molecules/modal-window.scss +++ b/assets/sass/patterns/molecules/modal-window.scss @@ -27,3 +27,7 @@ justify-self: end; text-decoration: none; } + +.modal-nojs { + visibility: none; +} diff --git a/source/_patterns/01-molecules/components/modal-window.mustache b/source/_patterns/01-molecules/components/modal-window.mustache index 121096fb3..7a67102c7 100644 --- a/source/_patterns/01-molecules/components/modal-window.mustache +++ b/source/_patterns/01-molecules/components/modal-window.mustache @@ -1,8 +1,10 @@ - +
+ -
-
- This is a modal window - X -
-
\ No newline at end of file +
+
+ This is a modal window + X +
+
+
From 6ab193ff4d4ade7075e5ed27ece88830fac64708 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Tue, 25 Jan 2022 13:59:11 +0000 Subject: [PATCH 06/60] Fix css for modal --- assets/sass/patterns/molecules/modal-window.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/sass/patterns/molecules/modal-window.scss b/assets/sass/patterns/molecules/modal-window.scss index cb0ac42da..99b477861 100644 --- a/assets/sass/patterns/molecules/modal-window.scss +++ b/assets/sass/patterns/molecules/modal-window.scss @@ -29,5 +29,5 @@ } .modal-nojs { - visibility: none; + visibility: hidden; } From a9eb22bb9cb8c35ffd5dcc782eece3ff987f6f4b Mon Sep 17 00:00:00 2001 From: Dave Price Date: Tue, 25 Jan 2022 14:14:14 +0000 Subject: [PATCH 07/60] removing console logs on modal --- assets/js/components/Modal.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/assets/js/components/Modal.js b/assets/js/components/Modal.js index bc2bcf7af..e92f93f32 100644 --- a/assets/js/components/Modal.js +++ b/assets/js/components/Modal.js @@ -37,11 +37,9 @@ module.exports = class Modal { modalSetup() { if (this.window.innerWidth < 480) { this.$elm.classList.remove('modal-nojs'); - console.log('below'); } else { this.modalWindow.classList.remove('modal-content__show'); this.$elm.classList.add('modal-nojs'); - console.log('above'); } } From 8839aa0c321d147b4e176e63d24cd446aba881ca Mon Sep 17 00:00:00 2001 From: Dave Date: Tue, 25 Jan 2022 14:26:36 +0000 Subject: [PATCH 08/60] Merge branch 'develop' into share-popup-modal From b60b0fd57edb293c590ef54dd3cb3de8c1fe3666 Mon Sep 17 00:00:00 2001 From: nlisgo Date: Tue, 25 Jan 2022 15:04:03 +0000 Subject: [PATCH 09/60] Move modal-window to atoms --- assets/sass/patterns/{molecules => atoms}/modal-window.scss | 0 .../{01-molecules => 00-atoms}/components/modal-window.mustache | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename assets/sass/patterns/{molecules => atoms}/modal-window.scss (100%) rename source/_patterns/{01-molecules => 00-atoms}/components/modal-window.mustache (100%) diff --git a/assets/sass/patterns/molecules/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss similarity index 100% rename from assets/sass/patterns/molecules/modal-window.scss rename to assets/sass/patterns/atoms/modal-window.scss diff --git a/source/_patterns/01-molecules/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache similarity index 100% rename from source/_patterns/01-molecules/components/modal-window.mustache rename to source/_patterns/00-atoms/components/modal-window.mustache From 1e4a6646d81aa9e219a565f6fced9e265b21b63d Mon Sep 17 00:00:00 2001 From: Dave Price Date: Tue, 25 Jan 2022 15:32:31 +0000 Subject: [PATCH 10/60] Adding modal json file for parameters --- source/_patterns/00-atoms/components/modal-window.json | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 source/_patterns/00-atoms/components/modal-window.json diff --git a/source/_patterns/00-atoms/components/modal-window.json b/source/_patterns/00-atoms/components/modal-window.json new file mode 100644 index 000000000..e06a2d232 --- /dev/null +++ b/source/_patterns/00-atoms/components/modal-window.json @@ -0,0 +1,5 @@ +{ + "title": "This is a title", + "closeBtnText": "Close", + "body": "This is some body text" +} From 0aca963ebd1c5c778222eb49c378b8bd905a5c91 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Wed, 26 Jan 2022 09:33:00 +0000 Subject: [PATCH 11/60] Add yaml parameters for modal window --- .../00-atoms/components/modal-window.mustache | 7 ++++--- .../00-atoms/components/modal-window.yaml | 15 +++++++++++++++ 2 files changed, 19 insertions(+), 3 deletions(-) create mode 100644 source/_patterns/00-atoms/components/modal-window.yaml diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache index 7a67102c7..88e8944d5 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -1,10 +1,11 @@
- + Open modal window
- This is a modal window - X +

{{title}}

+ {{body}} + {{closeBtnText}} X
diff --git a/source/_patterns/00-atoms/components/modal-window.yaml b/source/_patterns/00-atoms/components/modal-window.yaml new file mode 100644 index 000000000..bbfd62b90 --- /dev/null +++ b/source/_patterns/00-atoms/components/modal-window.yaml @@ -0,0 +1,15 @@ +$schema: http://json-schema.org/draft-04/schema# +type: object +properties: + title: + type: string + minLength: 1 + closeBtnText: + type: string + minLength: 1 + body: + type: string + minLength: 1 +required: + - closeBtnText + - body From a16bbbb16a909be082cea31c43d1f60ea13fc1a2 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 27 Jan 2022 09:38:41 +0000 Subject: [PATCH 12/60] Add variations for modal window --- assets/js/components/Modal.js | 13 +++++++++---- .../_patterns/00-atoms/components/modal-window.json | 1 + .../00-atoms/components/modal-window.mustache | 3 +-- .../_patterns/00-atoms/components/modal-window.yaml | 2 ++ 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/assets/js/components/Modal.js b/assets/js/components/Modal.js index e92f93f32..7bdefad84 100644 --- a/assets/js/components/Modal.js +++ b/assets/js/components/Modal.js @@ -12,6 +12,7 @@ module.exports = class Modal { this.doc = doc; this.modalWindow = this.$elm.querySelector('.modal-container'); + this.smallDevice = this.$elm.querySelector('.small-device'); this.$elm.querySelector('.modal-click').addEventListener('click', (event) => this.modalToggle(event)); this.$elm.querySelector('.modal-content__button').addEventListener('click', (event) => this.modalToggle(event)); this.window.addEventListener('click', (event) => this.windowOnClick(event)); @@ -35,11 +36,15 @@ module.exports = class Modal { } modalSetup() { - if (this.window.innerWidth < 480) { - this.$elm.classList.remove('modal-nojs'); + if (this.$elm.classList.contains('small-device')) { + if (this.window.innerWidth < 480) { + this.$elm.classList.remove('modal-nojs'); + } else { + this.modalWindow.classList.remove('modal-content__show'); + this.$elm.classList.add('modal-nojs'); + } } else { - this.modalWindow.classList.remove('modal-content__show'); - this.$elm.classList.add('modal-nojs'); + this.$elm.classList.remove('modal-nojs'); } } diff --git a/source/_patterns/00-atoms/components/modal-window.json b/source/_patterns/00-atoms/components/modal-window.json index e06a2d232..c4ba79523 100644 --- a/source/_patterns/00-atoms/components/modal-window.json +++ b/source/_patterns/00-atoms/components/modal-window.json @@ -1,4 +1,5 @@ { + "smallDeviceOnly": "small-device", "title": "This is a title", "closeBtnText": "Close", "body": "This is some body text" diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache index 88e8944d5..325a88911 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -1,6 +1,5 @@ -
+
Open modal window -

{{title}}

diff --git a/source/_patterns/00-atoms/components/modal-window.yaml b/source/_patterns/00-atoms/components/modal-window.yaml index bbfd62b90..f46bbb1f2 100644 --- a/source/_patterns/00-atoms/components/modal-window.yaml +++ b/source/_patterns/00-atoms/components/modal-window.yaml @@ -1,6 +1,8 @@ $schema: http://json-schema.org/draft-04/schema# type: object properties: + smallDeviceOnly: + type: string title: type: string minLength: 1 From 63a0c1231bab3649bd1e33be99c998060a3ecacc Mon Sep 17 00:00:00 2001 From: Dave Price Date: Mon, 31 Jan 2022 13:46:46 +0000 Subject: [PATCH 13/60] Add share modal content and styling --- assets/sass/patterns/atoms/modal-window.scss | 39 +++++++++++++++++++ .../00-atoms/components/modal-window.mustache | 6 ++- .../01-molecules/components/modal.mustache | 24 ++++++++++++ .../components/modal~citations.json | 6 +++ .../01-molecules/components/modal~share.json | 6 +++ 5 files changed, 79 insertions(+), 2 deletions(-) create mode 100644 source/_patterns/01-molecules/components/modal.mustache create mode 100644 source/_patterns/01-molecules/components/modal~citations.json create mode 100644 source/_patterns/01-molecules/components/modal~share.json diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index 99b477861..4695310e8 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -15,6 +15,23 @@ display: grid; margin: 24px; padding: 36px 24px; + + h6 { + @include font-size-and-vertical-height($font-size-h6-in-px); + grid-column: 1/3; + grid-row: 1; + justify-self: start; + padding-top: 0; + } + + .social-media-sharers { + @media only all and (max-width: #{get-rem-from-px($bkpt-site--small - 1)}em) { + display: flex; + grid-column: 1/3; + grid-row: 4; + justify-self: center; + } + } } .modal-content__show { @@ -23,11 +40,33 @@ } .modal-content__button { + grid-column: 2/3; grid-row: 1; justify-self: end; + line-height: 1.5; text-decoration: none; } .modal-nojs { visibility: hidden; } + +.modal-content__clipboard { + @include margin(24, "bottom"); + @include padding(12); + border: 1px solid $color-text-dividers; + font-family: $font-secondary; + grid-column: 1/3; + grid-row: 2; + justify-self: initial; +} + +.social-media-sharers { + display: flex; +} + +.modal-content__clipboard-button { + @include margin(36, "bottom"); + grid-column: 1/3; + grid-row: 3; +} diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache index 325a88911..d26c9df1e 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -2,9 +2,11 @@ Open modal window
-

{{title}}

- {{body}} +
{{title}}
{{closeBtnText}} X + {{#body}} + {{{body}}} + {{/body}}
diff --git a/source/_patterns/01-molecules/components/modal.mustache b/source/_patterns/01-molecules/components/modal.mustache new file mode 100644 index 000000000..eafaeb6a7 --- /dev/null +++ b/source/_patterns/01-molecules/components/modal.mustache @@ -0,0 +1,24 @@ +Main template + +{{> atoms-modal-window }} + + {{#share}} +
+ https://doi.org/10.7554/eLife.09560 +
+ + + + {{#socialMediaSharers}} + {{> atoms-social-media-sharers}} + {{/socialMediaSharers}} + {{/share}} + + {{#citations}} +
References
+
Another paragraph
+
DOI to go here
+ + + + {{/citations}} \ No newline at end of file diff --git a/source/_patterns/01-molecules/components/modal~citations.json b/source/_patterns/01-molecules/components/modal~citations.json new file mode 100644 index 000000000..70982a955 --- /dev/null +++ b/source/_patterns/01-molecules/components/modal~citations.json @@ -0,0 +1,6 @@ +{ + "title": "Cite this article", + "closeBtnText": "Close", + "body": "This is some body text", + "citations": true +} \ No newline at end of file diff --git a/source/_patterns/01-molecules/components/modal~share.json b/source/_patterns/01-molecules/components/modal~share.json new file mode 100644 index 000000000..793c923ec --- /dev/null +++ b/source/_patterns/01-molecules/components/modal~share.json @@ -0,0 +1,6 @@ +{ + "smallDeviceOnly": "small-device", + "title": "Share this article", + "closeBtnText": "Close", + "body": "
https://doi.org/10.7554/eLife.09560
" +} \ No newline at end of file From 4a60f40f2d022ae627242b15427457542f4e1d9d Mon Sep 17 00:00:00 2001 From: Dave Price Date: Wed, 2 Feb 2022 11:09:03 +0000 Subject: [PATCH 14/60] Add Citations json and template changes --- .../00-atoms/references/reference.mustache | 5 +- .../reference~journal-article-with-doi.json | 1 + .../01-molecules/components/modal.mustache | 10 +- .../components/modal~citations.json | 118 +++++++++++++++++- 4 files changed, 125 insertions(+), 9 deletions(-) diff --git a/source/_patterns/00-atoms/references/reference.mustache b/source/_patterns/00-atoms/references/reference.mustache index e83dd733c..4a4a33898 100644 --- a/source/_patterns/00-atoms/references/reference.mustache +++ b/source/_patterns/00-atoms/references/reference.mustache @@ -16,7 +16,10 @@ {{/hasAuthors}} {{#doi}} - {{{title}}} + {{#doiWithoutLink}}{{{title}}}{{/doiWithoutLink}} + {{^doiWithoutLink}} + {{{title}}} + {{/doiWithoutLink}} {{/doi}} {{^doi}} diff --git a/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json b/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json index e6cd3dcfb..daa8c9ed5 100644 --- a/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json +++ b/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json @@ -112,6 +112,7 @@ "doi": { "doi": "10.1038/365833a0" }, + "doiWithoutLink": true, "hasAbstracts": true, "abstracts": [ { diff --git a/source/_patterns/01-molecules/components/modal.mustache b/source/_patterns/01-molecules/components/modal.mustache index eafaeb6a7..739f93899 100644 --- a/source/_patterns/01-molecules/components/modal.mustache +++ b/source/_patterns/01-molecules/components/modal.mustache @@ -15,10 +15,8 @@ Main template {{/share}} {{#citations}} -
References
-
Another paragraph
-
DOI to go here
- - - + {{> atoms-journal-article-with-doi}} + + + {{/citations}} \ No newline at end of file diff --git a/source/_patterns/01-molecules/components/modal~citations.json b/source/_patterns/01-molecules/components/modal~citations.json index 70982a955..fa894f498 100644 --- a/source/_patterns/01-molecules/components/modal~citations.json +++ b/source/_patterns/01-molecules/components/modal~citations.json @@ -1,6 +1,120 @@ { - "title": "Cite this article", "closeBtnText": "Close", "body": "This is some body text", - "citations": true + "citations": true, + "title": "Oldest Homo and Pliocene biogeography of the Malawi rift", + "origin": "Nature 365:833–836.", + "hasAuthors": true, + "authorLists": [ + { + "authors": [ + { + "name": "Schrenk F", + "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" + }, + { + "name": "Bromage TG", + "url": false + }, + { + "name": "Betzler CG", + "url": false + }, + { + "name": "Ring U", + "url": false + }, + { + "name": "Juwayeyi YM", + "url": false + }, + { + "name": "Schrenk F", + "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" + }, + { + "name": "Bromage TG", + "url": false + }, + { + "name": "Betzler CG", + "url": false + }, + { + "name": "Ring U", + "url": false + }, + { + "name": "Juwayeyi YM", + "url": false + }, + { + "name": "Schrenk F", + "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" + }, + { + "name": "Bromage TG", + "url": false + }, + { + "name": "Betzler CG", + "url": false + }, + { + "name": "Ring U", + "url": false + }, + { + "name": "Juwayeyi YM", + "url": false + }, + { + "name": "Schrenk F", + "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" + }, + { + "name": "Bromage TG", + "url": false + }, + { + "name": "Betzler CG", + "url": false + }, + { + "name": "Ring U", + "url": false + }, + { + "name": "Juwayeyi YM", + "url": false + }, + { + "name": "Schrenk F", + "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" + }, + { + "name": "Bromage TG", + "url": false + }, + { + "name": "Betzler CG", + "url": false + }, + { + "name": "Ring U", + "url": false + }, + { + "name": "Juwayeyi YM", + "url": false + } + ], + "suffix": "(1993)" + } + ], + "doi": { + "doi": "10.1038/365833a0" + }, + "doiWithoutLink": true, + "hasAbstracts": false } \ No newline at end of file From 667a147ef49031cef5734cbf6dbd808c84dd7ec2 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Wed, 2 Feb 2022 11:49:08 +0000 Subject: [PATCH 15/60] Styling citations --- assets/sass/patterns/atoms/modal-window.scss | 14 +++++++++++++ .../00-atoms/components/modal-window.mustache | 2 +- .../01-molecules/components/modal.mustache | 21 +------------------ .../components/modal~citations.json | 2 +- 4 files changed, 17 insertions(+), 22 deletions(-) diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index 4695310e8..2004183d5 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -32,6 +32,14 @@ justify-self: center; } } + + .reference { + .doi { + display: flex; + margin-top: 12px; + margin-bottom: 36px; + } + } } .modal-content__show { @@ -44,6 +52,7 @@ grid-row: 1; justify-self: end; line-height: 1.5; + margin-right: 6px; text-decoration: none; } @@ -70,3 +79,8 @@ grid-column: 1/3; grid-row: 3; } + +.button-container { + display: block; + grid-row: 3; +} diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache index d26c9df1e..d52c6814d 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -2,7 +2,7 @@ Open modal window
-
{{title}}
+
{{{title}}}
{{closeBtnText}} X {{#body}} {{{body}}} diff --git a/source/_patterns/01-molecules/components/modal.mustache b/source/_patterns/01-molecules/components/modal.mustache index 739f93899..c96055671 100644 --- a/source/_patterns/01-molecules/components/modal.mustache +++ b/source/_patterns/01-molecules/components/modal.mustache @@ -1,22 +1,3 @@ Main template -{{> atoms-modal-window }} - - {{#share}} -
- https://doi.org/10.7554/eLife.09560 -
- - - - {{#socialMediaSharers}} - {{> atoms-social-media-sharers}} - {{/socialMediaSharers}} - {{/share}} - - {{#citations}} - {{> atoms-journal-article-with-doi}} - - - - {{/citations}} \ No newline at end of file +{{> atoms-modal-window }} \ No newline at end of file diff --git a/source/_patterns/01-molecules/components/modal~citations.json b/source/_patterns/01-molecules/components/modal~citations.json index fa894f498..34d8c741f 100644 --- a/source/_patterns/01-molecules/components/modal~citations.json +++ b/source/_patterns/01-molecules/components/modal~citations.json @@ -1,6 +1,6 @@ { "closeBtnText": "Close", - "body": "This is some body text", + "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993)Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
", "citations": true, "title": "Oldest Homo and Pliocene biogeography of the Malawi rift", "origin": "Nature 365:833–836.", From dd3b44b68da0132d295eae7bacf377a547a5f50e Mon Sep 17 00:00:00 2001 From: Dave Price Date: Wed, 2 Feb 2022 12:14:38 +0000 Subject: [PATCH 16/60] Add without link to doi atom --- source/_patterns/00-atoms/components/doi.json | 3 ++- source/_patterns/00-atoms/components/doi.mustache | 7 ++++++- source/_patterns/00-atoms/components/doi.yaml | 4 ++++ .../references/reference~journal-article-with-doi.json | 2 +- 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/source/_patterns/00-atoms/components/doi.json b/source/_patterns/00-atoms/components/doi.json index c5b9410ed..75f5f3925 100644 --- a/source/_patterns/00-atoms/components/doi.json +++ b/source/_patterns/00-atoms/components/doi.json @@ -1,3 +1,4 @@ { - "doi": "10.7554/eLife.16370" + "doi": "10.7554/eLife.16370", + "doiWithoutLink": true } diff --git a/source/_patterns/00-atoms/components/doi.mustache b/source/_patterns/00-atoms/components/doi.mustache index 88cdfd7e3..21444b205 100644 --- a/source/_patterns/00-atoms/components/doi.mustache +++ b/source/_patterns/00-atoms/components/doi.mustache @@ -1,2 +1,7 @@ {{! isTruncated should only be true when doi is included as a partial within the contextual-data pattern }} -{{#isTruncated}}doi: {{/isTruncated}}{{^isTruncated}}https://doi.org/{{/isTruncated}}{{doi}} +{{#isTruncated}}doi: {{/isTruncated}} + {{#doiWithoutLink}}{{^isTruncated}}https://doi.org/{{/isTruncated}}{{doi}}{{/doiWithoutLink}} + {{^doiWithoutLink}} + {{^isTruncated}}https://doi.org/{{/isTruncated}}{{doi}} + {{/doiWithoutLink}} + diff --git a/source/_patterns/00-atoms/components/doi.yaml b/source/_patterns/00-atoms/components/doi.yaml index e9b9229c5..46f89df59 100644 --- a/source/_patterns/00-atoms/components/doi.yaml +++ b/source/_patterns/00-atoms/components/doi.yaml @@ -13,5 +13,9 @@ properties: type: boolean default: - false + doiWithoutLink: + type: boolean + default: + - false required: - doi diff --git a/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json b/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json index daa8c9ed5..97e53b7eb 100644 --- a/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json +++ b/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json @@ -112,7 +112,7 @@ "doi": { "doi": "10.1038/365833a0" }, - "doiWithoutLink": true, + "doiWithoutLink": false, "hasAbstracts": true, "abstracts": [ { From 46d21793857ce06509af767b47e4db2e6c61239d Mon Sep 17 00:00:00 2001 From: nlisgo Date: Wed, 2 Feb 2022 12:22:50 +0000 Subject: [PATCH 17/60] Introduce doi variant without a link --- source/_patterns/00-atoms/components/doi.json | 3 +-- source/_patterns/00-atoms/components/doi~without-link.json | 4 ++++ 2 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 source/_patterns/00-atoms/components/doi~without-link.json diff --git a/source/_patterns/00-atoms/components/doi.json b/source/_patterns/00-atoms/components/doi.json index 75f5f3925..c5b9410ed 100644 --- a/source/_patterns/00-atoms/components/doi.json +++ b/source/_patterns/00-atoms/components/doi.json @@ -1,4 +1,3 @@ { - "doi": "10.7554/eLife.16370", - "doiWithoutLink": true + "doi": "10.7554/eLife.16370" } diff --git a/source/_patterns/00-atoms/components/doi~without-link.json b/source/_patterns/00-atoms/components/doi~without-link.json new file mode 100644 index 000000000..75f5f3925 --- /dev/null +++ b/source/_patterns/00-atoms/components/doi~without-link.json @@ -0,0 +1,4 @@ +{ + "doi": "10.7554/eLife.16370", + "doiWithoutLink": true +} From cde76eb9d25980d4a168fe6ceeeaf7add27192ac Mon Sep 17 00:00:00 2001 From: nlisgo Date: Wed, 2 Feb 2022 12:29:33 +0000 Subject: [PATCH 18/60] Cleanup of duplication in doi and reference templates --- .../00-atoms/components/doi.mustache | 7 +- .../00-atoms/references/reference.mustache | 7 +- ...journal-article-with-doi-without-link.json | 127 ++++++++++++++++++ .../reference~journal-article-with-doi.json | 1 - 4 files changed, 137 insertions(+), 5 deletions(-) create mode 100644 source/_patterns/00-atoms/references/reference~journal-article-with-doi-without-link.json diff --git a/source/_patterns/00-atoms/components/doi.mustache b/source/_patterns/00-atoms/components/doi.mustache index 21444b205..0d323807b 100644 --- a/source/_patterns/00-atoms/components/doi.mustache +++ b/source/_patterns/00-atoms/components/doi.mustache @@ -1,7 +1,10 @@ {{! isTruncated should only be true when doi is included as a partial within the contextual-data pattern }} {{#isTruncated}}doi: {{/isTruncated}} - {{#doiWithoutLink}}{{^isTruncated}}https://doi.org/{{/isTruncated}}{{doi}}{{/doiWithoutLink}} {{^doiWithoutLink}} - {{^isTruncated}}https://doi.org/{{/isTruncated}}{{doi}} + + {{/doiWithoutLink}} + {{^isTruncated}}https://doi.org/{{/isTruncated}}{{doi}} + {{^doiWithoutLink}} + {{/doiWithoutLink}} diff --git a/source/_patterns/00-atoms/references/reference.mustache b/source/_patterns/00-atoms/references/reference.mustache index 4a4a33898..009b80022 100644 --- a/source/_patterns/00-atoms/references/reference.mustache +++ b/source/_patterns/00-atoms/references/reference.mustache @@ -16,9 +16,12 @@ {{/hasAuthors}} {{#doi}} - {{#doiWithoutLink}}{{{title}}}{{/doiWithoutLink}} {{^doiWithoutLink}} - {{{title}}} + + {{/doiWithoutLink}} + {{{title}}} + {{^doiWithoutLink}} + {{/doiWithoutLink}} {{/doi}} diff --git a/source/_patterns/00-atoms/references/reference~journal-article-with-doi-without-link.json b/source/_patterns/00-atoms/references/reference~journal-article-with-doi-without-link.json new file mode 100644 index 000000000..daa8c9ed5 --- /dev/null +++ b/source/_patterns/00-atoms/references/reference~journal-article-with-doi-without-link.json @@ -0,0 +1,127 @@ +{ + "title": "Oldest Homo and Pliocene biogeography of the Malawi rift", + "origin": "Nature 365:833–836.", + "hasAuthors": true, + "authorLists": [ + { + "authors": [ + { + "name": "Schrenk F", + "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" + }, + { + "name": "Bromage TG", + "url": false + }, + { + "name": "Betzler CG", + "url": false + }, + { + "name": "Ring U", + "url": false + }, + { + "name": "Juwayeyi YM", + "url": false + }, + { + "name": "Schrenk F", + "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" + }, + { + "name": "Bromage TG", + "url": false + }, + { + "name": "Betzler CG", + "url": false + }, + { + "name": "Ring U", + "url": false + }, + { + "name": "Juwayeyi YM", + "url": false + }, + { + "name": "Schrenk F", + "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" + }, + { + "name": "Bromage TG", + "url": false + }, + { + "name": "Betzler CG", + "url": false + }, + { + "name": "Ring U", + "url": false + }, + { + "name": "Juwayeyi YM", + "url": false + }, + { + "name": "Schrenk F", + "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" + }, + { + "name": "Bromage TG", + "url": false + }, + { + "name": "Betzler CG", + "url": false + }, + { + "name": "Ring U", + "url": false + }, + { + "name": "Juwayeyi YM", + "url": false + }, + { + "name": "Schrenk F", + "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" + }, + { + "name": "Bromage TG", + "url": false + }, + { + "name": "Betzler CG", + "url": false + }, + { + "name": "Ring U", + "url": false + }, + { + "name": "Juwayeyi YM", + "url": false + } + ], + "suffix": "(1993)" + } + ], + "doi": { + "doi": "10.1038/365833a0" + }, + "doiWithoutLink": true, + "hasAbstracts": true, + "abstracts": [ + { + "name": "PubMed", + "url": "https://pubmed.ncbi.nlm.nih.gov/" + }, + { + "name": "Google Scholar", + "url": "https://google.co.uk" + } + ] +} diff --git a/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json b/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json index 97e53b7eb..e6cd3dcfb 100644 --- a/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json +++ b/source/_patterns/00-atoms/references/reference~journal-article-with-doi.json @@ -112,7 +112,6 @@ "doi": { "doi": "10.1038/365833a0" }, - "doiWithoutLink": false, "hasAbstracts": true, "abstracts": [ { From e244a9775cb980e864254f5a130ba757ef8657ac Mon Sep 17 00:00:00 2001 From: nlisgo Date: Wed, 2 Feb 2022 12:29:55 +0000 Subject: [PATCH 19/60] no-wtf --- source/_patterns/00-atoms/components/doi.mustache | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/00-atoms/components/doi.mustache b/source/_patterns/00-atoms/components/doi.mustache index 0d323807b..8c5319ccd 100644 --- a/source/_patterns/00-atoms/components/doi.mustache +++ b/source/_patterns/00-atoms/components/doi.mustache @@ -1,7 +1,7 @@ {{! isTruncated should only be true when doi is included as a partial within the contextual-data pattern }} {{#isTruncated}}doi: {{/isTruncated}} {{^doiWithoutLink}} - + {{/doiWithoutLink}} {{^isTruncated}}https://doi.org/{{/isTruncated}}{{doi}} {{^doiWithoutLink}} From 9bd47e3dfe0f9f3b3a8f5b11e4b3ff1a228dcd03 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 3 Feb 2022 08:25:01 +0000 Subject: [PATCH 20/60] Move all modals to atoms and refactor css --- assets/sass/_variables.scss | 1 + assets/sass/patterns/atoms/buttons.scss | 9 +++++++++ assets/sass/patterns/atoms/modal-window.scss | 2 ++ .../components/modal-window~citations.json} | 5 +++-- .../components/modal-window~share.json} | 0 source/_patterns/01-molecules/components/modal.mustache | 3 --- 6 files changed, 15 insertions(+), 5 deletions(-) rename source/_patterns/{01-molecules/components/modal~citations.json => 00-atoms/components/modal-window~citations.json} (84%) rename source/_patterns/{01-molecules/components/modal~share.json => 00-atoms/components/modal-window~share.json} (100%) delete mode 100644 source/_patterns/01-molecules/components/modal.mustache diff --git a/assets/sass/_variables.scss b/assets/sass/_variables.scss index aec5805c9..cef8020f6 100644 --- a/assets/sass/_variables.scss +++ b/assets/sass/_variables.scss @@ -13,6 +13,7 @@ $color-text-secondary-dark: #6e6e6e; $color-text-placeholder: #bdbdbd; $color-text-dividers: #e0e0e0; $color-text-ui-background: #fff; +$color-text-ui-background-secondary: #f7f7f7; $color-text-ui-background-hue: #f5f5f5; $color-text-ui-code: #f7f7f7; diff --git a/assets/sass/patterns/atoms/buttons.scss b/assets/sass/patterns/atoms/buttons.scss index 5de2be41c..8ef3d09a2 100644 --- a/assets/sass/patterns/atoms/buttons.scss +++ b/assets/sass/patterns/atoms/buttons.scss @@ -35,6 +35,15 @@ } } +.button--secondary { + @include colors($color-text-ui-background-secondary, $color-text-dividers, #212121); + @include padding(15 36 14); + + &:hover { + @include colors(#e0e0e0, $color-text-dividers, #212121); + } +} + .button--outline { @include colors($color-text--reverse, $color-primary, $color-primary); @include padding(15 36 14); diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index 2004183d5..dc46acb62 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -34,6 +34,8 @@ } .reference { + font-family: $font-secondary; + .doi { display: flex; margin-top: 12px; diff --git a/source/_patterns/01-molecules/components/modal~citations.json b/source/_patterns/00-atoms/components/modal-window~citations.json similarity index 84% rename from source/_patterns/01-molecules/components/modal~citations.json rename to source/_patterns/00-atoms/components/modal-window~citations.json index 34d8c741f..0bb3ff29c 100644 --- a/source/_patterns/01-molecules/components/modal~citations.json +++ b/source/_patterns/00-atoms/components/modal-window~citations.json @@ -1,8 +1,9 @@ { + "smallDeviceOnly": "", "closeBtnText": "Close", - "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993)Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
", + "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
", "citations": true, - "title": "Oldest Homo and Pliocene biogeography of the Malawi rift", + "title": "Cite this article", "origin": "Nature 365:833–836.", "hasAuthors": true, "authorLists": [ diff --git a/source/_patterns/01-molecules/components/modal~share.json b/source/_patterns/00-atoms/components/modal-window~share.json similarity index 100% rename from source/_patterns/01-molecules/components/modal~share.json rename to source/_patterns/00-atoms/components/modal-window~share.json diff --git a/source/_patterns/01-molecules/components/modal.mustache b/source/_patterns/01-molecules/components/modal.mustache deleted file mode 100644 index c96055671..000000000 --- a/source/_patterns/01-molecules/components/modal.mustache +++ /dev/null @@ -1,3 +0,0 @@ -Main template - -{{> atoms-modal-window }} \ No newline at end of file From 813f6d87a686603133bdfbdb77819717dcd194e5 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 3 Feb 2022 15:52:42 +0000 Subject: [PATCH 21/60] Refactor content for json file modal window --- .../_patterns/00-atoms/components/modal-window~citations.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/00-atoms/components/modal-window~citations.json b/source/_patterns/00-atoms/components/modal-window~citations.json index 0bb3ff29c..856919511 100644 --- a/source/_patterns/00-atoms/components/modal-window~citations.json +++ b/source/_patterns/00-atoms/components/modal-window~citations.json @@ -1,7 +1,7 @@ { "smallDeviceOnly": "", "closeBtnText": "Close", - "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
", + "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
", "citations": true, "title": "Cite this article", "origin": "Nature 365:833–836.", From 30d43a3398470edb7db007d346d79b2cb728f011 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 3 Feb 2022 15:53:12 +0000 Subject: [PATCH 22/60] Adding Clipboard JS for modal window share and citations --- assets/js/components/Modal.js | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/assets/js/components/Modal.js b/assets/js/components/Modal.js index 7bdefad84..bc2a87296 100644 --- a/assets/js/components/Modal.js +++ b/assets/js/components/Modal.js @@ -12,10 +12,11 @@ module.exports = class Modal { this.doc = doc; this.modalWindow = this.$elm.querySelector('.modal-container'); - this.smallDevice = this.$elm.querySelector('.small-device'); + this.clipboardButton = this.$elm.querySelector('.modal-content__clipboard-button'); this.$elm.querySelector('.modal-click').addEventListener('click', (event) => this.modalToggle(event)); this.$elm.querySelector('.modal-content__button').addEventListener('click', (event) => this.modalToggle(event)); this.window.addEventListener('click', (event) => this.windowOnClick(event)); + this.clipboardButton.addEventListener('click', () => this.clipboard()); this.window.addEventListener('resize', () => { this.modalSetup(); @@ -48,4 +49,12 @@ module.exports = class Modal { } } + clipboard() { + const text = this.$elm.querySelector('.modal-content__clipboard').textContent; + navigator.clipboard.writeText(text).then(() => { + this.clipboardButton.classList.add('button--success', 'button--fixed-width'); + this.clipboardButton.textContent = 'Copied!'; + }); + } + }; From 7811f62d5b4cb2605eb7495095763ad3ed9662f8 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 3 Feb 2022 15:53:31 +0000 Subject: [PATCH 23/60] Add button success --- assets/sass/patterns/atoms/buttons.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/assets/sass/patterns/atoms/buttons.scss b/assets/sass/patterns/atoms/buttons.scss index 8ef3d09a2..3c6ab07f3 100644 --- a/assets/sass/patterns/atoms/buttons.scss +++ b/assets/sass/patterns/atoms/buttons.scss @@ -106,3 +106,11 @@ cursor: not-allowed; } + +.button--success { + background-color: green; + + &:hover { + background-color: #2b7306; + } +} From 72a29744a954114a48531ac11985d700da48390e Mon Sep 17 00:00:00 2001 From: Dave Price Date: Fri, 4 Feb 2022 09:05:42 +0000 Subject: [PATCH 24/60] Button styling on modal windows --- assets/sass/patterns/atoms/buttons.scss | 22 ++++++++++++++++++- assets/sass/patterns/atoms/modal-window.scss | 11 ++++++---- .../00-atoms/components/modal-window.mustache | 2 +- 3 files changed, 29 insertions(+), 6 deletions(-) diff --git a/assets/sass/patterns/atoms/buttons.scss b/assets/sass/patterns/atoms/buttons.scss index 3c6ab07f3..a6164e624 100644 --- a/assets/sass/patterns/atoms/buttons.scss +++ b/assets/sass/patterns/atoms/buttons.scss @@ -26,6 +26,26 @@ text-transform: uppercase; } +.button-container { + display: block; + border: 1px solid black; + + .button { + @include margin(12, "bottom"); + width: 100%; + } + + @media only all and (min-width: #{get-rem-from-px($bkpt-site--medium)}em) { + grid-column: 1/3; + grid-row: 3; + + .button { + @include margin(12, "bottom"); + width: auto; + } + } +} + .button--default { @include colors($color-primary); @include padding(15 36 14); @@ -108,7 +128,7 @@ } .button--success { - background-color: green; + background-color: $color-success; &:hover { background-color: #2b7306; diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index dc46acb62..5729e734c 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -70,6 +70,10 @@ grid-column: 1/3; grid-row: 2; justify-self: initial; + + &.reference { + border: none; + } } .social-media-sharers { @@ -80,9 +84,8 @@ @include margin(36, "bottom"); grid-column: 1/3; grid-row: 3; -} -.button-container { - display: block; - grid-row: 3; + .button-container & { + @include margin(12, "bottom"); + } } diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache index d52c6814d..173bb060a 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -3,7 +3,7 @@
{{{title}}}
- {{closeBtnText}} X + {{closeBtnText}} Close Window {{#body}} {{{body}}} {{/body}} From 3f3c044f463253d36e462cef5defe9ce11893a5c Mon Sep 17 00:00:00 2001 From: Dave Price Date: Tue, 8 Feb 2022 15:23:06 +0000 Subject: [PATCH 25/60] Remove border --- assets/sass/patterns/atoms/buttons.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/assets/sass/patterns/atoms/buttons.scss b/assets/sass/patterns/atoms/buttons.scss index a6164e624..41b70243c 100644 --- a/assets/sass/patterns/atoms/buttons.scss +++ b/assets/sass/patterns/atoms/buttons.scss @@ -28,7 +28,6 @@ .button-container { display: block; - border: 1px solid black; .button { @include margin(12, "bottom"); From 686b3ac7e204120a54c945ad9bfa2117a315e3a6 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 10 Feb 2022 08:38:03 +0000 Subject: [PATCH 26/60] Refactor code and some fixes --- assets/sass/patterns/atoms/buttons.scss | 4 ++++ assets/sass/patterns/atoms/modal-window.scss | 10 +++++++--- .../00-atoms/components/modal-window.mustache | 2 +- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/assets/sass/patterns/atoms/buttons.scss b/assets/sass/patterns/atoms/buttons.scss index 41b70243c..e49fc6363 100644 --- a/assets/sass/patterns/atoms/buttons.scss +++ b/assets/sass/patterns/atoms/buttons.scss @@ -26,6 +26,10 @@ text-transform: uppercase; } +.button--fixed-width { + min-width: 212px; +} + .button-container { display: block; diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index 5729e734c..26cfa1c24 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -50,14 +50,18 @@ } .modal-content__button { - grid-column: 2/3; - grid-row: 1; - justify-self: end; line-height: 1.5; margin-right: 6px; text-decoration: none; } +.modal-content__close-button { + grid-column: 2/3; + grid-row: 1; + justify-self: end; + color: $color-text; +} + .modal-nojs { visibility: hidden; } diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache index 173bb060a..f6f5813bd 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -3,7 +3,7 @@
{{{title}}}
- {{closeBtnText}} Close Window + {{closeBtnText}} Close Window {{#body}} {{{body}}} {{/body}} From c716c0aff3fbbfd10cd4cf48a1b60ff01619b00a Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 10 Feb 2022 12:05:40 +0000 Subject: [PATCH 27/60] Adding socials to this PR from old PR --- .../patterns/atoms/social-media-sharers.scss | 30 +++++++++++++++++-- 1 file changed, 28 insertions(+), 2 deletions(-) diff --git a/assets/sass/patterns/atoms/social-media-sharers.scss b/assets/sass/patterns/atoms/social-media-sharers.scss index 58f086b20..cdaac1cd6 100644 --- a/assets/sass/patterns/atoms/social-media-sharers.scss +++ b/assets/sass/patterns/atoms/social-media-sharers.scss @@ -11,8 +11,14 @@ // Fill: solid .social-media-sharers { - flex-grow: 0; - flex-basis: 24px; + @include margin(0); + @include padding(0); + display: flex; + margin-bottom: 24px; + + li { + list-style: none; + } } .social-media-sharer, @@ -65,3 +71,23 @@ fill: #fff; stroke: none; } + +.facebook { + background: url("../../assets/img/icons/facebook.svg") no-repeat 0 0; + text-indent: -5000px; +} + +.twitter { + background: url("../../assets/img/icons/twitter.svg") no-repeat 0 0; + text-indent: -5000px; +} + +.linkedin { + background: url("../../assets/img/icons/linkedin.svg") no-repeat 0 0; + text-indent: -5000px; +} + +.reddit { + background: url("../../assets/img/icons/reddit.svg") no-repeat 0 0; + text-indent: -5000px; +} From e21ab9716ca4caaabe853ee5b90b01a9532bdacb Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 10 Feb 2022 12:20:37 +0000 Subject: [PATCH 28/60] Remove Close text for modal share --- source/_patterns/00-atoms/components/modal-window~share.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/00-atoms/components/modal-window~share.json b/source/_patterns/00-atoms/components/modal-window~share.json index 793c923ec..9eb4e54b6 100644 --- a/source/_patterns/00-atoms/components/modal-window~share.json +++ b/source/_patterns/00-atoms/components/modal-window~share.json @@ -1,6 +1,6 @@ { "smallDeviceOnly": "small-device", "title": "Share this article", - "closeBtnText": "Close", + "closeBtnText": "", "body": "
https://doi.org/10.7554/eLife.09560
" } \ No newline at end of file From f375e882c4b1e3172bc5de7108ef4b5b30833815 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Fri, 11 Feb 2022 11:32:20 +0000 Subject: [PATCH 29/60] Refactor styling on modal --- assets/sass/patterns/atoms/buttons.scss | 6 ++-- assets/sass/patterns/atoms/modal-window.scss | 30 +++++++++++++++---- .../00-atoms/components/modal-window.mustache | 2 +- .../00-atoms/components/modal-window.yaml | 2 ++ .../components/modal-window~citations.json | 1 + .../components/modal-window~share.json | 4 +-- 6 files changed, 35 insertions(+), 10 deletions(-) diff --git a/assets/sass/patterns/atoms/buttons.scss b/assets/sass/patterns/atoms/buttons.scss index e49fc6363..a144fd538 100644 --- a/assets/sass/patterns/atoms/buttons.scss +++ b/assets/sass/patterns/atoms/buttons.scss @@ -27,11 +27,11 @@ } .button--fixed-width { - min-width: 212px; + min-width: 189px; } .button-container { - display: block; + grid-column: 1/3; .button { @include margin(12, "bottom"); @@ -132,8 +132,10 @@ .button--success { background-color: $color-success; + border: 1px solid $color-success; &:hover { background-color: #2b7306; + border: 1px solid #2b7306; } } diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index 26cfa1c24..5f358785e 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -13,9 +13,19 @@ box-shadow: 0 0 20px rgba(0, 0, 0, 0.22); border-radius: 3px; display: grid; - margin: 24px; + margin: 0; padding: 36px 24px; + @media only all and (min-width: #{get-rem-from-px($bkpt-site--small)}em) { + margin: 24px; + padding: 36px; + } + + @media only all and (min-width: #{get-rem-from-px($bkpt-site--medium + 48)}em) { + margin: 24px auto; + max-width: 730px; + } + h6 { @include font-size-and-vertical-height($font-size-h6-in-px); grid-column: 1/3; @@ -37,9 +47,9 @@ font-family: $font-secondary; .doi { + @include margin(12, "top"); + @include margin(36, "bottom"); display: flex; - margin-top: 12px; - margin-bottom: 36px; } } } @@ -50,16 +60,23 @@ } .modal-content__button { + @include margin(6, "right"); + padding: 15px 24px 14px; line-height: 1.5; - margin-right: 6px; text-decoration: none; + + .button-container & { + @include margin(24, "right"); + } } .modal-content__close-button { + color: $color-text; + font-family: $font-secondary; + font-weight: bold; grid-column: 2/3; grid-row: 1; justify-self: end; - color: $color-text; } .modal-nojs { @@ -74,9 +91,12 @@ grid-column: 1/3; grid-row: 2; justify-self: initial; + word-break: break-word; &.reference { border: none; + margin-bottom: 0; + padding: 0; } } diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache index f6f5813bd..6b897d7f2 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -1,4 +1,4 @@ -
+
Open modal window
diff --git a/source/_patterns/00-atoms/components/modal-window.yaml b/source/_patterns/00-atoms/components/modal-window.yaml index f46bbb1f2..24a3a9d52 100644 --- a/source/_patterns/00-atoms/components/modal-window.yaml +++ b/source/_patterns/00-atoms/components/modal-window.yaml @@ -3,6 +3,8 @@ type: object properties: smallDeviceOnly: type: string + modalType: + type: string title: type: string minLength: 1 diff --git a/source/_patterns/00-atoms/components/modal-window~citations.json b/source/_patterns/00-atoms/components/modal-window~citations.json index 856919511..8312a0532 100644 --- a/source/_patterns/00-atoms/components/modal-window~citations.json +++ b/source/_patterns/00-atoms/components/modal-window~citations.json @@ -1,5 +1,6 @@ { "smallDeviceOnly": "", + "modalType": "citations", "closeBtnText": "Close", "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
", "citations": true, diff --git a/source/_patterns/00-atoms/components/modal-window~share.json b/source/_patterns/00-atoms/components/modal-window~share.json index 9eb4e54b6..179cb5481 100644 --- a/source/_patterns/00-atoms/components/modal-window~share.json +++ b/source/_patterns/00-atoms/components/modal-window~share.json @@ -1,6 +1,6 @@ { "smallDeviceOnly": "small-device", "title": "Share this article", - "closeBtnText": "", - "body": "
https://doi.org/10.7554/eLife.09560
" + "closeBtnText": " ", + "body": "
https://doi.org/10.7554/eLife.09560
" } \ No newline at end of file From 7ecfb1d37e50f8beb40e02dccc2ae6d32ed524c6 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Mon, 14 Feb 2022 12:25:10 +0000 Subject: [PATCH 30/60] Refactor modal window css and template --- assets/img/icons/tick-white.svg | 10 ++++++++++ assets/sass/patterns/atoms/buttons.scss | 5 ++++- assets/sass/patterns/atoms/modal-window.scss | 13 +++++++++---- .../00-atoms/components/modal-window.mustache | 2 +- 4 files changed, 24 insertions(+), 6 deletions(-) create mode 100644 assets/img/icons/tick-white.svg diff --git a/assets/img/icons/tick-white.svg b/assets/img/icons/tick-white.svg new file mode 100644 index 000000000..8bd3fe120 --- /dev/null +++ b/assets/img/icons/tick-white.svg @@ -0,0 +1,10 @@ + + + icons/tick-white + + + + + + + \ No newline at end of file diff --git a/assets/sass/patterns/atoms/buttons.scss b/assets/sass/patterns/atoms/buttons.scss index a144fd538..bbb1c2bfb 100644 --- a/assets/sass/patterns/atoms/buttons.scss +++ b/assets/sass/patterns/atoms/buttons.scss @@ -31,6 +31,8 @@ } .button-container { + display: flex; + flex-direction: column; grid-column: 1/3; .button { @@ -39,6 +41,7 @@ } @media only all and (min-width: #{get-rem-from-px($bkpt-site--medium)}em) { + display: initial; grid-column: 1/3; grid-row: 3; @@ -131,7 +134,7 @@ } .button--success { - background-color: $color-success; + background: $color-success; border: 1px solid $color-success; &:hover { diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index 5f358785e..98ca81d3c 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -10,8 +10,8 @@ .modal-content { background-color: #fff; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.22); border-radius: 3px; + box-shadow: 0 0 20px rgba(0, 0, 0, 0.22); display: grid; margin: 0; padding: 36px 24px; @@ -61,8 +61,8 @@ .modal-content__button { @include margin(6, "right"); - padding: 15px 24px 14px; line-height: 1.5; + padding: 15px 24px 14px; text-decoration: none; .button-container & { @@ -71,6 +71,8 @@ } .modal-content__close-button { + @include padding(0 25 0 0); + background: url(../img/icons/close.svg) right 4px no-repeat; color: $color-text; font-family: $font-secondary; font-weight: bold; @@ -94,8 +96,8 @@ word-break: break-word; &.reference { + @include margin(0, "bottom"); border: none; - margin-bottom: 0; padding: 0; } } @@ -106,10 +108,13 @@ .modal-content__clipboard-button { @include margin(36, "bottom"); + display: block; grid-column: 1/3; grid-row: 3; + margin: 0 auto 36px; .button-container & { - @include margin(12, "bottom"); + @include margin(0 24 12 0); + display: initial; } } diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache index 6b897d7f2..a97c2442c 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -3,7 +3,7 @@
{{{title}}}
- {{closeBtnText}} Close Window + {{closeBtnText}} {{#body}} {{{body}}} {{/body}} From 123ff6a447cbf3ec5036b2c95337ab9ff26b535c Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 17 Feb 2022 13:31:17 +0000 Subject: [PATCH 31/60] Refactor Modal Windows --- source/_patterns/00-atoms/components/modal-window.json | 2 +- source/_patterns/00-atoms/components/modal-window.mustache | 2 +- source/_patterns/00-atoms/components/modal-window.yaml | 6 ++---- 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/source/_patterns/00-atoms/components/modal-window.json b/source/_patterns/00-atoms/components/modal-window.json index c4ba79523..f0eb441cc 100644 --- a/source/_patterns/00-atoms/components/modal-window.json +++ b/source/_patterns/00-atoms/components/modal-window.json @@ -1,5 +1,5 @@ { - "smallDeviceOnly": "small-device", + "smallDeviceOnly": true, "title": "This is a title", "closeBtnText": "Close", "body": "This is some body text" diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache index a97c2442c..946166a8c 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -1,4 +1,4 @@ -
+
Open modal window
diff --git a/source/_patterns/00-atoms/components/modal-window.yaml b/source/_patterns/00-atoms/components/modal-window.yaml index 24a3a9d52..b0b217130 100644 --- a/source/_patterns/00-atoms/components/modal-window.yaml +++ b/source/_patterns/00-atoms/components/modal-window.yaml @@ -2,9 +2,7 @@ $schema: http://json-schema.org/draft-04/schema# type: object properties: smallDeviceOnly: - type: string - modalType: - type: string + type: boolean title: type: string minLength: 1 @@ -15,5 +13,5 @@ properties: type: string minLength: 1 required: - - closeBtnText + - title - body From baf406b90628c00f2f1a31e11790aa21477abbde Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 17 Feb 2022 13:36:01 +0000 Subject: [PATCH 32/60] Refactor json files for Modal Window --- .../_patterns/00-atoms/components/modal-window~citations.json | 2 +- source/_patterns/00-atoms/components/modal-window~share.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/source/_patterns/00-atoms/components/modal-window~citations.json b/source/_patterns/00-atoms/components/modal-window~citations.json index 8312a0532..262a836ee 100644 --- a/source/_patterns/00-atoms/components/modal-window~citations.json +++ b/source/_patterns/00-atoms/components/modal-window~citations.json @@ -1,5 +1,5 @@ { - "smallDeviceOnly": "", + "smallDeviceOnly": false, "modalType": "citations", "closeBtnText": "Close", "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
", diff --git a/source/_patterns/00-atoms/components/modal-window~share.json b/source/_patterns/00-atoms/components/modal-window~share.json index 179cb5481..21aeaebda 100644 --- a/source/_patterns/00-atoms/components/modal-window~share.json +++ b/source/_patterns/00-atoms/components/modal-window~share.json @@ -1,5 +1,5 @@ { - "smallDeviceOnly": "small-device", + "smallDeviceOnly": true, "title": "Share this article", "closeBtnText": " ", "body": "
https://doi.org/10.7554/eLife.09560
" From e7b4a52ccacd2b879b735a96108dd8970492505a Mon Sep 17 00:00:00 2001 From: Dave Price Date: Tue, 22 Feb 2022 09:26:29 +0000 Subject: [PATCH 33/60] Add button collection to modal citations --- assets/sass/patterns/atoms/buttons.scss | 22 -------------- assets/sass/patterns/atoms/modal-window.scss | 29 ++++++++++++++++++- .../00-atoms/components/modal-window.mustache | 8 +++-- .../components/modal-window~citations.json | 21 ++++++++++++-- 4 files changed, 52 insertions(+), 28 deletions(-) diff --git a/assets/sass/patterns/atoms/buttons.scss b/assets/sass/patterns/atoms/buttons.scss index bbb1c2bfb..34a4f5dfe 100644 --- a/assets/sass/patterns/atoms/buttons.scss +++ b/assets/sass/patterns/atoms/buttons.scss @@ -30,28 +30,6 @@ min-width: 189px; } -.button-container { - display: flex; - flex-direction: column; - grid-column: 1/3; - - .button { - @include margin(12, "bottom"); - width: 100%; - } - - @media only all and (min-width: #{get-rem-from-px($bkpt-site--medium)}em) { - display: initial; - grid-column: 1/3; - grid-row: 3; - - .button { - @include margin(12, "bottom"); - width: auto; - } - } -} - .button--default { @include colors($color-primary); @include padding(15 36 14); diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index 98ca81d3c..0e07f60b1 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -52,6 +52,34 @@ display: flex; } } + + .button-collection { + display: unset; + flex-direction: column; + grid-column: 1/3; + + .button-collection__item { + float: none; + } + + .button { + @include margin(12, "bottom"); + width: 100%; + } + + @media only all and (min-width: #{get-rem-from-px($bkpt-site--medium)}em) { + grid-column: 1/3; + + .button-collection__item { + float: left; + } + + .button { + @include margin(12, "bottom"); + width: auto; + } + } + } } .modal-content__show { @@ -60,7 +88,6 @@ } .modal-content__button { - @include margin(6, "right"); line-height: 1.5; padding: 15px 24px 14px; text-decoration: none; diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache index 946166a8c..b7db701c8 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -4,9 +4,11 @@
{{{title}}}
{{closeBtnText}} - {{#body}} - {{{body}}} - {{/body}} +
+ {{#body}} + {{{body}}} + {{/body}} +
diff --git a/source/_patterns/00-atoms/components/modal-window~citations.json b/source/_patterns/00-atoms/components/modal-window~citations.json index 262a836ee..12fa2c541 100644 --- a/source/_patterns/00-atoms/components/modal-window~citations.json +++ b/source/_patterns/00-atoms/components/modal-window~citations.json @@ -2,7 +2,7 @@ "smallDeviceOnly": false, "modalType": "citations", "closeBtnText": "Close", - "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
", + "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
  1. Copy to Clipboard
  2. Download Bibtex
  3. Download .RIS
", "citations": true, "title": "Cite this article", "origin": "Nature 365:833–836.", @@ -118,5 +118,22 @@ "doi": "10.1038/365833a0" }, "doiWithoutLink": true, - "hasAbstracts": false + "hasAbstracts": false, + "buttons": [ + { + "text": "Copy to clipboard", + "classes": "button--default modal-content__button modal-content__clipboard-button", + "path": "#" + }, + { + "text": "Download Bibtex", + "classes": "button button--secondary modal-content__button", + "path": "#" + }, + { + "text": "Download .RIS", + "classes": "button button--secondary modal-content__button", + "path": "#" + } + ] } \ No newline at end of file From 34e1cf512ee20ff84dc1201d93fad774d016c0c9 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Tue, 22 Feb 2022 13:32:20 +0000 Subject: [PATCH 34/60] Refactor colours to variables on button--secondary --- assets/sass/patterns/atoms/buttons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/assets/sass/patterns/atoms/buttons.scss b/assets/sass/patterns/atoms/buttons.scss index 34a4f5dfe..a95e08106 100644 --- a/assets/sass/patterns/atoms/buttons.scss +++ b/assets/sass/patterns/atoms/buttons.scss @@ -40,11 +40,11 @@ } .button--secondary { - @include colors($color-text-ui-background-secondary, $color-text-dividers, #212121); + @include colors($color-text-ui-background-secondary, $color-text-dividers, $color-text); @include padding(15 36 14); &:hover { - @include colors(#e0e0e0, $color-text-dividers, #212121); + @include colors(#e0e0e0, $color-text-dividers, $color-text); } } From 4aebeb096e05da3e982f619f5131546e435a23ec Mon Sep 17 00:00:00 2001 From: nlisgo Date: Tue, 22 Feb 2022 13:32:54 +0000 Subject: [PATCH 35/60] Remove redundant properties --- .../components/modal-window~citations.json | 137 +----------------- 1 file changed, 2 insertions(+), 135 deletions(-) diff --git a/source/_patterns/00-atoms/components/modal-window~citations.json b/source/_patterns/00-atoms/components/modal-window~citations.json index 12fa2c541..506f3dfa5 100644 --- a/source/_patterns/00-atoms/components/modal-window~citations.json +++ b/source/_patterns/00-atoms/components/modal-window~citations.json @@ -1,139 +1,6 @@ { "smallDeviceOnly": false, - "modalType": "citations", "closeBtnText": "Close", "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
  1. Copy to Clipboard
  2. Download Bibtex
  3. Download .RIS
", - "citations": true, - "title": "Cite this article", - "origin": "Nature 365:833–836.", - "hasAuthors": true, - "authorLists": [ - { - "authors": [ - { - "name": "Schrenk F", - "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" - }, - { - "name": "Bromage TG", - "url": false - }, - { - "name": "Betzler CG", - "url": false - }, - { - "name": "Ring U", - "url": false - }, - { - "name": "Juwayeyi YM", - "url": false - }, - { - "name": "Schrenk F", - "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" - }, - { - "name": "Bromage TG", - "url": false - }, - { - "name": "Betzler CG", - "url": false - }, - { - "name": "Ring U", - "url": false - }, - { - "name": "Juwayeyi YM", - "url": false - }, - { - "name": "Schrenk F", - "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" - }, - { - "name": "Bromage TG", - "url": false - }, - { - "name": "Betzler CG", - "url": false - }, - { - "name": "Ring U", - "url": false - }, - { - "name": "Juwayeyi YM", - "url": false - }, - { - "name": "Schrenk F", - "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" - }, - { - "name": "Bromage TG", - "url": false - }, - { - "name": "Betzler CG", - "url": false - }, - { - "name": "Ring U", - "url": false - }, - { - "name": "Juwayeyi YM", - "url": false - }, - { - "name": "Schrenk F", - "url": "https://scholar.google.com/scholar?q=%22author:Schrenk%20F%22" - }, - { - "name": "Bromage TG", - "url": false - }, - { - "name": "Betzler CG", - "url": false - }, - { - "name": "Ring U", - "url": false - }, - { - "name": "Juwayeyi YM", - "url": false - } - ], - "suffix": "(1993)" - } - ], - "doi": { - "doi": "10.1038/365833a0" - }, - "doiWithoutLink": true, - "hasAbstracts": false, - "buttons": [ - { - "text": "Copy to clipboard", - "classes": "button--default modal-content__button modal-content__clipboard-button", - "path": "#" - }, - { - "text": "Download Bibtex", - "classes": "button button--secondary modal-content__button", - "path": "#" - }, - { - "text": "Download .RIS", - "classes": "button button--secondary modal-content__button", - "path": "#" - } - ] -} \ No newline at end of file + "title": "Cite this article" +} From a30d6d10fed619b001989d31ab5936d793541542 Mon Sep 17 00:00:00 2001 From: nlisgo Date: Tue, 22 Feb 2022 13:33:05 +0000 Subject: [PATCH 36/60] Add new button-collection variant --- .../button-collection~citation-modal.json | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) create mode 100644 source/_patterns/01-molecules/components/button-collection~citation-modal.json diff --git a/source/_patterns/01-molecules/components/button-collection~citation-modal.json b/source/_patterns/01-molecules/components/button-collection~citation-modal.json new file mode 100644 index 000000000..469a632b9 --- /dev/null +++ b/source/_patterns/01-molecules/components/button-collection~citation-modal.json @@ -0,0 +1,19 @@ +{ + "buttons": [ + { + "text": "Copy to clipboard", + "classes": "button--default", + "path": "#" + }, + { + "text": "Download Bibtex", + "classes": "button button--secondary", + "path": "#" + }, + { + "text": "Download .RIS", + "classes": "button button--secondary", + "path": "#" + } + ] +} From bdfcae42041db26dea1d6f94cf8cfb125f728889 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Tue, 22 Feb 2022 13:34:52 +0000 Subject: [PATCH 37/60] refactor hover state for button--secondary --- assets/sass/patterns/atoms/buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/sass/patterns/atoms/buttons.scss b/assets/sass/patterns/atoms/buttons.scss index a95e08106..e9df9041e 100644 --- a/assets/sass/patterns/atoms/buttons.scss +++ b/assets/sass/patterns/atoms/buttons.scss @@ -44,7 +44,7 @@ @include padding(15 36 14); &:hover { - @include colors(#e0e0e0, $color-text-dividers, $color-text); + @include colors($color-text-dividers, $color-text-dividers, $color-text); } } From b3012d1e57e9649e06fcb9a19c36c33f2b9fc53a Mon Sep 17 00:00:00 2001 From: nlisgo Date: Tue, 22 Feb 2022 13:36:48 +0000 Subject: [PATCH 38/60] Add button secondary variant --- source/_patterns/00-atoms/components/button~secondary.json | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 source/_patterns/00-atoms/components/button~secondary.json diff --git a/source/_patterns/00-atoms/components/button~secondary.json b/source/_patterns/00-atoms/components/button~secondary.json new file mode 100644 index 000000000..b1d256412 --- /dev/null +++ b/source/_patterns/00-atoms/components/button~secondary.json @@ -0,0 +1,6 @@ +{ + "text": "Button secondary", + "classes": "button--default button--secondary", + "type": "button", + "name": "button-name" +} From 28604a72fe0a15657ce99d344b4b36e4455f0fb1 Mon Sep 17 00:00:00 2001 From: nlisgo Date: Tue, 22 Feb 2022 13:43:16 +0000 Subject: [PATCH 39/60] Adjust classes --- .../components/button-collection~citation-modal.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/_patterns/01-molecules/components/button-collection~citation-modal.json b/source/_patterns/01-molecules/components/button-collection~citation-modal.json index 469a632b9..4e307425b 100644 --- a/source/_patterns/01-molecules/components/button-collection~citation-modal.json +++ b/source/_patterns/01-molecules/components/button-collection~citation-modal.json @@ -7,12 +7,12 @@ }, { "text": "Download Bibtex", - "classes": "button button--secondary", + "classes": "button--default button--secondary", "path": "#" }, { "text": "Download .RIS", - "classes": "button button--secondary", + "classes": "button--default button--secondary", "path": "#" } ] From d0b6ecaf5d54e749edb0876a674a8df7fb5594cc Mon Sep 17 00:00:00 2001 From: nlisgo Date: Tue, 22 Feb 2022 13:43:24 +0000 Subject: [PATCH 40/60] Remove some styles --- assets/sass/patterns/atoms/modal-window.scss | 23 -------------------- 1 file changed, 23 deletions(-) diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index 0e07f60b1..b1a05d2d5 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -87,16 +87,6 @@ visibility: visible; } -.modal-content__button { - line-height: 1.5; - padding: 15px 24px 14px; - text-decoration: none; - - .button-container & { - @include margin(24, "right"); - } -} - .modal-content__close-button { @include padding(0 25 0 0); background: url(../img/icons/close.svg) right 4px no-repeat; @@ -132,16 +122,3 @@ .social-media-sharers { display: flex; } - -.modal-content__clipboard-button { - @include margin(36, "bottom"); - display: block; - grid-column: 1/3; - grid-row: 3; - margin: 0 auto 36px; - - .button-container & { - @include margin(0 24 12 0); - display: initial; - } -} From 6fdf7da6e23ce0aa5a31607f1047958fc89e0e6c Mon Sep 17 00:00:00 2001 From: nlisgo Date: Tue, 22 Feb 2022 13:57:29 +0000 Subject: [PATCH 41/60] Add condition --- assets/js/components/Modal.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/assets/js/components/Modal.js b/assets/js/components/Modal.js index bc2a87296..d96e87cbc 100644 --- a/assets/js/components/Modal.js +++ b/assets/js/components/Modal.js @@ -12,11 +12,14 @@ module.exports = class Modal { this.doc = doc; this.modalWindow = this.$elm.querySelector('.modal-container'); - this.clipboardButton = this.$elm.querySelector('.modal-content__clipboard-button'); this.$elm.querySelector('.modal-click').addEventListener('click', (event) => this.modalToggle(event)); this.$elm.querySelector('.modal-content__button').addEventListener('click', (event) => this.modalToggle(event)); this.window.addEventListener('click', (event) => this.windowOnClick(event)); - this.clipboardButton.addEventListener('click', () => this.clipboard()); + + this.clipboardButton = this.$elm.querySelector('.modal-content__clipboard-button'); + if (this.clipboardButton) { + this.clipboardButton.addEventListener('click', () => this.clipboard()); + } this.window.addEventListener('resize', () => { this.modalSetup(); From 6eaebdba3f845492aabf8e2fe37ab547557968d5 Mon Sep 17 00:00:00 2001 From: nlisgo Date: Tue, 22 Feb 2022 13:57:39 +0000 Subject: [PATCH 42/60] Clean data --- .../_patterns/00-atoms/components/modal-window~citations.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/00-atoms/components/modal-window~citations.json b/source/_patterns/00-atoms/components/modal-window~citations.json index 506f3dfa5..b63f12071 100644 --- a/source/_patterns/00-atoms/components/modal-window~citations.json +++ b/source/_patterns/00-atoms/components/modal-window~citations.json @@ -1,6 +1,6 @@ { "smallDeviceOnly": false, "closeBtnText": "Close", - "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
  1. Copy to Clipboard
  2. Download Bibtex
  3. Download .RIS
", + "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
  1. Copy to clipboard
  2. Download Bibtex
  3. Download .RIS
", "title": "Cite this article" } From 2ddbc17899083ba751a8e4c0543ad8b08df9b264 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Tue, 22 Feb 2022 14:10:08 +0000 Subject: [PATCH 43/60] Add styling for refactored buttons for citations modal window --- assets/sass/patterns/atoms/modal-window.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index b1a05d2d5..348fa686c 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -60,6 +60,10 @@ .button-collection__item { float: none; + + &:last-child { + margin-right: 0; + } } .button { @@ -76,6 +80,9 @@ .button { @include margin(12, "bottom"); + line-height: 1.5; + padding: 15px 24px 14px; + text-decoration: none; width: auto; } } From e03fb9efd817da744a7ea223597064e2e9bdb084 Mon Sep 17 00:00:00 2001 From: nlisgo Date: Tue, 22 Feb 2022 15:10:28 +0000 Subject: [PATCH 44/60] Introduce button clipboard and button collection to modal --- assets/js/components/ButtonClipboard.js | 18 ++++++++++++++ assets/js/components/Modal.js | 13 ---------- assets/js/main.js | 1 + .../{atoms => molecules}/modal-window.scss | 0 .../00-atoms/components/button.mustache | 4 ++-- .../_patterns/00-atoms/components/button.yaml | 3 +++ .../00-atoms/components/button~clipboard.json | 7 ++++++ .../components/modal-window~share.json | 6 ----- .../components/modal-window.json | 0 .../components/modal-window.mustache | 5 +++- .../components/modal-window.yaml | 2 ++ .../components/modal-window~citations.json | 24 +++++++++++++++++-- .../components/modal-window~share.json | 16 +++++++++++++ 13 files changed, 75 insertions(+), 24 deletions(-) create mode 100644 assets/js/components/ButtonClipboard.js rename assets/sass/patterns/{atoms => molecules}/modal-window.scss (100%) create mode 100644 source/_patterns/00-atoms/components/button~clipboard.json delete mode 100644 source/_patterns/00-atoms/components/modal-window~share.json rename source/_patterns/{00-atoms => 01-molecules}/components/modal-window.json (100%) rename source/_patterns/{00-atoms => 01-molecules}/components/modal-window.mustache (76%) rename source/_patterns/{00-atoms => 01-molecules}/components/modal-window.yaml (83%) rename source/_patterns/{00-atoms => 01-molecules}/components/modal-window~citations.json (80%) create mode 100644 source/_patterns/01-molecules/components/modal-window~share.json diff --git a/assets/js/components/ButtonClipboard.js b/assets/js/components/ButtonClipboard.js new file mode 100644 index 000000000..a926b0b3c --- /dev/null +++ b/assets/js/components/ButtonClipboard.js @@ -0,0 +1,18 @@ +'use strict'; + +module.exports = class Modal { + constructor($elm) { + if (!$elm) { + return; + } + + this.$elm = $elm; + + this.$elm.addEventListener('click', () => { + navigator.clipboard.writeText(this.$elm.getAttribute('data-clipboard')).then(() => { + this.$elm.classList.add('button--success', 'button--fixed-width'); + this.$elm.textContent = 'Copied!'; + }); + }); + } +}; diff --git a/assets/js/components/Modal.js b/assets/js/components/Modal.js index d96e87cbc..b63e711ed 100644 --- a/assets/js/components/Modal.js +++ b/assets/js/components/Modal.js @@ -16,11 +16,6 @@ module.exports = class Modal { this.$elm.querySelector('.modal-content__button').addEventListener('click', (event) => this.modalToggle(event)); this.window.addEventListener('click', (event) => this.windowOnClick(event)); - this.clipboardButton = this.$elm.querySelector('.modal-content__clipboard-button'); - if (this.clipboardButton) { - this.clipboardButton.addEventListener('click', () => this.clipboard()); - } - this.window.addEventListener('resize', () => { this.modalSetup(); }); @@ -52,12 +47,4 @@ module.exports = class Modal { } } - clipboard() { - const text = this.$elm.querySelector('.modal-content__clipboard').textContent; - navigator.clipboard.writeText(text).then(() => { - this.clipboardButton.classList.add('button--success', 'button--fixed-width'); - this.clipboardButton.textContent = 'Copied!'; - }); - } - }; diff --git a/assets/js/main.js b/assets/js/main.js index dbd7c30a1..8deb7f9ce 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -14,6 +14,7 @@ Components.ArticleSection = require('./components/ArticleSection'); Components.AssetNavigation = require('./components/AssetNavigation'); Components.AssetViewer = require('./components/AssetViewer'); Components.AudioPlayer = require('./components/AudioPlayer'); +Components.ButtonClipboard = require('./components/ButtonClipboard'); Components.CallToAction = require('./components/CallToAction'); Components.CarouselItem = require('./components/CarouselItem'); Components.Carousel = require('./components/Carousel'); diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/molecules/modal-window.scss similarity index 100% rename from assets/sass/patterns/atoms/modal-window.scss rename to assets/sass/patterns/molecules/modal-window.scss diff --git a/source/_patterns/00-atoms/components/button.mustache b/source/_patterns/00-atoms/components/button.mustache index 8c0baa583..ef6da61db 100644 --- a/source/_patterns/00-atoms/components/button.mustache +++ b/source/_patterns/00-atoms/components/button.mustache @@ -1,6 +1,6 @@ {{#type}} - + {{/type}} {{^type}} - {{{text}}} + {{{text}}} {{/type}} diff --git a/source/_patterns/00-atoms/components/button.yaml b/source/_patterns/00-atoms/components/button.yaml index 6d3737d50..125da3859 100644 --- a/source/_patterns/00-atoms/components/button.yaml +++ b/source/_patterns/00-atoms/components/button.yaml @@ -7,6 +7,9 @@ allOf: minLength: 1 classes: type: string + clipboard: + type: string + minLength: 1 required: - text - oneOf: diff --git a/source/_patterns/00-atoms/components/button~clipboard.json b/source/_patterns/00-atoms/components/button~clipboard.json new file mode 100644 index 000000000..d36943647 --- /dev/null +++ b/source/_patterns/00-atoms/components/button~clipboard.json @@ -0,0 +1,7 @@ +{ + "text": "Button clipboard", + "classes": "button--default", + "type": "submit", + "id": "button-id", + "clipboard": "Text to store in clipboard" +} diff --git a/source/_patterns/00-atoms/components/modal-window~share.json b/source/_patterns/00-atoms/components/modal-window~share.json deleted file mode 100644 index 21aeaebda..000000000 --- a/source/_patterns/00-atoms/components/modal-window~share.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "smallDeviceOnly": true, - "title": "Share this article", - "closeBtnText": " ", - "body": "
https://doi.org/10.7554/eLife.09560
" -} \ No newline at end of file diff --git a/source/_patterns/00-atoms/components/modal-window.json b/source/_patterns/01-molecules/components/modal-window.json similarity index 100% rename from source/_patterns/00-atoms/components/modal-window.json rename to source/_patterns/01-molecules/components/modal-window.json diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/01-molecules/components/modal-window.mustache similarity index 76% rename from source/_patterns/00-atoms/components/modal-window.mustache rename to source/_patterns/01-molecules/components/modal-window.mustache index b7db701c8..0ca01ecfd 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/01-molecules/components/modal-window.mustache @@ -4,10 +4,13 @@
{{{title}}}
{{closeBtnText}} -
+
{{#body}} {{{body}}} {{/body}} + {{#buttonCollection}} + {{> molecules-button-collection }} + {{/buttonCollection}}
diff --git a/source/_patterns/00-atoms/components/modal-window.yaml b/source/_patterns/01-molecules/components/modal-window.yaml similarity index 83% rename from source/_patterns/00-atoms/components/modal-window.yaml rename to source/_patterns/01-molecules/components/modal-window.yaml index b0b217130..7f0b8ec8b 100644 --- a/source/_patterns/00-atoms/components/modal-window.yaml +++ b/source/_patterns/01-molecules/components/modal-window.yaml @@ -12,6 +12,8 @@ properties: body: type: string minLength: 1 + buttonCollection: + $ref: button-collection.yaml required: - title - body diff --git a/source/_patterns/00-atoms/components/modal-window~citations.json b/source/_patterns/01-molecules/components/modal-window~citations.json similarity index 80% rename from source/_patterns/00-atoms/components/modal-window~citations.json rename to source/_patterns/01-molecules/components/modal-window~citations.json index b63f12071..ec17410c8 100644 --- a/source/_patterns/00-atoms/components/modal-window~citations.json +++ b/source/_patterns/01-molecules/components/modal-window~citations.json @@ -1,6 +1,26 @@ { "smallDeviceOnly": false, "closeBtnText": "Close", - "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
  1. Copy to clipboard
  2. Download Bibtex
  3. Download .RIS
", - "title": "Cite this article" + "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
", + "title": "Cite this article", + "buttonCollection": { + "buttons": [ + { + "text": "Copy to clipboard", + "classes": "button--default", + "path": "#", + "clipboard": "Clipboard text" + }, + { + "text": "Download Bibtex", + "classes": "button--default button--secondary", + "path": "#" + }, + { + "text": "Download .RIS", + "classes": "button--default button--secondary", + "path": "#" + } + ] + } } diff --git a/source/_patterns/01-molecules/components/modal-window~share.json b/source/_patterns/01-molecules/components/modal-window~share.json new file mode 100644 index 000000000..7cc30c46a --- /dev/null +++ b/source/_patterns/01-molecules/components/modal-window~share.json @@ -0,0 +1,16 @@ +{ + "smallDeviceOnly": true, + "title": "Share this article", + "closeBtnText": " ", + "body": "
https://doi.org/10.7554/eLife.09560
", + "buttonCollection": { + "buttons": [ + { + "text": "Copy to clipboard", + "classes": "button--default", + "path": "#", + "clipboard": "Clipboard text" + } + ] + } +} From 5d2212cfb21628a2a366bf7312a6583fb665e36c Mon Sep 17 00:00:00 2001 From: nlisgo Date: Tue, 22 Feb 2022 16:07:49 +0000 Subject: [PATCH 45/60] Allow a trigger id to be set for the modal --- assets/js/components/Modal.js | 24 +++++++++--------- .../{molecules => atoms}/modal-window.scss | 0 .../components/modal-window.json | 1 - .../components/modal-window.mustache | 9 +++---- .../components/modal-window.yaml | 7 +++--- .../components/modal-window~citations.json | 25 ++----------------- .../components/modal-window~share.json | 5 ++++ .../components/modal-window~share.json | 16 ------------ 8 files changed, 26 insertions(+), 61 deletions(-) rename assets/sass/patterns/{molecules => atoms}/modal-window.scss (100%) rename source/_patterns/{01-molecules => 00-atoms}/components/modal-window.json (78%) rename source/_patterns/{01-molecules => 00-atoms}/components/modal-window.mustache (54%) rename source/_patterns/{01-molecules => 00-atoms}/components/modal-window.yaml (72%) rename source/_patterns/{01-molecules => 00-atoms}/components/modal-window~citations.json (79%) create mode 100644 source/_patterns/00-atoms/components/modal-window~share.json delete mode 100644 source/_patterns/01-molecules/components/modal-window~share.json diff --git a/assets/js/components/Modal.js b/assets/js/components/Modal.js index b63e711ed..7075e4c8a 100644 --- a/assets/js/components/Modal.js +++ b/assets/js/components/Modal.js @@ -11,13 +11,22 @@ module.exports = class Modal { this.window = _window; this.doc = doc; + const $triggerId = this.$elm.getAttribute('data-trigger-id'); + let $trigger; + + if (!$triggerId || !this.doc.getElementById($triggerId)) { + $trigger = this.$elm.querySelector('.modal-click'); + } else { + $trigger = this.doc.getElementById($triggerId); + } + this.modalWindow = this.$elm.querySelector('.modal-container'); - this.$elm.querySelector('.modal-click').addEventListener('click', (event) => this.modalToggle(event)); + $trigger.addEventListener('click', (event) => this.modalToggle(event)); this.$elm.querySelector('.modal-content__button').addEventListener('click', (event) => this.modalToggle(event)); this.window.addEventListener('click', (event) => this.windowOnClick(event)); this.window.addEventListener('resize', () => { - this.modalSetup(); + this.modalWindow.classList.remove('modal-content__show'); }); this.modalSetup(); @@ -35,16 +44,7 @@ module.exports = class Modal { } modalSetup() { - if (this.$elm.classList.contains('small-device')) { - if (this.window.innerWidth < 480) { - this.$elm.classList.remove('modal-nojs'); - } else { - this.modalWindow.classList.remove('modal-content__show'); - this.$elm.classList.add('modal-nojs'); - } - } else { - this.$elm.classList.remove('modal-nojs'); - } + this.$elm.classList.remove('modal-nojs'); } }; diff --git a/assets/sass/patterns/molecules/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss similarity index 100% rename from assets/sass/patterns/molecules/modal-window.scss rename to assets/sass/patterns/atoms/modal-window.scss diff --git a/source/_patterns/01-molecules/components/modal-window.json b/source/_patterns/00-atoms/components/modal-window.json similarity index 78% rename from source/_patterns/01-molecules/components/modal-window.json rename to source/_patterns/00-atoms/components/modal-window.json index f0eb441cc..e06a2d232 100644 --- a/source/_patterns/01-molecules/components/modal-window.json +++ b/source/_patterns/00-atoms/components/modal-window.json @@ -1,5 +1,4 @@ { - "smallDeviceOnly": true, "title": "This is a title", "closeBtnText": "Close", "body": "This is some body text" diff --git a/source/_patterns/01-molecules/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache similarity index 54% rename from source/_patterns/01-molecules/components/modal-window.mustache rename to source/_patterns/00-atoms/components/modal-window.mustache index 0ca01ecfd..da50c5a2e 100644 --- a/source/_patterns/01-molecules/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -1,5 +1,7 @@ -
- Open modal window +
+ {{^triggerId}} + Open modal window + {{/triggerId}}
{{{title}}}
@@ -8,9 +10,6 @@ {{#body}} {{{body}}} {{/body}} - {{#buttonCollection}} - {{> molecules-button-collection }} - {{/buttonCollection}}
diff --git a/source/_patterns/01-molecules/components/modal-window.yaml b/source/_patterns/00-atoms/components/modal-window.yaml similarity index 72% rename from source/_patterns/01-molecules/components/modal-window.yaml rename to source/_patterns/00-atoms/components/modal-window.yaml index 7f0b8ec8b..29ae8881b 100644 --- a/source/_patterns/01-molecules/components/modal-window.yaml +++ b/source/_patterns/00-atoms/components/modal-window.yaml @@ -1,8 +1,9 @@ $schema: http://json-schema.org/draft-04/schema# type: object properties: - smallDeviceOnly: - type: boolean + triggerId: + type: string + minLength: 1 title: type: string minLength: 1 @@ -12,8 +13,6 @@ properties: body: type: string minLength: 1 - buttonCollection: - $ref: button-collection.yaml required: - title - body diff --git a/source/_patterns/01-molecules/components/modal-window~citations.json b/source/_patterns/00-atoms/components/modal-window~citations.json similarity index 79% rename from source/_patterns/01-molecules/components/modal-window~citations.json rename to source/_patterns/00-atoms/components/modal-window~citations.json index ec17410c8..575430abd 100644 --- a/source/_patterns/01-molecules/components/modal-window~citations.json +++ b/source/_patterns/00-atoms/components/modal-window~citations.json @@ -1,26 +1,5 @@ { - "smallDeviceOnly": false, "closeBtnText": "Close", - "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
", - "title": "Cite this article", - "buttonCollection": { - "buttons": [ - { - "text": "Copy to clipboard", - "classes": "button--default", - "path": "#", - "clipboard": "Clipboard text" - }, - { - "text": "Download Bibtex", - "classes": "button--default button--secondary", - "path": "#" - }, - { - "text": "Download .RIS", - "classes": "button--default button--secondary", - "path": "#" - } - ] - } + "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
  1. Copy to clipboard
  2. Download Bibtex
  3. Download .RIS
", + "title": "Cite this article" } diff --git a/source/_patterns/00-atoms/components/modal-window~share.json b/source/_patterns/00-atoms/components/modal-window~share.json new file mode 100644 index 000000000..06f7f7136 --- /dev/null +++ b/source/_patterns/00-atoms/components/modal-window~share.json @@ -0,0 +1,5 @@ +{ + "title": "Share this article", + "closeBtnText": " ", + "body": "
https://doi.org/10.7554/eLife.09560
  1. Copy to clipboard
" +} diff --git a/source/_patterns/01-molecules/components/modal-window~share.json b/source/_patterns/01-molecules/components/modal-window~share.json deleted file mode 100644 index 7cc30c46a..000000000 --- a/source/_patterns/01-molecules/components/modal-window~share.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "smallDeviceOnly": true, - "title": "Share this article", - "closeBtnText": " ", - "body": "
https://doi.org/10.7554/eLife.09560
", - "buttonCollection": { - "buttons": [ - { - "text": "Copy to clipboard", - "classes": "button--default", - "path": "#", - "clipboard": "Clipboard text" - } - ] - } -} From fbbffbda1f1ee8a370210e78f329ab496db111fb Mon Sep 17 00:00:00 2001 From: Dave Price Date: Wed, 23 Feb 2022 09:00:29 +0000 Subject: [PATCH 46/60] adding email icon for share modal window Need to check when merged into content header branch for right column --- assets/img/icons/email-default.svg | 14 ++++++++++++++ .../sass/patterns/atoms/social-media-sharers.scss | 5 +++++ 2 files changed, 19 insertions(+) create mode 100644 assets/img/icons/email-default.svg diff --git a/assets/img/icons/email-default.svg b/assets/img/icons/email-default.svg new file mode 100644 index 000000000..57fd3ca47 --- /dev/null +++ b/assets/img/icons/email-default.svg @@ -0,0 +1,14 @@ + + + icons/share/default + + + + + + + + + + + \ No newline at end of file diff --git a/assets/sass/patterns/atoms/social-media-sharers.scss b/assets/sass/patterns/atoms/social-media-sharers.scss index cdaac1cd6..b2f20c432 100644 --- a/assets/sass/patterns/atoms/social-media-sharers.scss +++ b/assets/sass/patterns/atoms/social-media-sharers.scss @@ -72,6 +72,11 @@ stroke: none; } +.email { + background: url("../../assets/img/icons/email-default.svg") no-repeat 0 0; + text-indent: -5000px; +} + .facebook { background: url("../../assets/img/icons/facebook.svg") no-repeat 0 0; text-indent: -5000px; From 69b22eb33477282e1e7aace065b65bb94ca343fb Mon Sep 17 00:00:00 2001 From: Dave Price Date: Wed, 23 Feb 2022 09:02:20 +0000 Subject: [PATCH 47/60] refactor url paths for social media icons --- assets/sass/patterns/atoms/social-media-sharers.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/assets/sass/patterns/atoms/social-media-sharers.scss b/assets/sass/patterns/atoms/social-media-sharers.scss index b2f20c432..1ab9ea5d7 100644 --- a/assets/sass/patterns/atoms/social-media-sharers.scss +++ b/assets/sass/patterns/atoms/social-media-sharers.scss @@ -73,26 +73,26 @@ } .email { - background: url("../../assets/img/icons/email-default.svg") no-repeat 0 0; + background: url("../img/icons/email-default.svg") no-repeat 0 0; text-indent: -5000px; } .facebook { - background: url("../../assets/img/icons/facebook.svg") no-repeat 0 0; + background: url("../img/icons/facebook.svg") no-repeat 0 0; text-indent: -5000px; } .twitter { - background: url("../../assets/img/icons/twitter.svg") no-repeat 0 0; + background: url("../img/icons/twitter.svg") no-repeat 0 0; text-indent: -5000px; } .linkedin { - background: url("../../assets/img/icons/linkedin.svg") no-repeat 0 0; + background: url("../img/icons/linkedin.svg") no-repeat 0 0; text-indent: -5000px; } .reddit { - background: url("../../assets/img/icons/reddit.svg") no-repeat 0 0; + background: url("../img/icons/reddit.svg") no-repeat 0 0; text-indent: -5000px; } From 1b9e25fb7c8759e4943983939d768cc73fdfd73f Mon Sep 17 00:00:00 2001 From: nlisgo Date: Wed, 23 Feb 2022 13:05:38 +0000 Subject: [PATCH 48/60] Introduce placeholder for test for button clipboard --- test/buttonclipboard.html | 48 ++++++++++++++++++++++++++++++++++++ test/buttonclipboard.spec.js | 23 +++++++++++++++++ 2 files changed, 71 insertions(+) create mode 100644 test/buttonclipboard.html create mode 100644 test/buttonclipboard.spec.js diff --git a/test/buttonclipboard.html b/test/buttonclipboard.html new file mode 100644 index 000000000..d230f4cb6 --- /dev/null +++ b/test/buttonclipboard.html @@ -0,0 +1,48 @@ + + + + + + + + Mocha Test Runner + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + diff --git a/test/buttonclipboard.spec.js b/test/buttonclipboard.spec.js new file mode 100644 index 000000000..4cf57eff4 --- /dev/null +++ b/test/buttonclipboard.spec.js @@ -0,0 +1,23 @@ +const chai = require('chai'); + +const expect = chai.expect; + +// load in component(s) to be tested +const ButtonClipboard = require('../assets/js/components/ButtonClipboard'); + +describe('A button can be used to store text in clipboard', () => { + 'use strict'; + + let $elm; + + beforeEach(() => { + $elm = document.querySelector('[data-behaviour="ButtonClipboard"]'); + new ButtonClipboard($elm); + }); + + it('stores text into clipboard', () => { + // write test to check button clipboard here. + expect(true).to.equal(false); + }); + +}); From 0476e368283df22f47a664fc3e5b50ba7314cdb1 Mon Sep 17 00:00:00 2001 From: nlisgo Date: Wed, 23 Feb 2022 13:10:56 +0000 Subject: [PATCH 49/60] skip placeholder test --- test/buttonclipboard.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/buttonclipboard.spec.js b/test/buttonclipboard.spec.js index 4cf57eff4..64ccc1904 100644 --- a/test/buttonclipboard.spec.js +++ b/test/buttonclipboard.spec.js @@ -15,7 +15,7 @@ describe('A button can be used to store text in clipboard', () => { new ButtonClipboard($elm); }); - it('stores text into clipboard', () => { + it.skip('stores text into clipboard', () => { // write test to check button clipboard here. expect(true).to.equal(false); }); From ca88a76a8484aec5a1b130ef76f40580ece6cbc0 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Wed, 23 Feb 2022 14:20:06 +0000 Subject: [PATCH 50/60] Refactor social media sharers for modal share --- assets/sass/patterns/atoms/modal-window.scss | 4 +- assets/sass/patterns/atoms/reference.scss | 1 - .../components/modal-window~share.json | 2 +- .../components/social-media-sharers.json | 3 +- .../components/social-media-sharers.mustache | 45 +++---------------- .../components/social-media-sharers.yaml | 8 +++- .../_patterns/00-atoms/forms/text-field.json | 11 ++--- 7 files changed, 22 insertions(+), 52 deletions(-) diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index 348fa686c..d36929626 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -36,15 +36,17 @@ .social-media-sharers { @media only all and (max-width: #{get-rem-from-px($bkpt-site--small - 1)}em) { + @include margin(24, "top"); display: flex; grid-column: 1/3; grid-row: 4; - justify-self: center; + justify-content: center; } } .reference { font-family: $font-secondary; + grid-column: 1/3; .doi { @include margin(12, "top"); diff --git a/assets/sass/patterns/atoms/reference.scss b/assets/sass/patterns/atoms/reference.scss index 325641daf..75c3a44df 100644 --- a/assets/sass/patterns/atoms/reference.scss +++ b/assets/sass/patterns/atoms/reference.scss @@ -187,5 +187,4 @@ a.reference__authors_link:hover { } } - } diff --git a/source/_patterns/00-atoms/components/modal-window~share.json b/source/_patterns/00-atoms/components/modal-window~share.json index 06f7f7136..bddce71ac 100644 --- a/source/_patterns/00-atoms/components/modal-window~share.json +++ b/source/_patterns/00-atoms/components/modal-window~share.json @@ -1,5 +1,5 @@ { "title": "Share this article", "closeBtnText": " ", - "body": "
https://doi.org/10.7554/eLife.09560
  1. Copy to clipboard
" + "body": "
  1. Copy to clipboard
" } diff --git a/source/_patterns/00-atoms/components/social-media-sharers.json b/source/_patterns/00-atoms/components/social-media-sharers.json index 10a189017..1b52c8373 100644 --- a/source/_patterns/00-atoms/components/social-media-sharers.json +++ b/source/_patterns/00-atoms/components/social-media-sharers.json @@ -1,6 +1,7 @@ { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" } diff --git a/source/_patterns/00-atoms/components/social-media-sharers.mustache b/source/_patterns/00-atoms/components/social-media-sharers.mustache index a15821fdd..43cbb6e07 100644 --- a/source/_patterns/00-atoms/components/social-media-sharers.mustache +++ b/source/_patterns/00-atoms/components/social-media-sharers.mustache @@ -1,38 +1,7 @@ - + diff --git a/source/_patterns/00-atoms/components/social-media-sharers.yaml b/source/_patterns/00-atoms/components/social-media-sharers.yaml index e4efd70c5..252677537 100644 --- a/source/_patterns/00-atoms/components/social-media-sharers.yaml +++ b/source/_patterns/00-atoms/components/social-media-sharers.yaml @@ -1,20 +1,24 @@ $schema: http://json-schema.org/draft-04/schema# type: object properties: + emailUrl: + type: string + format: uri facebookUrl: type: string format: uri twitterUrl: type: string format: uri - emailUrl: + linkedInUrl: type: string format: uri redditUrl: type: string format: uri required: + - emailUrl - facebookUrl - twitterUrl - - emailUrl + - linkedInUrl - redditUrl diff --git a/source/_patterns/00-atoms/forms/text-field.json b/source/_patterns/00-atoms/forms/text-field.json index 4228f8d34..bbdb5c524 100644 --- a/source/_patterns/00-atoms/forms/text-field.json +++ b/source/_patterns/00-atoms/forms/text-field.json @@ -1,10 +1,5 @@ { - "id": "emailAddress1", - "inputType": "email", - "label": { - "isVisuallyHidden": false, - "labelText": "Email Address" - }, - "name": "emailAddress", - "autofocus": true + + "inputType": "url", + "value": "https://doi.org/10.7554/eLife.09560" } From f150381756aeece988b3caa715bbfa06f789c2bb Mon Sep 17 00:00:00 2001 From: Dave Price Date: Wed, 23 Feb 2022 14:27:47 +0000 Subject: [PATCH 51/60] Update json files for social media sharers with LinkedIn url --- .../content-headers/content-header~article-1-author.json | 3 ++- .../content-headers/content-header~article-2-authors.json | 3 ++- .../02-organisms/content-headers/content-header~article.json | 3 ++- .../content-header~collection--title-1-x-short.json | 3 ++- .../content-header~collection--title-2-short.json | 3 ++- .../content-header~collection--title-3-medium-A.json | 3 ++- .../content-header~collection--title-3-medium-B.json | 3 ++- .../content-header~collection--title-4-long.json | 3 ++- .../content-header~collection--title-5-x-long-A.json | 3 ++- .../content-header~collection--title-5-x-long-B.json | 3 ++- .../content-header~collection--title-6-xx-long.json | 3 ++- 11 files changed, 22 insertions(+), 11 deletions(-) diff --git a/source/_patterns/02-organisms/content-headers/content-header~article-1-author.json b/source/_patterns/02-organisms/content-headers/content-header~article-1-author.json index b6fc1f37c..16aedf8fd 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~article-1-author.json +++ b/source/_patterns/02-organisms/content-headers/content-header~article-1-author.json @@ -1,9 +1,10 @@ { "title": "Homo naledi, a new species of the genus Homo from the Dinaledi Chamber, South Africa", "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "longTitle": true, diff --git a/source/_patterns/02-organisms/content-headers/content-header~article-2-authors.json b/source/_patterns/02-organisms/content-headers/content-header~article-2-authors.json index 68c78b3de..7fd51ec33 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~article-2-authors.json +++ b/source/_patterns/02-organisms/content-headers/content-header~article-2-authors.json @@ -2,9 +2,10 @@ "title": "Homo naledi, a new species of the genus Homo from the Dinaledi Chamber, South Africa", "longTitle": true, "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "header": { diff --git a/source/_patterns/02-organisms/content-headers/content-header~article.json b/source/_patterns/02-organisms/content-headers/content-header~article.json index 1b3dac951..97abd5773 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~article.json +++ b/source/_patterns/02-organisms/content-headers/content-header~article.json @@ -2,9 +2,10 @@ "title": "Homo naledi, a new species of the genus Homo from the Dinaledi Chamber, South Africa", "longTitle": true, "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "header": { diff --git a/source/_patterns/02-organisms/content-headers/content-header~collection--title-1-x-short.json b/source/_patterns/02-organisms/content-headers/content-header~collection--title-1-x-short.json index ffd7b9db8..a45b2454e 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~collection--title-1-x-short.json +++ b/source/_patterns/02-organisms/content-headers/content-header~collection--title-1-x-short.json @@ -24,9 +24,10 @@ }, "impactStatement": "From its earliest days, eLife has been publishing important advances in our understanding of Cancer Biology. Here, eLife Senior Editors present a collection of great papers spanning from oncogenes and tumor suppressors.", "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "meta": { diff --git a/source/_patterns/02-organisms/content-headers/content-header~collection--title-2-short.json b/source/_patterns/02-organisms/content-headers/content-header~collection--title-2-short.json index 2383f0626..08ae8f663 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~collection--title-2-short.json +++ b/source/_patterns/02-organisms/content-headers/content-header~collection--title-2-short.json @@ -24,9 +24,10 @@ }, "impactStatement": "From its earliest days, eLife has been publishing important advances in our understanding of Cancer Biology. Here, eLife Senior Editors present a collection of great papers spanning from oncogenes and tumor suppressors.", "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "meta": { diff --git a/source/_patterns/02-organisms/content-headers/content-header~collection--title-3-medium-A.json b/source/_patterns/02-organisms/content-headers/content-header~collection--title-3-medium-A.json index 8065e7283..9ebc1f7ac 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~collection--title-3-medium-A.json +++ b/source/_patterns/02-organisms/content-headers/content-header~collection--title-3-medium-A.json @@ -24,9 +24,10 @@ }, "impactStatement": "From its earliest days, eLife has been publishing important advances in our understanding of Cancer Biology. Here, eLife Senior Editors present a collection of great papers spanning from oncogenes and tumor suppressors.", "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "meta": { diff --git a/source/_patterns/02-organisms/content-headers/content-header~collection--title-3-medium-B.json b/source/_patterns/02-organisms/content-headers/content-header~collection--title-3-medium-B.json index 3fc530e5f..4d35b988d 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~collection--title-3-medium-B.json +++ b/source/_patterns/02-organisms/content-headers/content-header~collection--title-3-medium-B.json @@ -24,9 +24,10 @@ }, "impactStatement": "From its earliest days, eLife has been publishing important advances in our understanding of Cancer Biology. Here, eLife Senior Editors present a collection of great papers spanning from oncogenes and tumor suppressors.", "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "meta": { diff --git a/source/_patterns/02-organisms/content-headers/content-header~collection--title-4-long.json b/source/_patterns/02-organisms/content-headers/content-header~collection--title-4-long.json index 96e2a5ec5..a359f3b45 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~collection--title-4-long.json +++ b/source/_patterns/02-organisms/content-headers/content-header~collection--title-4-long.json @@ -24,9 +24,10 @@ }, "impactStatement": "From its earliest days, eLife has been publishing important advances in our understanding of Cancer Biology. Here, eLife Senior Editors present a collection of great papers spanning from oncogenes and tumor suppressors.", "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "meta": { diff --git a/source/_patterns/02-organisms/content-headers/content-header~collection--title-5-x-long-A.json b/source/_patterns/02-organisms/content-headers/content-header~collection--title-5-x-long-A.json index 0e788d957..65ba3b898 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~collection--title-5-x-long-A.json +++ b/source/_patterns/02-organisms/content-headers/content-header~collection--title-5-x-long-A.json @@ -24,9 +24,10 @@ }, "impactStatement": "From its earliest days, eLife has been publishing important advances in our understanding of Cancer Biology. Here, eLife Senior Editors present a collection of great papers spanning from oncogenes and tumor suppressors.", "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "meta": { diff --git a/source/_patterns/02-organisms/content-headers/content-header~collection--title-5-x-long-B.json b/source/_patterns/02-organisms/content-headers/content-header~collection--title-5-x-long-B.json index 642795b30..a45ac2ec5 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~collection--title-5-x-long-B.json +++ b/source/_patterns/02-organisms/content-headers/content-header~collection--title-5-x-long-B.json @@ -24,9 +24,10 @@ }, "impactStatement": "From its earliest days, eLife has been publishing important advances in our understanding of Cancer Biology. Here, eLife Senior Editors present a collection of great papers spanning from oncogenes and tumor suppressors.", "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "meta": { diff --git a/source/_patterns/02-organisms/content-headers/content-header~collection--title-6-xx-long.json b/source/_patterns/02-organisms/content-headers/content-header~collection--title-6-xx-long.json index 37b57f0dc..457bc49e3 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~collection--title-6-xx-long.json +++ b/source/_patterns/02-organisms/content-headers/content-header~collection--title-6-xx-long.json @@ -24,9 +24,10 @@ }, "impactStatement": "From its earliest days, eLife has been publishing important advances in our understanding of Cancer Biology. Here, eLife Senior Editors present a collection of great papers spanning from oncogenes and tumor suppressors.", "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "meta": { From 90b61ffeffa3a109a5edc9f11f8a3f65245b70eb Mon Sep 17 00:00:00 2001 From: nlisgo Date: Wed, 23 Feb 2022 15:58:18 +0000 Subject: [PATCH 52/60] Allow button clipboard copy function to be overwritten for tests --- assets/js/components/ButtonClipboard.js | 11 ++++++++++- test/buttonclipboard.spec.js | 20 ++++++++++++++++---- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/assets/js/components/ButtonClipboard.js b/assets/js/components/ButtonClipboard.js index a926b0b3c..18cbf04b4 100644 --- a/assets/js/components/ButtonClipboard.js +++ b/assets/js/components/ButtonClipboard.js @@ -7,12 +7,21 @@ module.exports = class Modal { } this.$elm = $elm; + this.copyFunction(this.copyToClipboard); this.$elm.addEventListener('click', () => { - navigator.clipboard.writeText(this.$elm.getAttribute('data-clipboard')).then(() => { + this.$copy(this.$elm.getAttribute('data-clipboard'), () => { this.$elm.classList.add('button--success', 'button--fixed-width'); this.$elm.textContent = 'Copied!'; }); }); } + + copyFunction(func) { + this.$copy = func; + } + + copyToClipboard(text, onSuccess) { + navigator.clipboard.writeText(text).then(onSuccess); + } }; diff --git a/test/buttonclipboard.spec.js b/test/buttonclipboard.spec.js index 64ccc1904..fc8e1510e 100644 --- a/test/buttonclipboard.spec.js +++ b/test/buttonclipboard.spec.js @@ -9,15 +9,27 @@ describe('A button can be used to store text in clipboard', () => { 'use strict'; let $elm; + let $clipboardText; beforeEach(() => { $elm = document.querySelector('[data-behaviour="ButtonClipboard"]'); - new ButtonClipboard($elm); + $clipboardText = ''; + const btnClipboard = new ButtonClipboard($elm); + btnClipboard.copyFunction((text, onSuccess) => { + console.log('text copied!'); + $clipboardText = text; + onSuccess(); + }); }); - it.skip('stores text into clipboard', () => { - // write test to check button clipboard here. - expect(true).to.equal(false); + it('changes button when clipboard triggered', () => { + expect($elm.textContent).to.equal('Button clipboard'); + expect($elm.classList.contains('button--success')).to.be.false; + expect($clipboardText).to.be.empty; + $elm.click(); + expect($elm.textContent).to.equal('Copied!'); + expect($elm.classList.contains('button--success')).to.be.true; + expect($clipboardText).to.equal('Text to store in clipboard'); }); }); From d012c92e13c31fee967077768323e799ff6434e8 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Wed, 23 Feb 2022 16:57:58 +0000 Subject: [PATCH 53/60] Refactoring modal citation and share styling and adapting for journal implementation --- .vscode/settings.json | 3 +++ assets/sass/patterns/atoms/modal-window.scss | 19 ++++++++++++------- .../patterns/atoms/social-media-sharers.scss | 6 ++++++ .../00-atoms/components/modal-window.mustache | 6 ++---- .../components/modal-window~citations.json | 2 +- .../components/modal-window~share.json | 2 +- .../button-collection~citation-modal.json | 3 +++ 7 files changed, 28 insertions(+), 13 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..aef844305 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index d36929626..2a8c71fa8 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -14,11 +14,10 @@ box-shadow: 0 0 20px rgba(0, 0, 0, 0.22); display: grid; margin: 0; - padding: 36px 24px; + padding: 36px; @media only all and (min-width: #{get-rem-from-px($bkpt-site--small)}em) { margin: 24px; - padding: 36px; } @media only all and (min-width: #{get-rem-from-px($bkpt-site--medium + 48)}em) { @@ -36,7 +35,7 @@ .social-media-sharers { @media only all and (max-width: #{get-rem-from-px($bkpt-site--small - 1)}em) { - @include margin(24, "top"); + @include padding(24, "top"); display: flex; grid-column: 1/3; grid-row: 4; @@ -62,10 +61,6 @@ .button-collection__item { float: none; - - &:last-child { - margin-right: 0; - } } .button { @@ -91,6 +86,16 @@ } } +.modal-content__body { + display: grid; + grid-column: 1/3; + + .button { + justify-self: center; + margin-bottom: 24px; + } +} + .modal-content__show { opacity: 1; visibility: visible; diff --git a/assets/sass/patterns/atoms/social-media-sharers.scss b/assets/sass/patterns/atoms/social-media-sharers.scss index 1ab9ea5d7..e93ba00ce 100644 --- a/assets/sass/patterns/atoms/social-media-sharers.scss +++ b/assets/sass/patterns/atoms/social-media-sharers.scss @@ -14,10 +14,16 @@ @include margin(0); @include padding(0); display: flex; + justify-content: center; margin-bottom: 24px; li { list-style: none; + margin-right: 6px; + + &:last-child { + margin-right: 0; + } } } diff --git a/source/_patterns/00-atoms/components/modal-window.mustache b/source/_patterns/00-atoms/components/modal-window.mustache index da50c5a2e..d65612fd0 100644 --- a/source/_patterns/00-atoms/components/modal-window.mustache +++ b/source/_patterns/00-atoms/components/modal-window.mustache @@ -6,10 +6,8 @@
{{{title}}}
{{closeBtnText}} -
- {{#body}} - {{{body}}} - {{/body}} +
+ {{{body}}}
diff --git a/source/_patterns/00-atoms/components/modal-window~citations.json b/source/_patterns/00-atoms/components/modal-window~citations.json index 575430abd..c6227b64b 100644 --- a/source/_patterns/00-atoms/components/modal-window~citations.json +++ b/source/_patterns/00-atoms/components/modal-window~citations.json @@ -1,5 +1,5 @@ { "closeBtnText": "Close", - "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
  1. Copy to clipboard
  2. Download Bibtex
  3. Download .RIS
", + "body": "
  1. Schrenk F
  2. Bromage TG
  3. Betzler CG
  4. Ring U
  5. Juwayeyi YM
  6. Schrenk F
  7. Bromage TG
  8. Betzler CG
  9. Ring U
  10. Juwayeyi YM
  11. Schrenk F
  12. Bromage TG
  13. Betzler CG
  14. Ring U
  15. Juwayeyi YM
  16. Schrenk F
  17. Bromage TG
  18. Betzler CG
  19. Ring U
  20. Juwayeyi YM
  21. Schrenk F
  22. Bromage TG
  23. Betzler CG
  24. Ring U
  25. Juwayeyi YM
(1993) Oldest Homo and Pliocene biogeography of the Malawi rift
Nature 365:833–836.
https://doi.org/10.1038/365833a0
", "title": "Cite this article" } diff --git a/source/_patterns/00-atoms/components/modal-window~share.json b/source/_patterns/00-atoms/components/modal-window~share.json index bddce71ac..d8a219789 100644 --- a/source/_patterns/00-atoms/components/modal-window~share.json +++ b/source/_patterns/00-atoms/components/modal-window~share.json @@ -1,5 +1,5 @@ { "title": "Share this article", "closeBtnText": " ", - "body": "
  1. Copy to clipboard
" + "body": "
" } diff --git a/source/_patterns/01-molecules/components/button-collection~citation-modal.json b/source/_patterns/01-molecules/components/button-collection~citation-modal.json index 4e307425b..0e437abf0 100644 --- a/source/_patterns/01-molecules/components/button-collection~citation-modal.json +++ b/source/_patterns/01-molecules/components/button-collection~citation-modal.json @@ -1,16 +1,19 @@ { "buttons": [ { + "type": "button", "text": "Copy to clipboard", "classes": "button--default", "path": "#" }, { + "type": "button", "text": "Download Bibtex", "classes": "button--default button--secondary", "path": "#" }, { + "type": "button", "text": "Download .RIS", "classes": "button--default button--secondary", "path": "#" From 590f0178cfc215cdc27ab1714c6e6611bd572298 Mon Sep 17 00:00:00 2001 From: nlisgo Date: Wed, 23 Feb 2022 20:27:46 +0000 Subject: [PATCH 54/60] Mock copyToClipboard method --- assets/js/components/ButtonClipboard.js | 7 +------ test/buttonclipboard.spec.js | 8 ++++---- 2 files changed, 5 insertions(+), 10 deletions(-) diff --git a/assets/js/components/ButtonClipboard.js b/assets/js/components/ButtonClipboard.js index 18cbf04b4..906176b8c 100644 --- a/assets/js/components/ButtonClipboard.js +++ b/assets/js/components/ButtonClipboard.js @@ -7,20 +7,15 @@ module.exports = class Modal { } this.$elm = $elm; - this.copyFunction(this.copyToClipboard); this.$elm.addEventListener('click', () => { - this.$copy(this.$elm.getAttribute('data-clipboard'), () => { + this.copyToClipboard(this.$elm.getAttribute('data-clipboard'), () => { this.$elm.classList.add('button--success', 'button--fixed-width'); this.$elm.textContent = 'Copied!'; }); }); } - copyFunction(func) { - this.$copy = func; - } - copyToClipboard(text, onSuccess) { navigator.clipboard.writeText(text).then(onSuccess); } diff --git a/test/buttonclipboard.spec.js b/test/buttonclipboard.spec.js index fc8e1510e..25694b180 100644 --- a/test/buttonclipboard.spec.js +++ b/test/buttonclipboard.spec.js @@ -1,4 +1,5 @@ const chai = require('chai'); +const sinon = require('sinon'); const expect = chai.expect; @@ -15,10 +16,9 @@ describe('A button can be used to store text in clipboard', () => { $elm = document.querySelector('[data-behaviour="ButtonClipboard"]'); $clipboardText = ''; const btnClipboard = new ButtonClipboard($elm); - btnClipboard.copyFunction((text, onSuccess) => { - console.log('text copied!'); - $clipboardText = text; - onSuccess(); + sinon.stub(btnClipboard, 'copyToClipboard').callsFake((text, onSuccess) => { + $clipboardText = text; + onSuccess(); }); }); From 830db9360228f7282c53ac4123ca005817cc3e39 Mon Sep 17 00:00:00 2001 From: nlisgo Date: Wed, 23 Feb 2022 20:35:02 +0000 Subject: [PATCH 55/60] Add linkedInUrl to socialMediaSharers --- .../content-header~collection--title-0-xx-short.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/source/_patterns/02-organisms/content-headers/content-header~collection--title-0-xx-short.json b/source/_patterns/02-organisms/content-headers/content-header~collection--title-0-xx-short.json index 64ff93471..7b56fa545 100644 --- a/source/_patterns/02-organisms/content-headers/content-header~collection--title-0-xx-short.json +++ b/source/_patterns/02-organisms/content-headers/content-header~collection--title-0-xx-short.json @@ -24,9 +24,10 @@ }, "impactStatement": "From its earliest days, eLife has been publishing important advances in our understanding of Cancer Biology. Here, eLife Senior Editors present a collection of great papers spanning from oncogenes and tumor suppressors.", "socialMediaSharers": { + "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", "facebookUrl": "https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fexample.com%2Fsome-article-url", "twitterUrl": "https://twitter.com/intent/tweet/?text=Some%20article%20title&url=https%3A%2F%2Fexample.com%2Fsome-article-url", - "emailUrl": "mailto:?subject=Some%20article%20title&body=https%3A%2F%2Fexample.com%2Fsome-article-url", + "linkedInUrl": "https://www.linkedin.com/shareArticle?url=https%3A%2F%2Fexample.com%2Fsome-article-url", "redditUrl": "https://reddit.com/submit/?url=https%3A%2F%2Fexample.com%2Fsome-article-url" }, "meta": { From a7d77250f272c196d5969ce9a1165a0d335500ae Mon Sep 17 00:00:00 2001 From: nlisgo Date: Wed, 23 Feb 2022 20:41:49 +0000 Subject: [PATCH 56/60] match schema --- .../components/button-collection~citation-modal.json | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/source/_patterns/01-molecules/components/button-collection~citation-modal.json b/source/_patterns/01-molecules/components/button-collection~citation-modal.json index 0e437abf0..9e3ee29a5 100644 --- a/source/_patterns/01-molecules/components/button-collection~citation-modal.json +++ b/source/_patterns/01-molecules/components/button-collection~citation-modal.json @@ -3,20 +3,17 @@ { "type": "button", "text": "Copy to clipboard", - "classes": "button--default", - "path": "#" + "classes": "button--default" }, { "type": "button", "text": "Download Bibtex", - "classes": "button--default button--secondary", - "path": "#" + "classes": "button--default button--secondary" }, { "type": "button", "text": "Download .RIS", - "classes": "button--default button--secondary", - "path": "#" + "classes": "button--default button--secondary" } ] } From 4e5c79f7fb0480157a521f026d331a32183f9282 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 24 Feb 2022 08:39:24 +0000 Subject: [PATCH 57/60] Removing as not anything to do with the project --- .vscode/settings.json | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index aef844305..000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "liveServer.settings.port": 5501 -} \ No newline at end of file From ad77a7fd12311fa77d0aa66b274ed51ee0791c27 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 24 Feb 2022 09:06:33 +0000 Subject: [PATCH 58/60] Refactor css for modal window --- assets/js/components/ButtonClipboard.js | 2 +- assets/sass/patterns/atoms/buttons.scss | 4 ---- assets/sass/patterns/atoms/modal-window.scss | 8 ++++++-- assets/sass/patterns/atoms/reference.scss | 1 + 4 files changed, 8 insertions(+), 7 deletions(-) diff --git a/assets/js/components/ButtonClipboard.js b/assets/js/components/ButtonClipboard.js index 906176b8c..91de0049e 100644 --- a/assets/js/components/ButtonClipboard.js +++ b/assets/js/components/ButtonClipboard.js @@ -10,7 +10,7 @@ module.exports = class Modal { this.$elm.addEventListener('click', () => { this.copyToClipboard(this.$elm.getAttribute('data-clipboard'), () => { - this.$elm.classList.add('button--success', 'button--fixed-width'); + this.$elm.classList.add('button--success', 'modal-content__clipboard-btn'); this.$elm.textContent = 'Copied!'; }); }); diff --git a/assets/sass/patterns/atoms/buttons.scss b/assets/sass/patterns/atoms/buttons.scss index e9df9041e..203a6e081 100644 --- a/assets/sass/patterns/atoms/buttons.scss +++ b/assets/sass/patterns/atoms/buttons.scss @@ -26,10 +26,6 @@ text-transform: uppercase; } -.button--fixed-width { - min-width: 189px; -} - .button--default { @include colors($color-primary); @include padding(15 36 14); diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index 2a8c71fa8..a49052e1b 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -77,8 +77,8 @@ .button { @include margin(12, "bottom"); + @include padding(15 24 14 24); line-height: 1.5; - padding: 15px 24px 14px; text-decoration: none; width: auto; } @@ -91,8 +91,8 @@ grid-column: 1/3; .button { + @include margin(24, "bottom"); justify-self: center; - margin-bottom: 24px; } } @@ -136,3 +136,7 @@ .social-media-sharers { display: flex; } + +.modal-content__clipboard-btn { + min-width: 189px; +} diff --git a/assets/sass/patterns/atoms/reference.scss b/assets/sass/patterns/atoms/reference.scss index 75c3a44df..325641daf 100644 --- a/assets/sass/patterns/atoms/reference.scss +++ b/assets/sass/patterns/atoms/reference.scss @@ -187,4 +187,5 @@ a.reference__authors_link:hover { } } + } From 815ecb4bf1e5cebf008a0f6b02e816482bb49141 Mon Sep 17 00:00:00 2001 From: Dave Price Date: Thu, 24 Feb 2022 09:12:25 +0000 Subject: [PATCH 59/60] Reverted back to previous --- source/_patterns/00-atoms/forms/text-field.json | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/source/_patterns/00-atoms/forms/text-field.json b/source/_patterns/00-atoms/forms/text-field.json index bbdb5c524..4228f8d34 100644 --- a/source/_patterns/00-atoms/forms/text-field.json +++ b/source/_patterns/00-atoms/forms/text-field.json @@ -1,5 +1,10 @@ { - - "inputType": "url", - "value": "https://doi.org/10.7554/eLife.09560" + "id": "emailAddress1", + "inputType": "email", + "label": { + "isVisuallyHidden": false, + "labelText": "Email Address" + }, + "name": "emailAddress", + "autofocus": true } From c85d97f46be924be62ef8198c5472e4cefd66dd1 Mon Sep 17 00:00:00 2001 From: nlisgo Date: Fri, 25 Feb 2022 16:47:33 +0000 Subject: [PATCH 60/60] remove file and redundant sass --- assets/img/icons/tick-white.svg | 10 ---------- assets/sass/patterns/atoms/modal-window.scss | 21 -------------------- 2 files changed, 31 deletions(-) delete mode 100644 assets/img/icons/tick-white.svg diff --git a/assets/img/icons/tick-white.svg b/assets/img/icons/tick-white.svg deleted file mode 100644 index 8bd3fe120..000000000 --- a/assets/img/icons/tick-white.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - icons/tick-white - - - - - - - \ No newline at end of file diff --git a/assets/sass/patterns/atoms/modal-window.scss b/assets/sass/patterns/atoms/modal-window.scss index a49052e1b..a335a755a 100644 --- a/assets/sass/patterns/atoms/modal-window.scss +++ b/assets/sass/patterns/atoms/modal-window.scss @@ -116,27 +116,6 @@ visibility: hidden; } -.modal-content__clipboard { - @include margin(24, "bottom"); - @include padding(12); - border: 1px solid $color-text-dividers; - font-family: $font-secondary; - grid-column: 1/3; - grid-row: 2; - justify-self: initial; - word-break: break-word; - - &.reference { - @include margin(0, "bottom"); - border: none; - padding: 0; - } -} - -.social-media-sharers { - display: flex; -} - .modal-content__clipboard-btn { min-width: 189px; }