Commit 588359f2 authored by Jakob Moser's avatar Jakob Moser
Browse files

Merge branch 'search-modal' into 'master' 

Add search modal

See merge request !37
parents 56d18e99 72259207

header.php

+17 −0
Original line number Diff line number Diff line
@@ -49,6 +49,11 @@ get_header(); 
        <?php wp_head(); ?>

    </head>

    <body class="<?php echo is_admin_bar_showing() ? 'has-admin-bar' : '';?>">

        <dialog id="search-modal" closedby="any">

            <form method="get" action="/">

                <input type="search" name="s" placeholder="Suchen..."><button>🔍</button>

            </form>

        </dialog>

        <header>

            <div>

                <a class="logo" href="<?php echo home_url();?>"></a>
@@ -56,5 +61,17 @@ get_header(); 
                <nav id="nav">

                    <?php wp_nav_menu(array('container'=>'false')); ?>

                </nav>

                <script>

                    document.querySelector("[lang*='en'] a[href$='/en/search/'], [lang*='de'] a[href$='/suchen/']").addEventListener("click", (event) => {

                        const isEnglish = event.target.href.includes("/en/")

                        const searchModal = document.querySelector("#search-modal")



                        searchModal.querySelector("form").action = isEnglish ? "/en/" : "/"

                        searchModal.querySelector("input[type='search']").placeholder = isEnglish ? "Search..." : "Suchen..."



                        searchModal.showModal()

                        event.preventDefault()

                    })

                </script>

            </div>

        </header>

style.css

+32 −1
Original line number Diff line number Diff line
@@ -7,7 +7,7 @@ 
 * Author: personads :: Maximilian Müller-Eberstein (ursprüngliche Version und Design); Jakob Moser

 * Author URI: https://personads.me/

 *

 * Version: 2.16.0

 * Version: 2.17.0

 * Requires PHP: 8.0

 *

 * License: GNU General Public License v3.0
@@ -856,6 +856,37 @@ blockquote::after { 
    vertical-align: middle;

}



/* ==== Utilities: Search modal ==== */

dialog::backdrop {

    background-color: #dfdfdfcc;

}



body:has(dialog[open]) {

    filter: blur(3px);

}



dialog {

    border: none;

    margin-bottom: 30%;

    background: none;

    align-self: center;

    justify-self: center;

}



dialog input[type=search] {

    width: 40vw;

    font-size: 20pt;

    border-radius: 5px 0 0 5px;

    margin-right: 0;

}



dialog input[type="search"] + button {

    margin-left: 0;

    border-radius: 0 5px 5px 0;

    height: 100%;

    font-size: 20pt;

}



/* ==== Text markup elements ==== */

/* Most of those are found in typography.css */