-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[FEATURE] add news-carousel template for NEWS extension
- Loading branch information
Showing
8 changed files
with
455 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -71,7 +71,7 @@ | |
| } | ||
|
|
||
| .news .article h3 { | ||
| margin-bottom: 0; | ||
| // margin-bottom: 0; | ||
| } | ||
|
|
||
| .news .footer { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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}} | ||
|
|
||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
| {{> newsCarousel}} | ||
| </div> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.