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 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! 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 # Esemény oldal
megcsinálni!
# Kezdőlap # Kezdőlap
felgördülő szövegkivonat -> felülre igazítva 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 Max karakterszám alcímnél, hogy hova menjen
scroll rossz a kiscímeknél
## mobil nézet ## mobil nézet

4
category-esemeny.php
View File

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

81
css/base.css
View File

@@ -125,7 +125,8 @@ object {
.wrapper .header .header-2 { .wrapper .header .header-2 {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; } align-items: center;
line-height: 0; }
@media (min-width: 769px) { @media (min-width: 769px) {
.wrapper .header .header-1, .wrapper .header .header-1,
.wrapper .header .header-2 { .wrapper .header .header-2 {
@@ -1178,7 +1179,7 @@ object {
border-top: #000 1px solid; border-top: #000 1px solid;
background-color: transparent; background-color: transparent;
left: calc(4rem); left: calc(4rem);
margin-left: -0; } margin-left: calc((0) * -1); }
.archive main section .home_wrapper-big.home_wrapper-1 article .metadata::before, .archive main section .home_wrapper-big.home_wrapper-1 article .metadata::before,
.home 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 { .search-results main section .home_wrapper-big.home_wrapper-1 article .metadata::before {
@@ -1190,7 +1191,7 @@ object {
top: 0; top: 0;
background-color: transparent; background-color: transparent;
z-index: 9; z-index: 9;
left: -0; left: calc((0) * -1);
border-left: #000 solid 1px; border-left: #000 solid 1px;
-moz-transform: skewX(-45deg); -moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg); -o-transform: skewX(-45deg);
@@ -1227,7 +1228,7 @@ object {
border-top: #000 1px solid; border-top: #000 1px solid;
background-color: transparent; background-color: transparent;
right: calc(4rem); right: calc(4rem);
margin-right: -0; } margin-right: calc((0) * -1); }
.archive main section .home_wrapper-big.home_wrapper-2 article .metadata::before, .archive main section .home_wrapper-big.home_wrapper-2 article .metadata::before,
.home 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 { .search-results main section .home_wrapper-big.home_wrapper-2 article .metadata::before {
@@ -1239,7 +1240,7 @@ object {
top: 0; top: 0;
background-color: transparent; background-color: transparent;
z-index: 9; z-index: 9;
right: -0; right: calc((0) * -1);
border-right: #000 solid 1px; border-right: #000 solid 1px;
-moz-transform: skewX(45deg); -moz-transform: skewX(45deg);
-o-transform: skewX(45deg); -o-transform: skewX(45deg);
@@ -1356,7 +1357,7 @@ object {
border-top: #000 1px solid; border-top: #000 1px solid;
background-color: transparent; background-color: transparent;
left: calc(5rem); 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 article .metadata::before,
.archive main section .home_wrapper-small .archivetitle .metadata::before, .archive main section .home_wrapper-small .archivetitle .metadata::before,
.archive main section .home_wrapper-small .archivedescription .metadata::before, .archive main section .home_wrapper-small .archivedescription .metadata::before,
@@ -1374,7 +1375,7 @@ object {
top: 0; top: 0;
background-color: transparent; background-color: transparent;
z-index: 9; z-index: 9;
left: -0; left: calc((0) * -1);
border-left: #000 solid 1px; border-left: #000 solid 1px;
-moz-transform: skewX(-45deg); -moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg); -o-transform: skewX(-45deg);
@@ -1584,7 +1585,7 @@ object {
border-top: #000 1px solid; border-top: #000 1px solid;
background-color: transparent; background-color: transparent;
left: calc(5rem); left: calc(5rem);
margin-left: -0; } margin-left: calc((0) * -1); }
.archive main section .home_wrapper-small .archivetitle::before, .archive main section .home_wrapper-small .archivetitle::before,
.home main section .home_wrapper-small .archivetitle::before, .home main section .home_wrapper-small .archivetitle::before,
.search-results main section .home_wrapper-small .archivetitle::before { .search-results main section .home_wrapper-small .archivetitle::before {
@@ -1596,7 +1597,7 @@ object {
top: 0; top: 0;
background-color: transparent; background-color: transparent;
z-index: 9; z-index: 9;
left: -0; left: calc((0) * -1);
border-left: #000 solid 1px; border-left: #000 solid 1px;
-moz-transform: skewX(-45deg); -moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg); -o-transform: skewX(-45deg);
@@ -1710,7 +1711,8 @@ body.category.category-esemeny header {
body.category.category-esemeny main { body.category.category-esemeny main {
padding-top: 9rem; } padding-top: 9rem; }
body.category.category-esemeny main article { body.category.category-esemeny main article {
height: 50vh; } height: 85vw;
max-height: calc(50vw + 180px); }
body.category.category-esemeny main article .thumbnailwrapper { body.category.category-esemeny main article .thumbnailwrapper {
height: 50vw; } height: 50vw; }
body.category.category-esemeny main article .thumbnailwrapper img { 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 { body.category.category-esemeny main article .event-metadata {
display: flex; display: flex;
flex-direction: column; 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 .top-row,
body.category.category-esemeny main article .event-metadata .bottom-row { body.category.category-esemeny main article .event-metadata .bottom-row {
display: flex; display: flex;
@@ -1727,9 +1733,48 @@ body.category.category-esemeny main {
justify-content: space-between; justify-content: space-between;
height: 50%; height: 50%;
flex: 0 0 auto; } 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 { 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 { body.category.category-esemeny main article .event-metadata .hr {
flex: 0 0 auto; flex: 0 0 auto;
height: 1px; height: 1px;
@@ -1883,11 +1928,11 @@ body.category.category-esemeny main {
display: block; display: block;
top: 0; top: 0;
border: none; border: none;
width: calc(100% - 5rem + 5rem); width: calc(100% - 5rem + (5rem + 1px));
border-top: #000 1px solid; border-top: #000 1px solid;
background-color: white; background-color: white;
left: calc(5rem); left: calc(5rem);
margin-left: -5rem; } margin-left: calc((5rem + 1px) * -1); }
.single article .titlewrapper .metadata::before, .single article .titlewrapper .metadata::before,
.page article .titlewrapper .metadata::before { .page article .titlewrapper .metadata::before {
display: block; display: block;
@@ -1898,7 +1943,7 @@ body.category.category-esemeny main {
top: 0; top: 0;
background-color: white; background-color: white;
z-index: 9; z-index: 9;
left: -5rem; left: calc((5rem + 1px) * -1);
border-left: #000 solid 1px; border-left: #000 solid 1px;
-moz-transform: skewX(-45deg); -moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg); -o-transform: skewX(-45deg);
@@ -2464,7 +2509,7 @@ body.category.category-esemeny main {
border-top: #000 1px solid; border-top: #000 1px solid;
background-color: transparent; background-color: transparent;
left: calc(5rem); left: calc(5rem);
margin-left: -0; } margin-left: calc((0) * -1); }
.single #related_posts ul li .metadata::before, .single #related_posts ul li .metadata::before,
.page #related_posts ul li .metadata::before { .page #related_posts ul li .metadata::before {
display: block; display: block;
@@ -2475,7 +2520,7 @@ body.category.category-esemeny main {
top: 0; top: 0;
background-color: transparent; background-color: transparent;
z-index: 9; z-index: 9;
left: -0; left: calc((0) * -1);
border-left: #000 solid 1px; border-left: #000 solid 1px;
-moz-transform: skewX(-45deg); -moz-transform: skewX(-45deg);
-o-transform: skewX(-45deg); -o-transform: skewX(-45deg);

35
js/scripts.js
View File

@@ -43,13 +43,13 @@
vh: vh, vh: vh,
bottomScrollHeight: bottomScrollHeight bottomScrollHeight: bottomScrollHeight
} }
// console.log(cssWidths) //console.log(cssWidths)
/* --------------------------- css values to vars --------------------------- */ /* --------------------------- css values to vars --------------------------- */
//isMobile //isMobile
const isMobile = (_ => { const isMobile = (_ => {
if (wow < 769) { if (wow < 769 || wiw < 769) {
//mobile settings //mobile settings
$('.social-link, .events-link').addClass('hidden') $('.social-link, .events-link').addClass('hidden')
return true return true
@@ -720,10 +720,10 @@
if (isEsemeny) { if (isEsemeny) {
//add spaces to date //add spaces to date
$(".event-metadata .ev-date").each(function () { // $(".event-metadata .ev-date").each(function () {
let repl = $(this).html().replace(/\.\b/g, ". ") // let repl = $(this).html().replace(/\.\b/g, ". ")
$(this).html(repl) // $(this).html(repl)
}) // })
} }
@@ -798,13 +798,22 @@
//hide caption on desktop //hide caption on desktop
if (!isMobile) { if (!isMobile) {
$('.wp-block-gallery img, .wp-block-image img').hover(function () { // $('.wp-block-gallery img, .wp-block-image img, .vis').hover(function () {
$(this).parent('a').next("figcaption").addClass("vis") // $(this).parent('a').next("figcaption").addClass("vis")
}, function () { // }, function () {
$('.wp-block-gallery .vis, .wp-block-image .vis') // $('.wp-block-gallery .vis, .wp-block-image .vis')
.removeClass("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/ //http://www.jacklmoore.com/colorbox/
const colorboxSettings = { const colorboxSettings = {
transition: 'fade', transition: 'none',
rel: 'cb-ballery', rel: 'cb-ballery',
maxWidth: '90%', maxWidth: '90%',
maxHeight: '80%', maxHeight: '80%',
@@ -833,6 +842,8 @@
previous: '', previous: '',
next: '', next: '',
close: '', 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"; font: 500 2rem "Westeinde Caption";
line-height: 1.3; 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 max-width: 768px
); );
$tablet: only screen and
(
min-width: 512px
);
$smalldesktop: only screen and $smalldesktop: only screen and
( (
min-width: 769px min-width: 769px
@@ -236,7 +240,7 @@ $v-unit-6: 24rem;
@if $offset==0 { @if $offset==0 {
width: calc(100% - #{$radius}); width: calc(100% - #{$radius});
} @else { } @else {
width: calc(100% - #{$radius} + #{$offset}); width: calc(100% - #{$radius} + (#{$offset}));
} }
border-top: $bordercolor 1px solid; border-top: $bordercolor 1px solid;
@@ -244,11 +248,11 @@ $v-unit-6: 24rem;
@if $side==left { @if $side==left {
left: calc(#{$radius}); left: calc(#{$radius});
margin-left: -#{$offset}; margin-left: calc((#{$offset}) * -1);
} }
@if $side==right { @if $side==right {
right: calc(#{$radius}); right: calc(#{$radius});
margin-right: -#{$offset}; margin-right: calc((#{$offset}) * -1);
} }
} }
&::before { &::before {
@@ -263,14 +267,14 @@ $v-unit-6: 24rem;
z-index: 9; z-index: 9;
@if $side==left { @if $side==left {
left: -#{$offset}; left: calc((#{$offset}) * -1);
border-left: $bordercolor solid 1px; border-left: $bordercolor solid 1px;
@include transform(skewX(-45deg)); @include transform(skewX(-45deg));
transform-origin: left bottom; transform-origin: left bottom;
border-top: $bordercolor solid 1px; border-top: $bordercolor solid 1px;
} }
@if $side==right { @if $side==right {
right: -#{$offset}; right: calc((#{$offset}) * -1);
border-right: $bordercolor solid 1px; border-right: $bordercolor solid 1px;
@include transform(skewX(45deg)); @include transform(skewX(45deg));
transform-origin: right bottom; transform-origin: right bottom;
@@ -316,6 +320,7 @@ $v-unit-6: 24rem;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
line-height: 0;
@media #{$smalldesktop} { @media #{$smalldesktop} {
width: $h-unit-2; width: $h-unit-2;
position: fixed; position: fixed;
@@ -1277,7 +1282,8 @@ body.category.category-esemeny {
main { main {
padding-top: 5rem + (2rem * 2); padding-top: 5rem + (2rem * 2);
article { article {
height: 50vh; height: 85vw;
max-height: calc(50vw + 180px);
.thumbnailwrapper { .thumbnailwrapper {
height: 50vw; height: 50vw;
img { img {
@@ -1289,7 +1295,11 @@ body.category.category-esemeny {
.event-metadata { .event-metadata {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between;
align-content: stretch;
padding: 2rem; padding: 2rem;
height: 35vw;
max-height: 180px;
.top-row, .top-row,
.bottom-row { .bottom-row {
@@ -1298,14 +1308,41 @@ body.category.category-esemeny {
justify-content: space-between; justify-content: space-between;
height: 50%; height: 50%;
flex: 0 0 auto; 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 { h2 {
flex: 1 0.9 auto;
height: unset; 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 { .hr {
flex: 0 0 auto; flex: 0 0 auto;
height: 1px; height: 1px;
@@ -1471,7 +1508,7 @@ body.category.category-esemeny {
padding-left: 0; padding-left: 0;
padding-right: 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 { .metaWrapper {
@include singlDesktopLayout(); @include singlDesktopLayout();