CSS – Ninja Intranet

2024-05-292024-05-29

Wp FSE navigation breakpoint mobile/desktop menu


/*/////////////////////////////////////////////////// NAVIGATION BREAJKPOINT ////////////////////////////////////////////////////*/

/* Change the WordPress default css to a 1023px media query */
@media (min-width: 796px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none !important;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block !important;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }
}
/* Remove the WordPress default for 600px */
@media (min-width: 600px) {
    .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

2024-03-142024-03-14

JS Funkcja sprawdzajaca czy obiekt został zescrollowany poza ekran

Ta funkcja sprawdzi, czy dany element znajduje się powyżej górnej granicy ekranu podczas przewijania strony, i w zależności od tego doda lub usunie klasę zescrollowany. Aby zastosować tę funkcję do konkretnego elementu, wystarczy wywołać czyZescrollowany(document.querySelector('.twojaKlasa')), zastępując .twojaKlasa selektorem CSS dla elementu, który chcesz monitorować.

W tym podejściu, zamiast sprawdzać bieżącą pozycję elementu względem widoku, funkcja porównuje pozycję przewijania okna (window.pageYOffset) z początkową pozycją górnego krawędzi elementu. Jeśli pozycja przewijania przekroczy tę początkową pozycję, element jest traktowany jako „zescrollowany”, co odpowiada Twoim wymaganiom dotyczącym zachowania funkcji niezależnie od zmian w stylu CSS elementu po jego „zescrollowaniu”.

function czyZescrollowany(element) {
  let timeout = null; // Zmienna do przechowywania identyfikatora opóźnienia
  // Zapisanie początkowej pozycji Y elementu
  const initialTopPosition = element.getBoundingClientRect().top + window.pageYOffset;

  const checkPositionAndToggleClass = () => {
    // Aktualna pozycja przewijania
    const currentScrollPosition = window.pageYOffset;

    // Sprawdzenie, czy element jest powyżej górnej granicy ekranu względem jego początkowej pozycji
    if(currentScrollPosition > initialTopPosition) {
      // Nadanie klasy tylko, jeśli element jest "zescrollowany" i nie ma jeszcze klasy 'zescrollowany'
      if (!element.classList.contains('zescrollowany')) {
        element.classList.add('zescrollowany');
      }
    } else {
      // Usunięcie klasy, jeśli element jest poniżej górnej granicy ekranu i ma klasę 'zescrollowany'
      if (element.classList.contains('zescrollowany')) {
        element.classList.remove('zescrollowany');
      }
    }
  };

  const debounceCheckPosition = () => {
    // Czyszczenie poprzedniego opóźnienia, jeśli istnieje
    if (timeout !== null) {
      clearTimeout(timeout);
    }
    // Ustawienie opóźnienia dla funkcji sprawdzającej pozycję
    timeout = setTimeout(checkPositionAndToggleClass, 100); // Opóźnienie 100ms
  };

  // Nasłuchiwanie przewijania okna i uruchomienie funkcji z opóźnieniem
  window.addEventListener('scroll', debounceCheckPosition);
  
  // Wywołanie funkcji na starcie, aby od razu ustawić poprawny stan klasy
  debounceCheckPosition();
}

// Użycie funkcji z konkretnym elementem, np. document.querySelector('.jakisElement')
// czyZescrollowany(document.querySelector('.jakisElement'));

2024-03-112024-03-11

FSE menu mobile skryptozakładka

Jako że w FSE menu mobilne gdy traci foxus zamyka się to trudno się z nim pracuje. Nacienięcie na konsole powoduje zwinięcie się menu.
Poniższa wtyczka na hama dodaje klasy otwarcia menu i podmenu co ułatwia robotę.

javascript: (() => {
     document.getElementById('modal-1').classList.add("is-menu-open");
     document.getElementsByClassName('wp-block-navigation-submenu__toggle')[1].setAttribute("aria-expanded", "true");
})();

2023-12-032024-03-11

Nawigacja Doklejana

Nawigacja która nie znajduje się na górze strony ale przykla się do niej gdy zescolluje się stronę poniżej jej

Nad nawigacją umieszczamy pusty element z id=”nawigacja-polorznie” który będzie referencją połlorzenia normalnego nawigacji gdy nawigacja dolei się i bedzie miała połorzenie top0 na position fixed.

<div id="nawigacja-polorzenie"></div>
<div id="nawigacja">....</div>

Do tego css jak ma wyglądać nawigacja przyklejona:

#nawigacja.zescollowana {
    position: fixed;
    top: 0px;
    width: 100%;
}

I nasz js sterujący nadaniem klasy „przescollowana” gdy element nawigacja polorzenie znajdzie się nad lnią foldu:

document.addEventListener("DOMContentLoaded", function () {
            var nawigacjaPolorzenie = document.getElementById("nawigacja-polorzenie");
            var nawigacjaElement = document.getElementById("nawigacja");
            var czyZescrollowany = false;

            function obslugaPrzewijania() {
                var prostokat = nawigacjaPolorzenie.getBoundingClientRect();

                // Sprawdź, czy górna część elementu jest powyżej widoku
                if (prostokat.top <= 0) {
                    nawigacjaElement.classList.add("zescollowana");
                    czyZescrollowany = true;
                } else if (czyZescrollowany && prostokat.bottom >= 0) {
                    nawigacjaElement.classList.remove("zescollowana");
                    czyZescrollowany = false;
                }
            }

            // Dodaj nasłuchiwanie zdarzenia przewijania z opóźnieniem
            var debounceTimer;
            window.addEventListener("scroll", function () {
                clearTimeout(debounceTimer);
                debounceTimer = setTimeout(obslugaPrzewijania, 50);
            });

            // Sprawdź początkowy stan przy ładowaniu strony
            obslugaPrzewijania();
      });

2023-12-022024-03-11

Sparkle FSE menu mobilne z submenu w nowym blok edytorze

Próg zawijania menu do mobilki można ustalić w:
wp-includes/blocks/navigation/style.min.css
Domyślny próg jest między 599px a 600px with.

Opcja z podstronami ze wszystkim rozwiniętym, mieszczącym się w pionie na mobile’u.

Menu mobilne w modelu fse z bloków ma dość skomplikowaną strukturę, i trzeba się czasem nieźle namęczyć żeby zdefinoiować sobie odpowiedni wygląd.


@media(max-width:599px) {
    #modal-1.is-menu-open {

        height: fit-content;
        /* zmniejszenie otwartego menu do potrzebnej wysokości żeby nie przysłaniało całej strony */
        padding-bottom: 15px;
        box-shadow: rgb(0 0 0 / 20%) 0px 9px 20px;
    }
    
    #modal-1-content {
        gap: 0px;
        padding-top: 0;
    }
    
    #modal-1-content > ul {
        /* wyśrodkowanie menu*/
        margin: auto;
    }
    
    .wp-block-navigation__responsive-dialog {
        display: flex;
        justify-content: center;
        flex-direction: column;
    }
    
    #modal-1-content .wp-block-navigation li {
        /* elementy menu rozciągniecie do możliwego miejsca odstępy i podziałka borderem*/
        width: 100%;
        border-bottom: 2px #0000002e solid;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    #modal-1-content .wp-block-navigation li > a {
        width: 100%;
        /*rozciągnięcie klikalnosci na czałąszerokość*/
    }

    /* korekta podziałek borderów */
    #modal-1-content .wp-block-navigation li:first-child {
        border-top: 2px #0000002e solid;
    }

    #modal-1-content .wp-block-navigation li:last-child {
        border-bottom: none;
    }

    /* submenu */
    ul.wp-block-navigation__submenu-container.wp-block-navigation-submenu {
        position: relative;
        padding-top: 0px !important;
        padding-right: 0 !important;
        padding-left: 15px !important;
        padding-bottom: 5px;
        position: relative !important;
        top: 7px !important;
    }

    /* zaykacz menu wyśrodkowanie */
    button.wp-block-navigation__responsive-container-close {
        position: static;
        margin: auto;
        margin-top: 20px;
    }
    
    /* wyłączenie sociala z mobilki*/
    .wp-block-social-links {

        display: none !important;
    }
}

2023-11-182024-02-25

Animacje CSS na scoll do elementu płynne przewijanie


// Nadaj klase na scoll to do animacji elementów

function odslonElementy() {
    var odslaniane = document.querySelectorAll(".animowane");

    for (var i = 0; i < odslaniane.length; i++) {
        var windowHeight = window.innerHeight;
        var elementTop = odslaniane[i].getBoundingClientRect().top;
        var elementVisible = 150;

        if (elementTop < windowHeight - elementVisible) {
            odslaniane[i].classList.add("anim-ctive");
        } else {
            odslaniane[i].classList.remove("anim-active");
        }
    }
}

window.addEventListener("scroll", odslonElementy);

przykladowe css:

/****************  animka fotek ****************/


@keyframes wjazdfoty {
    
  0% {transform: scale(1.5); opacity: 0;}
  100% {transform: scale(1); opacity: 1;}
}

/* obrazki w tresci*/


.obrazek-w-tresci img {
    border-radius: 15px;
    box-shadow: #0000006b 4px 7px 4px;

    /* na start animacji*/

    opacity: 0; /*- stan początkowy okryte*/


}

.obrazek-w-tresci.anim-ctive img{
    animation: wjazdfoty 0.4s ease-out;
    animation-fill-mode: forwards; /*parametr forwads istotny by animacja zatrzymała się na ostatniej klatce*/
}

2022-09-29

Cookies popup

JS:

/* ################################################################################
################################################################################
################################################################################

Ciasteczka

################################################################################
################################################################################
################################################################################*/


console.log('Skrypt ciasteczkowe jest');
/* Funckje pomocnicze */
function sajanSetCookie(cname, cvalue, exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires="+ d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
function sajanGetCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
//console.log(sajanGetCookie('ciasteczkoweCiasteczko'));
if (sajanGetCookie('ciasteczkoweCiasteczko')=='true'){
    //console.log('jest ciasteczko');
    //console.log('ciasteczko: '+sajanGetCookie('ciasteczkoweCiasteczko'));
} else {
    //console.log('nie ma ciasteczka');
    wyswietlPopup();
    
}
function wyswietlPopup(){
    jQuery('body').append('<div id="ciasteczka-popup"><img alt="ikonka ciasteczka" src="https://gooddrut.pl/wp-content/uploads/cookies-badge-gooddrut.png" ><h2>Drogi żytkowniku!</h2><p>Na niniejsze stronie dla Twojej wygody używamy ciasteczek (plików Cookies).<br>Są potrzebne by zapamięcać różne Twoje wybory i ustaienia i ułatwić Ci poruszanie się po witrynie.<br>Jeśli nie zgadzasz się na to, lub nie lubisz ciasteczek, opuść tę stronę, ale pewnie będziesz żałować.</p><div id="guzik-ciasteczka-popup" class="guzik">Ok</div></div>');
    jQuery('#guzik-ciasteczka-popup').click(function(){
                //console.log('kliknieto guzior w popupie trhreth');
                jQuery('#ciasteczka-popup').remove();
                sajanSetCookie('ciasteczkoweCiasteczko','true',999999);
    });
}

CSS:

/* Ciasteeczka */

#ciasteczka-popup {
    background: rgb(0 0 0 / 95%);
    position: fixed;
    bottom: 0;
    z-index: 999999;
    width: 100%;
    border: dashed 3px #9b9b9b;
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    align-items: center;
}
#ciasteczka-popup img {
    width: 134px;
    margin: 35px;
}
#ciasteczka-popup h2 {
    margin: 0;
    margin-bottom: 15px;
}
#ciasteczka-popup p{
    text-align: center;
}
#ciasteczka-popup .guzik{
    margin-bottom: 20px;
    cursor: pointer;
}

2022-09-15

Zmiana trybu edytora na ciemniejszy by nie jebał po oczach

W pliku [twójTheme]/assets/css/editor-blocks.css należy doidać poniższy skrawek kodu do stylów

/* ###############################################
                   DARK THEME sajan
############################################### */ 

.editor-styles-wrapper {
    max-width: 100% !important;
    background-color: #cdc8c8!important;
    margin: 0!important;
    padding-left: 50px!important;
}

.edit-post-header {
    background-color: #9f9f9f;
}

.components-button.is-tertiary {
    color: #004070;
    font-weight: bold;
}

.components-button.is-primary:disabled, .components-button.is-primary:disabled:active:enabled, .components-button.is-primary[aria-disabled=true], .components-button.is-primary[aria-disabled=true]:active:enabled, .components-button.is-primary[aria-disabled=true]:enabled {
    color: #cdd5dd;
    background: #004070;
    border-color: #004070;
    font-weight: bold;
    opacity: 1;
    outline: none;
}

.components-button.is-primary {
    background: #004070;
}