From 5586da31a121ed32fbe4c93ba3be297779bb5906 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Fri, 12 Jul 2019 07:27:20 +0000
Subject: [PATCH] Applied same settings as Preview Card in the rest of the
Boxes
---
.../molecules/media/css/media.component.css | 12 ++++++-----
patterns/molecules/media/media.html.twig | 21 ++++++++++++++++---
.../molecules/media/sass/media.component.scss | 4 ++--
.../css/component-preview-card.css | 1 +
.../sass/component-preview-card.scss | 1 +
.../css/component-related_card.css | 13 +++++++-----
.../related-card/related-card.html.twig | 21 ++++++++++++++++---
.../sass/component-related_card.scss | 7 +++++--
8 files changed, 60 insertions(+), 20 deletions(-)
diff --git a/patterns/molecules/media/css/media.component.css b/patterns/molecules/media/css/media.component.css
index 2754945f..b9bc81f4 100755
--- a/patterns/molecules/media/css/media.component.css
+++ b/patterns/molecules/media/css/media.component.css
@@ -82,6 +82,7 @@
top: -15px; }
.component-media-content__icon::before {
content: "\7a";
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
font-size: 50px;
font-size: 5rem;
font-family: "cern-icons";
@@ -121,11 +122,10 @@
display: block;
position: relative; }
.component-media-content__title h3 a span {
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
display: block;
width: 100%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis; }
+ overflow: hidden; }
.component-media-content__title h3 a:hover {
text-decoration: none; }
.component-media-content__title h3 a:before {
@@ -249,8 +249,8 @@
background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='rgba(0, 0, 0, 0)', endColorStr='rgba(0, 0, 0, 0.9)');
position: absolute;
- height: 101%;
- width: 101%;
+ height: 100%;
+ width: 100%;
top: 0;
left: 0;
z-index: 0; }
@@ -411,3 +411,5 @@
@media screen and (min-width: 992px) {
.component-row.box-effects .component-row__center .component-media-content.portrait.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-media-content.simple-display.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-media-content:not(.portrait):not(.simple-display):hover .component-preview-cards__veil {
opacity: 0; } }
+
+/*# sourceMappingURL=media.component.css.map */
diff --git a/patterns/molecules/media/media.html.twig b/patterns/molecules/media/media.html.twig
index bd7d6cf2..b0eb5fb4 100755
--- a/patterns/molecules/media/media.html.twig
+++ b/patterns/molecules/media/media.html.twig
@@ -23,9 +23,24 @@
{# Link field for component #}
{% if link | render %}
<h3>
- {{ link|openlink }}
- <span>{{ link|render|striptags|raw }}</span>
- {{ link|closelink }}
+ {% if link | render | get_tag_attribute("a", "href") %}
+
+ {{ link|openlink }}
+ <span class="text-color" {{ attributes_textcolor }}>
+ {{ link|render|striptags|length > 60 ?
+ link|render|striptags|htmlspecialchars|slice(0,60) ~ '...' :
+ link|render|striptags|htmlspecialchars }}
+ </span>
+ {{ link|closelink }}
+
+ {% else %}
+
+ {{ link|length > 60 ?
+ link|htmlspecialchars|slice(0,60) ~ '...' :
+ link }}
+
+ {% endif %}
+
</h3>
{% endif %}
</div>
diff --git a/patterns/molecules/media/sass/media.component.scss b/patterns/molecules/media/sass/media.component.scss
index 00f66529..1674df7f 100755
--- a/patterns/molecules/media/sass/media.component.scss
+++ b/patterns/molecules/media/sass/media.component.scss
@@ -84,6 +84,7 @@
top: -15px;
&::before {
content: "\7a";
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
@include font-size(5.0);
font-family: "cern-icons";
-moz-osx-font-smoothing: grayscale;
@@ -113,11 +114,10 @@
display: block;
position: relative;
span {
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
display: block;
width: 100%;
- white-space: nowrap;
overflow: hidden;
- text-overflow: ellipsis;
}
}
a:hover {
diff --git a/patterns/molecules/preview-card/css/component-preview-card.css b/patterns/molecules/preview-card/css/component-preview-card.css
index 7aaa7b86..b3f7741d 100644
--- a/patterns/molecules/preview-card/css/component-preview-card.css
+++ b/patterns/molecules/preview-card/css/component-preview-card.css
@@ -94,6 +94,7 @@
text-overflow: ellipsis; }
.component-preview-cards .component-preview-cards__category-icon-vocabulary:before {
content: attr(data-icon);
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
color: white;
font-family: "cern-icons";
-moz-osx-font-smoothing: grayscale;
diff --git a/patterns/molecules/preview-card/sass/component-preview-card.scss b/patterns/molecules/preview-card/sass/component-preview-card.scss
index eb3b7d0e..ff0310d0 100755
--- a/patterns/molecules/preview-card/sass/component-preview-card.scss
+++ b/patterns/molecules/preview-card/sass/component-preview-card.scss
@@ -113,6 +113,7 @@
&:before {
content: attr(data-icon);
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
color: white;
font-family: "cern-icons";
-moz-osx-font-smoothing: grayscale;
diff --git a/patterns/molecules/related-card/css/component-related_card.css b/patterns/molecules/related-card/css/component-related_card.css
index 7dd16c49..9ac30947 100755
--- a/patterns/molecules/related-card/css/component-related_card.css
+++ b/patterns/molecules/related-card/css/component-related_card.css
@@ -103,15 +103,14 @@
padding: 0;
margin: 0; }
.component-related_card__content__link a {
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
display: block;
position: relative;
text-decoration: none; }
.component-related_card__content__link a span {
display: block;
width: 100%;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis; }
+ overflow: hidden; }
.component-related_card__content__link a:hover {
text-decoration: none; }
.component-related_card__content__link a:before {
@@ -154,9 +153,11 @@
.component-related_card__content__text p:last-child {
margin: 0; }
.component-related_card__content__format {
- font-family: 'sourcesans-light'; }
+ font-family: 'sourcesans-light';
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black; }
.component-related_card__content .preview-card__date {
- font-family: 'sourcesans-light'; }
+ font-family: 'sourcesans-light';
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black; }
.component-related_card.portrait {
width: calc(33.3% - 8px);
min-height: 428px;
@@ -428,3 +429,5 @@
@media screen and (min-width: 992px) {
.component-row.box-effects .component-row__center .component-related_card.portrait.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-related_card.simple-display.box-force-full-width:hover .component-preview-cards__veil, .component-row.box-effects .component-row__center .component-related_card:not(.portrait):not(.simple-display):hover .component-preview-cards__veil {
opacity: 0; } }
+
+/*# sourceMappingURL=component-related_card.css.map */
diff --git a/patterns/molecules/related-card/related-card.html.twig b/patterns/molecules/related-card/related-card.html.twig
index d9e53b72..762044cd 100755
--- a/patterns/molecules/related-card/related-card.html.twig
+++ b/patterns/molecules/related-card/related-card.html.twig
@@ -47,9 +47,24 @@
<div class="component-related_card__content__link">
{% if link | render is not empty %}
<h3>
- {{ link|openlink }}
- <span class="text-color" {{ attributes_textcolor }}>{{ link|render|striptags|raw }}</span>
- {{ link|closelink }}
+ {% if link | render | get_tag_attribute("a", "href") %}
+
+ {{ link|openlink }}
+ <span class="text-color" {{ attributes_textcolor }}>
+ {{ link|render|striptags|length > 60 ?
+ link|render|striptags|htmlspecialchars|slice(0,60) ~ '...' :
+ link|render|striptags|htmlspecialchars }}
+ </span>
+ {{ link|closelink }}
+
+ {% else %}
+
+ {{ link|length > 60 ?
+ link|htmlspecialchars|slice(0,60) ~ '...' :
+ link }}
+
+ {% endif %}
+
</h3>
{% endif %}
</div>
diff --git a/patterns/molecules/related-card/sass/component-related_card.scss b/patterns/molecules/related-card/sass/component-related_card.scss
index 08a106eb..2b1f0496 100755
--- a/patterns/molecules/related-card/sass/component-related_card.scss
+++ b/patterns/molecules/related-card/sass/component-related_card.scss
@@ -109,15 +109,14 @@
margin: 0;
}
a {
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
display: block;
position: relative;
text-decoration: none;
span {
display: block;
width: 100%;
- white-space: nowrap;
overflow: hidden;
- text-overflow: ellipsis;
}
}
a:hover {
@@ -167,9 +166,13 @@
}
&__format {
font-family: 'sourcesans-light';
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
+
}
.preview-card__date {
font-family: 'sourcesans-light';
+ text-shadow: 1px 0px 1px black, 0px 1px 1px black, -1px 0px 1px black, 0px -1px 1px black, 0 0 1px black;
+
}
} //
// display
--
GitLab