diff --git a/CHANGELOG.md b/CHANGELOG.md index 6724db576ea26105c3024e0d647e38ac09377cb1..886296029e67159508c79ce354d1117a7c4a6fcc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). + +## [2.2.2] - 16-01-2019 +### Fixed +- Overflowing text in Preview Cards when the card had icon + ## [2.2.1] - 10-12-2018 ### Fixed - Added styling for "+More" link in mega menu diff --git a/cern_components.info.yml b/cern_components.info.yml index c47c4566a312c4564684f6053a5108912bbeec88..3ee01a275c06ad520322371f360b036bcdeef97c 100755 --- a/cern_components.info.yml +++ b/cern_components.info.yml @@ -2,7 +2,7 @@ name: "CERN Components" type: module description: "Provides all the necessary modules regarding CERN Web Components." core: 8.x -version: 2.2.1 +version: 2.2.2 package: CERN Components dependencies: - components:components (>=8.x-1.1-alpha1) diff --git a/patterns/molecules/preview-card/css/component-preview-card.css b/patterns/molecules/preview-card/css/component-preview-card.css index 9da4c64e58e9b8e2b2f55a4b8e8f8d76f4371d1b..b6f8a95c92526c68c7229758a3bf6374185d875f 100644 --- a/patterns/molecules/preview-card/css/component-preview-card.css +++ b/patterns/molecules/preview-card/css/component-preview-card.css @@ -87,6 +87,11 @@ .component-preview-cards .component-preview-cards__category-icon-vocabulary { margin: 0 auto; text-align: center; } + .component-preview-cards .component-preview-cards__category-icon-vocabulary ~ .preview-card__title h3 a span { + display: inline-block; + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; } .component-preview-cards .component-preview-cards__category-icon-vocabulary:before { content: attr(data-icon); color: white; @@ -97,10 +102,6 @@ font-size: 60px; position: relative; top: -10px; } - .component-preview-cards .component-preview-cards__category-icon-vocabulary + .preview-card__title h3 a span { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; } .component-preview-cards .preview-card { width: 100%; } .component-preview-cards .preview-card__title { @@ -119,7 +120,6 @@ position: relative; line-height: 26px !important; } .component-preview-cards .preview-card__title h3 a span { - display: block; width: 100%; } .component-preview-cards .preview-card__title h3 a:hover { text-decoration: none; } diff --git a/patterns/molecules/preview-card/sass/component-preview-card.scss b/patterns/molecules/preview-card/sass/component-preview-card.scss index 896cf47176de913badd07bd8aa7bb7a38a4c58bb..8393bac12b50edafecdfa091a64a682dcb5c47c4 100755 --- a/patterns/molecules/preview-card/sass/component-preview-card.scss +++ b/patterns/molecules/preview-card/sass/component-preview-card.scss @@ -95,6 +95,22 @@ .component-preview-cards__category-icon-vocabulary { margin: 0 auto; text-align: center; + + & ~ .preview-card{ + &__title{ + h3{ + a{ + span{ + display: inline-block; + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; + } + } + } + } + } + &:before { content: attr(data-icon); color: white; @@ -113,9 +129,9 @@ h3{ a{ span{ - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; + //white-space: nowrap; + //overflow: hidden; + //text-overflow: ellipsis; } } } @@ -140,7 +156,7 @@ position: relative; line-height: 26px !important; span { - display: block; + //display: block; width: 100%; //white-space: normal; //overflow: hidden;