From ad2da94e85af7db0fb52a771143364e9f2602fc7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Thu, 5 Oct 2017 18:39:44 +0200 Subject: [PATCH] fit course headline into one line --- .../stylesheets/landing-page/modules/highlighted-course.css | 4 +++- public/scripts/index.js | 5 ++++- public/scripts/textFit.min.js | 1 + public/stylesheets/style.css | 4 +++- views/layout.pug | 1 + 5 files changed, 12 insertions(+), 3 deletions(-) create mode 100755 public/scripts/textFit.min.js diff --git a/assets/stylesheets/landing-page/modules/highlighted-course.css b/assets/stylesheets/landing-page/modules/highlighted-course.css index 5b6dd3c..861c9ff 100644 --- a/assets/stylesheets/landing-page/modules/highlighted-course.css +++ b/assets/stylesheets/landing-page/modules/highlighted-course.css @@ -2,7 +2,8 @@ @element wrapper { position: relative; overflow: hidden; - max-height: 60vh; + height: 50vh; + max-height: 500px; border-radius: var(--border-radius); } @@ -59,6 +60,7 @@ color: var(--color-text-dark-bg); font-size: 4vw; line-height: 1.3; + white-space: nowrap; @media (--breakpoint-desktop) { font-size: 3.25em; diff --git a/public/scripts/index.js b/public/scripts/index.js index b5ffd1d..8f498c7 100644 --- a/public/scripts/index.js +++ b/public/scripts/index.js @@ -1,7 +1,10 @@ document.addEventListener('DOMContentLoaded', () => { - // init highlight.js + // Init highlight.js hljs.initHighlightingOnLoad() + // apply textFit to module headlines + textFit(document.getElementsByClassName('module-higlighted-course__title'), {multiLine: false}) + // Lesson code switcher logic const modules = Array.from(document.getElementsByClassName('lesson-module-code')) diff --git a/public/scripts/textFit.min.js b/public/scripts/textFit.min.js new file mode 100755 index 0000000..f6ce439 --- /dev/null +++ b/public/scripts/textFit.min.js @@ -0,0 +1 @@ +(function(root,factory){"use strict";if(typeof define==="function"&&define.amd){define([],factory)}else if(typeof exports==="object"){module.exports=factory()}else{root.textFit=factory()}})(typeof global==="object"?global:this,function(){"use strict";var defaultSettings={alignVert:false,alignHoriz:false,multiLine:false,detectMultiLine:true,minFontSize:6,maxFontSize:80,reProcess:true,widthOnly:false,alignVertWithFlexbox:false};return function textFit(els,options){if(!options)options={};var settings={};for(var key in defaultSettings){if(options.hasOwnProperty(key)){settings[key]=options[key]}else{settings[key]=defaultSettings[key]}}if(typeof els.toArray==="function"){els=els.toArray()}var elType=Object.prototype.toString.call(els);if(elType!=="[object Array]"&&elType!=="[object NodeList]"&&elType!=="[object HTMLCollection]"){els=[els]}for(var i=0;i=parseInt(window.getComputedStyle(innerSpan)["font-size"],10)*2){multiLine=true}if(!multiLine){el.style["white-space"]="nowrap"}low=settings.minFontSize+1;high=settings.maxFontSize+1;while(low<=high){mid=parseInt((low+high)/2,10);innerSpan.style.fontSize=mid+"px";if(innerSpan.scrollWidth<=originalWidth&&(settings.widthOnly||innerSpan.scrollHeight<=originalHeight)){low=mid+1}else{high=mid-1}}innerSpan.style.fontSize=mid-1+"px";if(settings.alignVert){addStyleSheet();var height=innerSpan.scrollHeight;if(window.getComputedStyle(el)["position"]==="static"){el.style["position"]="relative"}if(!hasClass(innerSpan,"textFitAlignVert")){innerSpan.className=innerSpan.className+" textFitAlignVert"}innerSpan.style["height"]=height+"px";if(settings.alignVertWithFlexbox&&!hasClass(el,"textFitAlignVertFlex")){el.className=el.className+" textFitAlignVertFlex"}}}function innerHeight(el){var style=window.getComputedStyle(el,null);return el.clientHeight-parseInt(style.getPropertyValue("padding-top"),10)-parseInt(style.getPropertyValue("padding-bottom"),10)}function innerWidth(el){var style=window.getComputedStyle(el,null);return el.clientWidth-parseInt(style.getPropertyValue("padding-left"),10)-parseInt(style.getPropertyValue("padding-right"),10)}function isElement(o){return typeof HTMLElement==="object"?o instanceof HTMLElement:o&&typeof o==="object"&&o!==null&&o.nodeType===1&&typeof o.nodeName==="string"}function hasClass(element,cls){return(" "+element.className+" ").indexOf(" "+cls+" ")>-1}function addStyleSheet(){if(document.getElementById("textFitStyleSheet"))return;var style=[".textFitAlignVert{","position: absolute;","top: 0; right: 0; bottom: 0; left: 0;","margin: auto;","display: flex;","justify-content: center;","flex-direction: column;","}",".textFitAlignVertFlex{","display: flex;","}",".textFitAlignVertFlex .textFitAlignVert{","position: static;","}"].join("");var css=document.createElement("style");css.type="text/css";css.id="textFitStyleSheet";css.innerHTML=style;document.body.appendChild(css)}}); \ No newline at end of file diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css index d22f9ff..13a2275 100644 --- a/public/stylesheets/style.css +++ b/public/stylesheets/style.css @@ -1877,7 +1877,8 @@ github.com style (c) Vasily Polovnyov .module-higlighted-course__wrapper { position: relative; overflow: hidden; - max-height: 60vh; + height: 50vh; + max-height: 500px; border-radius: 4px; } @@ -1946,6 +1947,7 @@ github.com style (c) Vasily Polovnyov color: #fff; font-size: 4vw; line-height: 1.3; + white-space: nowrap; } @media (min-width: 700px) { diff --git a/views/layout.pug b/views/layout.pug index 557e52a..b13f1a5 100644 --- a/views/layout.pug +++ b/views/layout.pug @@ -92,4 +92,5 @@ html a(href='https://twitter.com/contentful' target='_blank' rel='noopener') img(src='/images/icon-twitter.svg' alt='Our Twitter profile') script(src='/scripts/highlight.pack.js') + script(src='/scripts/textFit.min.js') script(src='/scripts/index.js')