diff --git a/dev/js/main.js b/dev/js/main.js index db828a7..bc18fe8 100644 --- a/dev/js/main.js +++ b/dev/js/main.js @@ -7,6 +7,9 @@ @import 'main/contentElements/carousel.js'; @import 'main/contentElements/parallax.js'; +// plugins +@import 'main/plugins/news/newsCarousel.js'; + @import 'main/suggest.js'; @import 'main/general.js'; diff --git a/dev/js/main/plugins/news/newsCarousel.js b/dev/js/main/plugins/news/newsCarousel.js new file mode 100644 index 0000000..970e54e --- /dev/null +++ b/dev/js/main/plugins/news/newsCarousel.js @@ -0,0 +1,42 @@ +(function($) { + 'use strict'; + + // document load event + $(document).ready(function() { + + // initialize swiper when document ready + // http://idangero.us/swiper/api/ + $('.js__news-carousel').swiper({ + nextButton: '.js__news-carousel__btn-next', + prevButton: '.js__news-carousel__btn-prev', + pagination: '.js__news-carousel__pagination', + paginationClickable: true, + slidesPerView: 4, + preloadImages: false, + roundLengths: true, + spaceBetween: 30, + + // Responsive breakpoints + breakpoints: { + + // when window width is <= 480px + 500: { + slidesPerView: 1 + }, + // when window width is <= 768px + 767: { + slidesPerView: 2 + }, + // when window width is <= 992px + 991: { + slidesPerView: 3 + }, + // when window width is <= 1199px + 1199: { + slidesPerView: 4 + } + } + }); + }); + +})(jQuery); diff --git a/dev/styles/main.less b/dev/styles/main.less index e5a9f76..7e63dbe 100644 --- a/dev/styles/main.less +++ b/dev/styles/main.less @@ -25,6 +25,7 @@ // ext News @import "main/plugins/news/news.less"; +@import "main/plugins/news/newsCarousel.less"; // ext Search @import "main/plugins/search/search.less"; @import "main/plugins/search/searchSuggest.less"; diff --git a/dev/styles/main/plugins/news/news.less b/dev/styles/main/plugins/news/news.less index b9a74f3..e11bbd6 100644 --- a/dev/styles/main/plugins/news/news.less +++ b/dev/styles/main/plugins/news/news.less @@ -71,7 +71,7 @@ } .news .article h3 { - margin-bottom: 0; + // margin-bottom: 0; } .news .footer { diff --git a/dev/styles/main/plugins/news/newsCarousel.less b/dev/styles/main/plugins/news/newsCarousel.less new file mode 100644 index 0000000..17903b6 --- /dev/null +++ b/dev/styles/main/plugins/news/newsCarousel.less @@ -0,0 +1,180 @@ +.news-carousel { + position: relative; + margin: 40px 0 20px; +} + +@media (min-width: 992px) and (max-width: 1090px) { + .news-carousel { + padding: 0 30px; + } +} +@media (min-width: 1200px) and (max-width: 1300px) { + .news-carousel { + padding: 0 30px; + } +} + +.news-carousel__wrapper { + padding-bottom: 40px; +} + +.news-carousel__media-preview { + min-height: 180px; + background-size: cover; + background-repeat: no-repeat; + background-position: 50% 50%; + margin-bottom: 20px; +} + +.news-carousel__img-wrap { + position: relative; +} + +//header +.news-carousel__slide .news-article-header h3 { + font-size: 18px; +} + +//info +.news-carousel__item-info { + z-index: 90; + text-align: right; + right: 0; + position: absolute; + background-color: fade(shade(@main-color, 80%), 80%); + padding: 10px 10px; + bottom: 0; + text-transform: uppercase; + font-size: 14px; +} + +.news-carousel__item-info .news-list-category{ + color: @main-color; +} + +.news-list-category:before{ + font-family: 'icons'; + speak: none; + position: relative; + display: inline-block; + top: 1px; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + // .icons(); + content: "\f115"; + padding-right: 6px; +} + +.news-carousel__item-info .news-list-category:after { + border-right: 1px solid @main-color; + content: ''; + height: 12px; + padding-right: 4px; + margin-top: 4px; + position: absolute; +} + +.news-carousel__item-info .news-list-date { + padding-left: 8px; + color: #fff; +} + +.news-carousel__btn-next, .news-carousel__btn-prev { + display: none; +} + +@media (min-width: 992px) { + .news-carousel__btn-next, .news-carousel__btn-prev { + display: block; + background: none; + .icons(); + color: @main-color; + -moz-osx-font-smoothing: grayscale; + height: auto; + font-size: 30px; + } +} + +.news-carousel__btn-next{ + right: -50px; +} +.news-carousel__btn-prev{ + left: -50px; +} +@media (min-width: 992px) and (max-width: 1090px) { + .news-carousel__btn-next{ + right: -12px; + } + .news-carousel__btn-prev{ + left: -12px; + } +} +@media (min-width: 1200px) and (max-width: 1300px) { + .news-carousel__btn-next{ + right: -16px; + } + .news-carousel__btn-prev{ + left: -16px; + } +} + +.news-carousel__btn-next:before{ + content: '\e675'; +} +.news-carousel__btn-prev:before{ + content: '\e672'; +} + + +.news-carousel__pagination .swiper-pagination-bullet-active { + background: @main-color; +} + +.news-carousel__img-wrap a:after{ + content:''; + top: 0; + left: 0; + z-index: 10; + width: 100%; + height: 100%; + display: block; + position: absolute; + background: @main-color; + opacity: 0; + visibility: hidden; + transition: opacity 0.5s ease, visibility 0.5s ease; +} +.news-carousel__img-wrap a:hover:after{ + opacity: 0.7; + visibility: visible; +} +.news-carousel__img-wrap a:before{ + .icons(); + content:'zdfvzddz'; + position: absolute; + font-size: 38px; + padding: 12px; + border: 2px solid tint(@main-color, 90%); + border-radius: 50%; + top: 50%; + left: 50%; + margin-left: -33px; + margin-top: -33px; + z-index: 110; + color: tint(@main-color, 90%); + opacity: 0; + visibility: hidden; + content: '\e943'; + transition: opacity 0.5s ease, visibility 0.5s ease; +} + +.news-carousel__img-wrap a:hover:before{ + opacity: 1; + visibility: visible; +} diff --git a/dev/templates/pages/content/plugins/newsCarousel.hbs b/dev/templates/pages/content/plugins/newsCarousel.hbs new file mode 100644 index 0000000..7b2793d --- /dev/null +++ b/dev/templates/pages/content/plugins/newsCarousel.hbs @@ -0,0 +1,17 @@ +--- +#layout: default.hbs #by default it is default.hbs, but you can specify another one +title: News Carousel #title in menu +position: 4 #position in menu +hideInMenu: false #if true, will be hidden in menu +hideInBreadcrumbs: false #if true, will be hidden in breadcrumbs +externalLink: false #just add link (http://link.com) instead of "false" to use this page like a link to external page. +--- +{{> breadcrumbs}} + +
+
+
+ {{> newsCarousel}} +
+
+
diff --git a/dev/templates/pages/index.hbs b/dev/templates/pages/index.hbs index 107d048..bd209b1 100644 --- a/dev/templates/pages/index.hbs +++ b/dev/templates/pages/index.hbs @@ -81,42 +81,24 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
-
+
-
-
+
+

Lorem ipsum dolor sit amet markum

-
-
-
-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+
+
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu.

+
-
-
-
- {{ renderContent 'bigIconTextButton' - bigTopIcon="users" - header="Content element 1" - text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu." - buttonName="READ MORE" - btnAsLink=false - }} -
-
- {{ renderContent 'bigIconTextButton' - bigTopIcon="tablet" - header="Content element 1" - text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu." - buttonName="READ MORE" - btnAsLink=false - }} -
-
+
@@ -590,6 +572,13 @@ externalLink: false #just add link (http://link.com) instead of "false" to use t
+
+
+
+ {{>newsCarousel}} +
+
+
diff --git a/dev/templates/parts/plugins/news/newsCarousel.hbs b/dev/templates/parts/plugins/news/newsCarousel.hbs new file mode 100644 index 0000000..dba99a8 --- /dev/null +++ b/dev/templates/parts/plugins/news/newsCarousel.hbs @@ -0,0 +1,194 @@ +
+
+
+
+ +
+
+
+ +
+ +
+ +
+ + Technology + + + + +
+
+ +
+

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +

+
+ +
+

Ut ullamcorper tincidunt ligula eu mollis. Proin tristique scelerisque lobortis. Cras faucibus erat dictum metus aliquet...

 +
+
+
+
+
+ +
+
+ +
+ +
+
+ + Technology + + + + +
+
+ +
+

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. + +

+
+ +
+

Ut ullamcorper tincidunt ligula eu mollis. Proin tristique scelerisque lobortis. Cras faucibus erat dictum metus aliquet...

 +
+
+
+
+
+ +
+
+ +
+ +
+
+ + Technology + + + + + +
+
+ +
+

+ + Lorem ipsum dolor sit amet, consectetur adipiscing elit. (copy 2) + +

+
+ +
+

Ut ullamcorper tincidunt ligula eu mollis. Proin tristique scelerisque lobortis. Cras faucibus erat dictum metus aliquet...

 +
+
+
+ + + +
+
+ +
+
+ +
+ +
+
+ + + Research + + + + + +
+
+ +
+

+ + Nullam sagittis condimentum est quis malesuada. + +

+
+ +
+

Ut ullamcorper tincidunt ligula eu mollis. Proin tristique scelerisque lobortis. Cras faucibus erat dictum metus aliquet...

 +
+
+
+
+
+ +
+
+ +
+ +
+
+ + Research + + + + + +
+
+ +
+

+ + Nullam sagittis condimentum est quis malesuada. + +

+
+ +
+

Ut ullamcorper tincidunt ligula eu mollis. Proin tristique scelerisque lobortis. Cras faucibus erat dictum metus aliquet...

 +
+
+
+
+
+
+
+
+
+
+