onny/web-wordpress-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better title text fitting responsive design

Browse source
This commit is contained in:
Jonas Heinrich 2020-07-21 09:49:33 +02:00
parent 8c16ceee0d
commit c9354c5f2e
7 changed files with 285 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

11
kit/css/content.css
View file

@ -18,6 +18,7 @@
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
/* overflow: hidden; */
}
.intro-element .content-wrap * {
@ -30,13 +31,9 @@
.intro-element .content-wrap .h2 {
color: #ffffff;
text-shadow: 1px 1px 3px black;
width: 80vw;
max-height: 50vw;
font-size: calc(3vw + 3vh);
line-height: calc(3.5vw + 3.5vh);
/* font-size: calc(3vw + 3vh);
line-height: calc(3.5vw + 3.5vh); */
word-wrap: break-word;
/* text-overflow: ellipsis;
overflow-y: hidden; */
}
.intro-element .video-loop {
@ -1429,7 +1426,7 @@ body.page-theme-color-secondary .teaser-box-category-marker:hover {
}
body.page-theme-color-secondary .teaser-box-category-marker::after {
content: url(../img/teaser-box-arrow-brand-secondary.svg);
mask: url('../img/teaser-box-arrow-brand-secondary.svg') no-repeat center / contain;
}
body.page-theme-color-tertiary .teaser-box-image {

20
kit/css/custom.css
View file

@ -24,3 +24,23 @@ ul.bestandliste {
margin-left: 1rem;
font-weight: normal;
}
.intro-element .content-wrap #centeredMultiLine {
height: 60%;
width: 100%;
line-height: normal;
text-shadow: 1px 1px 3px black;
font-family: "Roboto", "Source Sans Pro", "Open Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-weight: 400;
}
.intro-element {
padding: 2rem 0 2rem 0;
}
/* @media (max-width: 1024px) {
.intro-element .content-wrap #centeredMultiLine {
height: 100%;
line-height: 4em;
}
} */

15
kit/footer.php
View file

@ -14,6 +14,8 @@
</footer>
<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery-3.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery_002.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/parsley.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/Tabs.js" type="text/javascript"></script>
@ -21,10 +23,21 @@
<script src="<?php bloginfo('stylesheet_directory');?>/js/cookieconsent.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/magnific-popup.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/swiper.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/main.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/menu.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/custom.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/textFit.js" type="text/javascript"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
console.log("resized");
textFit(document.getElementById('centeredMultiLine'), {alignHoriz: true, alignVert: true, multiLine: true, reProcess: true, maxFontSize: 45});
});
window.addEventListener('resize', function(event){
console.log("resized");
textFit(document.getElementById('centeredMultiLine'), {alignHoriz: true, alignVert: true, multiLine: true, reProcess: true, maxFontSize: 45});
});
</script>
<?php wp_footer(); ?>

2
kit/header.php
View file

@ -22,8 +22,6 @@
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/content.css" media="all">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory');?>/css/custom.css" media="all">
<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery-3.js" type="text/javascript"></script>
<link rel="apple-touch-icon" href="<?php bloginfo('stylesheet_directory');?>/img/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="<?php bloginfo('stylesheet_directory');?>/img/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php bloginfo('stylesheet_directory');?>/img/apple-touch-icon-114x114.png">

238
kit/js/textFit.js Normal file
View file

@ -0,0 +1,238 @@
/**
* textFit v2.3.1
* Previously known as jQuery.textFit
* 11/2014 by STRML (strml.github.com)
* MIT License
*
* To use: textFit(document.getElementById('target-div'), options);
*
* Will make the *text* content inside a container scale to fit the container
* The container is required to have a set width and height
* Uses binary search to fit text with minimal layout calls.
* Version 2.0 does not use jQuery.
*/
/*global define:true, document:true, window:true, HTMLElement:true*/
(function(root, factory) {
"use strict";
// UMD shim
if (typeof define === "function" && define.amd) {
// AMD
define([], factory);
} else if (typeof exports === "object") {
// Node/CommonJS
module.exports = factory();
} else {
// Browser
root.textFit = factory();
}
}(typeof global === "object" ? global : this, function () {
"use strict";
var defaultSettings = {
alignVert: false, // if true, textFit will align vertically using css tables
alignHoriz: false, // if true, textFit will set text-align: center
multiLine: false, // if true, textFit will not set white-space: no-wrap
detectMultiLine: true, // disable to turn off automatic multi-line sensing
minFontSize: 6,
maxFontSize: 80,
reProcess: true, // if true, textFit will re-process already-fit nodes. Set to 'false' for better performance
widthOnly: false, // if true, textFit will fit text to element width, regardless of text height
alignVertWithFlexbox: false, // if true, textFit will use flexbox for vertical alignment
};
return function textFit(els, options) {
if (!options) options = {};
// Extend options.
var settings = {};
for(var key in defaultSettings){
if(options.hasOwnProperty(key)){
settings[key] = options[key];
} else {
settings[key] = defaultSettings[key];
}
}
// Convert jQuery objects into arrays
if (typeof els.toArray === "function") {
els = els.toArray();
}
// Support passing a single el
var elType = Object.prototype.toString.call(els);
if (elType !== '[object Array]' && elType !== '[object NodeList]' &&
elType !== '[object HTMLCollection]'){
els = [els];
}
// Process each el we've passed.
for(var i = 0; i < els.length; i++){
processItem(els[i], settings);
}
};
/**
* The meat. Given an el, make the text inside it fit its parent.
* @param {DOMElement} el Child el.
* @param {Object} settings Options for fit.
*/
function processItem(el, settings){
if (!isElement(el) || (!settings.reProcess && el.getAttribute('textFitted'))) {
return false;
}
// Set textFitted attribute so we know this was processed.
if(!settings.reProcess){
el.setAttribute('textFitted', 1);
}
var innerSpan, originalHeight, originalHTML, originalWidth;
var low, mid, high;
// Get element data.
originalHTML = el.innerHTML;
originalWidth = innerWidth(el);
originalHeight = innerHeight(el);
// Don't process if we can't find box dimensions
if (!originalWidth || (!settings.widthOnly && !originalHeight)) {
if(!settings.widthOnly)
throw new Error('Set a static height and width on the target element ' + el.outerHTML +
' before using textFit!');
else
throw new Error('Set a static width on the target element ' + el.outerHTML +
' before using textFit!');
}
// Add textFitted span inside this container.
if (originalHTML.indexOf('textFitted') === -1) {
innerSpan = document.createElement('span');
innerSpan.className = 'textFitted';
// Inline block ensure it takes on the size of its contents, even if they are enclosed
// in other tags like <p>
innerSpan.style['display'] = 'inline-block';
innerSpan.innerHTML = originalHTML;
el.innerHTML = '';
el.appendChild(innerSpan);
} else {
// Reprocessing.
innerSpan = el.querySelector('span.textFitted');
// Remove vertical align if we're reprocessing.
if (hasClass(innerSpan, 'textFitAlignVert')){
innerSpan.className = innerSpan.className.replace('textFitAlignVert', '');
innerSpan.style['height'] = '';
el.className.replace('textFitAlignVertFlex', '');
}
}
// Prepare & set alignment
if (settings.alignHoriz) {
el.style['text-align'] = 'center';
innerSpan.style['text-align'] = 'center';
}
// Check if this string is multiple lines
// Not guaranteed to always work if you use wonky line-heights
var multiLine = settings.multiLine;
if (settings.detectMultiLine && !multiLine &&
innerSpan.scrollHeight >= parseInt(window.getComputedStyle(innerSpan)['font-size'], 10) * 2){
multiLine = true;
}
// If we're not treating this as a multiline string, don't let it wrap.
if (!multiLine) {
el.style['white-space'] = 'nowrap';
}
low = settings.minFontSize + 1;
high = settings.maxFontSize + 1;
// Binary search for best fit
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;
}
// await injection point
}
// Sub 1 at the very end, this is closer to what we wanted.
innerSpan.style.fontSize = (mid - 1) + 'px';
// Our height is finalized. If we are aligning vertically, set that up.
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";
}
}
}
// Calculate height without padding.
function innerHeight(el){
var style = window.getComputedStyle(el, null);
return el.clientHeight -
parseInt(style.getPropertyValue('padding-top'), 10) -
parseInt(style.getPropertyValue('padding-bottom'), 10);
}
// Calculate width without padding.
function innerWidth(el){
var style = window.getComputedStyle(el, null);
return el.clientWidth -
parseInt(style.getPropertyValue('padding-left'), 10) -
parseInt(style.getPropertyValue('padding-right'), 10);
}
//Returns true if it is a DOM element
function isElement(o){
return (
typeof HTMLElement === "object" ? o instanceof HTMLElement : //DOM2
o && typeof o === "object" && o !== null && o.nodeType === 1 && typeof o.nodeName==="string"
);
}
function hasClass(element, cls) {
return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}
// Better than a stylesheet dependency
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);
}
}));

10
kit/style.css
View file

@ -118,7 +118,7 @@ dfn {
*/
h1 {
margin: .67em 0;
font-size: 2em;
/* font-size: 2em; */
}
/**
@ -969,9 +969,9 @@ body.page-theme-color-quaternary .color-page-theme-contrast {
h1 {
position: relative;
margin: 0;
font-size: 3.61111rem;
/*font-size: 3.61111rem;
line-height: 3.88889rem;
letter-spacing: .8px;
letter-spacing: .8px; */
}
.h1::after,
@ -1190,8 +1190,8 @@ body.page-theme-color-quaternary h2::after {
@media (max-width: 960px) {
.h1,
h1 {
font-size: 2.66667rem;
line-height: 3.11111rem;
/* font-size: 2.66667rem;
line-height: 3.11111rem; */
}
.h1::after,
h1::after {

5
kit/template-parts/content-page.php
View file

@ -27,7 +27,10 @@ $kit_category_url = get_category_link( $kit_categories[0]->term_id );
</span>
</a>
<?php } ?>
<?php the_title( '<h1>', '</h1>' ); ?>
<div id="centeredMultiLine">
<?php the_title( '<h1>', '</h1>' ); ?>
</div>
</div>
</div>
</section>