Merge pull request #74 from distillpub/hoverboxPadding

Restore padding for d-hover-box

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.8",
+  "version": "2.2.19",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "distill-template",
-  "version": "2.2.8",
+  "version": "2.2.19",
   "description": "Template for creating Distill articles.",
   "main": "dist/template.v2.js",
   "bin": {
@@ -12,7 +12,7 @@
     "url": "https://github.com/distillpub/distill-template/issues"
   },
   "scripts": {
-    "start": "rollup -c rollup.config.dev.js -w",
+    "dev": "rollup -c rollup.config.dev.js -w",
     "serve": "python3 -m http.server --bind 127.0.0.1 8888",
     "test": "mocha",
     "lint": "eslint",

src/components.js

@@ -50,8 +50,20 @@ const distillMain = function() {
   console.info('Runlevel 1->2.');
   window.distillRunlevel += 1;
 
-  /* 3. Register components */
-  /* Article will register controller which takes control from there */
+  /* 3. Register Controller listener functions */
+  /* Needs to happen before components to their connected callbacks have a controller to talk to. */
+  for (const [functionName, callback] of Object.entries(Controller.listeners)) {
+    if (typeof callback === 'function') {
+      document.addEventListener(functionName, callback);
+    } else {
+      console.error('Runlevel 2: Controller listeners need to be functions!');
+    }
+  }
+  console.info('Runlevel 2: We can now listen to controller events.');
+  console.info('Runlevel 2->3.');
+  window.distillRunlevel += 1;
+
+  /* 4. Register components */
   const components = [
     Abstract, Appendix, Article, Bibliography, Byline, Cite, CitationList, Code,
     Footnote, FootnoteList, FrontMatter, HoverBox, Title, DMath, References, TOC, Figure,
@@ -71,22 +83,14 @@ const distillMain = function() {
     customElements.define(component.is, component);
   }
 
-  console.info('Runlevel 2: Distill Template finished registering custom elements.');
-  console.info('Runlevel 2->3.');
-  window.distillRunlevel += 1;
-
-  /* 4. Register Controller listener functions */
-  for (const [functionName, callback] of Object.entries(Controller.listeners)) {
-    if (typeof callback === 'function') {
-      document.addEventListener(functionName, callback);
-    } else {
-      console.error('Runlevel 3: Controller listeners need to be functions!');
-    }
-  }
-  console.info('Runlevel 3: We can now listen to controller events.');
+  console.info('Runlevel 3: Distill Template finished registering custom elements.');
   console.info('Runlevel 3->4.');
   window.distillRunlevel += 1;
 
+  // If template was added after DOMContentLoaded we may have missed that event.
+  // Controller will check for that case, so trigger the event explicitly:
+  Controller.listeners.DOMContentLoaded();
+
   console.info('Runlevel 4: Distill Template initialisation complete.');
 };
 

src/components/d-appendix.js

@@ -1,11 +1,10 @@
 import { Template } from '../mixins/template';
-import { body } from '../helpers/layout';
 
 const T = Template('d-appendix', `
 <style>
 
 d-appendix {
-  contain: content;
+  contain: layout style;
   font-size: 0.8em;
   line-height: 1.7em;
   margin-top: 60px;

src/components/d-citation-list.js

@@ -2,8 +2,7 @@ import { bibliography_cite } from '../helpers/citation';
 
 const styles = `
 d-citation-list {
-  contain: content;
-  overflow: hidden;
+  contain: layout style;
 }
 
 d-citation-list .references {

src/components/d-cite.js

@@ -38,6 +38,21 @@ d-hover-box {
   margin-top: 1.9em;
 }
 
+ul {
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+
+ul li {
+  padding: 15px 10px 15px 10px;
+  border-bottom: 1px solid rgba(0,0,0,0.1)
+}
+
+ul li:last-of-type {
+  border-bottom: none;
+}
+
 </style>
 
 <d-hover-box id="hover-box"></d-hover-box>
@@ -106,7 +121,9 @@ export class Cite extends T(HTMLElement) {
 
   set entries(entries) {
     if (this.hoverBox) {
-      this.hoverBox.innerHTML = entries.map(hover_cite).join('<br><br>');
+      this.hoverBox.innerHTML = `<ul>
+      ${entries.map(hover_cite).map(html => `<li>${html}</li>`).join('\n')}
+      </ul>`;
     }
   }
 

src/components/d-footnote-list.js

@@ -4,8 +4,7 @@ const T = Template('d-footnote-list', `
 <style>
 
 d-footnote-list {
-  contain: content;
-  overflow: hidden;
+  contain: layout style;
 }
 
 d-footnote-list > * {

src/components/d-hover-box.js

@@ -20,6 +20,8 @@ const T = Template('d-hover-box', `
 
 .panel {
   position: absolute;
+  font-size: 1rem;
+  line-height: 1.5em;
   top: 0;
   left: 0;
   width: 100%;
@@ -27,11 +29,10 @@ const T = Template('d-hover-box', `
   background-color: rgb(250, 250, 250);
   box-shadow: 0 0 7px rgba(0, 0, 0, 0.1);
   border-radius: 4px;
-  padding: 10px;
   box-sizing: border-box;
+  padding: 10px;
 }
 
-
 </style>
 
 <div class="container">

src/components/d-toc.js

@@ -20,7 +20,7 @@ export function renderTOC(element, headings) {
   <style>
 
   d-toc {
-    contain: content;
+    contain: layout style;
     display: block;
   }
 

src/controller.js

@@ -145,7 +145,11 @@ export const Controller = {
     },
 
     DOMContentLoaded() {
-      if (Controller.loaded || !domContentLoaded()) {
+      if (Controller.loaded) {
+        console.warn('Controller received DOMContentLoaded but was already loaded!');
+        return;
+      } else if (!domContentLoaded()) {
+        console.warn('Controller received DOMContentLoaded before appropriate document.readyState!');
         return;
       } else {
         Controller.loaded = true;

src/distill-components/distill-appendix.js

@@ -3,8 +3,7 @@ import { serializeFrontmatterToBibtex } from '../helpers/bibtex';
 const styles = `
 <style>
   distill-appendix {
-    contain: content;
-    overflow: hidden;
+    contain: layout style;
   }
 
   distill-appendix .citation {

src/distill-components/distill-header.js

@@ -72,18 +72,14 @@ distill-header .nav a {
     ${logo}
     Distill
   </a>
-  <div class="nav">
+  <nav class="nav">
     <a href="/about/">About</a>
     <a href="/prize/">Prize</a>
     <a href="/journal/">Submit</a>
-  </div>
+  </nav>
 </div>
 `, false);
 
-// <div class="nav">
-//   <a href="https://github.com/distillpub">GitHub</a>
-//   <!-- https://twitter.com/distillpub -->
-// </div>
 
 export class DistillHeader extends T(HTMLElement) {
 

src/front-matter.js

@@ -73,6 +73,8 @@ export function mergeFromYMLFrontmatter(target, source) {
       target.publishedDate = source.publishedDate;
     } else if (source.publishedDate.constructor === String) {
       target.publishedDate = new Date(source.publishedDate);
+    } else {
+      console.error('Don\'t know what to do with published date: ' + source.publishedDate);
     }
   }
   target.description = source.description;
@@ -303,15 +305,19 @@ export class FrontMatter {
     target.url = this.url;
     target.githubUrl = this.githubUrl;
     target.previewURL = this.previewURL;
-    target.volume = this.volume;
-    target.issue = this.issue;
-    target.publishedDateRFC = this.publishedDateRFC;
-    target.publishedYear = this.publishedYear;
-    target.publishedMonth = this.publishedMonth;
-    target.publishedDay = this.publishedDay;
-    target.publishedMonthPadded = this.publishedMonthPadded;
-    target.publishedDayPadded = this.publishedDayPadded;
-    target.updatedDateRFC = this.updatedDateRFC;
+    if (this.publishedDate) {
+      target.volume = this.volume;
+      target.issue = this.issue;
+      target.publishedDateRFC = this.publishedDateRFC;
+      target.publishedYear = this.publishedYear;
+      target.publishedMonth = this.publishedMonth;
+      target.publishedDay = this.publishedDay;
+      target.publishedMonthPadded = this.publishedMonthPadded;
+      target.publishedDayPadded = this.publishedDayPadded;
+    }
+    if (this.updatedDate) {
+      target.updatedDateRFC = this.updatedDateRFC;
+    }
     target.concatenatedAuthors = this.concatenatedAuthors;
     target.bibtexAuthors = this.bibtexAuthors;
     target.slug = this.slug;

src/helpers/citation.js

@@ -40,6 +40,7 @@ export function inline_cite_long(keys){
 }
 
 function author_string(ent, template, sep, finalSep){
+  if (ent.author == null) { return ''; }
   var names = ent.author.split(' and ');
   let name_strings = names.map(name => {
     name = name.trim();
@@ -114,13 +115,22 @@ function doi_string(ent, new_line){
   }
 }
 
+function title_string(ent) {
+  return '<span class="title">' + ent.title + '</span> ';
+}
+
 export function bibliography_cite(ent, fancy){
   if (ent){
-    var cite =  '<span class="title">' + ent.title + '</span> ';
+    var cite = title_string(ent);
     cite += link_string(ent) + '<br>';
-    cite += author_string(ent, '${L}, ${I}', ', ', ' and ');
-    if (ent.year || ent.date){
-      cite += ', ' + (ent.year || ent.date) + '. ';
+    if (ent.author) {
+      cite += author_string(ent, '${L}, ${I}', ', ', ' and ');
+      if (ent.year || ent.date) {
+        cite += ', ';
+      }
+    }
+    if (ent.year || ent.date) {
+      cite += (ent.year || ent.date) + '. ';
     } else {
       cite += '. ';
     }
@@ -146,7 +156,7 @@ export function bibliography_cite(ent, fancy){
 export function hover_cite(ent){
   if (ent){
     var cite = '';
-    cite += '<b>' + ent.title + '</b>';
+    cite += '<strong>' + ent.title + '</strong>';
     cite += link_string(ent);
     cite += '<br>';
 

src/styles/d-article.css

@@ -1,9 +1,9 @@
 d-article {
-  contain: content;
+  contain: layout style;
+  overflow-x: hidden;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   padding-top: 2rem;
   color: rgba(0, 0, 0, 0.8);
-  overflow: hidden;
 }
 
 d-article > * {
@@ -169,14 +169,29 @@ d-article span.equation-mimic {
 d-article > d-code,
 d-article section > d-code  {
   display: block;
-  overflow-x: scroll;
-
 }
 
 d-article > d-math[block],
 d-article section > d-math[block]  {
   display: block;
-  overflow-x: scroll;
+}
+
+@media (max-width: 768px) {
+  d-article > d-code,
+  d-article section > d-code,
+  d-article > d-math[block],
+  d-article section > d-math[block] {
+      overflow-x: scroll;
+      -ms-overflow-style: none;  // IE 10+
+      overflow: -moz-scrollbars-none;  // Firefox
+  }
+
+  d-article > d-code::-webkit-scrollbar,
+  d-article section > d-code::-webkit-scrollbar,
+  d-article > d-math[block]::-webkit-scrollbar,
+  d-article section > d-math[block]::-webkit-scrollbar {
+    display: none;  // Safari and Chrome
+  }
 }
 
 d-article .citation {
@@ -190,8 +205,7 @@ d-include {
 }
 
 d-figure {
-  contain: content;
-  overflow: hidden;
+  contain: layout style;
 }
 
 /* KaTeX */

src/styles/d-byline.css

@@ -1,6 +1,7 @@
 d-byline {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
   contain: content;
+  overflow: hidden;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
   font-size: 0.8rem;
   line-height: 1.8em;
   padding: 1.5rem 0;

src/styles/d-title.css

@@ -1,7 +1,7 @@
 d-title {
   padding: 2rem 0 1.5rem;
-  contain: content;
-  overflow: hidden;
+  contain: layout style;
+  overflow-x: hidden;
 }
 
 @media(min-width: 768px) {
@@ -14,29 +14,23 @@ d-title h1 {
   grid-column: text;
   font-size: 40px;
   font-weight: 700;
-  line-height: 1.05em;
-  margin: 0 0 1rem;
+  line-height: 1.1em;
+  margin: 0 0 0.5rem;
 }
 
 @media(min-width: 768px) {
   d-title h1 {
-    font-size: 60px;
+    font-size: 50px;
   }
 }
 
 d-title p {
   font-weight: 300;
   font-size: 1.2rem;
-  line-height: 1.7em;
+  line-height: 1.55em;
   grid-column: text;
 }
 
-@media(min-width: 768px) {
-  d-title p {
-    font-size: 1.5rem;
-  }
-}
-
 d-title .status {
   margin-top: 0px;
   font-size: 12px;
@@ -52,4 +46,4 @@ d-title .status span {
   border-bottom: 1px solid #80cbc4;
   font-size: 11px;
   text-transform: uppercase;
-}
+}

src/styles/styles-base.css

@@ -90,7 +90,7 @@ sub {
 figure {
   position: relative;
   margin-bottom: 2.5em;
-  margin-top: 2.5em;
+  margin-top: 1.5em;
 }
 
 figcaption+figure {
@@ -131,7 +131,8 @@ figcaption a {
   color: rgba(0, 0, 0, 0.6);
 }
 
-figcaption b {
+figcaption b,
+figcaption strong, {
   font-weight: 600;
   color: rgba(0, 0, 0, 1.0);
 }

src/styles/styles-layout.css

@@ -79,7 +79,7 @@ distill-footer {
   }
 }
 
-@media(min-width: 1280px) {
+@media(min-width: 1180px) {
   .base-grid,
   distill-header,
   d-title,

src/transforms/citation.js

@@ -95,6 +95,7 @@ export default function(dom, data) {
   }
 
   function author_string(ent, template, sep, finalSep){
+    if (ent.author == null) { return ''; }
     var names = ent.author.split(' and ');
     let name_strings = names.map(name => {
       name = name.trim();

src/transforms/meta.js

@@ -124,26 +124,28 @@ function appendHtml(el, html) {
 }
 
 function citation_meta_content(ref){
-  // Special test for arxiv
   var content = `citation_title=${ref.title};`;
 
-  ref.author.split(' and ').forEach(name => {
-    name = name.trim();
-    let last, firsts;
-    if (name.indexOf(',') != -1){
-      last = name.split(',')[0].trim();
-      firsts = name.split(',')[1].trim();
-    } else {
-      last = name.split(' ').slice(-1)[0].trim();
-      firsts = name.split(' ').slice(0,-1).join(' ');
-    }
-    content += `citation_author=${firsts} ${last};`;
-  });
+  if (ref.author && ref.author !== '') {
+    ref.author.split(' and ').forEach(name => {
+      name = name.trim();
+      let last, firsts;
+      if (name.indexOf(',') != -1){
+        last = name.split(',')[0].trim();
+        firsts = name.split(',')[1].trim();
+      } else {
+        last = name.split(' ').slice(-1)[0].trim();
+        firsts = name.split(' ').slice(0,-1).join(' ');
+      }
+      content += `citation_author=${firsts} ${last};`;
+    });
+  }
 
   if ('year' in ref) {
     content += `citation_publication_date=${ref.year};`;
   }
 
+  // Special test for arxiv
   let arxiv_id_search = /https?:\/\/arxiv\.org\/pdf\/([0-9]*\.[0-9]*)\.pdf/.exec(ref.url);
   arxiv_id_search = arxiv_id_search || /https?:\/\/arxiv\.org\/abs\/([0-9]*\.[0-9]*)/.exec(ref.url);
   arxiv_id_search = arxiv_id_search || /arXiv preprint arXiv:([0-9]*\.[0-9]*)/.exec(ref.journal);

src/ui/d-slider.js

@@ -181,6 +181,7 @@ export class Slider extends T(HTMLElement) {
   static get observedAttributes() {return ['min', 'max', 'value', 'step', 'ticks', 'origin', 'tickValues', 'tickLabels']; }
 
   attributeChangedCallback(attr, oldValue, newValue) {
+    if (isNaN(newValue) || newValue === undefined || newValue === null) return;
     if (attr == 'min') {
       this.min = +newValue;
       this.setAttribute('aria-valuemin', this.min);
@@ -194,7 +195,7 @@ export class Slider extends T(HTMLElement) {
     }
     if (attr == 'origin') {
       this.origin = +newValue;
-      this.update(this.value);
+      // this.update(this.value);
     }
     if (attr == 'step') {
       if (newValue > 0) {