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

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

@ -1,18 +1,21 @@
<div class="partnerSlider">
<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 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>
<div class="partnerSlider__inner">
{% for reklama in __SELF__.group.adds %}
<a class="partnerSlider__item"
{% if reklama.enable_stats and reklama.url !="#" %}
data-request="{{__SELF__}}::onRedirect"
data-request-data = '[{id:{{reklama.id}}},{url:"{{reklama.url}}"}]'
{% endif %}
>
<a class="partnerSlider__item" {% if reklama.enable_stats and reklama.url !="#" %}
data-request="{{__SELF__}}::onRedirect" data-request-data='[{id:{{reklama.id}}},{url:"{{reklama.url}}"}]' {%
endif %}>
<img src="{{reklama.media|media_cdn}}" alt="{{reklama.title}}">
</a>
{% endfor %}

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

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

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

@ -1,370 +1,377 @@
.marquee {
width: 100%;
margin: 10px 0;
overflow: hidden;
position: relative;
height: 40px;
&::after {
position: absolute;
right: 0;
top: 0;
width: 260px;
height: 100%;
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
&__link {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 100%;
background: #00822c;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
font-size: 14px;
color: $text-color-white;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
&::before {
clip-path: polygon(100% 46%, 0 0, 0 100%);
background: #00822c;
position: absolute;
top: 0;
left: 100%;
height: 100%;
width: 25px;
content: "";
width: 100%;
margin: 10px 0;
overflow: hidden;
position: relative;
height: 40px;
&::after {
position: absolute;
right: 0;
top: 0;
width: 260px;
height: 100%;
content: "";
background: rgb(255, 255, 255);
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%
);
}
&__link {
position: absolute;
top: 0;
left: 0;
width: 120px;
height: 100%;
background: #00822c;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
font-size: 14px;
color: $text-color-white;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
&::before {
clip-path: polygon(100% 46%, 0 0, 0 100%);
background: #00822c;
position: absolute;
top: 0;
left: 100%;
height: 100%;
width: 25px;
content: "";
}
}
}
}
.marquee div {
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 25s linear infinite;
display: block;
width: 200%;
height: 30px;
position: absolute;
overflow: hidden;
animation: marquee 25s linear infinite;
}
.marquee span {
float: left;
width: 50%;
font-size: 14px;
line-height: 40px;
font-weight: 400;
color: $text-black;
float: left;
width: 50%;
font-size: 14px;
line-height: 40px;
font-weight: 400;
color: $text-black;
}
@keyframes marquee {
0% {
left: 0;
}
100% {
left: -100%;
}
0% {
left: 0;
}
100% {
left: -100%;
}
}
/* Make it move */
@keyframes marquee {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
0% {
transform: translate(0, 0);
}
100% {
transform: translate(-100%, 0);
}
}
// banner start
.banner {
margin: 80px 0;
&__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 {
margin: 80px 0;
&__inner {
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;
}
img {
width: 100%;
}
}
&-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;
}
}
// banner end
.advertisiment__item {
img {
width: 100%;
}
}
// 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);
&-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
// event start
.event {
margin: 80px 0;
&__header {
margin-bottom: 80px;
display: flex;
align-items: center;
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 {
margin: 80px 0;
&__header {
margin-bottom: 80px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
display: block;
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;
&-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;
display: block;
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
// 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;
}
}

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

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

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

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