Truncate articles titles when needed

index.hbs

@@ -60,7 +60,9 @@ into the {body} of the default.hbs template --}}
                       <span>{{t "Featured"}}</span>
                     </div>
                     <a href="{{url}}" class="m-featured-article__content">
-                      <h1 class="m-featured-article__title">{{title}}</h1>
+                      <h1 class="m-featured-article__title js-featured-article-title" title="{{title}}">
+                        {{title}}
+                      </h1>
                       <div class="m-featured-article__timestamp">
                         <span>{{date published_at timeago="true"}}</span>
                         <span>&bull;</span>

package.json

@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.6.1"
+  "version": "0.6.2"
 }

page-authors.hbs

@@ -38,7 +38,9 @@ into the {body} of the default.hbs template --}}
                 <div class="m-article-card__info">
                   <a href="{{url}}" class="m-article-card__info-link">
                     {{#if bio}}
-                    <p class="m-article-card__excerpt">{{bio}}</p>
+                    <p class="m-article-card__excerpt js-article-card-title">
+                      {{bio}}
+                    </p>
                     {{/if}}
                   </a>
                   <div class="m-article-card__author-stats">

partials/header.hbs

@@ -70,7 +70,9 @@ This header template is shared across all the pages.
                               <div class="no-image lozad" data-background-image="{{asset "images/no-image.png"}}"></div>
                               {{/if}}
                             </div>
-                            <h3 class="m-recent-article__title">{{title}}</h3>
+                            <h3 class="m-recent-article__title js-recent-article-title" title="{{title}}">
+                              {{title}}
+                            </h3>
                             <span class="m-recent-article__date">{{date published_at timeago="true"}}</span>
                           </a>
                         </div>

partials/loop.hbs

@@ -33,7 +33,9 @@
     {{/if}}
       <a href="{{url}}" class="m-article-card__info-link">
         <div>
-          <h2 class="m-article-card__title">{{title}}</h2>
+          <h2 class="m-article-card__title js-article-card-title {{#unless feature_image}}js-article-card-title-no-image{{/unless}}" title="{{title}}">
+            {{title}}
+          </h2>
         </div>
         <div class="m-article-card__timestamp">
           <span>{{date published_at timeago="true"}}</span>

src/js/app.js

@@ -4,6 +4,7 @@ import lozad from 'lozad'
 import Headroom from "headroom.js"
 import slick from 'slick-carousel'
 import tippy from 'tippy.js'
+import shave from 'shave'
 import AOS from 'aos'
 import Fuse from 'fuse.js'
 import {
@@ -213,6 +214,10 @@ $(document).ready(() => {
   }
 
   if ($recentArticles.length > 0) {
+    $recentArticles.on('init', function () {
+      shave('.js-recent-article-title', 50)
+    })
+
     $recentArticles.slick({
       adaptiveHeight: true,
       arrows: false,
@@ -241,5 +246,8 @@ $(document).ready(() => {
 
   tippy('.js-tooltip')
 
+  shave('.js-article-card-title', 100)
+  shave('.js-article-card-title-no-image', 250)
+
   trySearchFeature()
 })

src/js/home.js

@@ -1,11 +1,16 @@
 import $ from 'jquery'
 import slick from 'slick-carousel'
+import shave from 'shave'
 import { isRTL } from './helpers'
 
 $(document).ready(() => {
   const $featuredArticles = $('.js-featured-articles')
 
   if ($featuredArticles.length > 0) {
+    $featuredArticles.on('init', function () {
+      shave('.js-featured-article-title', 200)
+    })
+
     $featuredArticles.slick({
       arrows: true,
       infinite: true,

src/js/post.js

@@ -3,6 +3,7 @@ import slick from 'slick-carousel'
 import stickybits from 'stickybits'
 import mediumZoom from 'medium-zoom'
 import fitvids from 'fitvids'
+import shave from 'shave'
 import {
   isRTL,
   isMobile
@@ -128,6 +129,9 @@ $(document).ready(() => {
   if ($recommendedArticles.length > 0) {
     $recommendedArticles.on('init', function () {
       prepareProgressCircle()
+
+      shave('.js-article-card-title', 100)
+      shave('.js-article-card-title-no-image', 250)
     })
 
     $recommendedArticles.slick({

src/package-lock.json

@@ -11843,6 +11843,11 @@
         "sha.js": "~2.4.4"
       }
     },
+    "shave": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/shave/-/shave-2.5.6.tgz",
+      "integrity": "sha512-cIeMhSuOEIyG79sCrMMcQqinM8FCmlJw1yjG0yYy+uufYnWmJSC0yZHxOcGmQwm2RgLlCCK/0cSGpMXAequbrw=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",

src/package.json

@@ -39,6 +39,7 @@
     "jquery": "^3.3.1",
     "lozad": "^1.14.0",
     "medium-zoom": "^1.0.3",
+    "shave": "^2.5.6",
     "slick-carousel": "^1.8.1",
     "stickybits": "^3.6.1",
     "tippy.js": "^4.0.1"

src/sass/components/articles/_article-card.scss

@@ -39,7 +39,7 @@
 
   &.no-picture {
     .m-article-card__picture {
-      height: 85px;
+      height: 85px !important;
     }
 
     .m-article-card__info {
@@ -48,7 +48,7 @@
 
     .m-article-card__title {
       line-height: 1.4;
-      font-size: 1.750rem;
+      font-size: 1.625rem;
     }
   }