-
+
diff --git a/js/scripts.js b/js/scripts.js
index b322455..a78cbed 100644
--- a/js/scripts.js
+++ b/js/scripts.js
@@ -133,5 +133,39 @@ jQuery(document).ready(function($) {
/* Social count plus override
/* ------------------------------------ */
$('.social-count-plus ul li span').attr('style', 'color: #fff');
+
+/* Trap focus
+/* ------------------------------------ */
+ // add all the elements inside modal which you want to make focusable
+ const focusableElements =
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+ const modal = document.querySelector('.search-trap-focus'); // select the modal by it's id
+
+ if ( modal ) {
+ const firstFocusableElement = modal.querySelectorAll(focusableElements)[0]; // get first element to be focused inside modal
+ const focusableContent = modal.querySelectorAll(focusableElements);
+ const lastFocusableElement = focusableContent[focusableContent.length - 1]; // get last element to be focused inside modal
+
+
+ document.addEventListener('keydown', function(e) {
+ let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
+
+ if (!isTabPressed) {
+ return;
+ }
+
+ if (e.shiftKey) { // if shift key pressed for shift + tab combination
+ if (document.activeElement === firstFocusableElement) {
+ lastFocusableElement.focus(); // add focus for the last focusable element
+ e.preventDefault();
+ }
+ } else { // if tab key is pressed
+ if (document.activeElement === lastFocusableElement) { // if focused has reached to last focusable element then focus first focusable element after pressing tab
+ firstFocusableElement.focus(); // add focus for the first focusable element
+ e.preventDefault();
+ }
+ }
+ });
+ }
});
\ No newline at end of file
diff --git a/languages/magaziner.pot b/languages/magaziner.pot
index 980ed66..896d85d 100644
--- a/languages/magaziner.pot
+++ b/languages/magaziner.pot
@@ -2,7 +2,7 @@
msgid ""
msgstr ""
"Project-Id-Version: Magaziner\n"
-"POT-Creation-Date: 2020-08-26 13:16+0200\n"
+"POT-Creation-Date: 2021-03-05 15:47+0100\n"
"PO-Revision-Date: 2018-09-21 21:27+0100\n"
"Last-Translator: \n"
"Language-Team: \n"
@@ -10,7 +10,7 @@ msgstr ""
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
-"X-Generator: Poedit 2.2.3\n"
+"X-Generator: Poedit 2.4.2\n"
"X-Poedit-KeywordsList: __;_e;_x;_ex;_n;_nx;_n_noop;_nx_noop;"
"translate_nooped_plural;number_format_i18n;date_i18n;esc_html__;esc_html_e;"
"esc_html_x;esc_attr__;esc_attr_e;esc_attr_x\n"
@@ -78,83 +78,83 @@ msgstr ""
msgid "Footer"
msgstr ""
-#: functions.php:180
+#: functions.php:182
msgid "Primary"
msgstr ""
-#: functions.php:180 functions.php:181
+#: functions.php:182 functions.php:183
msgid "Normal full width sidebar"
msgstr ""
-#: functions.php:181
+#: functions.php:183
msgid "Secondary"
msgstr ""
-#: functions.php:183 functions/theme-options.php:308
+#: functions.php:185 functions/theme-options.php:308
msgid "Header Ads"
msgstr ""
-#: functions.php:184 functions/theme-options.php:335
+#: functions.php:186 functions/theme-options.php:335
msgid "Footer Ads"
msgstr ""
-#: functions.php:184
+#: functions.php:186
msgid "Footer ads area"
msgstr ""
-#: functions.php:186
+#: functions.php:188
msgid "Frontpage Top 1"
msgstr ""
-#: functions.php:186 functions.php:187 functions.php:188 functions.php:189
+#: functions.php:188 functions.php:189 functions.php:190 functions.php:191
msgid "Frontpage area"
msgstr ""
-#: functions.php:187
+#: functions.php:189
msgid "Frontpage Top 2"
msgstr ""
-#: functions.php:188
+#: functions.php:190
msgid "Frontpage Bottom 1"
msgstr ""
-#: functions.php:189
+#: functions.php:191
msgid "Frontpage Bottom 2"
msgstr ""
-#: functions.php:191
+#: functions.php:193
msgid "Footer 1"
msgstr ""
-#: functions.php:191 functions.php:192 functions.php:193 functions.php:194
+#: functions.php:193 functions.php:194 functions.php:195 functions.php:196
msgid "Widgetized footer"
msgstr ""
-#: functions.php:192
+#: functions.php:194
msgid "Footer 2"
msgstr ""
-#: functions.php:193
+#: functions.php:195
msgid "Footer 3"
msgstr ""
-#: functions.php:194
+#: functions.php:196
msgid "Footer 4"
msgstr ""
-#: functions.php:693
+#: functions.php:695
msgid "Alx Extensions"
msgstr ""
-#: functions.php:697
+#: functions.php:699
msgid "Meta Box"
msgstr ""
-#: functions.php:701
+#: functions.php:703
msgid "Regenerate Thumbnails"
msgstr ""
-#: functions.php:705
+#: functions.php:707
msgid "WP-PageNavi"
msgstr ""
@@ -191,24 +191,24 @@ msgstr ""
msgid "Post Options"
msgstr ""
-#: functions/nav.php:167
+#: functions/nav.php:170
msgid "Expand Menu"
msgstr ""
-#: functions/nav.php:209
+#: functions/nav.php:212
msgid "Toggle Child Menu"
msgstr ""
-#: functions/nav.php:283 functions/nav.php:297
+#: functions/nav.php:286 functions/nav.php:300
#, php-format
msgid "
%1$s %2$s"
msgstr ""
-#: functions/nav.php:284
+#: functions/nav.php:287
msgid "Current Page:"
msgstr ""
-#: functions/nav.php:298
+#: functions/nav.php:301
msgid "Current Page Parent"
msgstr ""
@@ -946,7 +946,7 @@ msgstr ""
msgid "Give your layout and images rounded corners"
msgstr ""
-#: header.php:17
+#: header.php:19
msgid "Skip to content"
msgstr ""
diff --git a/style.css b/style.css
index f956bad..6453f3a 100644
--- a/style.css
+++ b/style.css
@@ -1,10 +1,10 @@
/*
Theme Name: Magaziner
Theme URI: http://alx.media/themes/magaziner/
-Version: 3.1.0
+Version: 3.1.1
Requires at least: 5.0
Requires PHP: 5.6
-Tested up to: 5.5
+Tested up to: 5.6
Description:
Magaziner is a responsive 100% high resolution theme for blogs and magazines. Unique toggle sidebars give a great browsing and reading experience on both tablet and mobile. The feature list is long: Unlimited accent colors, unlimited widget areas, 0-2 sidebars to the left or right that can be uniquely specified for each page or post, 0-4 footer widget columns, almost zero layout images, related posts and post nav, featured stories and carousel, 5 post formats, good SEO, 2 flexible custom widgets, localisation support, social links, logo upload and many more useful admin panel features.
Author: Alexander Agnarson
Author URI: http://alx.media
@@ -692,13 +692,13 @@ box-shadow: 0 1px 0 rgba(255,255,255,0.1); }
.nav-menu:not(.mobile) .menu { flex-wrap: wrap; justify-content: flex-start; }
.nav-menu:not(.mobile) .menu ul.active,
-.nav-menu:not(.mobile) .menu li.hover > ul { overflow: visible; width: 180px; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; }
-.nav-menu:not(.mobile) .menu ul .sub-menu { left: 200px; top: 0; }
+.nav-menu:not(.mobile) .menu li.hover > ul { overflow: visible; width: 200px; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; }
+.nav-menu:not(.mobile) .menu ul .sub-menu { left: 220px; top: 0; }
.nav-menu:not(.mobile) .menu { position: relative; }
.nav-menu:not(.mobile) .menu ul { font-size: 15px; opacity: 0; padding: 10px 0; position: absolute; top: calc(100% + 20px); transition: opacity 0.15s linear, transform 0.15s linear, right 0s 0.15s; transform: translateY(6px); z-index: 1; }
.nav-menu:not(.mobile) .menu ul li { position: relative; }
.nav-menu:not(.mobile) .menu ul a { display: block; padding: 10px 20px; transition: all 0.3s ease; width: 100%; }
-.nav-menu:not(.mobile) .menu li.menu-item-has-children.focus > ul { min-width: 180px; max-width: 180px; max-height: 300vh; overflow: visible; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; }
+.nav-menu:not(.mobile) .menu li.menu-item-has-children.focus > ul { min-width: 200px; max-width: 200px; max-height: 300vh; overflow: visible; opacity: 1; transform: translateY(0); transition: opacity 0.15s linear, transform 0.15s linear; }
.nav-menu:not(.mobile) .menu li.menu-item-has-children.focus > ul:focus-within { opacity: 1!important; }
.nav-menu:not(.mobile) .menu li ul.sub-menu:not(.active) { opacity: 0; }
.nav-menu:not(.mobile) .menu li.hover ul.sub-menu:not(.active) { opacity: 1; }
@@ -734,6 +734,12 @@ box-shadow: 0 1px 0 rgba(255,255,255,0.1); }
.nav-menu.mobile ul ul ul li a { padding: 12px 0 12px 60px; }
.nav-menu.mobile ul button { margin: 10px 0; padding: 0 20px; }
+/* menu mobile fix */
+.nav-menu.mobile > div > ul.menu,
+.nav-menu.mobile.toggled > div > ul.menu ul.sub-menu { visibility: hidden; transition: all 0.3s ease; }
+.nav-menu.mobile.toggled > div > ul.menu,
+.nav-menu.mobile.toggled > div > ul.menu ul.sub-menu.active { visibility: visible; }
+
/* menu styling */
.nav-menu a { color: #fff; }
.nav-menu .svg-icon { fill: #333; }