From 0353e3ec4b92f7ce8130fc0e1bb020e7d901b530 Mon Sep 17 00:00:00 2001
From: Konstantinos Platis <konstantinos.platis@cern.ch>
Date: Mon, 3 Dec 2018 16:05:44 +0100
Subject: [PATCH] Added responsive version in "preview-list" pattern
---
.../css/preview-list.component.css | 86 +++++-----
.../preview-list.ui_patterns.html.twig | 147 ++++++++++--------
.../scss/preview-list.component.scss | 53 +++----
3 files changed, 135 insertions(+), 151 deletions(-)
mode change 100755 => 100644 patterns/molecules/preview-list/css/preview-list.component.css
diff --git a/patterns/molecules/preview-list/css/preview-list.component.css b/patterns/molecules/preview-list/css/preview-list.component.css
old mode 100755
new mode 100644
index 59b13124..288b468d
--- a/patterns/molecules/preview-list/css/preview-list.component.css
+++ b/patterns/molecules/preview-list/css/preview-list.component.css
@@ -1,4 +1,6 @@
-.preview-list-component .preview-list-image {
+.preview-list-component {
+ display: block; }
+ .preview-list-component .preview-list-image {
width: 300px;
height: 170px;
background: #ddd;
@@ -9,56 +11,44 @@
background-repeat: no-repeat;
background-position: center;
background-size: 100%; }
-.preview-list-component .preview-list-news-info {
+ .preview-list-component .preview-list-news-info {
float: left;
width: calc(100% - 315px); }
-.preview-list-component .preview-list-news-info .preview-list-topic {
- display: inline; }
-.preview-list-component .preview-list-news-info .preview-list-topic a {
- color: black; }
-.preview-list-component .preview-list-news-info .preview-list-title {
- margin-top: 5px; }
-.preview-list-component .preview-list-news-info .preview-list-strap {
- margin-bottom: 2rem; }
-.preview-list-component .preview-list-news-info .preview-list-news-format {
- display: inline; }
-.preview-list-component .preview-list-news-info .preview-list-news-format * {
- display: inline; }
-.preview-list-component .preview-list-news-info .preview-list-news-format a {
- color: black; }
-.preview-list-component .preview-list-news-info .preview-list-topic.has-separator,
-.preview-list-component .preview-list-news-info .preview-list-date.has-separator {
- display: inline; }
-.preview-list-component .preview-list-news-info .preview-list-topic.has-separator:before,
-.preview-list-component .preview-list-news-info .preview-list-date.has-separator:before {
- content: '|';
- position: relative;
- display: inline-block;
- margin: 0 5px; }
-
-@media only screen and (max-width: 991px) {
+ .preview-list-component .preview-list-news-info .preview-list-topic {
+ display: inline; }
+ .preview-list-component .preview-list-news-info .preview-list-topic a {
+ color: black; }
.preview-list-component .preview-list-news-info .preview-list-title {
- font-size: 2rem; } }
+ margin-top: 5px; }
+ .preview-list-component .preview-list-news-info .preview-list-strap {
+ margin-bottom: 2rem; }
+ .preview-list-component .preview-list-news-info .preview-list-news-format {
+ display: inline; }
+ .preview-list-component .preview-list-news-info .preview-list-news-format * {
+ display: inline; }
+ .preview-list-component .preview-list-news-info .preview-list-news-format a {
+ color: black; }
+ .preview-list-component .preview-list-news-info .preview-list-topic.has-separator,
+ .preview-list-component .preview-list-news-info .preview-list-date.has-separator {
+ display: inline; }
+ .preview-list-component .preview-list-news-info .preview-list-topic.has-separator:before,
+ .preview-list-component .preview-list-news-info .preview-list-date.has-separator:before {
+ content: '|';
+ position: relative;
+ display: inline-block;
+ margin: 0 5px; }
+
+.preview-list-responsive {
+ display: none; }
+
@media only screen and (max-width: 767px) {
- .preview-list-component .preview-list-image {
- width: 170px; }
- .preview-list-component .preview-list-news-info {
- float: left;
- width: calc(100% - 185px); } }
-@media only screen and (max-width: 500px) {
- .preview-list-component .preview-list-image,
- .preview-list-component .preview-list-news-info {
- width: 100%;
- float: none;
- margin: 0;
- position: relative; }
- .preview-list-component .preview-list-news-info .preview-list-topic {
- position: absolute;
- top: -34px;
- left: 0px;
- background: rgba(0, 0, 0, 0.3);
- padding: 3px 10px; }
- .preview-list-component .preview-list-news-info .preview-list-topic a {
- color: white; } }
+ .preview-list-component {
+ display: none; }
+
+ .preview-list-responsive {
+ display: block; } }
+@media only screen and (max-width: 991px) {
+ .preview-list-component .preview-list-news-info .preview-list-title {
+ font-size: 2rem; } }
/*# sourceMappingURL=preview-list.component.css.map */
diff --git a/patterns/molecules/preview-list/preview-list.ui_patterns.html.twig b/patterns/molecules/preview-list/preview-list.ui_patterns.html.twig
index cccf491d..6e6a05a3 100755
--- a/patterns/molecules/preview-list/preview-list.ui_patterns.html.twig
+++ b/patterns/molecules/preview-list/preview-list.ui_patterns.html.twig
@@ -11,75 +11,84 @@
{# Preview List #}
<div class="preview-list-component clearfix">
- {# Image field #}
- {% if listing_cds_image | render %}
- {% set image_url = listing_cds_image|get_img_src %}
- {% else %}
- {% if listing_image | render %}
- {% set image_url = listing_image | render %}
- {% else %}
- {% if image | render %}
- {% if 'cds-image' in image|render|render %}
- {% set cds_id = image | render | get_tag_attribute('figure', 'id') %}
- {% set image_url = '//cds.cern.ch/images/' ~ cds_id ~ '/file?size=medium' %}
- {% else %}
- {% set image_url = image | render %}
- {% endif %}
- {% endif %}
- {% endif %}
- {% endif %}
+ {# Image field #}
+ {% if listing_cds_image | render %}
+ {% set image_url = listing_cds_image|get_img_src %}
+ {% else %}
+ {% if listing_image | render %}
+ {% set image_url = listing_image | render %}
+ {% else %}
+ {% if image | render %}
+ {% if 'cds-image' in image|render|render %}
+ {% set cds_id = image | render | get_tag_attribute('figure', 'id') %}
+ {% set image_url = '//cds.cern.ch/images/' ~ cds_id ~ '/file?size=medium' %}
+ {% else %}
+ {% set image_url = image | render %}
+ {% endif %}
+ {% endif %}
+ {% endif %}
+ {% endif %}
- {% set img_attributes = create_attribute() %}
- {% set img_attributes = img_attributes.addClass('preview-list-image') %}
- {% if image_url %}
- {% set img_attributes = img_attributes.setAttribute('style', "background: #dddddd url("~ image_url ~") no-repeat center center / cover") %}
- {% endif %}
- <div {{ img_attributes }}>
- {# {% if image|render %}{{image | get_img_src}}{% endif %} #}
- </div>
+ {% set img_attributes = create_attribute() %}
+ {% set img_attributes = img_attributes.addClass('preview-list-image') %}
+ {% if image_url %}
+ {% set img_attributes = img_attributes.setAttribute('style', "background: #dddddd url("~ image_url ~") no-repeat center center / cover") %}
+ {% endif %}
+ <div {{ img_attributes }}>
+ {# {% if image|render %}{{image | get_img_src}}{% endif %} #}
+ </div>
- {# Text Field #}
- <div class="preview-list-news-info">
- {# Title field #}
- {% if title | render %}
- <h3 class="preview-list-title">
- {{title}}
- </h3>
- {% endif %}
- {# Strap field #}
- {% if strap | render %}
- <div class="preview-list-strap">
- <p>
- {{strap}}
- </p>
- </div>
- {% endif %}
- {# News Format field #}
- {% if news_format | render %}
- <div class="preview-list-news-format">
- {{news_format}}
- </div>
- {% endif %}
- {# Topic field #}
- {% if topic | render %}
- {% if news_format | render %}
- <div{{ topic_classes.addClass('has-separator')}} >
- {% else %}
- <div {{ topic_classes }}>
- {% endif %}
- {{topic}}
- </div>
- {% endif %}
- {# Date field #}
- {% if date | render %}
- {% if topic or news_format %}
- <div {{date_classes.addClass('has-separator') }} >
- {% else %}
- <div {{date_classes}} >
+ {# Text Field #}
+ <div class="preview-list-news-info">
+ {# Title field #}
+ {% if title | render %}
+ <h3 class="preview-list-title">
+ {{title}}
+ </h3>
+ {% endif %}
+ {# Strap field #}
+ {% if strap | render %}
+ <div class="preview-list-strap">
+ <p>
+ {{strap}}
+ </p>
+ </div>
+ {% endif %}
+ {# News Format field #}
+ {% if news_format | render %}
+ <div class="preview-list-news-format">
+ {{news_format}}
+ </div>
+ {% endif %}
+ {# Topic field #}
+ {% if topic | render %}
+ {% if news_format | render %}
+ <div{{ topic_classes.addClass('has-separator')}} >
+ {% else %}
+ <div {{ topic_classes }}>
+ {% endif %}
+ {{topic}}
+ </div>
+ {% endif %}
+ {# Date field #}
+ {% if date | render %}
+ {% if topic or news_format %}
+ <div {{date_classes.addClass('has-separator') }} >
+ {% else %}
+ <div {{date_classes}} >
- {% endif %}
- {{date}}
- </div>
- {% endif %}
- </div>
- </div>
+ {% endif %}
+ {{date}}
+ </div>
+ {% endif %}
+ </div>
+ </div>
+
+
+ <div class="preview-list-responsive">
+ {% include '@cern_components/molecules/preview-card/preview-card.html.twig'
+ with {'background_url': image_url,
+ 'category': topic,
+ }
+ %}
+ </div>
\ No newline at end of file
diff --git a/patterns/molecules/preview-list/scss/preview-list.component.scss b/patterns/molecules/preview-list/scss/preview-list.component.scss
index 3d3df283..2da530b8 100755
--- a/patterns/molecules/preview-list/scss/preview-list.component.scss
+++ b/patterns/molecules/preview-list/scss/preview-list.component.scss
@@ -1,4 +1,8 @@
.preview-list-component {
+
+ //initializes with normal preview list
+ display: block;
+
.preview-list-image {
width: 300px;
height: 170px;
@@ -67,48 +71,29 @@
}
}
-@media only screen and (max-width: 991px) {
- .preview-list-component {
- .preview-list-news-info {
- .preview-list-title {
- font-size: 2rem;
- }
- }
- }
+.preview-list-responsive{
+ display: none;
}
+//for responsive devices => shows responsive version
@media only screen and (max-width: 767px) {
- .preview-list-component {
- .preview-list-image {
- width: 170px;
- }
- .preview-list-news-info {
- float: left;
- width: calc(100% - 185px);
- }
+ .preview-list-component{
+ display: none;
+ }
+
+ .preview-list-responsive{
+ display: block;
}
}
-@media only screen and (max-width: 500px) {
+
+
+@media only screen and (max-width: 991px) {
.preview-list-component {
- .preview-list-image,
.preview-list-news-info {
- width: 100%;
- float: none;
- margin: 0;
- position: relative;
- }
- .preview-list-news-info {
- .preview-list-topic {
- position: absolute;
- top: -34px;
- left: 0px;
- background: rgba(0, 0, 0, 0.3);
- padding: 3px 10px;
- a {
- color: white;
- }
+ .preview-list-title {
+ font-size: 2rem;
}
}
}
-}
+}
\ No newline at end of file
--
GitLab