From a43db020b16aaa8ccc40b6474b2e9944961aa32d Mon Sep 17 00:00:00 2001 From: Shan Carter Date: Tue, 24 Oct 2017 09:31:37 -0700 Subject: [PATCH 1/4] Article style tweaks --- src/components/d-title.js | 2 +- src/styles/d-article.css | 9 ++++++--- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/d-title.js b/src/components/d-title.js index 199a321..8fb35d8 100644 --- a/src/components/d-title.js +++ b/src/components/d-title.js @@ -12,7 +12,7 @@ const T = Template('d-title', ` ::slotted(h1) { grid-column: text; font-size: 60px; - font-weight: 600; + font-weight: 700; line-height: 1.05em; margin: 0 0 1rem; } diff --git a/src/styles/d-article.css b/src/styles/d-article.css index 050b4e3..1757650 100644 --- a/src/styles/d-article.css +++ b/src/styles/d-article.css @@ -17,7 +17,7 @@ d-article > * { @media(min-width: 1024px) { d-article { - font-size: 1rem; + font-size: 1.06rem; line-height: 1.7em; } } @@ -102,7 +102,6 @@ d-article blockquote { margin-bottom: 1em; margin-left: 0; margin-right: 0; - -webkit-font-smoothing: antialiased; } d-article blockquote { @@ -132,11 +131,15 @@ d-article ol { } d-article li { - margin-bottom: 24px; + margin-bottom: 1em; margin-left: 0; padding-left: 0; } +d-article li:last-child { + margin-bottom: 0; +} + d-article pre { font-size: 14px; margin-bottom: 20px; From 33714c9ca4ef846e74396b24f2a831102dc78dc2 Mon Sep 17 00:00:00 2001 From: Shan Carter Date: Tue, 24 Oct 2017 10:57:05 -0700 Subject: [PATCH 2/4] Tweaking mobile styles --- examples/article.html | 2 + src/components/d-article.js | 1 - src/components/d-title.js | 51 +--------------------- src/distill-components/distill-footer.js | 2 +- src/styles/d-article.css | 4 ++ src/styles/d-byline.css | 20 +++++++-- src/styles/d-title.css | 55 ++++++++++++++++++++++++ src/styles/styles-base.css | 6 ++- src/styles/styles.js | 3 +- 9 files changed, 88 insertions(+), 56 deletions(-) create mode 100644 src/styles/d-title.css diff --git a/examples/article.html b/examples/article.html index 7a5b58a..1d40d46 100644 --- a/examples/article.html +++ b/examples/article.html @@ -2,9 +2,11 @@ + + - + + diff --git a/src/components.js b/src/components.js index e3006c9..564d005 100644 --- a/src/components.js +++ b/src/components.js @@ -16,6 +16,7 @@ import { Code } from './components/d-code'; import { Footnote } from './components/d-footnote'; import { FootnoteList } from './components/d-footnote-list'; import { FrontMatter } from './components/d-front-matter'; +import { HoverBox } from './components/d-hover-box'; import { Title } from './components/d-title'; import { DMath } from './components/d-math'; import { References } from './components/d-references'; @@ -53,7 +54,7 @@ const distillMain = function() { /* Article will register controller which takes control from there */ const components = [ Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code, - Footnote, FootnoteList, FrontMatter, Title, DMath, References, TOC, Figure, + Footnote, FootnoteList, FrontMatter, HoverBox, Title, DMath, References, TOC, Figure, Slider, Interstitial ]; diff --git a/src/components/d-cite.js b/src/components/d-cite.js index fe1ddd6..964bef6 100644 --- a/src/components/d-cite.js +++ b/src/components/d-cite.js @@ -1,6 +1,5 @@ import { Template } from '../mixins/template'; import { hover_cite, bibliography_cite } from '../helpers/citation'; -import { HoverBox } from '../helpers/hover-box'; const T = Template('d-cite', ` -
-
-
+
`); @@ -75,15 +56,12 @@ export class Cite extends T(HTMLElement) { // } connectedCallback() { - // this.notify(); - - this.hoverDiv = this.root.querySelector('.dt-hover-box'); this.outerSpan = this.root.querySelector('#citation-'); this.innerSpan = this.root.querySelector('.citation-number'); - // this.outerSpan.id = `citation-${this.citeId}`; - // this.hoverDiv.id = `dt-cite-hover-box-${this.citeId}`; - // console.log(this, this.hoverDiv, this.outerSpan, this.innerSpan); - this.hoverbox = new HoverBox(this.hoverDiv, this.outerSpan); + this.hoverBox = this.root.querySelector('d-hover-box'); + window.customElements.whenDefined('d-hover-box').then(() => { + this.hoverBox.listen(this); + }); } disconnectedCallback() { diff --git a/src/components/d-footnote.js b/src/components/d-footnote.js index 1fe5048..084106b 100644 --- a/src/components/d-footnote.js +++ b/src/components/d-footnote.js @@ -1,5 +1,4 @@ import { Template } from '../mixins/template.js'; -import { HoverBox } from '../helpers/hover-box'; const T = Template('d-footnote', ` -
-
- -
-
+ + + @@ -79,23 +76,24 @@ export class Footnote extends T(HTMLElement) { // const slot = this.shadowRoot.querySelector('#slot'); // console.warn(slot.textContent); // slot.addEventListener('slotchange', this.notify); - + this.hoverBox = this.root.querySelector('d-hover-box'); + window.customElements.whenDefined('d-hover-box').then(() => { + this.hoverBox.listen(this); + }); // create numeric ID Footnote.currentFootnoteId += 1; const IdString = Footnote.currentFootnoteId.toString(); this.root.host.id = 'd-footnote-' + IdString; // set up hidden hover box - const div = this.root.querySelector('.dt-hover-box'); - div.id = 'dt-fn-hover-box-' + IdString; + const id = 'dt-fn-hover-box-' + IdString; + this.hoverBox.id = id // set up visible footnote marker const span = this.root.querySelector('#fn-'); span.setAttribute('id', 'fn-' + IdString); - span.setAttribute('data-hover-ref', div.id); + span.setAttribute('data-hover-ref', id); span.textContent = IdString; - - this.hoverbox = new HoverBox(div, span); } } diff --git a/src/components/d-hover-box.js b/src/components/d-hover-box.js new file mode 100644 index 0000000..cb8a0ff --- /dev/null +++ b/src/components/d-hover-box.js @@ -0,0 +1,132 @@ +import { Template } from '../mixins/template.js'; + +const T = Template('d-hover-box', ` + + +
+
+ +
+
+`); + +export class HoverBox extends T(HTMLElement) { + + constructor() { + super(); + } + + connectedCallback() { + + } + + listen(element) { + console.log(element) + this.bindDivEvents(this); + this.bindTriggerEvents(element); + // this.style.display = "block"; + } + + bindDivEvents(element) { + // For mice, same behavior as hovering on links + element.addEventListener('mouseover', () => { + if (!this.visible) this.showAtNode(element); + this.stopTimeout(); + }); + element.addEventListener('mouseout', () => { + this.extendTimeout(500); + }); + // Don't trigger body touchstart event when touching within box + element.addEventListener('touchstart', (event) => { + event.stopPropagation(); + }, {passive: true}); + // Close box when touching outside box + document.body.addEventListener('touchstart', () => { + this.hide(); + }, {passive: true}); + } + + bindTriggerEvents(node) { + node.addEventListener('mouseover', () => { + if (!this.visible) { + this.showAtNode(node); + } + this.stopTimeout(); + }); + + node.addEventListener('mouseout', () => { + this.extendTimeout(300); + }); + + node.addEventListener('touchstart', (event) => { + if (this.visible) { + this.hide(); + } else { + this.showAtNode(node); + } + // Don't trigger body touchstart event when touching link + event.stopPropagation(); + }, {passive: true}); + } + + show(position) { + this.visible = true; + this.style.display = 'block'; + } + + showAtNode(node) { + const bbox = node.getBoundingClientRect(); + this.show([bbox.right, bbox.bottom]); + } + + hide() { + this.visible = false; + this.style.display = 'none'; + this.stopTimeout(); + } + + stopTimeout() { + if (this.timeout) { + clearTimeout(this.timeout); + } + } + + extendTimeout(time) { + this.stopTimeout(); + this.timeout = setTimeout(() => { + this.hide(); + }, time); + } + +} diff --git a/src/helpers/hover-box.js b/src/helpers/hover-box.js deleted file mode 100644 index 5194e87..0000000 --- a/src/helpers/hover-box.js +++ /dev/null @@ -1,109 +0,0 @@ -// function make_hover_css(target_node, pos) { -// const pretty = window.innerWidth > 600; -// const padding = pretty? 18 : 12; -// const outer_padding = pretty ? 18 : 0; -// // const bbox = document.querySelector('body').getBoundingClientRect(); -// const bbox = target_node.offsetParent.getBoundingClientRect(); -// let left = pos[0] - bbox.left, top = pos[1] - bbox.top; -// let width = Math.min(window.innerWidth-2*outer_padding, 648); -// left = Math.min(left, window.innerWidth-width-outer_padding); -// width = width - 2 * padding; -// return (`position: absolute; -// background-color: #FFF; -// opacity: 0.95; -// max-width: ${width}px; -// top: ${top}px; -// left: ${left}px; -// border: 1px solid rgba(0, 0, 0, 0.25); -// padding: ${padding}px; -// border-radius: ${pretty? 3 : 0}px; -// box-shadow: 0px 2px 10px 2px rgba(0, 0, 0, 0.2); -// z-index: ${1e6};`); -// } - -export class HoverBox { - - constructor(contentHTML, triggerElement) { - this.visible = false; - // div hold teh contents of the box that will become visible - this.div = contentHTML; - this.bindDivEvents(this.div); - // triggerElement holds the element that needs to be hovered etc to show contents - this.triggerElement = triggerElement; - this.bindTriggerEvents(this.triggerElement); - this.hide(); - } - - bindDivEvents(node) { - // For mice, same behavior as hovering on links - this.div.addEventListener('mouseover', () => { - if (!this.visible) this.showAtNode(node); - this.stopTimeout(); - }); - this.div.addEventListener('mouseout', () => { - this.extendTimeout(500); - }); - // Don't trigger body touchstart event when touching within box - this.div.addEventListener('touchstart', (event) => { - event.stopPropagation(); - }, {passive: true}); - // Close box when touching outside box - document.body.addEventListener('touchstart', () => { - this.hide(); - }, {passive: true}); - } - - bindTriggerEvents(node) { - node.addEventListener('mouseover', () => { - if (!this.visible) { - this.showAtNode(node); - } - this.stopTimeout(); - }); - - node.addEventListener('mouseout', () => { - this.extendTimeout(500); - }); - - node.addEventListener('touchstart', (event) => { - if (this.visible) { - this.hide(); - } else { - this.showAtNode(node); - } - // Don't trigger body touchstart event when touching link - event.stopPropagation(); - }, {passive: true}); - } - - show(position) { - this.visible = true; - // const css = make_hover_css(this.triggerElement, position); - this.div.setAttribute('style', 'display: block;' ); - } - - showAtNode(node) { - const bbox = node.getBoundingClientRect(); - this.show([bbox.right, bbox.bottom]); - } - - hide() { - this.visible = false; - this.div.setAttribute('style', 'display: none;'); - this.stopTimeout(); - } - - stopTimeout() { - if (this.timeout) { - clearTimeout(this.timeout); - } - } - - extendTimeout(time) { - this.stopTimeout(); - this.timeout = setTimeout(() => { - this.hide(); - }, time); - } - -} diff --git a/src/styles/styles-base.css b/src/styles/styles-base.css index da6d929..cc679d7 100644 --- a/src/styles/styles-base.css +++ b/src/styles/styles-base.css @@ -10,7 +10,9 @@ html { } @media(min-width: 768px) { - font-size: 16px; + html { + font-size: 16px; + } } body {