infeeeee/dis-2019
1
0
Fork 0
Code Issues 6 Pull Requests Releases 19 Wiki Activity

working on single and events

Browse Source
This commit is contained in:
infeeeee
2019-08-09 00:38:47 +02:00
parent 5a234f87e1
commit 911688225f
7 changed files with 165 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
_jegyzet.md
View File

@@ -33,4 +33,4 @@ Nincs találat oldal, pl keresésnél
Keresési találatok oldal
Esemény oldalon a "Tovább az eseményre gomb" legyen kiütött?

12
_teendők.md
View File

@@ -1,16 +1,11 @@
# Single
# Single - ✔
og: tag: pluginnal!
bal felső sarokban nem jó a sarok border!!
lightbox: mobilon ott ahol van most
Asztalin menjen ki a képernyő szélére
galéria jobb/bal nyilat a képernyő széléhez igazítani | X-et is
# Esemény oldal
megcsinálni!
# Kezdőlap
felgördülő szövegkivonat -> felülre igazítva
@@ -29,6 +24,7 @@ semmiképpen ne lógjon a cím elé a felgördölő cucc
Max karakterszám alcímnél, hogy hova menjen
scroll rossz a kiscímeknél
## mobil nézet

4
category-esemeny.php
View File

@@ -26,7 +26,8 @@
<div class="top-row">
<div class="ev-date">
<?php
echo $event_datum;
echo preg_replace('/^(\d{4}\.)(\d{2}\.)(\d{2}\.)$/','\1</br>\2 \3',$event_datum );
// echo $event_datum;
?>
</div>
@@ -44,6 +45,7 @@
<h2>
<?php the_title();?>
</h2>
<div class="vr"></div>
<!-- Tovább button -->
<a href="<?php echo $event_link; ?>" class="text-link" target="_blank">Tovább az eseményre</a>
</div>

81
css/base.css
View File

@@ -125,7 +125,8 @@ object {
.wrapper .header .header-2 {
display: flex;
flex-direction: row;
align-items: center; }
align-items: center;
line-height: 0; }
@media (min-width: 769px) {
.wrapper .header .header-1,
.wrapper .header .header-2 {
@@ -1178,7 +1179,7 @@ object {
border-top: #000 1px solid;
background-color: transparent;
left: calc(4rem);
margin-left: -0; }
margin-left: calc((0) * -1); }
.archive main section .home_wrapper-big.home_wrapper-1 article .metadata::before,
.home main section .home_wrapper-big.home_wrapper-1 article .metadata::before,
.search-results main section .home_wrapper-big.home_wrapper-1 article .metadata::before {
@@ -1190,7 +1191,7 @@ object {
top: 0;
background-color: transparent;
z-index: 9;
left: -0;
left: calc((0) * -1);
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
@@ -1227,7 +1228,7 @@ object {
border-top: #000 1px solid;
background-color: transparent;
right: calc(4rem);
margin-right: -0; }
margin-right: calc((0) * -1); }
.archive main section .home_wrapper-big.home_wrapper-2 article .metadata::before,
.home main section .home_wrapper-big.home_wrapper-2 article .metadata::before,
.search-results main section .home_wrapper-big.home_wrapper-2 article .metadata::before {
@@ -1239,7 +1240,7 @@ object {
top: 0;
background-color: transparent;
z-index: 9;
right: -0;
right: calc((0) * -1);
border-right: #000 solid 1px;
-moz-transform: skewX(45deg);
-o-transform: skewX(45deg);
@@ -1356,7 +1357,7 @@ object {
border-top: #000 1px solid;
background-color: transparent;
left: calc(5rem);
margin-left: -0; }
margin-left: calc((0) * -1); }
.archive main section .home_wrapper-small article .metadata::before,
.archive main section .home_wrapper-small .archivetitle .metadata::before,
.archive main section .home_wrapper-small .archivedescription .metadata::before,
@@ -1374,7 +1375,7 @@ object {
top: 0;
background-color: transparent;
z-index: 9;
left: -0;
left: calc((0) * -1);
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
@@ -1584,7 +1585,7 @@ object {
border-top: #000 1px solid;
background-color: transparent;
left: calc(5rem);
margin-left: -0; }
margin-left: calc((0) * -1); }
.archive main section .home_wrapper-small .archivetitle::before,
.home main section .home_wrapper-small .archivetitle::before,
.search-results main section .home_wrapper-small .archivetitle::before {
@@ -1596,7 +1597,7 @@ object {
top: 0;
background-color: transparent;
z-index: 9;
left: -0;
left: calc((0) * -1);
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
@@ -1710,7 +1711,8 @@ body.category.category-esemeny header {
body.category.category-esemeny main {
padding-top: 9rem; }
body.category.category-esemeny main article {
height: 50vh; }
height: 85vw;
max-height: calc(50vw + 180px); }
body.category.category-esemeny main article .thumbnailwrapper {
height: 50vw; }
body.category.category-esemeny main article .thumbnailwrapper img {
@@ -1719,7 +1721,11 @@ body.category.category-esemeny main {
body.category.category-esemeny main article .event-metadata {
display: flex;
flex-direction: column;
padding: 2rem; }
justify-content: space-between;
align-content: stretch;
padding: 2rem;
height: 35vw;
max-height: 180px; }
body.category.category-esemeny main article .event-metadata .top-row,
body.category.category-esemeny main article .event-metadata .bottom-row {
display: flex;
@@ -1727,9 +1733,48 @@ body.category.category-esemeny main {
justify-content: space-between;
height: 50%;
flex: 0 0 auto; }
body.category.category-esemeny main article .event-metadata .top-row h2,
body.category.category-esemeny main article .event-metadata .top-row {
align-items: center; }
body.category.category-esemeny main article .event-metadata .top-row .ev-date {
font: 800 1.8rem "Butler";
color: #000;
color: #00f; }
@media (min-width: 512px) {
body.category.category-esemeny main article .event-metadata .top-row .ev-date {
font-size: 2.2rem; } }
body.category.category-esemeny main article .event-metadata .top-row a {
-moz-transform: rotate(225deg);
-o-transform: rotate(225deg);
-ms-transform: rotate(225deg);
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
font-size: 2.8rem; }
body.category.category-esemeny main article .event-metadata .bottom-row {
align-items: flex-end; }
body.category.category-esemeny main article .event-metadata .bottom-row h2 {
height: unset; }
flex: 1 0.9 auto;
height: unset;
padding: 0;
font: 800 1.8rem "Butler";
color: #000; }
@media (min-width: 512px) {
body.category.category-esemeny main article .event-metadata .bottom-row h2 {
font-size: 2.2rem; } }
body.category.category-esemeny main article .event-metadata .bottom-row .vr {
flex: 0 0 auto;
width: 1px;
height: 100%;
background-color: #000; }
body.category.category-esemeny main article .event-metadata .bottom-row a.text-link {
flex: 1 1 auto;
font: 800 1.8rem "Butler";
color: #000;
font: 500 1.8rem "Westeinde Caption";
color: #00f;
text-align: right; }
@media (min-width: 512px) {
body.category.category-esemeny main article .event-metadata .bottom-row a.text-link {
font-size: 2.2rem; } }
body.category.category-esemeny main article .event-metadata .hr {
flex: 0 0 auto;
height: 1px;
@@ -1883,11 +1928,11 @@ body.category.category-esemeny main {
display: block;
top: 0;
border: none;
width: calc(100% - 5rem + 5rem);
width: calc(100% - 5rem + (5rem + 1px));
border-top: #000 1px solid;
background-color: white;
left: calc(5rem);
margin-left: -5rem; }
margin-left: calc((5rem + 1px) * -1); }
.single article .titlewrapper .metadata::before,
.page article .titlewrapper .metadata::before {
display: block;
@@ -1898,7 +1943,7 @@ body.category.category-esemeny main {
top: 0;
background-color: white;
z-index: 9;
left: -5rem;
left: calc((5rem + 1px) * -1);
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg);
@@ -2464,7 +2509,7 @@ body.category.category-esemeny main {
border-top: #000 1px solid;
background-color: transparent;
left: calc(5rem);
margin-left: -0; }
margin-left: calc((0) * -1); }
.single #related_posts ul li .metadata::before,
.page #related_posts ul li .metadata::before {
display: block;
@@ -2475,7 +2520,7 @@ body.category.category-esemeny main {
top: 0;
background-color: transparent;
z-index: 9;
left: -0;
left: calc((0) * -1);
border-left: #000 solid 1px;
-moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg);

33
js/scripts.js
View File

@@ -49,7 +49,7 @@
/* --------------------------- css values to vars --------------------------- */
//isMobile
const isMobile = (_ => {
if (wow < 769) {
if (wow < 769 || wiw < 769) {
//mobile settings
$('.social-link, .events-link').addClass('hidden')
return true
@@ -720,10 +720,10 @@
if (isEsemeny) {
//add spaces to date
$(".event-metadata .ev-date").each(function () {
let repl = $(this).html().replace(/\.\b/g, ". ")
$(this).html(repl)
})
// $(".event-metadata .ev-date").each(function () {
// let repl = $(this).html().replace(/\.\b/g, ". ")
// $(this).html(repl)
// })
}
@@ -798,13 +798,22 @@
//hide caption on desktop
if (!isMobile) {
$('.wp-block-gallery img, .wp-block-image img').hover(function () {
$(this).parent('a').next("figcaption").addClass("vis")
}, function () {
$('.wp-block-gallery .vis, .wp-block-image .vis')
.removeClass("vis")
// $('.wp-block-gallery img, .wp-block-image img, .vis').hover(function () {
// $(this).parent('a').next("figcaption").addClass("vis")
// }, function () {
// $('.wp-block-gallery .vis, .wp-block-image .vis')
// .removeClass("vis")
// })
$('.wp-block-gallery .blocks-gallery-item, .wp-block-image').hover(function(){
$(this).find("figcaption").addClass("vis")
},function(){
$('.wp-block-gallery .vis, .wp-block-image .vis').removeClass("vis")
})
}
@@ -823,7 +832,7 @@
//http://www.jacklmoore.com/colorbox/
const colorboxSettings = {
transition: 'fade',
transition: 'none',
rel: 'cb-ballery',
maxWidth: '90%',
maxHeight: '80%',
@@ -833,6 +842,8 @@
previous: '',
next: '',
close: '',
xhrError: 'A tartalom betöltése nem sikerült. Kérlek próbáld meg később.',
imgError: 'A kép betöltése nem sikerült. Kérlek próbáld meg később.'
}

20
sass/_font-mixins.scss
View File

@@ -191,3 +191,23 @@
font: 500 2rem "Westeinde Caption";
line-height: 1.3;
}
@mixin event-title{
font: 800 1.8rem "Butler";
color: #000;
@media #{$tablet} {
font-size: 2.2rem;
}
}
@mixin event-date{
@include event-title();
color: #00f;
}
@mixin event-link{
@include event-title();
font: 500 1.8rem "Westeinde Caption";
color: #00f;
}

59
sass/base.scss
View File

@@ -89,6 +89,10 @@ $only-mobile: only screen and
max-width: 768px
);
$tablet: only screen and
(
min-width: 512px
);
$smalldesktop: only screen and
(
min-width: 769px
@@ -236,7 +240,7 @@ $v-unit-6: 24rem;
@if $offset==0 {
width: calc(100% - #{$radius});
} @else {
width: calc(100% - #{$radius} + #{$offset});
width: calc(100% - #{$radius} + (#{$offset}));
}
border-top: $bordercolor 1px solid;
@@ -244,11 +248,11 @@ $v-unit-6: 24rem;
@if $side==left {
left: calc(#{$radius});
margin-left: -#{$offset};
margin-left: calc((#{$offset}) * -1);
}
@if $side==right {
right: calc(#{$radius});
margin-right: -#{$offset};
margin-right: calc((#{$offset}) * -1);
}
}
&::before {
@@ -263,14 +267,14 @@ $v-unit-6: 24rem;
z-index: 9;
@if $side==left {
left: -#{$offset};
left: calc((#{$offset}) * -1);
border-left: $bordercolor solid 1px;
@include transform(skewX(-45deg));
transform-origin: left bottom;
border-top: $bordercolor solid 1px;
}
@if $side==right {
right: -#{$offset};
right: calc((#{$offset}) * -1);
border-right: $bordercolor solid 1px;
@include transform(skewX(45deg));
transform-origin: right bottom;
@@ -316,6 +320,7 @@ $v-unit-6: 24rem;
display: flex;
flex-direction: row;
align-items: center;
line-height: 0;
@media #{$smalldesktop} {
width: $h-unit-2;
position: fixed;
@@ -1277,7 +1282,8 @@ body.category.category-esemeny {
main {
padding-top: 5rem + (2rem * 2);
article {
height: 50vh;
height: 85vw;
max-height: calc(50vw + 180px);
.thumbnailwrapper {
height: 50vw;
img {
@@ -1289,7 +1295,11 @@ body.category.category-esemeny {
.event-metadata {
display: flex;
flex-direction: column;
justify-content: space-between;
align-content: stretch;
padding: 2rem;
height: 35vw;
max-height: 180px;
.top-row,
.bottom-row {
@@ -1298,14 +1308,41 @@ body.category.category-esemeny {
justify-content: space-between;
height: 50%;
flex: 0 0 auto;
// & > * {
// }
// .ev-date {
// }
}
.top-row {
align-items: center;
.ev-date {
@include event-date();
}
a {
@include transform(rotate(225deg));
font-size: 2.8rem;
}
}
.bottom-row {
align-items: flex-end;
h2 {
flex: 1 0.9 auto;
height: unset;
padding: 0;
@include event-title;
}
.vr {
flex: 0 0 auto;
width: 1px;
height: 100%;
background-color: #000;
}
a.text-link {
flex: 1 1 auto;
@include event-link;
text-align: right;
}
}
.hr {
flex: 0 0 auto;
height: 1px;
@@ -1471,7 +1508,7 @@ body.category.category-esemeny {
padding-left: 0;
padding-right: 0;
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1}, white, #000, left);
@include triangle-corner-bordered(#{$h-unit-1}, #{$h-unit-1} + 1px, white, #000, left);
.metaWrapper {
@include singlDesktopLayout();