Merge branch '1.1' of http://github.com/merdiano/orient-site into 1.1
This commit is contained in:
commit
a9eff0ba94
|
|
@ -1,50 +1,77 @@
|
|||
.subheader {
|
||||
background: $text-light-black;
|
||||
.close {
|
||||
display: none;
|
||||
}
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.nav {
|
||||
background: $text-light-black;
|
||||
.close {
|
||||
display: none;
|
||||
}
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-link {
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-color-white;
|
||||
margin-right: 40px;
|
||||
padding: 15px 0;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 4px;
|
||||
background: $main-color;
|
||||
content: "";
|
||||
@include transition;
|
||||
}
|
||||
&:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
&.active::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.language {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&__link {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
margin-left: 20px;
|
||||
.nav {
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-link {
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-color-white;
|
||||
margin-right: 40px;
|
||||
padding: 15px 0;
|
||||
position: relative;
|
||||
&::before {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 0;
|
||||
height: 4px;
|
||||
background: $main-color;
|
||||
content: "";
|
||||
@include transition;
|
||||
}
|
||||
&:hover::before {
|
||||
width: 100%;
|
||||
}
|
||||
&.active::before {
|
||||
width: 100%;
|
||||
}
|
||||
.dropDown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
max-height: 0;
|
||||
overflow: auto;
|
||||
background: $text-color-white;
|
||||
&__link {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-light-black;
|
||||
@include transition;
|
||||
&:hover {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .dropDown {
|
||||
max-height: 2000px;
|
||||
}
|
||||
&:hover::before {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.language {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&__link {
|
||||
width: 30px;
|
||||
height: 20px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,246 +1,273 @@
|
|||
// banner start
|
||||
.banner {
|
||||
margin: 80px 0;
|
||||
&__inner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
img {
|
||||
width: 100%;
|
||||
margin: 80px 0;
|
||||
&__inner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// banner end
|
||||
|
||||
// main start
|
||||
.main {
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
&__content {
|
||||
width: calc(70% - 25px);
|
||||
margin-right: 25px;
|
||||
}
|
||||
&__body {
|
||||
&-row {
|
||||
margin: 0 -20px 80px -20px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
&__inner {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
&-column {
|
||||
width: calc(50% - 40px);
|
||||
margin: 0 20px;
|
||||
a.progressive {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
height: 300px;
|
||||
}
|
||||
a.progressive:not(.replace) {
|
||||
cursor: default;
|
||||
}
|
||||
a.progressive img {
|
||||
@include fullImage;
|
||||
}
|
||||
a.progressive img.preview {
|
||||
filter: blur(2vw);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
a.progressive img.reveal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
will-change: transform, opacity;
|
||||
animation: reveal 1s ease-out;
|
||||
}
|
||||
&__content {
|
||||
width: calc(70% - 25px);
|
||||
margin-right: 25px;
|
||||
}
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 80px;
|
||||
&-title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
}
|
||||
&-link {
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-color-grey;
|
||||
}
|
||||
&__body {
|
||||
&-row {
|
||||
margin: 0 -20px 80px -20px;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
&-column {
|
||||
width: calc(50% - 40px);
|
||||
margin: 0 20px;
|
||||
a.progressive {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
height: 300px;
|
||||
}
|
||||
a.progressive:not(.replace) {
|
||||
cursor: default;
|
||||
}
|
||||
a.progressive img {
|
||||
@include fullImage;
|
||||
}
|
||||
a.progressive img.preview {
|
||||
filter: blur(2vw);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
a.progressive img.reveal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
will-change: transform, opacity;
|
||||
animation: reveal 1s ease-out;
|
||||
}
|
||||
}
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 80px;
|
||||
position: relative;
|
||||
&::after {
|
||||
background: $text-color-grey;
|
||||
height: 2px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
&-title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
}
|
||||
&-link {
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-color-grey;
|
||||
}
|
||||
}
|
||||
&-card {
|
||||
margin: -100px 30px 0 30px;
|
||||
}
|
||||
&-title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
&::after {
|
||||
background: $text-color-grey;
|
||||
height: 2px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-card {
|
||||
margin: -100px 30px 0 30px;
|
||||
}
|
||||
&-title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
&__banner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&__sidebar {
|
||||
margin-left: 25px;
|
||||
width: calc(30% - 25px);
|
||||
&-title {
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 80px;
|
||||
color: $text-light-black;
|
||||
}
|
||||
a.progressive {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
margin-bottom: 80px;
|
||||
&:not(.replace) {
|
||||
cursor: default;
|
||||
}
|
||||
& img {
|
||||
&__banner {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
& img.preview {
|
||||
filter: blur(2vw);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
& img.reveal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
will-change: transform, opacity;
|
||||
animation: reveal 1s ease-out;
|
||||
}
|
||||
margin-bottom: 80px;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: -30px -5px 80px -5px;
|
||||
&-link {
|
||||
padding: 10px 20px;
|
||||
border-right: 5px;
|
||||
background: #f7f7f6;
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
color: $text-light-black;
|
||||
margin: 5px;
|
||||
}
|
||||
&__sidebar {
|
||||
margin-left: 25px;
|
||||
width: calc(30% - 25px);
|
||||
&-title {
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 80px;
|
||||
color: $text-light-black;
|
||||
}
|
||||
a.progressive {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
margin-bottom: 80px;
|
||||
&:not(.replace) {
|
||||
cursor: default;
|
||||
}
|
||||
& img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
& img.preview {
|
||||
filter: blur(2vw);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
& img.reveal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
will-change: transform, opacity;
|
||||
animation: reveal 1s ease-out;
|
||||
}
|
||||
}
|
||||
&-tag {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin: -30px -5px 80px -5px;
|
||||
&-link {
|
||||
padding: 10px 20px;
|
||||
border-right: 5px;
|
||||
background: #f7f7f6;
|
||||
font-size: $h4-size;
|
||||
line-height: $h4-height;
|
||||
color: $text-light-black;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// main end
|
||||
// event start
|
||||
.event {
|
||||
margin-bottom: 80px;
|
||||
&__header {
|
||||
margin-bottom: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
&-title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
}
|
||||
&-link {
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-color-grey;
|
||||
}
|
||||
}
|
||||
&__body {
|
||||
&-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
&-image {
|
||||
width: calc(40% - 40px);
|
||||
margin: 0 20px;
|
||||
a.progressive {
|
||||
&__header {
|
||||
margin-bottom: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
height: 400px;
|
||||
}
|
||||
a.progressive:not(.replace) {
|
||||
cursor: default;
|
||||
}
|
||||
a.progressive img {
|
||||
@include fullImage;
|
||||
}
|
||||
a.progressive img.preview {
|
||||
filter: blur(2vw);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
a.progressive img.reveal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
will-change: transform, opacity;
|
||||
animation: reveal 1s ease-out;
|
||||
}
|
||||
}
|
||||
&-card {
|
||||
margin: -100px 30px 0 30px;
|
||||
}
|
||||
&-column {
|
||||
width: calc(30% - 40px);
|
||||
margin: 0 20px;
|
||||
.card {
|
||||
padding: 25px 0;
|
||||
border-bottom: 1px solid $text-color-grey;
|
||||
&:nth-last-child(1) {
|
||||
border-bottom: none;
|
||||
padding: 25px 0 0 0;
|
||||
&::after {
|
||||
background: $text-color-grey;
|
||||
height: 2px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
&-title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
}
|
||||
&-link {
|
||||
font-size: $h5-size;
|
||||
line-height: $h5-height;
|
||||
font-weight: 400;
|
||||
color: $text-color-grey;
|
||||
}
|
||||
}
|
||||
&__body {
|
||||
&-row {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
margin: 0 -20px;
|
||||
}
|
||||
&-image {
|
||||
width: calc(40% - 40px);
|
||||
margin: 0 20px;
|
||||
a.progressive {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
height: 400px;
|
||||
}
|
||||
a.progressive:not(.replace) {
|
||||
cursor: default;
|
||||
}
|
||||
a.progressive img {
|
||||
@include fullImage;
|
||||
}
|
||||
a.progressive img.preview {
|
||||
filter: blur(2vw);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
a.progressive img.reveal {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
will-change: transform, opacity;
|
||||
animation: reveal 1s ease-out;
|
||||
}
|
||||
}
|
||||
&-card {
|
||||
margin: -100px 30px 0 30px;
|
||||
}
|
||||
&-column {
|
||||
width: calc(30% - 40px);
|
||||
margin: 0 20px;
|
||||
.card {
|
||||
padding: 25px 0;
|
||||
border-bottom: 1px solid $text-color-grey;
|
||||
&:nth-last-child(1) {
|
||||
border-bottom: none;
|
||||
padding: 25px 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// event end
|
||||
// partner start
|
||||
.partner {
|
||||
margin-bottom: 80px;
|
||||
&__title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
&__title {
|
||||
font-size: $h3-size;
|
||||
line-height: $h3-height;
|
||||
font-weight: 700;
|
||||
color: $text-light-black;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
}
|
||||
// partner end
|
||||
/* progressive image CSS */
|
||||
|
||||
@keyframes reveal {
|
||||
0% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
0% {
|
||||
transform: scale(1.05);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,11 @@
|
|||
&__content {
|
||||
width: calc(70% - 25px);
|
||||
margin-right: 25px;
|
||||
&-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
&__title {
|
||||
color: $text-black;
|
||||
|
|
|
|||
|
|
@ -260,6 +260,34 @@ li {
|
|||
.subheader .nav__inner-link.active::before {
|
||||
width: 100%;
|
||||
}
|
||||
.subheader .nav__inner-link .dropDown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 200px;
|
||||
max-height: 0;
|
||||
overflow: auto;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
.subheader .nav__inner-link .dropDown__link {
|
||||
display: block;
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
font-weight: 400;
|
||||
color: #242424;
|
||||
transition: all 0.2s ease-in-out 0s;
|
||||
-moz-transition: all 0.2s ease-in-out 0s;
|
||||
}
|
||||
.subheader .nav__inner-link .dropDown__link:hover {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
.subheader .nav__inner-link:hover .dropDown {
|
||||
max-height: 2000px;
|
||||
}
|
||||
.subheader .nav__inner-link:hover::before {
|
||||
width: 200px;
|
||||
}
|
||||
.subheader .language {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -1087,6 +1115,15 @@ li {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 80px;
|
||||
position: relative;
|
||||
}
|
||||
.main__body-header::after {
|
||||
background: #A2A2A2;
|
||||
height: 2px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.main__body-header-title {
|
||||
font-size: 20px;
|
||||
|
|
@ -1109,6 +1146,15 @@ li {
|
|||
font-weight: 700;
|
||||
color: #242424;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
}
|
||||
.main__body-title::after {
|
||||
background: #A2A2A2;
|
||||
height: 2px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.main__banner {
|
||||
width: 100%;
|
||||
|
|
@ -1179,6 +1225,15 @@ li {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
}
|
||||
.event__header::after {
|
||||
background: #A2A2A2;
|
||||
height: 2px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
.event__header-title {
|
||||
font-size: 20px;
|
||||
|
|
@ -1559,6 +1614,11 @@ li {
|
|||
width: calc(70% - 25px);
|
||||
margin-right: 25px;
|
||||
}
|
||||
.news__content-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.news__title {
|
||||
color: #000;
|
||||
font-weight: 700;
|
||||
|
|
|
|||
|
|
@ -1,118 +1,161 @@
|
|||
function SetSlideNavigation(e) {
|
||||
var anchors = e.parentNode.childNodes;
|
||||
if (e.tagName == "SPAN") {
|
||||
anchors = e.parentNode.parentNode.childNodes;
|
||||
}
|
||||
anchors.forEach((t) => {
|
||||
if (t.tagName == "A") {
|
||||
t.classList.remove("active");
|
||||
var anchors = e.parentNode.childNodes;
|
||||
if (e.tagName == "SPAN") {
|
||||
anchors = e.parentNode.parentNode.childNodes;
|
||||
}
|
||||
anchors.forEach((t) => {
|
||||
if (t.tagName == "A") {
|
||||
t.classList.remove("active");
|
||||
}
|
||||
});
|
||||
if (e.tagName == "SPAN") {
|
||||
e.parentNode.classList.add("active");
|
||||
} else {
|
||||
e.classList.add("active");
|
||||
}
|
||||
});
|
||||
if (e.tagName == "SPAN") {
|
||||
e.parentNode.classList.add("active");
|
||||
} else {
|
||||
e.classList.add("active");
|
||||
}
|
||||
}
|
||||
|
||||
$(".slider__inner").slick({
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
fade: true,
|
||||
slidesToShow: 1,
|
||||
slidesToScroll: 1,
|
||||
arrows: false,
|
||||
autoplay: true,
|
||||
fade: true,
|
||||
});
|
||||
|
||||
$(".slider__inner").on(
|
||||
"beforeChange",
|
||||
function (event, slick, currentSlide, nextSlide) {
|
||||
var ele = $(".slider__nav-inner").find(
|
||||
`[data-slide='${nextSlide + 1}']`
|
||||
)[0];
|
||||
"beforeChange",
|
||||
function (event, slick, currentSlide, nextSlide) {
|
||||
var ele = $(".slider__nav-inner").find(
|
||||
`[data-slide='${nextSlide + 1}']`
|
||||
)[0];
|
||||
|
||||
SetSlideNavigation(ele);
|
||||
}
|
||||
SetSlideNavigation(ele);
|
||||
}
|
||||
);
|
||||
$("a[data-slide]").click(function (e) {
|
||||
e.preventDefault();
|
||||
e.preventDefault();
|
||||
|
||||
SetSlideNavigation(e.target);
|
||||
var slideno = $(this).data("slide");
|
||||
$(".slider__inner").slick("slickGoTo", slideno - 1);
|
||||
SetSlideNavigation(e.target);
|
||||
var slideno = $(this).data("slide");
|
||||
$(".slider__inner").slick("slickGoTo", slideno - 1);
|
||||
});
|
||||
|
||||
// lazyload start
|
||||
// =============================================
|
||||
if (
|
||||
window.addEventListener &&
|
||||
window.requestAnimationFrame &&
|
||||
document.getElementsByClassName
|
||||
window.addEventListener &&
|
||||
window.requestAnimationFrame &&
|
||||
document.getElementsByClassName
|
||||
)
|
||||
window.addEventListener(
|
||||
"load",
|
||||
function () {
|
||||
let pItem = document.getElementsByClassName("progressive replace"),
|
||||
timer;
|
||||
window.addEventListener("scroll", scroller, false);
|
||||
window.addEventListener("resize", scroller, false);
|
||||
inView();
|
||||
function scroller(e) {
|
||||
timer =
|
||||
timer ||
|
||||
setTimeout(function () {
|
||||
timer = null;
|
||||
requestAnimationFrame(inView);
|
||||
}, 300);
|
||||
}
|
||||
function inView() {
|
||||
let wT = window.pageYOffset,
|
||||
wB = wT + window.innerHeight,
|
||||
cRect,
|
||||
pT,
|
||||
pB,
|
||||
p = 0;
|
||||
while (p < pItem.length) {
|
||||
cRect = pItem[p].getBoundingClientRect();
|
||||
pT = wT + cRect.top;
|
||||
pB = pT + cRect.height;
|
||||
|
||||
if (wT < pB && wB > pT) {
|
||||
loadFullImage(pItem[p]);
|
||||
pItem[p].classList.remove("replace");
|
||||
} else p++;
|
||||
}
|
||||
}
|
||||
function loadFullImage(item) {
|
||||
if (!item || !item.href) return;
|
||||
let img = new Image();
|
||||
if (item.dataset) {
|
||||
img.srcset = item.dataset.srcset || "";
|
||||
img.sizes = item.dataset.sizes || "";
|
||||
}
|
||||
img.src = item.href;
|
||||
img.className = "reveal";
|
||||
if (img.complete) addImg();
|
||||
else img.onload = addImg;
|
||||
function addImg() {
|
||||
item.addEventListener(
|
||||
"click",
|
||||
function (e) {
|
||||
e.preventDefault();
|
||||
},
|
||||
false
|
||||
);
|
||||
item.appendChild(img).addEventListener("animationend", function (e) {
|
||||
var pImg = item.querySelector && item.querySelector("img.preview");
|
||||
if (pImg) {
|
||||
e.target.alt = pImg.alt || "";
|
||||
item.removeChild(pImg);
|
||||
e.target.classList.remove("reveal");
|
||||
window.addEventListener(
|
||||
"load",
|
||||
function () {
|
||||
let pItem = document.getElementsByClassName("progressive replace"),
|
||||
timer;
|
||||
window.addEventListener("scroll", scroller, false);
|
||||
window.addEventListener("resize", scroller, false);
|
||||
inView();
|
||||
function scroller(e) {
|
||||
timer =
|
||||
timer ||
|
||||
setTimeout(function () {
|
||||
timer = null;
|
||||
requestAnimationFrame(inView);
|
||||
}, 300);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
function inView() {
|
||||
let wT = window.pageYOffset,
|
||||
wB = wT + window.innerHeight,
|
||||
cRect,
|
||||
pT,
|
||||
pB,
|
||||
p = 0;
|
||||
while (p < pItem.length) {
|
||||
cRect = pItem[p].getBoundingClientRect();
|
||||
pT = wT + cRect.top;
|
||||
pB = pT + cRect.height;
|
||||
|
||||
if (wT < pB && wB > pT) {
|
||||
loadFullImage(pItem[p]);
|
||||
pItem[p].classList.remove("replace");
|
||||
} else p++;
|
||||
}
|
||||
}
|
||||
function loadFullImage(item) {
|
||||
if (!item || !item.href) return;
|
||||
let img = new Image();
|
||||
if (item.dataset) {
|
||||
img.srcset = item.dataset.srcset || "";
|
||||
img.sizes = item.dataset.sizes || "";
|
||||
}
|
||||
img.src = item.href;
|
||||
img.className = "reveal";
|
||||
if (img.complete) addImg();
|
||||
else img.onload = addImg;
|
||||
function addImg() {
|
||||
item.addEventListener(
|
||||
"click",
|
||||
function (e) {
|
||||
e.preventDefault();
|
||||
},
|
||||
false
|
||||
);
|
||||
item.appendChild(img).addEventListener(
|
||||
"animationend",
|
||||
function (e) {
|
||||
var pImg =
|
||||
item.querySelector &&
|
||||
item.querySelector("img.preview");
|
||||
if (pImg) {
|
||||
e.target.alt = pImg.alt || "";
|
||||
item.removeChild(pImg);
|
||||
e.target.classList.remove("reveal");
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
},
|
||||
false
|
||||
);
|
||||
// lazyload end
|
||||
// =============================================
|
||||
// advertisement start
|
||||
$(function () {
|
||||
var $slideshow = $(".advertisiment");
|
||||
var ImagePauses = [6000, 2000, 3000, 10000];
|
||||
|
||||
// Init
|
||||
$slideshow.slick({
|
||||
dots: false,
|
||||
arrows: false,
|
||||
infinite: true,
|
||||
initialSlide: 0,
|
||||
autoplay: true,
|
||||
autoplaySpeed: ImagePauses[0],
|
||||
fade: true,
|
||||
cssEase: "linear",
|
||||
adaptiveHeight: true,
|
||||
});
|
||||
|
||||
// Sliding settings
|
||||
$slideshow.on("afterChange", function (event, slick, currentSlide) {
|
||||
// Console log, can be removed
|
||||
console.log(
|
||||
"Current slide: " +
|
||||
currentSlide +
|
||||
". Setting speed to: " +
|
||||
ImagePauses[currentSlide]
|
||||
);
|
||||
|
||||
// Update autoplay speed according to slide index
|
||||
$slideshow.slick(
|
||||
"slickSetOption",
|
||||
"autoplaySpeed",
|
||||
ImagePauses[currentSlide],
|
||||
true
|
||||
);
|
||||
});
|
||||
});
|
||||
// advertisement end
|
||||
|
|
|
|||
|
|
@ -31,6 +31,20 @@ random = 0
|
|||
<section class="banner">
|
||||
<div class="auto__container">
|
||||
<div class="banner__inner">
|
||||
<div class="advertisement">
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
{% component 'samsung' %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -49,10 +63,21 @@ random = 0
|
|||
<div class="main__inner">
|
||||
<div class="main__content">
|
||||
<div class="main__banner">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
|
||||
<div class="advertisement">
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<!--{% component 'reklama' %}-->
|
||||
|
||||
</div>
|
||||
<div class="main__body">
|
||||
<div class="main__body-row">
|
||||
|
|
@ -78,10 +103,21 @@ random = 0
|
|||
{% partial 'index/category_posts' category = blogCategories.categories.shift %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="main__banner">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
<div class="advertisement">
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
<a href="#" class="advertisiment__item">
|
||||
<img src="{{'assets/images/example.svg'|theme}}" alt="">
|
||||
</a>
|
||||
</div>
|
||||
{% partial 'index/partner_news'%}
|
||||
{% partial 'index/partner_news'%}
|
||||
</div>
|
||||
<div class="main__sidebar">
|
||||
<div class="main__sidebar-title">
|
||||
|
|
@ -119,4 +155,4 @@ random = 0
|
|||
|
||||
{% put scripts %}
|
||||
<script src="{{['assets/slick/slick.min.js','assets/js/lazy.js','assets/js/main.js']|theme}}"></script>
|
||||
{% endput %}
|
||||
{% endput %}
|
||||
|
|
@ -21,21 +21,27 @@ slug = "{{ :slug }}"
|
|||
==
|
||||
<article class="news__content">
|
||||
<header>
|
||||
<time class="news__date">
|
||||
<span>{{post.published_at|date('d.m.Y')}}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
|
||||
<path id="Polygon_1" data-name="Polygon 1" d="M2,0,4,2,2,4,0,2Z" fill="#a2a2a2" />
|
||||
</svg>
|
||||
<span>{{post.published_at|date('H:i')}}</span>
|
||||
</time>
|
||||
<div class="card__header-view" id="view">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="eye" transform="translate(-0.5 -3.5)">
|
||||
<path id="Path_6489" data-name="Path 6489" d="M1,11S4.636,4,11,4s10,7,10,7-3.636,7-10,7S1,11,1,11Z" fill="none" stroke="" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
|
||||
<ellipse id="Ellipse_12" data-name="Ellipse 12" cx="4.859" cy="4.791" rx="4.859" ry="4.791" transform="translate(6.141 6.209)" fill="none" stroke="" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></ellipse>
|
||||
</g>
|
||||
</svg>
|
||||
{% partial 'view' %}
|
||||
<div class="news__content-header">
|
||||
<time class="news__date">
|
||||
<span>{{post.published_at|date('d.m.Y')}}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="4" height="4" viewBox="0 0 4 4">
|
||||
<path id="Polygon_1" data-name="Polygon 1" d="M2,0,4,2,2,4,0,2Z" fill="#a2a2a2" />
|
||||
</svg>
|
||||
<span>{{post.published_at|date('H:i')}}</span>
|
||||
</time>
|
||||
<div class="card__header-view" id="view">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="eye" transform="translate(-0.5 -3.5)">
|
||||
<path id="Path_6489" data-name="Path 6489"
|
||||
d="M1,11S4.636,4,11,4s10,7,10,7-3.636,7-10,7S1,11,1,11Z" fill="none" stroke=""
|
||||
stroke-linecap="round" stroke-linejoin="round" stroke-width="1"></path>
|
||||
<ellipse id="Ellipse_12" data-name="Ellipse 12" cx="4.859" cy="4.791" rx="4.859" ry="4.791"
|
||||
transform="translate(6.141 6.209)" fill="none" stroke="" stroke-linecap="round"
|
||||
stroke-linejoin="round" stroke-width="1"></ellipse>
|
||||
</g>
|
||||
</svg>
|
||||
{% partial 'view' %}
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="news__title">
|
||||
{{post.title}}
|
||||
|
|
@ -57,14 +63,14 @@ slug = "{{ :slug }}"
|
|||
</div>
|
||||
</article>
|
||||
<div class="news__sidebar">
|
||||
{% partial 'latest_news'%}
|
||||
{% partial 'latest_news'%}
|
||||
</div>
|
||||
|
||||
{% put scripts %}
|
||||
<script>
|
||||
$.request('views::onIncrement', {
|
||||
update: {view:'@#view'},
|
||||
update: { view: '@#view' },
|
||||
|
||||
})
|
||||
</script>
|
||||
{% endput %}
|
||||
{% endput %}
|
||||
|
|
@ -55,7 +55,7 @@ code = "top-menu"
|
|||
|
||||
{% if not item.isHidden and item.items|length %}
|
||||
|
||||
<div class="nav__link {% if(item.isChildActive) %}} active {% endif %} {{item.cssClass}}">
|
||||
<div class="nav__inner-link {% if(item.isChildActive) %}} active {% endif %} {{item.cssClass}}">
|
||||
<span>{{ item.title }}</span>
|
||||
<div class="icon__outer">
|
||||
<img src="{{'assets/images/polygon.svg'|theme}}" alt="polygon">
|
||||
|
|
|
|||
Loading…
Reference in New Issue