Technical/issue 99 about page (#106)

* about page WIP

* social icons

* social icon links

* speaking and writing toggle

src/components/card-list/card-list.js

@@ -0,0 +1,37 @@
+import { html, LitElement } from 'lit-element';
+
+import '../card/card';
+
+class CardListComponent extends LitElement {
+
+  constructor() {
+    super();
+  }
+
+  static get properties() {
+    return {
+      items: {
+        type: Array
+      }
+    };
+  }
+
+  render() {
+    let { items } = this;
+
+    if (!items) {
+      items = [];
+    }
+
+    const cards = items.map((item) => {
+      return html`<app-card .item="${item}"></app-card>`;
+    });
+
+    return html`
+      ${cards}
+    `;
+  }
+
+}
+
+customElements.define('app-card-list', CardListComponent);

src/components/card/card.css

@@ -0,0 +1,70 @@
+.card {
+  width: 70%;
+  margin: 0 auto 35px;
+  max-width: 1024px;
+  min-width: 320px;
+  border: 2px solid #020202;
+  border-radius: 5px;
+  padding: 10px;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(12, [col-start] 1fr);
+  grid-gap: 20px;
+}
+
+.wrapper > * {
+  grid-column: col-start / span 12;
+}
+
+.card-header, .card-content {
+  text-align: left;
+}
+
+.card-slides {
+  margin-left: 20px;
+  text-decoration: none;
+  color: #020202;
+}
+
+.card-footer img {
+  width: 100%;
+}
+
+@media (min-width: 500px) {
+  .card-header-icon {
+    display: none;
+  }
+
+  .card {
+    border: none;
+  }
+}
+
+@media (min-width: 300px) {
+  .card-header-icon {
+    display: none;
+  }
+
+  .card {
+    border: none;
+  }
+}
+
+@media (min-width: 700px) {
+  .card {
+    border: 2px solid #020202;
+  }
+
+  .card-header-icon {
+    display: inline;
+    grid-column: col-start / span 2;
+    grid-row: 1 / 6;  /* autoprefixer: off */
+  }
+
+  .card-header {
+    grid-column: col-start 3 / span 10;
+    grid-row: 1 / 6; /* autoprefixer: off */
+  }
+}

src/components/card/card.js

@@ -0,0 +1,73 @@
+import { html, LitElement } from 'lit-element';
+
+import '../social-icon-link/social-icon-link';
+import cardCss from './card.css';
+
+class CardComponent extends LitElement {
+
+  constructor() {
+    super();
+  }
+
+  static get properties() {
+    return {
+      item: {
+        type: Object
+      }
+    };
+  }
+
+  render() {
+    const { item } = this;
+    const date = item.date 
+      ? html`<span class="card-date"><b>Date: ${item.date}</b></span>`
+      : ''; 
+    const slides = item.slides 
+      ? html`<a href=${item.slides} target="_blank" class="card-slides">📎 (slides)</a>`
+      : ''; 
+    const img = item.img 
+      ? html`<img class="card-image" src="${item.img}"/>`
+      : ''; 
+    const video = item.video
+      ? html`<iframe class="card-video" width="100%" height="315" src="${item.video}" frameBorder="0" allowFullScreen/>`
+      : '';
+
+    return html`
+      <style>
+        ${ cardCss }
+      </style>
+
+      <div class="card">
+    
+        <div class="wrapper">    
+          <div class="card-header-icon">
+            <app-social-icon-link 
+              .link="${item.link}"
+            ></app-social-icon-link>
+          </div>
+
+          <div class="card-header">
+            
+            <h3 class="card-header-heading">
+              <a class="card-header-heading-link" target="_blank" href="${item.link}">${item.title}</a>
+            </h3>
+
+            ${ date }
+            ${ slides }
+          </div>
+
+          <div class="card-content">
+            <article>${item.abstract}</article>
+          </div>
+          
+          <div class="card-footer">
+            ${ img }
+            ${ video }
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('app-card', CardComponent);

src/components/footer/footer.js

@@ -1,18 +1,13 @@
-class FooterComponent extends HTMLElement {
+import { html, LitElement } from 'lit-element';
+import '../social-icon-link/social-icon-link';
+
+class FooterComponent extends LitElement {
   constructor() {
     super();
-
-    this.root = this.attachShadow({ mode: 'closed' });
-  }
-
-  // run some code when the component is ready
-  connectedCallback() {
-    this.root.innerHTML = this.getTemplate();
   }
 
-  // create templates that interpolate variables and HTML!
-  getTemplate() {
-    return `
+  render() {
+    return html`
       <style>
         footer {
           width: 50%;
@@ -29,13 +24,6 @@ class FooterComponent extends HTMLElement {
         li {
           display: inline-block;
         }
-
-        img {
-          display: block;
-          height: 60px;
-          width: 60px;
-          margin: 0 10px;
-        }
         
         .copyright {
           display: inline-block;
@@ -46,43 +34,19 @@ class FooterComponent extends HTMLElement {
       <footer>
         <ul>
           <li>
-            <a
-              rel="noopener"
-              target="_blank" 
-              href="https://www.linkedin.com/in/owen-buckley-91393447/"
-            >
-              <img src="/assets/logos/linkedin.svg">
-            </a>
+            <app-social-icon-link name="linkedin"></app-social-icon-link>
           </li>
 
           <li>
-            <a
-              rel="noopener"
-              target="_blank" 
-              href="https://twitter.com/thegreenhouseio/"
-            >
-              <img src="/assets/logos/twitter.svg">
-            </a>
+            <app-social-icon-link name="twitter"></app-social-icon-link>
           </li>
 
           <li>
-            <a
-              rel="noopener"
-              target="_blank" 
-              href="https://medium.com/@thegreenhouseio/"
-            >
-              <img src="/assets/logos/medium.svg">
-            </a>
+            <app-social-icon-link name="medium"></app-social-icon-link>
           </li>
 
           <li>
-            <a
-              rel="noopener"
-              target="_blank" 
-              href="https://github.com/thegreenhouseio/"
-            >
-              <img src="/assets/logos/github.svg">
-            </a>
+            <app-social-icon-link name="github"></app-social-icon-link>
           </li>
         <ul>