TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

psuhed

This commit is contained in:
= 2021-05-10 18:27:01 +05:00
parent d41c0aa7df
commit 9fb1d719de
5 changed files with 364 additions and 342 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
plugins/tps/reklama/components/advertisement/carousel.htm
View File

@ -1,18 +1,21 @@
<div class="partnerSlider"> <div class="partnerSlider">
<button class="p1"> <button class="p1">
<span></span> <svg xmlns="http://www.w3.org/2000/svg" width="9.414" height="16.828" viewBox="0 0 9.414 16.828">
<path id="Path_6497" data-name="Path 6497" d="M19,5l-7,7,7,7" transform="translate(-11 -3.586)" fill="none"
stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</svg>
</button> </button>
<button class="n1"> <button class="n1">
<span></span> <svg xmlns="http://www.w3.org/2000/svg" width="9.414" height="16.828" viewBox="0 0 9.414 16.828">
<path id="Path_6496" data-name="Path 6496" d="M12,5l7,7-7,7" transform="translate(-10.586 -3.586)"
fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" />
</svg>
</button> </button>
<div class="partnerSlider__inner"> <div class="partnerSlider__inner">
{% for reklama in __SELF__.group.adds %} {% for reklama in __SELF__.group.adds %}
<a class="partnerSlider__item" <a class="partnerSlider__item" {% if reklama.enable_stats and reklama.url !="#" %}
{% if reklama.enable_stats and reklama.url !="#" %} data-request="{{__SELF__}}::onRedirect" data-request-data='[{id:{{reklama.id}}},{url:"{{reklama.url}}"}]' {%
data-request="{{__SELF__}}::onRedirect" endif %}>
data-request-data = '[{id:{{reklama.id}}},{url:"{{reklama.url}}"}]'
{% endif %}
>
<img src="{{reklama.media|media_cdn}}" alt="{{reklama.title}}"> <img src="{{reklama.media|media_cdn}}" alt="{{reklama.title}}">
</a> </a>
{% endfor %} {% endfor %}
@ -118,4 +121,4 @@
// ================================================ // ================================================
</script> </script>
{% endput %} {% endput %}
{% endif %} {% endif %}

2
themes/modern2/assets/css/components/2-layout/subheader.scss
View File

@ -1,5 +1,7 @@
.subheader { .subheader {
background: $text-light-black; background: $text-light-black;
position: relative;
z-index: 1;
.close { .close {
display: none; display: none;
} }

667
themes/modern2/assets/css/components/3-page/home.scss
View File

@ -1,370 +1,377 @@
.marquee { .marquee {
width: 100%; width: 100%;
margin: 10px 0; margin: 10px 0;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
height: 40px; height: 40px;
&::after { &::after {
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
width: 260px; width: 260px;
height: 100%; height: 100%;
content: ""; content: "";
background: rgb(255, 255, 255); background: rgb(255, 255, 255);
background: linear-gradient( background: linear-gradient(
90deg, 90deg,
rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100% rgba(255, 255, 255, 1) 100%
); );
} }
&__link { &__link {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 120px; width: 120px;
height: 100%; height: 100%;
background: #00822c; background: #00822c;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 1; z-index: 1;
font-size: 14px; font-size: 14px;
color: $text-color-white; color: $text-color-white;
line-height: 16px; line-height: 16px;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
&::before { &::before {
clip-path: polygon(100% 46%, 0 0, 0 100%); clip-path: polygon(100% 46%, 0 0, 0 100%);
background: #00822c; background: #00822c;
position: absolute; position: absolute;
top: 0; top: 0;
left: 100%; left: 100%;
height: 100%; height: 100%;
width: 25px; width: 25px;
content: ""; content: "";
}
} }
}
} }
.marquee div { .marquee div {
display: block; display: block;
width: 200%; width: 200%;
height: 30px; height: 30px;
position: absolute; position: absolute;
overflow: hidden; overflow: hidden;
animation: marquee 25s linear infinite; animation: marquee 25s linear infinite;
} }
.marquee span { .marquee span {
float: left; float: left;
width: 50%; width: 50%;
font-size: 14px; font-size: 14px;
line-height: 40px; line-height: 40px;
font-weight: 400; font-weight: 400;
color: $text-black; color: $text-black;
} }
@keyframes marquee { @keyframes marquee {
0% { 0% {
left: 0; left: 0;
} }
100% { 100% {
left: -100%; left: -100%;
} }
} }
/* Make it move */ /* Make it move */
@keyframes marquee { @keyframes marquee {
0% { 0% {
transform: translate(0, 0); transform: translate(0, 0);
} }
100% { 100% {
transform: translate(-100%, 0); transform: translate(-100%, 0);
} }
} }
// banner start // banner start
.banner { .banner {
margin: 80px 0; margin: 80px 0;
&__inner { &__inner {
width: 100%;
height: auto;
img {
width: 100%;
}
}
}
// banner end
// main start
.main {
margin-top: 70px;
&__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;
}
&-column {
width: calc(50% - 42px);
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;
}
&.border {
border: 1px solid #dcdcdc;
}
}
&-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 80px;
position: relative;
&::before {
position: absolute;
content: "";
top: 50%;
left: 50%;
width: 80%;
height: 1px;
background: #e6e6e6;
@include transform;
z-index: -1;
}
&-title {
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
color: $text-light-black;
background: $text-color-white;
}
&-link {
font-size: $h5-size;
line-height: $h5-height;
font-weight: 400;
color: $text-color-grey;
background: $text-color-white;
display: block;
}
}
&-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 {
width: 100%; width: 100%;
height: auto; height: auto;
} img {
& img.preview { width: 100%;
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; // banner end
align-items: center; .advertisiment__item {
flex-wrap: wrap; img {
margin: -30px -5px 80px -5px; width: 100%;
&-link { }
padding: 8px 9px; }
border-right: 5px; // main start
background: #f7f7f6; .main {
font-size: 16px; margin-top: 70px;
line-height: 16px; &__inner {
color: $text-light-black; display: flex;
margin: 5px; 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;
}
&-column {
width: calc(50% - 42px);
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;
}
&.border {
border: 1px solid #dcdcdc;
}
}
&-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 80px;
position: relative;
&::before {
position: absolute;
content: "";
top: 50%;
left: 50%;
width: 80%;
height: 1px;
background: #e6e6e6;
@include transform;
z-index: -1;
}
&-title {
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
color: $text-light-black;
background: $text-color-white;
}
&-link {
font-size: $h5-size;
line-height: $h5-height;
font-weight: 400;
color: $text-color-grey;
background: $text-color-white;
display: block;
}
}
&-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);
&-adv {
margin-bottom: 40px;
}
&-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: 8px 9px;
border-right: 5px;
background: #f7f7f6;
font-size: 16px;
line-height: 16px;
color: $text-light-black;
margin: 5px;
}
}
} }
}
} }
// main end // main end
// event start // event start
.event { .event {
margin: 80px 0; margin: 80px 0;
&__header { &__header {
margin-bottom: 80px; margin-bottom: 80px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
position: relative;
&-title {
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
color: $text-light-black;
background: $text-color-white;
}
&-link {
font-size: $h5-size;
line-height: $h5-height;
font-weight: 400;
color: $text-color-grey;
background: $text-color-white;
}
&::before {
position: absolute;
content: "";
top: 50%;
left: 50%;
width: 80%;
height: 1px;
background: #e6e6e6;
@include transform;
z-index: -1;
}
}
&__body {
&-row {
display: flex;
align-items: stretch;
margin: 0 -20px;
}
&-image {
width: calc(50% - 40px);
margin: 0 20px;
position: relative;
a.progressive {
position: relative; position: relative;
display: block; &-title {
overflow: hidden; font-size: $h3-size;
outline: none; line-height: $h3-height;
height: 330px; font-weight: 700;
} color: $text-light-black;
a.progressive:not(.replace) { background: $text-color-white;
cursor: default; }
} &-link {
a.progressive img { font-size: $h5-size;
@include fullImage; line-height: $h5-height;
} font-weight: 400;
a.progressive img.preview { color: $text-color-grey;
filter: blur(2vw); background: $text-color-white;
transform: scale(1.05); }
} &::before {
a.progressive img.reveal { position: absolute;
position: absolute; content: "";
left: 0; top: 50%;
top: 0; left: 50%;
will-change: transform, opacity; width: 80%;
animation: reveal 1s ease-out; height: 1px;
} background: #e6e6e6;
} @include transform;
&-card { z-index: -1;
position: absolute; }
bottom: -30px; }
left: 30px; &__body {
width: calc(100% - 60px); &-row {
border: 1px solid #707070; display: flex;
} align-items: stretch;
&-column { margin: 0 -20px;
width: calc(50% - 100px); }
margin: 0 20px; &-image {
padding: 15px 30px; width: calc(50% - 40px);
border: 1px solid #dcdcdc; margin: 0 20px;
.card { position: relative;
padding: 30px 0; a.progressive {
border-bottom: 1px solid #dcdcdc; position: relative;
&:nth-last-child(1) { display: block;
border-bottom: none; overflow: hidden;
outline: none;
height: 330px;
}
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 {
position: absolute;
bottom: -30px;
left: 30px;
width: calc(100% - 60px);
border: 1px solid #707070;
}
&-column {
width: calc(50% - 100px);
margin: 0 20px;
padding: 15px 30px;
border: 1px solid #dcdcdc;
.card {
padding: 30px 0;
border-bottom: 1px solid #dcdcdc;
&:nth-last-child(1) {
border-bottom: none;
}
}
} }
}
} }
}
} }
// event end // event end
// partner start // partner start
.partner { .partner {
margin-bottom: 80px;
&__title {
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
color: $text-light-black;
margin-bottom: 80px; margin-bottom: 80px;
} &__title {
font-size: $h3-size;
line-height: $h3-height;
font-weight: 700;
color: $text-light-black;
margin-bottom: 80px;
}
} }
// partner end // partner end
/* progressive image CSS */ /* progressive image CSS */
@keyframes reveal { @keyframes reveal {
0% { 0% {
transform: scale(1.05); transform: scale(1.05);
opacity: 0; opacity: 0;
} }
100% { 100% {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
} }

9
themes/modern2/assets/css/main.css
View File

@ -222,6 +222,8 @@ li {
.subheader { .subheader {
background: #242424; background: #242424;
position: relative;
z-index: 1;
} }
.subheader .close { .subheader .close {
display: none; display: none;
@ -1257,6 +1259,10 @@ li {
width: 100%; width: 100%;
} }
.advertisiment__item img {
width: 100%;
}
.main { .main {
margin-top: 70px; margin-top: 70px;
} }
@ -1367,6 +1373,9 @@ li {
margin-left: 25px; margin-left: 25px;
width: calc(30% - 25px); width: calc(30% - 25px);
} }
.main__sidebar-adv {
margin-bottom: 40px;
}
.main__sidebar-title { .main__sidebar-title {
font-size: 16px; font-size: 16px;
line-height: 25px; line-height: 25px;

7
themes/modern2/pages/index.htm
View File

@ -117,11 +117,12 @@ random = 0
{% partial 'index/partner_news' %} {% partial 'index/partner_news' %}
</div> </div>
<div class="main__sidebar"> <div class="main__sidebar">
{% component 'right_top' %}
{% component 'right_middle' css_class = 'primary progressive replace' %} {% component 'right_top' css_class= 'main__sidebar-adv' %}
{% component 'right_bottom' %}
{% partial 'tags' %} {% partial 'tags' %}
{% component 'right_middle' css_class = 'main__sidebar-adv' %}
{% partial 'calendar' %} {% partial 'calendar' %}
{% component 'right_bottom' css_class= 'main__sidebar-adv' %}
</div> </div>
</div> </div>
</div> </div>