onny/web-wordpress-kit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

further work on language selector on mobile view

Browse source
This commit is contained in:
Jonas Heinrich 2020-04-29 15:48:29 +02:00
parent df552d5478
commit ace2f79fd5
5 changed files with 81 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

44
kit/css/header.css
View file

@ -146,10 +146,22 @@ header:not(.sticky-header) .header-button-container {
order: 2;
margin-left: 2rem;
display: none;
color: #333333;
}
.header-lang-small span:hover {
color: red;
.header-lang-small .icon {
margin-top: 0.05rem;
width: 1.5rem;
height: 1.5rem;
background-repeat: no-repeat;
background-position: left center;
background-size: contain;
mask: url('../img/ios-arrow-down.svg') no-repeat center / contain;
background-color: #333333;
}
.header-lang-small .icon.active {
mask: url('../img/ios-arrow-up.svg');
}
.header-lang-small li:not(.active) {
@ -162,11 +174,37 @@ header:not(.sticky-header) .header-button-container {
text-overflow: hidden;
max-width: 2.1ch;
font-weight: 500;
color: #333333;
margin-right: 5px;
text-transform: uppercase;
}
.header-lang-small .dropdown {
position: relative;
display: none;
}
.header-lang-small .dropdown .dropdown-content {
position: absolute;
top: 42px;
left: -120px;
padding: 15px;
background-color: white;
width: 120px;
text-align: right;
text-transform: uppercase;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.63);
}
.header-lang-small .dropdown .dropdown-content li:not(.active) {
display: block;
padding: 5px 0;
font-weight: 500;
}
.header-lang-small .dropdown .dropdown-content li.active {
display: none;
}
.header-lang {
position: absolute;
top: 5px;

1
kit/footer.php
View file

@ -110,6 +110,7 @@
<script src="<?php bloginfo('stylesheet_directory');?>/js/swiper.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/main.js" type="text/javascript"></script>
<script src="<?php bloginfo('stylesheet_directory');?>/js/menu.js" type="text/javascript"></script>
<?php wp_footer(); ?>

11
kit/functions.php
View file

@ -157,7 +157,16 @@ function kit_customize_css()
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
}
.header-lang-small:hover{
/* change color on hover for language selector on mobile view */
.header-lang-small:hover li.active span {
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
}
.header-lang-small:hover .icon {
background-color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
}
.dropdown-content li:hover span {
color: <?php echo get_theme_mod('theme_color', '#009982'); ?>;
}

11
kit/header.php
View file

@ -107,7 +107,16 @@
wpm_language_switcher ('list','name');
};
?>
<img src="<?php bloginfo('stylesheet_directory');?>/img/ios-arrow-down.svg" width=20px height=20px></img>
<div class="icon"></div>
<div id="dropdown" class="dropdown">
<div class="dropdown-content">
<?php
if ( function_exists ( 'wpm_language_switcher' ) ) {
wpm_language_switcher ('list','name');
};
?>
</div>
</div>
</div>
<h1 class="header-logo-container">

19
kit/js/menu.js Normal file
View file

@ -0,0 +1,19 @@
document.addEventListener("DOMContentLoaded", function() {
window.onclick = function(event) {
// Toggle lang switcher dropdown menu on mobile view
if (event.target.closest('.header-lang-small')) {
var dropdown = document.getElementById("dropdown");
var dropdownIcon = document.querySelector('.header-lang-small .icon');
console.log(dropdownIcon);
if (dropdown.style.display === "block") {
dropdown.style.display = "none";
dropdownIcon.classList.toggle('active');
} else {
dropdown.style.display = "block";
dropdownIcon.classList.toggle('active');
}
};
};
});