Add search button to header

This commit is contained in:
Alexander Agnarson 2024-04-18 18:50:36 +02:00
parent e212251318
commit 2af7f0c614
8 changed files with 158 additions and 102 deletions

View file

@ -44,6 +44,9 @@ body:where(.dark) .themeform.searchform div:after { color: rgba(255,255,255,0.4)
body:where(.dark) .social-links .social-tooltip:hover:after { background: #fff; color: #000; }
body:where(.dark) .social-links .social-tooltip:hover:before { border-color: #fff transparent; }
body:where(.dark) .toggle-search .svg-icon { fill: #fff; }
body:where(.dark) .toggle-search:focus #svg-search { fill: rgba(255,255,255,0.5); }
body:where(.dark) #footer { background: rgba(255,255,255,0.08); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
body:where(.dark) .slick-featured,

View file

@ -149,6 +149,7 @@ body.boxed #header { max-width: '.esc_attr( get_theme_mod('container-width') ).'
// gradient left
if ( get_theme_mod('gradient-left','#be1e1e') != '#be1e1e' ) {
$styles .= '
.search-expand,
#theme-toggle-btn:before,
.author-bio .bio-avatar:after,
.commentlist li.bypostauthor > .comment-body:after,
@ -161,6 +162,7 @@ body.boxed #header { max-width: '.esc_attr( get_theme_mod('container-width') ).'
// gradient right
if ( get_theme_mod('gradient-right','#ff0000') != '#ff0000' ) {
$styles .= '
.search-expand,
#theme-toggle-btn:before,
.author-bio .bio-avatar:after,
.commentlist li.bypostauthor > .comment-body:after,

View file

@ -173,6 +173,15 @@ Kirki::add_field( 'blogcards_theme', array(
'tags' => esc_html__( 'Related by tags', 'blogcards' ),
),
) );
// Header: Search
Kirki::add_field( 'blogcards_theme', array(
'type' => 'switch',
'settings' => 'header-search',
'label' => esc_html__( 'Header Search', 'blogcards' ),
'description' => esc_html__( 'Search button in header', 'blogcards' ),
'section' => 'header',
'default' => 'on',
) );
// Footer: Widget Columns
Kirki::add_field( 'blogcards_theme', array(
'type' => 'radio-image',

View file

@ -36,17 +36,40 @@
<p class="site-description"><?php bloginfo( 'description' ); ?></p>
<?php endif; ?>
<?php if ( has_nav_menu('header') ): ?>
<div id="wrap-nav-header" class="wrap-nav">
<?php \Blogcards\Nav::nav_menu(array('theme_location'=>'header','menu_id' => 'nav-header','fallback_cb'=> false)); ?>
</div>
<?php endif; ?>
<div class="header-right">
<?php if ( has_nav_menu('mobile') ): ?>
<div id="wrap-nav-mobile" class="wrap-nav">
<?php \Blogcards\Nav::nav_menu(array('theme_location'=>'mobile','menu_id' => 'nav-mobile','fallback_cb'=> false)); ?>
</div>
<?php endif; ?>
<?php if ( has_nav_menu('header') ): ?>
<div id="wrap-nav-header" class="wrap-nav">
<?php \Blogcards\Nav::nav_menu(array('theme_location'=>'header','menu_id' => 'nav-header','fallback_cb'=> false)); ?>
</div>
<?php endif; ?>
<?php if ( has_nav_menu('mobile') ): ?>
<div id="wrap-nav-mobile" class="wrap-nav">
<?php \Blogcards\Nav::nav_menu(array('theme_location'=>'mobile','menu_id' => 'nav-mobile','fallback_cb'=> false)); ?>
</div>
<?php endif; ?>
<?php if ( get_theme_mod( 'header-search', 'on' ) == 'on' ): ?>
<div class="header-search">
<button class="toggle-search">
<svg class="svg-icon" id="svg-search" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23"><path d="M38.710696,48.0601792 L43,52.3494831 L41.3494831,54 L37.0601792,49.710696 C35.2632422,51.1481185 32.9839107,52.0076499 30.5038249,52.0076499 C24.7027226,52.0076499 20,47.3049272 20,41.5038249 C20,35.7027226 24.7027226,31 30.5038249,31 C36.3049272,31 41.0076499,35.7027226 41.0076499,41.5038249 C41.0076499,43.9839107 40.1481185,46.2632422 38.710696,48.0601792 Z M36.3875844,47.1716785 C37.8030221,45.7026647 38.6734666,43.7048964 38.6734666,41.5038249 C38.6734666,36.9918565 35.0157934,33.3341833 30.5038249,33.3341833 C25.9918565,33.3341833 22.3341833,36.9918565 22.3341833,41.5038249 C22.3341833,46.0157934 25.9918565,49.6734666 30.5038249,49.6734666 C32.7048964,49.6734666 34.7026647,48.8030221 36.1716785,47.3875844 C36.2023931,47.347638 36.2360451,47.3092237 36.2726343,47.2726343 C36.3092237,47.2360451 36.347638,47.2023931 36.3875844,47.1716785 Z" transform="translate(-20 -31)"></path></svg>
</button>
<div class="search-expand search-trap-focus">
<div class="wrapper-inner">
<div class="search-expand-inner">
<?php get_search_form(); ?>
<button class="toggle-search" data-target=".search-trap-focus">
<svg class="svg-icon" id="svg-close" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 16 16"><polygon fill="" fill-rule="evenodd" points="6.852 7.649 .399 1.195 1.445 .149 7.899 6.602 14.352 .149 15.399 1.195 8.945 7.649 15.399 14.102 14.352 15.149 7.899 8.695 1.445 15.149 .399 14.102"></polygon></svg>
</button>
</div>
</div>
</div>
<div class="header-search-overlay"></div>
</div>
<?php endif; ?>
</div>
</div>

View file

@ -14,8 +14,7 @@ jQuery(document).ready(function($) {
/* Toggle header search
/* ------------------------------------ */
$('.toggle-search').on('click', function() {
$('.toggle-search').toggleClass('active');
$('.search-expand').fadeToggle(250);
$('body').toggleClass('header-search-active');
setTimeout(function(){
$('.search-expand input').focus();
}, 300);
@ -27,22 +26,7 @@ jQuery(document).ready(function($) {
$('html, body').animate({scrollTop:0},'slow');
return false;
});
/* Parallax single post featured image
/* ------------------------------------ */
$(window).scroll(function () {
$(".main-header-single").css("background-position","center " + ($(this).scrollTop() / 20 + 50) + "%");
});
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 60) {
$('body').addClass("header-scrolled");
} else {
$('body').removeClass("header-scrolled");
}
});
/* Tabs widget
/* ------------------------------------ */
(function() {

View file

@ -2,7 +2,7 @@
msgid ""
msgstr ""
"Project-Id-Version: Blogcards\n"
"POT-Creation-Date: 2024-04-16 17:57+0200\n"
"POT-Creation-Date: 2024-04-18 16:37+0200\n"
"PO-Revision-Date: 2018-09-21 21:27+0100\n"
"Last-Translator: \n"
"Language-Team: \n"
@ -247,287 +247,295 @@ msgid "Related by tags"
msgstr ""
#: functions/theme-options.php:180
msgid "Footer Widget Columns"
msgid "Header Search"
msgstr ""
#: functions/theme-options.php:181
msgid "Search button in header"
msgstr ""
#: functions/theme-options.php:189
msgid "Footer Widget Columns"
msgstr ""
#: functions/theme-options.php:190
msgid "Select columns to enable footer widgets. Recommended number: 3"
msgstr ""
#: functions/theme-options.php:196
#: functions/theme-options.php:205
msgid "Footer Social Links"
msgstr ""
#: functions/theme-options.php:197
#: functions/theme-options.php:206
msgid "Social link icon buttons"
msgstr ""
#: functions/theme-options.php:205
#: functions/theme-options.php:214
msgid "Footer Logo"
msgstr ""
#: functions/theme-options.php:206
#: functions/theme-options.php:215
msgid "Upload your custom logo image"
msgstr ""
#: functions/theme-options.php:214
#: functions/theme-options.php:223
msgid "Footer Copyright"
msgstr ""
#: functions/theme-options.php:215
#: functions/theme-options.php:224
msgid "Replace the footer copyright text"
msgstr ""
#: functions/theme-options.php:223
#: functions/theme-options.php:232
msgid "Footer Credit"
msgstr ""
#: functions/theme-options.php:224
#: functions/theme-options.php:233
msgid "Footer credit text"
msgstr ""
#: functions/theme-options.php:231
#: functions/theme-options.php:240
msgid "Create Social Links"
msgstr ""
#: functions/theme-options.php:232
#: functions/theme-options.php:241
msgid "Create and organize your social links"
msgstr ""
#: functions/theme-options.php:234
#: functions/theme-options.php:243
msgid "Font Awesome names:"
msgstr ""
#: functions/theme-options.php:234 functions/theme-options.php:251
#: functions/theme-options.php:243 functions/theme-options.php:260
msgid "View All"
msgstr ""
#: functions/theme-options.php:237
#: functions/theme-options.php:246
msgid "social link"
msgstr ""
#: functions/theme-options.php:244
#: functions/theme-options.php:253
msgid "Title"
msgstr ""
#: functions/theme-options.php:245
#: functions/theme-options.php:254
msgid "Ex: Facebook"
msgstr ""
#: functions/theme-options.php:250
#: functions/theme-options.php:259
msgid "Icon Name"
msgstr ""
#: functions/theme-options.php:251
#: functions/theme-options.php:260
msgid "Font Awesome icons. Ex: fa-facebook "
msgstr ""
#: functions/theme-options.php:256
#: functions/theme-options.php:265
msgid "Link"
msgstr ""
#: functions/theme-options.php:257
#: functions/theme-options.php:266
msgid "Enter the full url for your icon button"
msgstr ""
#: functions/theme-options.php:262
#: functions/theme-options.php:271
msgid "Icon Color"
msgstr ""
#: functions/theme-options.php:263
#: functions/theme-options.php:272
msgid "Set a unique color for your icon (optional)"
msgstr ""
#: functions/theme-options.php:268
#: functions/theme-options.php:277
msgid "Open in new window"
msgstr ""
#: functions/theme-options.php:277
#: functions/theme-options.php:286
msgid "Dynamic Styles"
msgstr ""
#: functions/theme-options.php:278
#: functions/theme-options.php:287
msgid "Turn on to use the styling options below"
msgstr ""
#: functions/theme-options.php:286
#: functions/theme-options.php:295
msgid "Font"
msgstr ""
#: functions/theme-options.php:287
#: functions/theme-options.php:296
msgid "Select font for the theme"
msgstr ""
#: functions/theme-options.php:291
#: functions/theme-options.php:300
msgid "Titillium Web, Latin-Ext"
msgstr ""
#: functions/theme-options.php:292
#: functions/theme-options.php:301
msgid "Droid Serif, Latin"
msgstr ""
#: functions/theme-options.php:293
#: functions/theme-options.php:302
msgid "Source Sans Pro, Latin-Ext"
msgstr ""
#: functions/theme-options.php:294
#: functions/theme-options.php:303
msgid "Lato, Latin"
msgstr ""
#: functions/theme-options.php:295
#: functions/theme-options.php:304
msgid "Raleway, Latin"
msgstr ""
#: functions/theme-options.php:296
#: functions/theme-options.php:305
msgid "Inter, Latin"
msgstr ""
#: functions/theme-options.php:297
#: functions/theme-options.php:306
msgid "Ubuntu, Latin-Ext"
msgstr ""
#: functions/theme-options.php:298
#: functions/theme-options.php:307
msgid "Ubuntu, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:299
#: functions/theme-options.php:308
msgid "Roboto, Latin-Ext"
msgstr ""
#: functions/theme-options.php:300
#: functions/theme-options.php:309
msgid "Roboto, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:301
#: functions/theme-options.php:310
msgid "Roboto Condensed, Latin-Ext"
msgstr ""
#: functions/theme-options.php:302
#: functions/theme-options.php:311
msgid "Roboto Condensed, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:303
#: functions/theme-options.php:312
msgid "Roboto Slab, Latin-Ext"
msgstr ""
#: functions/theme-options.php:304
#: functions/theme-options.php:313
msgid "Roboto Slab, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:305
#: functions/theme-options.php:314
msgid "Playfair Display, Latin-Ext"
msgstr ""
#: functions/theme-options.php:306
#: functions/theme-options.php:315
msgid "Playfair Display, Latin / Cyrillic"
msgstr ""
#: functions/theme-options.php:307
#: functions/theme-options.php:316
msgid "Open Sans, Latin-Ext"
msgstr ""
#: functions/theme-options.php:308
#: functions/theme-options.php:317
msgid "Open Sans, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:309
#: functions/theme-options.php:318
msgid "PT Serif, Latin-Ext"
msgstr ""
#: functions/theme-options.php:310
#: functions/theme-options.php:319
msgid "PT Serif, Latin / Cyrillic-Ext"
msgstr ""
#: functions/theme-options.php:311
#: functions/theme-options.php:320
msgid "Arial"
msgstr ""
#: functions/theme-options.php:312
#: functions/theme-options.php:321
msgid "Georgia"
msgstr ""
#: functions/theme-options.php:313
#: functions/theme-options.php:322
msgid "Verdana"
msgstr ""
#: functions/theme-options.php:314
#: functions/theme-options.php:323
msgid "Tahoma"
msgstr ""
#: functions/theme-options.php:321
#: functions/theme-options.php:330
msgid "Website Max-width"
msgstr ""
#: functions/theme-options.php:322
#: functions/theme-options.php:331
msgid "Max-width of the container"
msgstr ""
#: functions/theme-options.php:335
#: functions/theme-options.php:344
msgid "Content Max-width"
msgstr ""
#: functions/theme-options.php:336
#: functions/theme-options.php:345
msgid "Max-width of the content on posts and pages"
msgstr ""
#: functions/theme-options.php:349
#: functions/theme-options.php:358
msgid "Header Logo Image Max-height"
msgstr ""
#: functions/theme-options.php:350
#: functions/theme-options.php:359
msgid ""
"Your logo image should have the double height of this to be high resolution"
msgstr ""
#: functions/theme-options.php:363
#: functions/theme-options.php:372
msgid "Dark Theme"
msgstr ""
#: functions/theme-options.php:364
#: functions/theme-options.php:373
msgid "Use dark instead of light base"
msgstr ""
#: functions/theme-options.php:372
#: functions/theme-options.php:381
msgid "Light/Dark Theme Toggle"
msgstr ""
#: functions/theme-options.php:373
#: functions/theme-options.php:382
msgid "Do not use with dark theme enabled"
msgstr ""
#: functions/theme-options.php:381
#: functions/theme-options.php:390
msgid "Invert Dark Logo Color"
msgstr ""
#: functions/theme-options.php:382
#: functions/theme-options.php:391
msgid "Change color for the logo in dark mode"
msgstr ""
#: functions/theme-options.php:390
#: functions/theme-options.php:399
msgid "Alternate Featured Image Side"
msgstr ""
#: functions/theme-options.php:391
#: functions/theme-options.php:400
msgid "Make each even entry image show on left side instead of right"
msgstr ""
#: functions/theme-options.php:399
#: functions/theme-options.php:408
msgid "Border Radius Design"
msgstr ""
#: functions/theme-options.php:400
#: functions/theme-options.php:409
msgid "Set to 0 for default radiuses"
msgstr ""
#: functions/theme-options.php:413
#: functions/theme-options.php:422
msgid "Gradient Left"
msgstr ""
#: functions/theme-options.php:421
#: functions/theme-options.php:430
msgid "Gradient Right"
msgstr ""
#: functions/theme-options.php:429
#: functions/theme-options.php:438
msgid "Theme Color (Dark Mode)"
msgstr ""

View file

@ -29,7 +29,7 @@
}
@media only screen and (max-width: 719px) {
@media only screen and (max-width: 719px) {
.blog-card { min-height: auto; }
.blog-card-inner { display: block; }
.blog-card-right { width: 100%; aspect-ratio: 16/9; }
@ -70,6 +70,11 @@
.site-title { padding: 4px 0; margin: 0; width: 100%; float: none; line-height: 50px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.site-title a { text-align: center; }
.site-description { display: none; }
.header-right,
.header-right #wrap-nav-header { float: none; }
.header-right { position: relative; }
.header-search { float: none; position: absolute; left: 0; top: 0; margin: 10px 0 0 20px; }
.search-expand { padding-top: 28px; padding-bottom: 28px; }
.site-header { margin-top: 0; margin-bottom: 20px; }
.social-links .social-tooltip:hover:after,
.social-links .social-tooltip:hover:before { display: none; }
@ -90,6 +95,8 @@
.wrapper-inner { padding-left: 0; padding-right: 0; }
#header { margin-bottom: 0; }
.site-header { margin-bottom: 0; }
.search-expand { padding: 30px 20px; }
.search-expand .themeform.searchform input { font-size: 17px; }
#theme-toggle { left: -10px; bottom: 10px; }
.featured-card-title { min-height: 68px; max-height: 68px; overflow: hidden; }

View file

@ -453,7 +453,7 @@ body { background: #f6f7fa; }
.slick-posts-nav .slick-prev:before { color: rgba(0,0,0,0.5); font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f053"; }
.slick-posts-nav .slick-next:before { color: rgba(0,0,0,0.5); font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f054"; }
.slick-featured .slick-posts { display: none; }
.slick-posts { display: none; }
.slick-featured .slick-dotted.slick-slider { margin-bottom: 0; }
.slick-featured .slick-dots { bottom: -50px; box-sizing: border-box; }
.slick-featured .slick-dots li { margin: 0 3px; }
@ -563,6 +563,26 @@ body.dark #theme-toggle-btn:before { border-color: #fff; top: 2px; left: 2px; }
.site-header img { }
.site-image { display: block; margin: 0 auto; max-height: 400px; }
.header-right { float: right; }
.header-right #wrap-nav-header { float: left; }
.header-search { float: right; margin: 20px 0 0 30px; }
.toggle-search { background: transparent; outline: none; border: 0; text-align: center; cursor: pointer; margin: 0; padding: 0; display: block; }
.search-expand { background-image: linear-gradient(90deg, #be1e1e 0%, #ff0000 100%); display: none; position: fixed; top: 0; left: 0; right: 0; width: auto; padding: 37px 0; z-index: 10; }
.search-expand-inner { position: relative; }
.search-expand .themeform.searchform input { background: transparent!important; color: rgba(255,255,255,0.75); width: 100%; font-size: 20px; border: 0!important; padding-left: 40px!important; }
.search-expand .themeform.searchform input:focus { color: #fff; outline: none!important; }
.search-expand .themeform.searchform div:after { color: #fff; font-size: 24px; top: 10px; left: 0; }
.toggle-search .svg-icon { fill: #000; }
.toggle-search:focus #svg-search { fill: rgba(0,0,0,0.5); }
.toggle-search #svg-close { fill: #fff; }
.toggle-search:focus #svg-close { fill: rgba(255,255,255,0.75); }
body.header-search-active .header-search-overlay { position: fixed; background: rgba(0,0,0,0.4); top: 0; left: 0; right: 0; bottom: 0; }
body.header-search-active .search-expand { display: block; }
body.header-search-active.admin-bar .search-expand { top: var(--wp-admin--admin-bar--height); }
body.header-search-active .search-expand-inner .searchform { margin-right: 40px; }
body.header-search-active .search-expand-inner .toggle-search { position: absolute; right: 0; top: 12px; }
/* ------------------------------------------------------------------------- *
* Section: Navigation
@ -643,7 +663,7 @@ body.dark #theme-toggle-btn:before { border-color: #fff; top: 2px; left: 2px; }
.nav-menu.mobile { padding: 0; }
.nav-menu.mobile button:focus { outline: none; }
.nav-menu.mobile > button { padding: 6px 20px; float: right; }
.nav-menu.mobile > button { padding: 12px 20px; float: right; }
.nav-menu.mobile button .svg-icon { transition: all 250ms; }
.nav-menu.mobile button.active .svg-icon { transform: rotate(180deg); }
.nav-menu.mobile ul { border: 0; }