diff --git a/CHANGELOG.md b/CHANGELOG.md
new file mode 100644
index 0000000000000000000000000000000000000000..bcf94a678db5b8c6c6beb34072941c8d4316fc59
--- /dev/null
+++ b/CHANGELOG.md
@@ -0,0 +1,24 @@
+ Changelog
+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.0] - 06-12-2018
+### Fixed
+- FAQ List pattern not holding 100% of the width
+- Cut scroll button on mobile chrome
+- Image Gallery stretching
+
+### Added
+- Responsive version in Preview List pattern
+- Border around Preview List images
+- New twig function that returns current language
+
+
+### Changed
+- Design of FAQ List pattern
+
+### Removed
+- Avatar from "opinion" pieces
+
diff --git a/cern_components.info.yml b/cern_components.info.yml
index 08772ff497573718efd900ebdec7491d91c9889b..e5fe0eeeac3d12e27ffbf9805fbeb555ab418727 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.1
+version: 2.2
package: CERN Components
dependencies:
- components:components (>=8.x-1.1-alpha1)
diff --git a/patterns/molecules/faq-list/css/faq-list.component.css b/patterns/molecules/faq-list/css/faq-list.component.css
index 4716613785e3c22b3e4cd2982061097dce965105..b84c5ff0561b7b6533e1a3434f03d4e96d9951d1 100644
--- a/patterns/molecules/faq-list/css/faq-list.component.css
+++ b/patterns/molecules/faq-list/css/faq-list.component.css
@@ -1,26 +1,28 @@
/* FAQ PAGE */
-.view-faq .view-content {
+.view .view-content {
margin-top: 3rem; }
-.view-faq .faq-list-content {
+.view .views-row {
+ width: 100%; }
+.view .faq-list-content {
margin-top: 25px;
padding-bottom: 20px;
border-bottom: 1px solid #c1c1c1; }
- .view-faq .faq-list-content .faq-list-content-title {
+ .view .faq-list-content .faq-list-content-title {
position: relative; }
- .view-faq .faq-list-content .faq-list-content-title h2 {
+ .view .faq-list-content .faq-list-content-title h2 {
margin: 5px;
padding: 0;
font-size: 18px;
line-height: 25px;
width: calc(100% - 60px);
display: inline-block; }
- .view-faq .faq-list-content .faq-list-content-title h2 a {
+ .view .faq-list-content .faq-list-content-title h2 a {
color: #222;
letter-spacing: 0.3px; }
- .view-faq .faq-list-content .faq-list-content-title h2 ahover, .view-faq .faq-list-content .faq-list-content-title h2 afocus, .view-faq .faq-list-content .faq-list-content-title h2 aselected {
+ .view .faq-list-content .faq-list-content-title h2 ahover, .view .faq-list-content .faq-list-content-title h2 afocus, .view .faq-list-content .faq-list-content-title h2 aselected {
color: #222;
text-decoration: none; }
- .view-faq .faq-list-content .faq-list-content-title span {
+ .view .faq-list-content .faq-list-content-title span {
width: 30px;
margin: 5px;
padding: 0;
@@ -31,10 +33,12 @@
position: absolute;
top: 0;
right: 0; }
- .view-faq .faq-list-content .faq-list-content-body {
+ .view .faq-list-content .faq-list-content-body {
margin: 5px;
color: #555;
padding-right: 50px; }
- .view-faq .faq-list-content .faq-list-content-body h1, .view-faq .faq-list-content .faq-list-content-body h2, .view-faq .faq-list-content .faq-list-content-body h3, .view-faq .faq-list-content .faq-list-content-body h4, .view-faq .faq-list-content .faq-list-content-body h5 {
+ .view .faq-list-content .faq-list-content-body h1, .view .faq-list-content .faq-list-content-body h2, .view .faq-list-content .faq-list-content-body h3, .view .faq-list-content .faq-list-content-body h4, .view .faq-list-content .faq-list-content-body h5 {
font-size: 1.6rem;
font-weight: bold; }
+
+/*# sourceMappingURL=faq-list.component.css.map */
diff --git a/patterns/molecules/faq-list/faq-list.html.twig b/patterns/molecules/faq-list/faq-list.html.twig
index 3339feca8736b69dedf9e1fb28fa7076fdd0c342..898d386af4b74ece86a21b00e46d3525d16da800 100644
--- a/patterns/molecules/faq-list/faq-list.html.twig
+++ b/patterns/molecules/faq-list/faq-list.html.twig
@@ -3,21 +3,26 @@
* FAQ List Display Pattern Twig.
#}
-{# Content #}
-<div class="faq-list-content">
- {# Title field #}
- {% if title | render %}
- <div class="faq-list-content-title clearfix">
- <h2>
- {{ title }}
- </h2>
- <span class="pull-right collapseManager">+</span>
- </div>
- {% endif %}
- {# Body field #}
- {% if body | render %}
- <div class="faq-list-content-body hidden clearfix">
- {{ body }}
- </div>
- {% endif %}
-</div>
+{% set nhash = random() %}
+
+
+<div class="panel panel-default">
+ <div class="panel-heading">
+ <h4 class="panel-title">
+ <a
+ data-parent="#{{ "accordion"~ nhash }}"
+ data-toggle="collapse"
+ class="collapsed"
+ aria-expanded="false"
+ href={{ "#collapse"~ nhash }} >{{ title }}
+ </a>
+ </h4>
+ </div>
+ <div class="panel-collapse collapse"
+ aria-expanded="false"
+ id={{ "collapse"~ nhash }}>
+ <div class="panel-body">
+ {{ body }}
+ </div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/patterns/molecules/faq-list/scss/faq-list.component.css b/patterns/molecules/faq-list/scss/faq-list.component.css
deleted file mode 100644
index db5333da1fda317632777c3209716b180c67434b..0000000000000000000000000000000000000000
--- a/patterns/molecules/faq-list/scss/faq-list.component.css
+++ /dev/null
@@ -1,34 +0,0 @@
-/* FAQ PAGE */
-.view-faq .view-content {
- margin-top: 3rem; }
-.view-faq .faq-list-content {
- margin-top: 25px;
- padding-bottom: 20px;
- border-bottom: 1px solid #c1c1c1; }
- .view-faq .faq-list-content .faq-list-content-title h2 {
- margin: 5px;
- padding: 0;
- font-size: 18px;
- line-height: 25px;
- width: calc(100% - 60px);
- display: inline-block; }
- .view-faq .faq-list-content .faq-list-content-title h2 a {
- color: #222;
- letter-spacing: 0.3px; }
- .view-faq .faq-list-content .faq-list-content-title h2 ahover, .view-faq .faq-list-content .faq-list-content-title h2 afocus, .view-faq .faq-list-content .faq-list-content-title h2 aselected {
- color: #222;
- text-decoration: none; }
- .view-faq .faq-list-content .faq-list-content-title span {
- width: 30px;
- margin: 5px;
- padding: 0;
- font-size: 30px;
- line-height: 26px;
- color: #222;
- cursor: pointer; }
- .view-faq .faq-list-content .faq-list-content-body {
- margin: 5px;
- color: #555; }
- .view-faq .faq-list-content .faq-list-content-body h1, .view-faq .faq-list-content .faq-list-content-body h2, .view-faq .faq-list-content .faq-list-content-body h3, .view-faq .faq-list-content .faq-list-content-body h4, .view-faq .faq-list-content .faq-list-content-body h5 {
- font-size: 1.6rem;
- font-weight: bold; }
diff --git a/patterns/molecules/faq-list/scss/faq-list.component.scss b/patterns/molecules/faq-list/scss/faq-list.component.scss
index 6d4326d5486f95e0311cc122eaaabd8a115fad9b..7b168d17876b4cdf8b947d85a24832e25c7c1c9c 100644
--- a/patterns/molecules/faq-list/scss/faq-list.component.scss
+++ b/patterns/molecules/faq-list/scss/faq-list.component.scss
@@ -1,9 +1,13 @@
/* FAQ PAGE */
- .view-faq {
+ .view {
.view-content {
margin-top: 3rem;
}
+
+ .views-row{
+ width: 100%;
+ }
.faq-list-content {
margin-top: 25px;
padding-bottom: 20px;
diff --git a/patterns/molecules/header-blocks/header-blocks.ui_patterns.yml b/patterns/molecules/header-blocks/header-blocks.ui_patterns.yml
index 3780cddf355a11b70f77f32ed24341dbef52be7c..6d94ab9b3b6fd4c6315c2e372c62e4c79c4adee5 100755
--- a/patterns/molecules/header-blocks/header-blocks.ui_patterns.yml
+++ b/patterns/molecules/header-blocks/header-blocks.ui_patterns.yml
@@ -24,14 +24,15 @@ header_blocks:
subtitle: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
link: http://cern.ch
background_image: http://lorempixel.com/900/500/sports/6
-
+
libraries:
- cern_components/owlcarousel
-
+
- carousel-library:
js:
js/header_carousel.js: {}
+ js/android-fix.js: {}
css:
component:
css/header_blocks.css: {}
diff --git a/patterns/molecules/header-blocks/js/android-fix.js b/patterns/molecules/header-blocks/js/android-fix.js
new file mode 100644
index 0000000000000000000000000000000000000000..09f43439eb2cc403bd30ea3b76d6730fd2c556c3
--- /dev/null
+++ b/patterns/molecules/header-blocks/js/android-fix.js
@@ -0,0 +1,9 @@
+var ua = navigator.userAgent;
+if (ua.includes('Chrome') && ua.includes('Mobile')) {
+ (function ($) {
+ $(document).ready(function() {
+ $('.owl-dots').first().css('bottom', '55px');
+ $('.component-header__scroll').first().css('bottom', '55px');
+ });
+ })(jQuery);
+}
diff --git a/patterns/molecules/news-display/css/news-display.component.css b/patterns/molecules/news-display/css/news-display.component.css
index 1c9032d6c97b7d775f6500b005a6fe9f8b5ddbd7..c9b3f398d4388850f10eafbfc182bb4d8548436e 100644
--- a/patterns/molecules/news-display/css/news-display.component.css
+++ b/patterns/molecules/news-display/css/news-display.component.css
@@ -1,28 +1,22 @@
body.page-node-type-news-page main {
- background: white url(../images/pagebg.png) no-repeat 100% 100%;
-}
+ background: white url(../images/pagebg.png) no-repeat 100% 100%; }
body.page-node-type-news-page main .fluid-container {
width: 100%;
- margin: auto;
-}
+ margin: auto; }
body.page-node-type-news-page .wrapper-center,
body.page-node-type-news-page .wrapper-center.has-columns {
- padding: 0 10%;
-}
+ padding: 0 10%; }
body.page-node-type-news-page .wrapper-center.has-left-column {
- padding: 0 0 0 10%;
-}
+ padding: 0 0 0 10%; }
body.page-node-type-news-page .wrapper-center.has-right-column {
- padding: 0 10% 0 0;
-}
+ padding: 0 10% 0 0; }
body.page-node-type-news-page .wrapper-center.has-no-column {
- padding: 0 0;
-}
+ padding: 0 0; }
@media only screen and (max-width: 991px) {
body.page-node-type-news-page .wrapper-center,
@@ -30,102 +24,75 @@ body.page-node-type-news-page .wrapper-center.has-no-column {
body.page-node-type-news-page .wrapper-center.has-left-column,
body.page-node-type-news-page .wrapper-center.has-right-column,
body.page-node-type-news-page .wrapper-center.has-no-column {
- padding: 0 3%;
- }
-}
+ padding: 0 3%; } }
body.page-node-type-news-page .sidebar-right {
margin-top: 82px;
- position: relative;
-}
+ position: relative; }
hr.news-page-hr-separator {
border-top-width: 2px;
- margin: 15px 0 20px 0;
-}
+ margin: 15px 0 20px 0; }
.news-node-full-content-first-breadcrumbs a {
display: inline;
margin-right: 15px;
- position: relative;
-}
-
-.news-node-full-content-first-breadcrumbs a:after {
- content: '\6a';
- font-family: "cern-icons";
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- position: absolute;
- font-size: 1em;
- line-height: 1em;
- top: 3px;
- right: -15px;
-}
-
-.news-node-full-content-first-breadcrumbs a:last-child {
- color: black;
-}
-
-.news-node-full-content-first-breadcrumbs a:last-child:after {
- content: unset;
-}
+ position: relative; }
+ .news-node-full-content-first-breadcrumbs a:after {
+ content: '\6a';
+ font-family: "cern-icons";
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-font-smoothing: antialiased;
+ position: absolute;
+ font-size: 1em;
+ line-height: 1em;
+ top: 3px;
+ right: -15px; }
+ .news-node-full-content-first-breadcrumbs a:last-child {
+ color: black; }
+ .news-node-full-content-first-breadcrumbs a:last-child:after {
+ content: unset; }
.news-node-full-content-view-language * {
display: inline;
- font-style: italic;
-}
+ font-style: italic; }
.news-node-full-content-view-language a {
- text-decoration: underline;
-}
+ text-decoration: underline; }
.news-node-full-content-second-breadcrumbs {
text-transform: uppercase;
font-weight: bold;
- color: #0855a0;
-}
-
-.news-node-full-content-second-breadcrumbs a {
- font-weight: 500;
- display: inline;
- margin-left: 15px;
- position: relative;
-}
-
-.news-node-full-content-second-breadcrumbs a:before {
- content: '|';
- position: absolute;
- font-size: 1em;
- line-height: 1em;
- top: 2px;
- left: -10px;
-}
-
-.news-node-full-content-second-breadcrumbs a:last-child {
- color: black;
-}
+ color: #0855a0; }
+ .news-node-full-content-second-breadcrumbs a {
+ font-weight: 500;
+ display: inline;
+ margin-left: 15px;
+ position: relative; }
+ .news-node-full-content-second-breadcrumbs a:before {
+ content: '|';
+ position: absolute;
+ font-size: 1em;
+ line-height: 1em;
+ top: 2px;
+ left: -10px; }
+ .news-node-full-content-second-breadcrumbs a:last-child {
+ color: black; }
.news-node-full-content-created-date-author .news-node-full-content-created_date {
- text-transform: uppercase;
-}
+ text-transform: uppercase; }
.news-node-full-content-created-date-author p {
- display: inline;
-}
-
-.news-node-full-content-created-date-author p.news-node-full-content-author a {
- position: relative;
-}
-
-.news-node-full-content-created-date-author p.news-node-full-content-author a:hover {
- text-decoration: none;
-}
+ display: inline; }
+ .news-node-full-content-created-date-author p.news-node-full-content-author a {
+ position: relative; }
+ .news-node-full-content-created-date-author p.news-node-full-content-author a:hover {
+ text-decoration: none; }
.news-node-full-content-caption {
/* margin-top: 0.5em;
font-size: 0.9em;
- opacity: 0.8; */
-}
+ opacity: 0.8; */ }
h1.news-node-full-content-title {
font-size: 40px;
@@ -135,79 +102,58 @@ h1.news-node-full-content-title {
/*line-height: 50px;*/
letter-spacing: normal;
/*color: #292929;*/
- margin-top: 8px;
-}
+ margin-top: 8px; }
.news-node-full-content-avatar {
float: left;
margin: 0 20px 20px 0;
max-width: 150px;
- font-size: 12px;
-}
-
-.news-node-full-content-avatar p {
- margin: 0;
-}
-
-.news-node-full-content-avatar img {
- width: 100%;
- height: auto;
- margin: 0 0 15px;
-}
-
-.news-node-full-content-avatar .news-node-full-content-author {
- font-size: 16px;
- margin: 0;
-}
+ font-size: 12px; }
+ .news-node-full-content-avatar p {
+ margin: 0; }
+ .news-node-full-content-avatar img {
+ width: 100%;
+ height: auto;
+ margin: 0 0 15px; }
+ .news-node-full-content-avatar .news-node-full-content-author {
+ font-size: 16px;
+ margin: 0; }
.news-node-full-content-strap {
font-family: "sourcesans-semibold";
- font-size: 20px;
-}
+ font-size: 20px; }
.news-node-center-content {
- margin-bottom: 2rem;
-}
-
-.news-node-center-content .news-node-full-content-right {
- padding-left: 50px;
-}
-
-.news-node-center-content .news-node-full-content-right .news-node-full-content-also-on-view h2 {
- /*font-family: "sourcesans-regular";*/
- font-size: 30px;
- font-weight: normal;
- font-style: normal;
- font-stretch: normal;
- /*line-height: normal;*/
- letter-spacing: normal;
-}
-
-.news-node-center-content .news-node-full-content-right .news-node-full-content-also-on-view div {
- background: #0855a0;
- width: 100%;
- height: 200px;
- margin-bottom: 10px;
-}
+ margin-bottom: 2rem; }
+ .news-node-center-content .news-node-full-content-right {
+ padding-left: 50px; }
+ .news-node-center-content .news-node-full-content-right .news-node-full-content-also-on-view h2 {
+ /*font-family: "sourcesans-regular";*/
+ font-size: 30px;
+ font-weight: normal;
+ font-style: normal;
+ font-stretch: normal;
+ /*line-height: normal;*/
+ letter-spacing: normal; }
+ .news-node-center-content .news-node-full-content-right .news-node-full-content-also-on-view div {
+ background: #0855a0;
+ width: 100%;
+ height: 200px;
+ margin-bottom: 10px; }
.news-node-full-content-tags {
- margin-top: 4rem;
-}
-
-.news-node-full-content-tags a {
- background-color: #0855a0;
- padding: 3px 8px 0px;
- font-size: 16px;
- font-weight: normal;
- color: white;
- margin-right: 8px;
-}
-
-.news-node-full-content-tags a:hover {
- box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.3) inset;
- color: white;
- text-decoration: none !important;
-}
+ margin-top: 4rem; }
+ .news-node-full-content-tags a {
+ background-color: #0855a0;
+ padding: 3px 8px 0px;
+ font-size: 16px;
+ font-weight: normal;
+ color: white;
+ margin-right: 8px; }
+ .news-node-full-content-tags a:hover {
+ box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.3) inset;
+ color: white;
+ text-decoration: none !important; }
.news-node-full-content-file {
/*span {
@@ -229,45 +175,31 @@ h1.news-node-full-content-title {
&:hover {
box-shadow: 0 0 0 100px rgba(0,0,0,0.3) inset;
}
- }*/
-}
-
-.news-node-full-content-file .table > tbody > tr > td {
- padding-top: 15px;
- padding-bottom: 15px;
-}
-
-.news-node-full-content-file .file-size {
- display: none;
-}
+ }*/ }
+ .news-node-full-content-file .table > tbody > tr > td {
+ padding-top: 15px;
+ padding-bottom: 15px; }
+ .news-node-full-content-file .file-size {
+ display: none; }
.news-node-left-content-social-icons {
position: fixed;
left: 0;
- top: 200px;
-}
-
-.news-node-left-content-social-icons .social-media-sharing ul {
- display: block;
-}
-
-.news-node-left-content-social-icons .social-media-sharing ul li {
- display: table;
- margin-bottom: 5px;
-}
+ top: 200px; }
+ .news-node-left-content-social-icons .social-media-sharing ul {
+ display: block; }
+ .news-node-left-content-social-icons .social-media-sharing ul li {
+ display: table;
+ margin-bottom: 5px; }
@media only screen and (max-width: 991px) {
.news-node-center-content .news-node-full-content-right {
- padding-left: 0;
- }
+ padding-left: 0; }
.news-node-full-content-component {
- margin: 0 !important;
- }
+ margin: 0 !important; }
.news-node-full-content-latest-news .col-container {
padding: 0 !important;
- margin-bottom: 10px;
- }
-}
+ margin-bottom: 10px; } }
@media only screen and (max-width: 1071px) {
.news-node-left-content-social-icons {
@@ -275,60 +207,45 @@ h1.news-node-full-content-title {
text-align: center;
margin-top: 3rem;
border-top: 1px solid #eee;
- padding-top: 20px;
- }
- .news-node-left-content-social-icons .social-media-sharing ul {
- display: inline-flex;
- }
- .news-node-left-content-social-icons .social-media-sharing ul li {
- display: inline;
- margin-bottom: 0px;
- margin-right: 0px;
- }
- .news-node-left-content-social-icons .social-media-sharing ul li a.facebook-share:after, .news-node-left-content-social-icons .social-media-sharing ul li a.linkedin:after, .news-node-left-content-social-icons .social-media-sharing ul li a.twitter:after, .news-node-left-content-social-icons .social-media-sharing ul li a.google-plus:after, .news-node-left-content-social-icons .social-media-sharing ul li a.email:after {
- display: block;
- margin-right: 10px;
- }
-}
+ padding-top: 20px; }
+ .news-node-left-content-social-icons .social-media-sharing ul {
+ display: inline-flex; }
+ .news-node-left-content-social-icons .social-media-sharing ul li {
+ display: inline;
+ margin-bottom: 0px;
+ margin-right: 0px; }
+ .news-node-left-content-social-icons .social-media-sharing ul li a.facebook-share:after, .news-node-left-content-social-icons .social-media-sharing ul li a.linkedin:after, .news-node-left-content-social-icons .social-media-sharing ul li a.twitter:after, .news-node-left-content-social-icons .social-media-sharing ul li a.google-plus:after, .news-node-left-content-social-icons .social-media-sharing ul li a.email:after {
+ display: block;
+ margin-right: 10px; } }
.news-node-full-content-component {
margin-right: -10%;
- margin-left: -10%;
-}
-
-.news-node-full-content-component.text-margin-left {
- margin-left: 4%;
- margin-right: -1%;
-}
-
-.news-node-full-content-component.text-margin-right {
- margin-left: -1%;
- margin-right: 4%;
-}
+ margin-left: -10%; }
+ .news-node-full-content-component.text-margin-left {
+ margin-left: 4%;
+ margin-right: -1%; }
+ .news-node-full-content-component.text-margin-right {
+ margin-left: -1%;
+ margin-right: 4%; }
.news-node-full-content-body.text-margin-left {
- margin-left: 14%;
-}
+ margin-left: 14%; }
.news-node-full-content-body.text-margin-right {
- margin-right: 14%;
-}
+ margin-right: 14%; }
.news-node-full-content-body h1,
.news-node-full-content-body h2,
.news-node-full-content-body h3,
.news-node-full-content-body h4,
.news-node-full-content-body h5 {
- width: 100%;
-}
+ width: 100%; }
.news-node-full-content-body blockquote {
- margin: 1.5em 0;
-}
+ margin: 1.5em 0; }
.news-node-full-content-body iframe {
- max-width: 100%;
-}
+ max-width: 100%; }
/* IMAGE */
.news-node-full-content-body figure img {
@@ -336,226 +253,180 @@ h1.news-node-full-content-title {
-moz-box-sizing: border-box;
box-sizing: border-box;
border-color: #111 !important;
- width: 100%;
-}
+ width: 100%; }
.news-node-full-content-body figcaption {
/* opacity: 0.8;
color: #292929;
margin: 0.5em 0;
- font-size: 0.9em; */
-}
+ font-size: 0.9em; */ }
/* BREAKOUT RIGHT & ALIGN RIGHT */
.news-node-full-content-body .align-right,
.news-node-full-content-body .breakout-right {
float: right;
margin-left: 3%;
- clear: right;
-}
-
-.news-node-full-content-body .align-right img,
-.news-node-full-content-body .breakout-right img {
- width: 100%;
-}
+ clear: right; }
+ .news-node-full-content-body .align-right img,
+ .news-node-full-content-body .breakout-right img {
+ width: 100%; }
/* BREAKOUT LEFT & ALIGN LEFT */
.news-node-full-content-body .align-left,
.news-node-full-content-body .breakout-left {
float: left;
margin-right: 3%;
- clear: left;
-}
-
-.news-node-full-content-body .align-left img,
-.news-node-full-content-body .breakout-left img {
- width: 100%;
-}
+ clear: left; }
+ .news-node-full-content-body .align-left img,
+ .news-node-full-content-body .breakout-left img {
+ width: 100%; }
/* BREAKOUT */
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-right {
- width: 60%;
-}
+ width: 60%; }
.news-node-full-content-body .breakout-both {
width: auto;
- clear: both;
-}
+ clear: both; }
/* ALIGN */
.news-node-full-content-body .align-left,
.news-node-full-content-body .align-right {
- width: 46%;
-}
+ width: 46%; }
/* BREAKOUT RIGHT */
.news-node-full-content-body .breakout-right,
.news-node-full-content-body .breakout-both {
- margin-right: -30% !important;
-}
+ margin-right: -30% !important; }
/* BREAKOUT LEFT */
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-both {
- margin-left: -30% !important;
-}
+ margin-left: -30% !important; }
/* TEXT COLUMNS */
.news-node-full-content-body .column-right.image-breakout {
float: right;
- width: 65%;
-}
+ width: 65%; }
.news-node-full-content-body .column-right.image-align {
float: right;
- width: 51%;
-}
+ width: 51%; }
.news-node-full-content-body .column-left.image-breakout {
float: left;
- width: 65%;
-}
+ width: 65%; }
.news-node-full-content-body .column-left.image-align {
float: left;
- width: 51%;
-}
+ width: 51%; }
@media only screen and (min-width: 1701px) and (max-width: 1900px) {
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-both {
- margin-left: -24% !important;
- }
+ margin-left: -24% !important; }
.news-node-full-content-body .breakout-right,
.news-node-full-content-body .breakout-both {
- margin-right: -24% !important;
- }
+ margin-right: -24% !important; }
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-right {
- width: 65%;
- }
+ width: 65%; }
.news-node-full-content-body .column-right.image-breakout {
float: right;
- width: 56%;
- }
+ width: 56%; }
.news-node-full-content-body .column-left.image-breakout {
float: left;
- width: 56%;
- }
-}
+ width: 56%; } }
@media only screen and (min-width: 1501px) and (max-width: 1700px) {
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-both {
- margin-left: -15% !important;
- }
+ margin-left: -15% !important; }
.news-node-full-content-body .breakout-right,
.news-node-full-content-body .breakout-both {
- margin-right: -15% !important;
- }
+ margin-right: -15% !important; }
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-right {
- width: 55%;
- }
+ width: 55%; }
.news-node-full-content-body .column-right.image-breakout {
float: right;
- width: 57%;
- }
+ width: 57%; }
.news-node-full-content-body .column-left.image-breakout {
float: left;
- width: 57%;
- }
-}
+ width: 57%; } }
@media only screen and (min-width: 1366px) and (max-width: 1500px) {
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-both {
- margin-left: -7% !important;
- }
+ margin-left: -7% !important; }
.news-node-full-content-body .breakout-right,
.news-node-full-content-body .breakout-both {
- margin-right: -7% !important;
- }
+ margin-right: -7% !important; }
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-right {
- width: 50%;
- }
+ width: 50%; }
.news-node-full-content-body .column-right.image-breakout {
float: right;
- width: 54%;
- }
+ width: 54%; }
.news-node-full-content-body .column-left.image-breakout {
float: left;
- width: 54%;
- }
-}
+ width: 54%; } }
@media only screen and (min-width: 720px) and (max-width: 1365px) {
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-both {
- margin-left: 0% !important;
- }
+ margin-left: 0% !important; }
.news-node-full-content-body .breakout-right,
.news-node-full-content-body .breakout-both {
- margin-right: 0% !important;
- }
+ margin-right: 0% !important; }
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-right {
- width: 45%;
- }
+ width: 45%; }
.news-node-full-content-body .column-right.image-breakout {
float: right;
- width: 51%;
- }
+ width: 51%; }
.news-node-full-content-body .column-left.image-breakout {
float: left;
- width: 51%;
- }
-}
+ width: 51%; } }
@media only screen and (max-width: 767px) {
.news-node-full-content-body.text-margin-left {
- margin-left: 0%;
- }
+ margin-left: 0%; }
.news-node-full-content-body.text-margin-right {
- margin-right: 0%;
- }
-}
+ margin-right: 0%; } }
@media only screen and (max-width: 719px) {
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-both {
- margin-left: 0% !important;
- }
+ margin-left: 0% !important; }
.news-node-full-content-body .breakout-right,
.news-node-full-content-body .breakout-both {
- margin-right: 0% !important;
- }
+ margin-right: 0% !important; }
.news-node-full-content-body .breakout-left,
.news-node-full-content-body .breakout-right {
- width: 100%;
- }
+ width: 100%; }
.news-node-full-content-body .column-right.image-breakout {
float: right;
- width: 100%;
- }
+ width: 100%; }
.news-node-full-content-body .column-left.image-breakout {
float: left;
- width: 100%;
- }
+ width: 100%; }
.news-node-full-content-body .align-left,
.news-node-full-content-body .align-right {
- width: 100%;
- }
+ width: 100%; }
.news-node-full-content-body .column-right.image-align {
float: none;
width: 100%;
- clear: both;
- }
+ clear: both; }
.news-node-full-content-body .column-left.image-align {
float: none;
width: 100%;
- clear: both;
- }
-}
+ clear: both; } }
+
+.news-node-full-content-image img {
+ border: 0;
+ box-shadow: 0 1px 3px 0 #bfbfbf;
+ width: 99% !important;
+ margin: auto;
+ margin-top: 3px; }
diff --git a/patterns/molecules/news-display/scss/news-display.component.scss b/patterns/molecules/news-display/scss/news-display.component.scss
index 59be824f7d064b431da9e8ed252716046b17f439..1a024c9711a39743761fc29b5318e2f939601245 100755
--- a/patterns/molecules/news-display/scss/news-display.component.scss
+++ b/patterns/molecules/news-display/scss/news-display.component.scss
@@ -644,3 +644,11 @@ h1.news-node-full-content-title {
clear: both;
}
}
+
+.news-node-full-content-image img {
+ border: 0;
+ box-shadow: 0 1px 3px 0 #bfbfbf;
+ width: 99% !important;
+ margin: auto;
+ margin-top: 3px;
+}
diff --git a/patterns/molecules/preview-card/preview-card.html.twig b/patterns/molecules/preview-card/preview-card.html.twig
index a52a29eb06ca88792e366f906a7bde3bbcd54d24..d55ec9aba5b35318c4f708b2ee093438922fb7c4 100755
--- a/patterns/molecules/preview-card/preview-card.html.twig
+++ b/patterns/molecules/preview-card/preview-card.html.twig
@@ -49,14 +49,14 @@
<div class="component-preview-cards__box">
{# Avatar field. Only is shown if the News format is opinion #}
- {% if news_format | render == "Opinion" %}
- {% if avatar | render %}
- {% set avatarAttributes = create_attribute() %}
- {% set avatarClasses = ["preview-card__avatar"] %}
- {% set avatarAttributes = avatarAttributes.addClass(avatarClasses).setAttribute('style', "background:url('" ~ avatar|get_img_src ~ "') no-repeat center center / cover") %}
- <div {{ avatarAttributes }}></div>
- {% endif %}
- {% endif %}
+ {#{% if news_format | render == "Opinion" %}#}
+ {#{% if avatar | render %}#}
+ {#{% set avatarAttributes = create_attribute() %}#}
+ {#{% set avatarClasses = ["preview-card__avatar"] %}#}
+ {#{% set avatarAttributes = avatarAttributes.addClass(avatarClasses).setAttribute('style', "background:url('" ~ avatar|get_img_src ~ "') no-repeat center center / cover") %}#}
+ {#<div {{ avatarAttributes }}></div>#}
+ {#{% endif %}#}
+ {#{% endif %}#}
{% if category | render %}
{% if category | render == "360 image" %}
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 59b13124fc02c6df97d04754a2f56ebdfe9496dc..75cdeb298fecbaaf0a099420a0ca5a11ad1b5f32
--- a/patterns/molecules/preview-list/css/preview-list.component.css
+++ b/patterns/molecules/preview-list/css/preview-list.component.css
@@ -1,64 +1,83 @@
+.preview-list-component {
+ display: block;
+}
+
.preview-list-component .preview-list-image {
- width: 300px;
- height: 170px;
- background: #ddd;
- margin-right: 15px;
- float: left;
- overflow: hidden;
- background-image: url(../images/cern.png);
- background-repeat: no-repeat;
- background-position: center;
- background-size: 100%; }
+ width: 300px;
+ height: 170px;
+ background: #ddd;
+ margin-right: 15px;
+ float: left;
+ overflow: hidden;
+ background-image: url(../images/cern.png);
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100%;
+ border: 0;
+ box-shadow: 0 1px 3px 0 #bfbfbf;
+}
+
.preview-list-component .preview-list-news-info {
- float: left;
- width: calc(100% - 315px); }
+ float: left;
+ width: calc(100% - 315px);
+}
+
.preview-list-component .preview-list-news-info .preview-list-topic {
- display: inline; }
+ display: inline;
+}
+
.preview-list-component .preview-list-news-info .preview-list-topic a {
- color: black; }
+ color: black;
+}
+
.preview-list-component .preview-list-news-info .preview-list-title {
- margin-top: 5px; }
+ margin-top: 5px;
+}
+
.preview-list-component .preview-list-news-info .preview-list-strap {
- margin-bottom: 2rem; }
+ margin-bottom: 2rem;
+}
+
.preview-list-component .preview-list-news-info .preview-list-news-format {
- display: inline; }
+ display: inline;
+}
+
.preview-list-component .preview-list-news-info .preview-list-news-format * {
- display: inline; }
+ display: inline;
+}
+
.preview-list-component .preview-list-news-info .preview-list-news-format a {
- color: black; }
+ 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; }
+ 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; }
+ content: '|';
+ position: relative;
+ display: inline-block;
+ margin: 0 5px;
+}
+
+.preview-list-responsive {
+ display: none;
+}
-@media only screen and (max-width: 991px) {
- .preview-list-component .preview-list-news-info .preview-list-title {
- font-size: 2rem; } }
@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;
+ }
+}
-/*# sourceMappingURL=preview-list.component.css.map */
+@media only screen and (max-width: 991px) {
+ .preview-list-component .preview-list-news-info .preview-list-title {
+ font-size: 2rem;
+ }
+}
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 cccf491d74e5ac6344ae0ce70a5acef71e87a7d4..6e6a05a3b36f18236d95ec6196503e3eb9efb010 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 3d3df283a99352cbfebcd8e6be1bcdf3031ed687..985386c425dc61a7e5bfd15f338b7b7a48a8d376 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;
@@ -10,6 +14,8 @@
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
+ border: 0;
+ box-shadow: 0 1px 3px 0 #bfbfbf;
}
.preview-list-news-info {
float: left;
@@ -67,47 +73,28 @@
}
}
-@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;
}
}
}
diff --git a/src/TwigExtension/CernComponentsTwigExtension.php b/src/TwigExtension/CernComponentsTwigExtension.php
index a9149c2318a296b99bacf2d5924da85921945f45..2f861af3e0707278a84e38658e5dc86ca0317eba 100755
--- a/src/TwigExtension/CernComponentsTwigExtension.php
+++ b/src/TwigExtension/CernComponentsTwigExtension.php
@@ -54,28 +54,29 @@ class CernComponentsTwigExtension extends \Twig_Extension {
*/
public function getFilters() {
return [
- new \Twig_SimpleFilter('addbasepath', [$this, 'addBasePath']),
- new \Twig_SimpleFilter('openlink', [$this, 'openLink']),
- new \Twig_SimpleFilter('closelink', [$this, 'closeLink']),
- new \Twig_SimpleFilter('first_char', [$this, 'firstChar']),
- new \Twig_SimpleFilter('get_img_alt', [$this, 'getImgAlt']),
- new \Twig_SimpleFilter('get_img_src', [$this, 'getImgSrc']),
- new \Twig_SimpleFilter('get_link_href', [$this, 'getLinkHref']),
- new \Twig_SimpleFilter('get_link_type', [$this, 'getLinkType']),
- new \Twig_SimpleFilter('md5', [$this, 'md5']),
- new \Twig_SimpleFilter('format_date_field', [$this, 'formatFieldDate']),
- new \Twig_SimpleFilter('field_count', [$this, 'fieldCount']),
- new \Twig_SimpleFilter('get_rgba', [$this, 'getRgba']),
- new \Twig_SimpleFilter('iterate_element', [$this,'iterateElement']),
- new \Twig_SimpleFilter('get_language_message', [$this,'getLanguageMessage']),
- new \Twig_SimpleFilter('iterate_referenced_entities', [$this,'iterateReferencedEntities']),
- new \Twig_SimpleFilter('render_plugin_block', [$this,'renderPluginBlock']),
- new \Twig_SimpleFilter('render_this', [$this,'renderThis']),
- new \Twig_SimpleFilter('render_paragraph_field', [$this,'renderParagraphField']),
- new \Twig_SimpleFilter('get_cds_info', [$this,'getCdsInfo']),
- new \Twig_SimpleFilter('get_tag_attribute', [$this,'getTagAttribute']),
- new \Twig_SimpleFilter('set_tag_attribute', [$this,'setTagAttribute']),
- new \Twig_SimpleFilter('get_path', [$this,'getPath']),
+ new \Twig_SimpleFilter('addbasepath', [$this, 'addbasepath']),
+ new \Twig_SimpleFilter('htmlspecialchars', [$this, 'htmlSpecialChars']),
+ new \Twig_SimpleFilter('openlink', [$this, 'openLink']),
+ new \Twig_SimpleFilter('closelink', [$this, 'closeLink']),
+ new \Twig_SimpleFilter('first_char', [$this, 'firstChar']),
+ new \Twig_SimpleFilter('get_img_alt', [$this, 'getImgAlt']),
+ new \Twig_SimpleFilter('get_img_src', [$this, 'getImgSrc']),
+ new \Twig_SimpleFilter('get_link_href', [$this, 'getLinkHref']),
+ new \Twig_SimpleFilter('get_link_type', [$this, 'getLinkType']),
+ new \Twig_SimpleFilter('md5', [$this, 'md5']),
+ new \Twig_SimpleFilter('format_date_field', [$this, 'formatFieldDate']),
+ new \Twig_SimpleFilter('field_count', [$this, 'fieldCount']),
+ new \Twig_SimpleFilter('get_rgba', [$this, 'getRgba']),
+ new \Twig_SimpleFilter('iterate_element', [$this,'iterateElement']),
+ new \Twig_SimpleFilter('get_language_message', [$this,'getLanguageMessage']),
+ new \Twig_SimpleFilter('iterate_referenced_entities', [$this,'iterateReferencedEntities']),
+ new \Twig_SimpleFilter('render_plugin_block', [$this,'renderPluginBlock']),
+ new \Twig_SimpleFilter('render_this', [$this,'renderThis']),
+ new \Twig_SimpleFilter('render_paragraph_field', [$this,'renderParagraphField']),
+ new \Twig_SimpleFilter('get_cds_info', [$this,'getCdsInfo']),
+ new \Twig_SimpleFilter('get_tag_attribute', [$this,'getTagAttribute']),
+ new \Twig_SimpleFilter('set_tag_attribute', [$this,'setTagAttribute']),
+ new \Twig_SimpleFilter('get_path', [$this,'getPath']),
];
}
@@ -84,33 +85,53 @@ class CernComponentsTwigExtension extends \Twig_Extension {
*/
public function getFunctions() {
return [
- new \Twig_SimpleFunction('addbasepath', [$this, 'addBasePath']),
- new \Twig_SimpleFunction('htmlspecialchars', [$this, 'htmlSpecialChars']),
- new \Twig_SimpleFunction('openlink', [$this, 'openLink']),
- new \Twig_SimpleFunction('closelink', [$this, 'closeLink']),
- new \Twig_SimpleFunction('first_char', [$this, 'firstChar']),
- new \Twig_SimpleFunction('get_img_alt', [$this, 'getImgAlt']),
- new \Twig_SimpleFunction('get_img_src', [$this, 'getImgSrc']),
- new \Twig_SimpleFunction('get_link_href', [$this, 'getLinkHref']),
- new \Twig_SimpleFunction('get_link_type', [$this, 'getLinkType']),
- new \Twig_SimpleFunction('get_param', [$this, 'getParam']),
- new \Twig_SimpleFunction('md5', [$this, 'md5']),
- new \Twig_SimpleFunction('format_date_field', [$this, 'formatFieldDate']),
- new \Twig_SimpleFunction('field_count', [$this, 'fieldCount']),
- new \Twig_SimpleFunction('get_rgba', [$this, 'getRgba']),
- new \Twig_SimpleFunction('iterate_element', [$this,'iterateElement']),
- new \Twig_SimpleFunction('get_language', [$this,'getLanguageMessage']),
- new \Twig_SimpleFunction('iterate_referenced_entities', [$this,'iterateReferencedEntities']),
- new \Twig_SimpleFunction('render_this', [$this,'renderThis']),
- new \Twig_SimpleFunction('render_paragraph_field', [$this,'renderParagraphField']),
- new \Twig_SimpleFunction('render_plugin_block', [$this,'renderPluginBlock']),
- new \Twig_SimpleFunction('get_cds_info', [$this,'getCdsInfo']),
- new \Twig_SimpleFunction('get_tag_attribute', [$this,'getTagAttribute']),
- new \Twig_SimpleFunction('set_tag_attribute', [$this,'setTagAttribute']),
- new \Twig_SimpleFilter('get_path', [$this,'getPath']),
+ new \Twig_SimpleFunction('get_current_language', [$this, 'getCurrentLanguage']),
+ new \Twig_SimpleFunction('addbasepath', [$this, 'addBasePath']),
+ new \Twig_SimpleFunction('htmlspecialchars', [$this, 'htmlSpecialChars']),
+ new \Twig_SimpleFunction('openlink', [$this, 'openLink']),
+ new \Twig_SimpleFunction('closelink', [$this, 'closeLink']),
+ new \Twig_SimpleFunction('first_char', [$this, 'firstChar']),
+ new \Twig_SimpleFunction('get_img_alt', [$this, 'getImgAlt']),
+ new \Twig_SimpleFunction('get_img_src', [$this, 'getImgSrc']),
+ new \Twig_SimpleFunction('get_link_href', [$this, 'getLinkHref']),
+ new \Twig_SimpleFunction('get_link_type', [$this, 'getLinkType']),
+ new \Twig_SimpleFunction('get_param', [$this, 'getParam']),
+ new \Twig_SimpleFunction('md5', [$this, 'md5']),
+ new \Twig_SimpleFunction('format_date_field', [$this, 'formatFieldDate']),
+ new \Twig_SimpleFunction('field_count', [$this, 'fieldCount']),
+ new \Twig_SimpleFunction('get_rgba', [$this, 'getRgba']),
+ new \Twig_SimpleFunction('iterate_element', [$this,'iterateElement']),
+ new \Twig_SimpleFunction('get_language', [$this,'getLanguageMessage']),
+ new \Twig_SimpleFunction('iterate_referenced_entities', [$this,'iterateReferencedEntities']),
+ new \Twig_SimpleFunction('render_this', [$this,'renderThis']),
+ new \Twig_SimpleFunction('render_paragraph_field', [$this,'renderParagraphField']),
+ new \Twig_SimpleFunction('render_plugin_block', [$this,'renderPluginBlock']),
+ new \Twig_SimpleFunction('get_cds_info', [$this,'getCdsInfo']),
+ new \Twig_SimpleFunction('get_tag_attribute', [$this,'getTagAttribute']),
+ new \Twig_SimpleFunction('set_tag_attribute', [$this,'setTagAttribute']),
+ new \Twig_SimpleFilter('get_path', [$this,'getPath']),
];
}
+ /**
+ * Returns the current language of the
+ *
+ * @return mixed
+ */
+ public function getCurrentLanguage(){
+ return \Drupal::languageManager()->getCurrentLanguage()->getId();
+ }
+
+ /**
+ * Adds the base path of the current website in front of the given URL (along with Http/Https host)
+ *
+ * @param $path the input sting
+ * @return the output string
+ */
+ public function addBasePath($path){
+ return \Drupal::request()->getSchemeAndHttpHost().$path;
+ }
+
public function formatFieldDate($field, $type, $format = '') {
$field = reset($field);
if (isset($field['#items'])) {
@@ -125,16 +146,6 @@ class CernComponentsTwigExtension extends \Twig_Extension {
}
}
- /**
- * Adds the base path of the current website in front of the given URL (along with Http/Https host)
- *
- * @param $path the input sting
- * @return the output string
- */
- public function addBasePath($path){
- return \Drupal::request()->getSchemeAndHttpHost().$path;
- }
-
/**
* Sanitizes the text using the htmlspecialchars_decode function.
*
@@ -145,7 +156,6 @@ class CernComponentsTwigExtension extends \Twig_Extension {
return htmlspecialchars_decode($text, ENT_QUOTES);
}
-
/**
* Build a link in a basic render array without the closing <a> tag.
*
@@ -205,8 +215,8 @@ class CernComponentsTwigExtension extends \Twig_Extension {
$url = Url::fromUri($trimmed);
$url->setOptions(['attributes' => $attributes]);
$link_html = Link::fromTextAndUrl(strip_tags($original_link), $url)
- ->toString()
- ->getGeneratedLink();
+ ->toString()
+ ->getGeneratedLink();
}
return ['#markup' => substr($link_html, 0, strpos($link_html, '>') + 1)];
@@ -354,8 +364,8 @@ class CernComponentsTwigExtension extends \Twig_Extension {
//$nodes = $xpath->query("//iframe[contains(concat(' ', normalize-space(@rel), ' '), ' external ')]");
$nodes = $dom->getElementsByTagName('iframe');
foreach($nodes as $node) {
- $firstParam = (strpos($node->getAttribute('src'), '?')) ? '&' : '?';
- $node->setAttribute('src', $node->getAttribute('src').$firstParam.'autoplay=1&controlsOff=1&loop=1&muted=1&responsive=1&subtitlesOff=1');
+ $firstParam = (strpos($node->getAttribute('src'), '?')) ? '&' : '?';
+ $node->setAttribute('src', $node->getAttribute('src').$firstParam.'autoplay=1&controlsOff=1&loop=1&muted=1&responsive=1&subtitlesOff=1');
}
$finalIframe = $dom->saveHTML();
return $finalIframe;
@@ -438,29 +448,29 @@ class CernComponentsTwigExtension extends \Twig_Extension {
$default = 'auto';
if (empty($color))
- return $default;
+ return $default;
if ($color[0] == '#')
- $color = substr($color, 1);
+ $color = substr($color, 1);
if (strlen($color) == 6)
- $hex = array($color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5]);
+ $hex = array($color[0] . $color[1], $color[2] . $color[3], $color[4] . $color[5]);
elseif (strlen($color) == 3)
- $hex = array($color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2]);
+ $hex = array($color[0] . $color[0], $color[1] . $color[1], $color[2] . $color[2]);
else
- return $default;
+ return $default;
$rgb = array_map('hexdec', $hex);
if ($opacity) {
- if (abs($opacity) > 1)
- $opacity = 1.0;
+ if (abs($opacity) > 1)
+ $opacity = 1.0;
- $output = 'rgba(' . implode(",", $rgb) . ',' . $opacity . ')';
+ $output = 'rgba(' . implode(",", $rgb) . ',' . $opacity . ')';
} else {
- $output = 'rgb(' . implode(",", $rgb) . ')';
+ $output = 'rgb(' . implode(",", $rgb) . ')';
}
return $output;
}
@@ -487,26 +497,26 @@ class CernComponentsTwigExtension extends \Twig_Extension {
return $useful_element;
}
- /**
- * This function will return the entities referenced by the entity reference
- * @param $element
- * @return mixed
- */
+ /**
+ * This function will return the entities referenced by the entity reference
+ * @param $element
+ * @return mixed
+ */
public function iterateReferencedEntities($element) {
- return $element->referencedEntities();
+ return $element->referencedEntities();
}
- /**
- * This function will return the render array of a field inside a paragraph
- *
- * @param Paragraph $paragraph
- * @param $field_name
- * @param array $options
- * @return array
- */
+ /**
+ * This function will return the render array of a field inside a paragraph
+ *
+ * @param Paragraph $paragraph
+ * @param $field_name
+ * @param array $options
+ * @return array
+ */
public function renderParagraphField(Paragraph $paragraph, $field_name, $options = []) {
if (!isset($options['view_mode'])) {
- $options['view_mode'] = 'default';
+ $options['view_mode'] = 'default';
}
$fields = $paragraph->get($field_name);
$referenced_entities = $fields->referencedEntities();
@@ -545,68 +555,68 @@ class CernComponentsTwigExtension extends \Twig_Extension {
// ::getCacheContexts methods.
return $render;
}
- /**
- * Returns the rendered array for a single entity field.
- *
- * @param object $content
- * Entity or Field object.
- * @param string $view_mode
- * Name of the display mode.
- * @param
- *
- * @return null|array
- * A rendered array for the field or NULL if the value does not exist.
- */
- public static function renderThis($content, $view_mode = 'default', $options = []) {
- if ($content instanceof MenuLinkContent) {
- $root_menu_item = $content;
- $menu_parameters = new MenuTreeParameters();
- $menu_parameters->setMaxDepth($options['max_depth']);
- $menu_parameters->setRoot($root_menu_item->getPluginId());
-
- /** @var MenuLinkTree $menu_tree_service */
- $menu_tree_service = \Drupal::service('menu.link_tree');
- $tree = $menu_tree_service->load('main-menu', $menu_parameters);
- // Apply some manipulators (checking the access, sorting).
- $manipulators = [
- ['callable' => 'menu.default_tree_manipulators:checkNodeAccess'],
- ['callable' => 'menu.default_tree_manipulators:checkAccess'],
- ['callable' => 'menu.default_tree_manipulators:generateIndexAndSort'],
- ];
- $tree = $menu_tree_service->transform($tree, $manipulators);
- // And the last step is to actually build the tree.
- return $menu_tree_service->build($tree);
- } elseif ($content instanceof View) {
- $view = Views::getView($options['target_id']);
- $view->setArguments([$options['data']['argument']]);
- $view->setDisplay($options['display_id']);
- $view->preExecute();
- $view->execute();
- return $view->buildRenderable($options['display_id']);
- } elseif ($content instanceof EntityInterface) {
- $view_builder = \Drupal::entityTypeManager()
- ->getViewBuilder($content->getEntityTypeId());
- return $view_builder->view($content, $view_mode);
- }
- elseif ($content instanceof FieldItemInterface ||
- $content instanceof FieldItemListInterface ||
- method_exists($content, 'view')
- ) {
- return $content->view($view_mode);
- }
- else {
- return t('Twig Filter: Unsupported content.');
- }
+ /**
+ * Returns the rendered array for a single entity field.
+ *
+ * @param object $content
+ * Entity or Field object.
+ * @param string $view_mode
+ * Name of the display mode.
+ * @param
+ *
+ * @return null|array
+ * A rendered array for the field or NULL if the value does not exist.
+ */
+ public static function renderThis($content, $view_mode = 'default', $options = []) {
+ if ($content instanceof MenuLinkContent) {
+ $root_menu_item = $content;
+ $menu_parameters = new MenuTreeParameters();
+ $menu_parameters->setMaxDepth($options['max_depth']);
+ $menu_parameters->setRoot($root_menu_item->getPluginId());
+
+ /** @var MenuLinkTree $menu_tree_service */
+ $menu_tree_service = \Drupal::service('menu.link_tree');
+ $tree = $menu_tree_service->load('main-menu', $menu_parameters);
+ // Apply some manipulators (checking the access, sorting).
+ $manipulators = [
+ ['callable' => 'menu.default_tree_manipulators:checkNodeAccess'],
+ ['callable' => 'menu.default_tree_manipulators:checkAccess'],
+ ['callable' => 'menu.default_tree_manipulators:generateIndexAndSort'],
+ ];
+ $tree = $menu_tree_service->transform($tree, $manipulators);
+ // And the last step is to actually build the tree.
+ return $menu_tree_service->build($tree);
+ } elseif ($content instanceof View) {
+ $view = Views::getView($options['target_id']);
+ $view->setArguments([$options['data']['argument']]);
+ $view->setDisplay($options['display_id']);
+ $view->preExecute();
+ $view->execute();
+ return $view->buildRenderable($options['display_id']);
+ } elseif ($content instanceof EntityInterface) {
+ $view_builder = \Drupal::entityTypeManager()
+ ->getViewBuilder($content->getEntityTypeId());
+ return $view_builder->view($content, $view_mode);
+ }
+ elseif ($content instanceof FieldItemInterface ||
+ $content instanceof FieldItemListInterface ||
+ method_exists($content, 'view')
+ ) {
+ return $content->view($view_mode);
+ }
+ else {
+ return t('Twig Filter: Unsupported content.');
}
+ }
- /**
- * Return the sentence Voir in Français / View in English.
- *
- * @return array
- * Return sentence with the markup.
- */
+ /**
+ * Return the sentence Voir in Français / View in English.
+ *
+ * @return array
+ * Return sentence with the markup.
+ */
public function getLanguageMessage() {
// Sentence to print
$sentence = null;
@@ -619,7 +629,7 @@ class CernComponentsTwigExtension extends \Twig_Extension {
$languages = $node->getTranslationLanguages();
// Get node nid
$nid = $node->id();
- // if $node is string (for revisions)
+ // if $node is string (for revisions)
} else if (is_string($node)) {
// Get node nid
$node = node_load($node);
@@ -628,13 +638,13 @@ class CernComponentsTwigExtension extends \Twig_Extension {
if ($language == 'en' && $node->hasTranslation('fr') && $node->hasTranslation('en')) {
$node_url = $node->getTranslation('fr')->toUrl()->toString();
$sentence = array(
- '#markup' => '<p>Voir en</p> <a href="' . $node_url . '">français</a>',
+ '#markup' => '<p>Voir en</p> <a href="' . $node_url . '">français</a>',
);
}
else if ($language == 'fr' && $node->hasTranslation('en') && $node->hasTranslation('fr')) {
$node_url = $node->getTranslation('en')->toUrl()->toString();
$sentence = array(
- '#markup' => '<p>View in</p> <a href="' . $node_url . '">English</a>',
+ '#markup' => '<p>View in</p> <a href="' . $node_url . '">English</a>',
);
}
}