Merge branch 'release/1.0.4'

heiseonline · May 22, 2018 · 33afe54 · 33afe54
2 parents 19b64f5 + b853f6c
commit 33afe54
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # embetty
 
+## v1.0.4, 2018-05-22
+
+- Fixed error handling for tweets without link preview images.
+- Improved the design on smaller viewports.
+
 ## v1.0.3, 2018-05-16
 
 - Fixed layout for links without images.

diff --git a/example/index.html b/example/index.html
@@ -7,6 +7,7 @@
   <meta data-embetty-server=".">
   <script async src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.9.0/prism.min.js"></script>
   <script async src="embetty.js"></script>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 </head>
 <body>
   <header>

diff --git a/lib/_element.scss b/lib/_element.scss
@@ -10,6 +10,6 @@
   border-width: 1px;
   border-radius: 4px;
   box-sizing: border-box;
-  font-size: 1rem;
+  font-size: 16px;
   line-height: 1;
 }
diff --git a/lib/embed/_powered-by.scss b/lib/embed/_powered-by.scss
@@ -4,7 +4,7 @@
   right: -20px;
   bottom: 0px;
   padding: 20px 46px 5px 20px;
-  font-size: 90%;
+  font-size: 14px;
   color: #777;
   text-decoration: none;
   opacity: .3;

diff --git a/lib/embed/tweet.js b/lib/embed/tweet.js
@@ -24,9 +24,13 @@ class Tweet extends Observable(Embed) {
 
   fitCardHeight() {
     if (!this.hasLinks) return
+
     const section = this.shadowRoot.querySelector('#links')
-    const p = section.querySelector('p')
+    const linkBody = this.shadowRoot.querySelector('#link-body')
+
+    if (section.clientWidth === linkBody.clientWidth) return
 
+    const p = section.querySelector('p')
     if (!p) return
 
     const imgHeight = height(section.querySelector('img'))
@@ -175,7 +179,9 @@ class Tweet extends Observable(Embed) {
     await super.becomesVisible()
 
     const linkImage = this.shadowRoot.querySelector('#links img')
-    linkImage.addEventListener('error', e => { linkImage.remove() })
+    if (linkImage) {
+      linkImage.addEventListener('error', e => { linkImage.remove() })
+    }
   }
 }
 

diff --git a/lib/embed/tweet.scss b/lib/embed/tweet.scss
@@ -38,11 +38,16 @@ $quoteLineWidth: 4px;
   position: relative;
   overflow: hidden;
   max-width: 642px;
-  padding: 2rem 2.5rem;
+  padding: 1rem 1.2rem;
+
+  @media (min-width: 600px) {
+    padding: 1.5rem 2rem;
+  }
 
   header {
     display: flex;
-    padding-bottom: var(--embetty-spacing, $embetty-spacing);
+    align-items: center;
+    margin-bottom: .5rem;
 
     img {
       width: $profile-image-width;
@@ -60,7 +65,8 @@ $quoteLineWidth: 4px;
       display: block;
     }
 
-    a, a:hover {
+    a,
+    a:hover {
       font-size: 14px;
       color: #697882;
       text-decoration: none;
@@ -75,9 +81,12 @@ $quoteLineWidth: 4px;
     p {
       margin: 0 auto 0.5rem;
       line-height: 1.4;
-      font-size: 20px;
       letter-spacing: .01em;
 
+      @media (min-width: 600px) {
+        font-size: 18px;
+      }
+
       a {
         color: #012469;
         text-decoration: none;
@@ -143,6 +152,7 @@ $quoteLineWidth: 4px;
     border-radius: 4px;
     text-decoration: none;
     display: flex;
+    flex-direction: column;
     color: #14171a;
     font-size: 14px;
 
@@ -152,36 +162,55 @@ $quoteLineWidth: 4px;
       transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
     }
 
+    @media (min-width: 600px) {
+      flex-direction: row;
+    }
+
     img {
       max-width: 100%;
-      height: 125px;
-      width: 125px;
       object-fit: cover;
       display: inline-block;
+
+      @media (min-width: 600px) {
+        height: 125px;
+        width: 125px;
+        min-width: 125px;
+      }
     }
 
     & > *:last-child {
       margin-bottom: 0;
     }
 
     #link-body {
-      display: flex;
-      flex-direction: column;
-      padding: calc(var(--embetty-spacing, #{$embetty-spacing}) / 2);
-      max-width: calc(100% - 125px - var(--embetty-spacing, #{$embetty-spacing}));
+      padding: .5rem;
+
+      @media (min-width: 600px) {
+        display: flex;
+        flex-direction: column;
+        padding: .5rem .8rem;
+      }
     }
 
     h3 {
       font-size: 14px;
       line-height: 1.3;
-      margin: 0 0 calc(var(--embetty-spacing, #{$embetty-spacing}) / 7);
+      margin: 0;
+      margin-bottom: .3em;
     }
 
     p {
-      hyphens: auto;
-      line-height: 18px;
-      font-size: 14px;
-      margin: calc(var(--embetty-spacing, #{$embetty-spacing}) / 7) 0;
+      display: none;
+
+      @media (min-width: 600px) {
+        display: block;
+        flex-grow: 1;
+        hyphens: auto;
+        line-height: 18px;
+        font-size: 14px;
+        margin: 0;
+        margin-bottom: .3em;
+      }
     }
 
     span {
@@ -191,9 +220,9 @@ $quoteLineWidth: 4px;
   }
 
   #created-at {
-    margin-top: 1rem;
+    margin-top: .5rem;
     display: block;
-    font-size: 90%;
+    font-size: 14px;
     color: #777;
     text-decoration: none;
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heise/embetty",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "main": "index.js",
   "license": "MIT",
   "scripts": {