From c98d552237a708c41933a38fcabb28f3dc9472c2 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Thu, 17 Jan 2019 08:23:22 +0000
Subject: [PATCH] Resolve "Preview card text overflows when there is an icon"
---
CHANGELOG.md | 5 ++++
cern_components.info.yml | 2 +-
.../css/component-preview-card.css | 10 ++++----
.../sass/component-preview-card.scss | 24 +++++++++++++++----
4 files changed, 31 insertions(+), 10 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6724db57..88629602 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 c47c4566..3ee01a27 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 9da4c64e..b6f8a95c 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 896cf471..8393bac1 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;
--
GitLab