From 1595691bc3d5f51170af750fc30f8d532f2fe605 Mon Sep 17 00:00:00 2001 From: infeeeee Date: Fri, 6 Sep 2019 20:00:09 +0200 Subject: [PATCH] fix icon clicks on iphone --- _teendők.md | 16 +-- css/base.css | 300 ++++++++++++++++++++++++------------------------- header.php | 40 +++++-- js/scripts.js | 22 ++-- sass/base.scss | 287 ++++++++++++++++++++++++++++------------------ searchform.php | 7 +- 6 files changed, 369 insertions(+), 303 deletions(-) diff --git a/_teendők.md b/_teendők.md index 6a1d200..78df100 100644 --- a/_teendők.md +++ b/_teendők.md @@ -14,20 +14,6 @@ onresize js! # Megjegyzések -## DESKTOP -~szövegek: alap kijelölő szín a sárga legyen -> invertáltakat meg kell javítani! +~ Adrinak írni, hogy küldjön tökéletesen négyzet logót - szerintem nem kell, megoldottam azt az 1px problémát -## DESKTOP - -## MOBIL - - -### Iphone only??? -~ nem mindig működik a home DIS gomb -> Mikor nem működik, nem találok ilyet, elvileg mindenhol mennie kell, vsz ugyanaz a hiba okozta mint az eltűnő dolgokat, szerintem ezt is megoldottam, de ellenőrizd -~ menü: nagyobb fekete flekk kell a dis logó alá, mert az „S” betű lelóg kicsit -> Ezt nem látom sehol, küldj printscreent - - - -- iphone gombok kattintássa, meg minden kattintása !!!!! -- Adrinak írni, hogy küldjön tökéletesen négyzet logót - MEgnézni, hogy gördülésre fekete logó legyen! \ No newline at end of file diff --git a/css/base.css b/css/base.css index 51295dc..8cf9c5b 100644 --- a/css/base.css +++ b/css/base.css @@ -66,9 +66,6 @@ button { button:focus { outline: none; } -object { - pointer-events: none; } - /* ---------------------------- default selection --------------------------- */ html *::selection { color: #000; @@ -253,7 +250,6 @@ html *::selection { padding: 2rem !important; justify-content: space-between !important; align-content: space-between; - z-index: 3100; background: #fff; } } @media (min-width: 1024px) { .wrapper .header .header-1, @@ -262,9 +258,6 @@ html *::selection { .wrapper .header .header-1 div, .wrapper .header .header-2 div { z-index: 3500; } - .wrapper .header .header-1 div object, - .wrapper .header .header-2 div object { - -webkit-transform: translate3d(0, 0, 0); } .wrapper .header .header-1 a, .wrapper .header .header-2 a { display: inline-block; } @@ -284,64 +277,80 @@ html *::selection { order: 99; border-left: #000 1px solid; right: 0; } } - .wrapper .header object { - height: 3rem; } + .wrapper .header .dis-logo { + background-image: url(../img/dis-logo-white.png); + background-image: url(../img/dis-logo-white.svg); + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + width: 5rem; + height: 5rem; } @media (min-width: 769px) { - .wrapper .header object { - height: 2.5rem; } } + .wrapper .header .dis-logo { + background-image: url(../img/dis-logo-black.png); + background-image: url(../img/dis-logo-black.svg); + height: 4rem; + width: 4rem; } } @media (min-width: 1024px) { - .wrapper .header object { - height: 3rem; } } - .wrapper .header .logo a, - .wrapper .header .logo button, - .wrapper .header .logo *, - .wrapper .header .social-link a, - .wrapper .header .social-link button, - .wrapper .header .social-link *, - .wrapper .header .menubutton a, - .wrapper .header .menubutton button, - .wrapper .header .menubutton *, - .wrapper .header .events-link a, - .wrapper .header .events-link button, - .wrapper .header .events-link * { - z-index: 3501; - cursor: pointer; } - .wrapper .header .logo .white, - .wrapper .header .social-link .white, - .wrapper .header .menubutton .white, - .wrapper .header .events-link .white { - display: block; } - .wrapper .header .logo .black, - .wrapper .header .social-link .black, - .wrapper .header .menubutton .black, - .wrapper .header .events-link .black { - display: none; } - @media (min-width: 769px) { - .wrapper .header .logo .white, - .wrapper .header .social-link .white, - .wrapper .header .menubutton .white, - .wrapper .header .events-link .white { - display: none; } - .wrapper .header .logo .black, - .wrapper .header .social-link .black, - .wrapper .header .menubutton .black, - .wrapper .header .events-link .black { - display: block; } } + .wrapper .header .dis-logo { + height: 5rem; + width: 5rem; } } + .wrapper .header .icon { + height: 3rem; + width: 3rem; + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + -webkit-transform: translate3d(0, 0, 0); } + @media (min-width: 769px) { + .wrapper .header .icon { + height: 2.5rem; + width: 2.5rem; } } + @media (min-width: 1024px) { + .wrapper .header .icon { + height: 3rem; + width: 3rem; } } + .wrapper .header .facebook-icon { + background-image: url(../img/facebook_icon-white.png); + background-image: url(../img/facebook_icon-white.svg); } + @media (min-width: 769px) { + .wrapper .header .facebook-icon { + background-image: url(../img/facebook_icon-black.png); + background-image: url(../img/facebook_icon-black.svg); } } + .wrapper .header .instagram-icon { + background-image: url(../img/instagram_icon-white.png); + background-image: url(../img/instagram_icon-white.svg); } + @media (min-width: 769px) { + .wrapper .header .instagram-icon { + background-image: url(../img/instagram_icon-black.png); + background-image: url(../img/instagram_icon-black.svg); } } + .wrapper .header .esemeny-icon { + background-image: url(../img/naptar_icon-white.png); + background-image: url(../img/naptar_icon-white.svg); } + @media (min-width: 769px) { + .wrapper .header .esemeny-icon { + background-image: url(../img/naptar_icon-black.png); + background-image: url(../img/naptar_icon-black.svg); } } + .wrapper .header .menubutton-icon { + background-image: url(../img/dis-plus-white.png); + background-image: url(../img/dis-plus-white.svg); } + @media (min-width: 769px) { + .wrapper .header .menubutton-icon { + background-image: url(../img/dis-plus-black.png); + background-image: url(../img/dis-plus-black.svg); } } + .wrapper .header .kereso-icon { + background-image: url(../img/kereso_icon-white.png); + background-image: url(../img/kereso_icon-white.svg); } + @media (min-width: 769px) { + .wrapper .header .kereso-icon { + background-image: url(../img/kereso_icon-black.png); + background-image: url(../img/kereso_icon-black.svg); } } @media (min-width: 769px) { .wrapper .header .header-1 > div, .wrapper .header .header-2 > div { flex: 0 0 5rem !important; } } - .wrapper .header .logo object { - height: 5rem; } - @media (min-width: 769px) { - .wrapper .header .logo object { - height: 4rem; } } - @media (min-width: 1024px) { - .wrapper .header .logo object { - height: 5rem; } } .wrapper .header .menubutton { - order: 99; - z-index: 3002; } + order: 99; } .wrapper .header .menubutton button { transform-origin: center; -webkit-transition: 0.5s linear; @@ -355,10 +364,9 @@ html *::selection { -webkit-transform: rotate(225deg); transform: rotate(225deg); } @media (min-width: 769px) { - .wrapper .header .menubutton button.inverted .white { - display: block; } - .wrapper .header .menubutton button.inverted .black { - display: none; } } + .wrapper .header .menubutton button.inverted .menubutton-icon { + background-image: url(../img/dis-plus-white.png); + background-image: url(../img/dis-plus-white.svg); } } @media (min-width: 769px) { .wrapper .header .menubutton { order: unset; } } @@ -395,18 +403,10 @@ html *::selection { color: #000 !important; } } .wrapper .header .search-bar form.search button { flex: 0 0 auto; } - .wrapper .header .search-bar form.search button .white { - display: block; } - .wrapper .header .search-bar form.search button .black { - display: none; } @media (min-width: 769px) { .wrapper .header .search-box { display: block; flex: 1 1 0 !important; } - .wrapper .header .search-box > button .white { - display: none; } - .wrapper .header .search-box > button .black { - display: block; } .wrapper .header .search-bar { display: none; position: fixed; @@ -448,7 +448,8 @@ html *::selection { padding: 4rem; display: flex; flex-direction: row; - align-items: center; } } + align-items: center; + height: 100vh; } } .wrapper .header #sidebar .sidebar-wrapper .menuseparator { display: block; width: 100%; @@ -933,86 +934,84 @@ html *::selection { transform: rotate(720deg); } } .wrapper .header #tag-nav ul li a span.pause { animation-play-state: paused; } - .wrapper main { - z-index: 2; } - .wrapper main section { - /* -------------------------------- load more ------------------------------- */ } - .wrapper main section article { - position: relative; } - .wrapper main section article .metadata { - position: absolute; - background-color: #fff; - padding: 2rem; - right: 0; - min-width: 50vw; - text-align: center; - font: bold 1rem "Westeinde Caption"; - color: #000; - z-index: 1; } - @media (min-width: 1024px) { - .wrapper main section article .metadata { - font-size: 1.2rem; } } - @media (min-width: 1279px) { - .wrapper main section article .metadata { - font-size: 1.3rem; } } - @media (min-width: 1919px) { - .wrapper main section article .metadata { - font-size: 2.5rem; } } - @media (max-width: 768px) { - .wrapper main section article .metadata::after { - content: ""; - display: block; - position: absolute; - background-color: transparent; - width: 0; - height: 0; - left: -5rem; - top: -5rem; - border-top: 5rem solid transparent; - border-left: 5rem solid transparent; - border-right: 5rem solid transparent; - border-bottom: 5rem solid #fff; - position: absolute; - z-index: -1; } } - .wrapper main section .misha_loadmore { + .wrapper main section { + /* -------------------------------- load more ------------------------------- */ } + .wrapper main section article { + position: relative; } + .wrapper main section article .metadata { + position: absolute; + background-color: #fff; + padding: 2rem; + right: 0; + min-width: 50vw; text-align: center; - padding: 2rem 0; } + font: bold 1rem "Westeinde Caption"; + color: #000; + z-index: 1; } + @media (min-width: 1024px) { + .wrapper main section article .metadata { + font-size: 1.2rem; } } + @media (min-width: 1279px) { + .wrapper main section article .metadata { + font-size: 1.3rem; } } + @media (min-width: 1919px) { + .wrapper main section article .metadata { + font-size: 2.5rem; } } + @media (max-width: 768px) { + .wrapper main section article .metadata::after { + content: ""; + display: block; + position: absolute; + background-color: transparent; + width: 0; + height: 0; + left: -5rem; + top: -5rem; + border-top: 5rem solid transparent; + border-left: 5rem solid transparent; + border-right: 5rem solid transparent; + border-bottom: 5rem solid #fff; + position: absolute; + z-index: -1; } } + .wrapper main section .misha_loadmore { + text-align: center; + padding: 2rem 0; } + @media (min-width: 769px) { + .wrapper main section .misha_loadmore { + min-width: 10rem; + width: calc(100vw - ((100vh - 8rem) / 2 * 3) - 20rem); + margin-right: 10rem; + align-self: stretch; + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + height: 100%; } } + .wrapper main section .misha_loadmore a, + .wrapper main section .misha_loadmore p { + font: bold 3rem "Westeinde Caption"; + color: transparent; + -webkit-text-stroke: #000 1px; } + @media (min-aspect-ratio: 1 / 1) { + .wrapper main section .misha_loadmore a, + .wrapper main section .misha_loadmore p { + font-size: 2rem !important; } } + @media (min-width: 1024px) { + .wrapper main section .misha_loadmore a, + .wrapper main section .misha_loadmore p { + font-size: 3rem; } } @media (min-width: 769px) { - .wrapper main section .misha_loadmore { - min-width: 10rem; - width: calc(100vw - ((100vh - 8rem) / 2 * 3) - 20rem); - margin-right: 10rem; - align-self: stretch; - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - height: 100%; } } - .wrapper main section .misha_loadmore a, - .wrapper main section .misha_loadmore p { - font: bold 3rem "Westeinde Caption"; - color: transparent; - -webkit-text-stroke: #000 1px; } - @media (min-aspect-ratio: 1 / 1) { - .wrapper main section .misha_loadmore a, - .wrapper main section .misha_loadmore p { - font-size: 2rem !important; } } - @media (min-width: 1024px) { - .wrapper main section .misha_loadmore a, - .wrapper main section .misha_loadmore p { - font-size: 3rem; } } - @media (min-width: 769px) { - .wrapper main section .misha_loadmore a, - .wrapper main section .misha_loadmore p { - transform-origin: center; - white-space: nowrap; - width: 100vh; - -moz-transform: rotate(-90deg); - -o-transform: rotate(-90deg); - -ms-transform: rotate(-90deg); - -webkit-transform: rotate(-90deg); - transform: rotate(-90deg); - text-align: center; } } + .wrapper main section .misha_loadmore a, + .wrapper main section .misha_loadmore p { + transform-origin: center; + white-space: nowrap; + width: 100vh; + -moz-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -webkit-transform: rotate(-90deg); + transform: rotate(-90deg); + text-align: center; } } .touchevents .header-scroll { display: none !important; } @@ -4817,9 +4816,6 @@ body.category.category-esemeny { display: flex; flex-direction: row; justify-content: flex-start; } - .single article .titlewrapper .metadata .metaWrapper .time-cat, - .page article .titlewrapper .metadata .metaWrapper .time-cat { - z-index: 10; } .single article .titlewrapper .metadata .metaWrapper .time-cat::after, .page article .titlewrapper .metadata .metaWrapper .time-cat::after { content: " "; diff --git a/header.php b/header.php index 4f727f9..96c22e8 100644 --- a/header.php +++ b/header.php @@ -48,40 +48,47 @@