From 01a07075859d6001970a39b1cbadc76e3bd13125 Mon Sep 17 00:00:00 2001
From: Mladen Mijatov <meaneye.rcf@gmail.com>
Date: Tue, 25 Apr 2017 09:43:01 +0200
Subject: [PATCH] Mobile menu: Switched to styling by CSS.

System used to calculate position and height of mobile menu through
JavaScript. This caused significant problems with development as it was
hard to override styles and make them properly calculated. Mobile menu
now implements bare minimum of functionality which can be overridden any
time.
---
 modules/collection/include/mobile_menu.css | 57 +++++-----------------
 modules/collection/include/mobile_menu.js  | 25 +---------
 2 files changed, 13 insertions(+), 69 deletions(-)

diff --git a/modules/collection/include/mobile_menu.css b/modules/collection/include/mobile_menu.css
index 935cdf101..511b0ba71 100644
--- a/modules/collection/include/mobile_menu.css
+++ b/modules/collection/include/mobile_menu.css
@@ -6,9 +6,6 @@
  */
 
 .mobile_menu {
-	display: block;
-	width: 200px;
-
 	position: fixed;
 	left: -200px;
 
@@ -20,62 +17,30 @@
 	backface-visibility: hidden;
 	perspective: 1000;
 
-	/* optimize crhome */
-	transform: translateZ(0);
+	transform: translate3d(-100%, 0, 0);
+	pointer-events: none;
+	z-index: 1000000;
 }
 
 .mobile_menu.visible {
-	left: 0px;
-}
-
-.mobile_menu a {
-	display: block;
-
-	padding: 0.5em;
-	padding-left: 1em;
-	padding-right: 1em;
-
-	color: #333333;
-	text-decoration: none;
-}
-
-.mobile_menu a:active {
-	color: white;
-	background-color: #333333;
+	pointer-events: auto;
+	transform: translate3d(0, 0, 0);
 }
 
 .mobile_title {
-	display: block;
-	width: 100%;
-
 	position: fixed;
-	left: 0px;
-	top: 0px;
-
-	background-color: #303030;
-	background-position: 0px center;
-	background-repeat: no-repeat;
-	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
+	left: 0;
+	right: 0;
+	top: 0;
 
-	color: white;
-
-	transition: 0.3s all;
 	transform: translateZ(0);
+	z-index: 1000001;
 }
 
 html[dir=rtl] .mobile_menu {
-	left: auto;
-	right: -200px;
+	transform: translate3d(100%, 0, 0);
 }
 
 html[dir=rtl] .mobile_menu.visible {
-	right: 0px;
-}
-
-html[dir=rtl] .mobile_title {
-	background-position: right center;
-}
-
-html[dir=rtl] .mobile_title.visible {
-	background-position: 105% center;
+	transform: translate3d(0, 0, 0);
 }
diff --git a/modules/collection/include/mobile_menu.js b/modules/collection/include/mobile_menu.js
index 0437cedd6..f7eafb1c3 100644
--- a/modules/collection/include/mobile_menu.js
+++ b/modules/collection/include/mobile_menu.js
@@ -1,11 +1,11 @@
 /**
  * Mobile Menu JavaScript
  *
- * Copyright (c) 2013. by Way2CU
+ * Copyright (c) 2017. by Way2CU
  * Author: Mladen Mijatov
  */
 
-var Caracal = Caracal || {};
+var Caracal = Caracal || new Object();
 
 
 Caracal.MobileMenu = function() {
@@ -36,17 +36,6 @@ Caracal.MobileMenu = function() {
 		self._top_bar = $('.mobile_title').eq(0);
 		self._menu = $('.mobile_menu').eq(0);
 
-		// configure top bar
-		self._top_bar.css('z-index', 10001);
-
-		// configure main menu
-		self._menu
-			.css({
-				top: self._top_bar.height(),
-				height: $(window).height() - self._top_bar.height(),
-				zIndex: 10000
-			});
-
 		// connect events in main menu
 		self._menu.find('a').click(self._handle_menu_item_click);
 
@@ -66,19 +55,11 @@ Caracal.MobileMenu = function() {
 
 		// connect window events
 		$(window)
-			.bind('resize', self._update_menu_size)
 			.bind('touchstart', self._handle_touch_start)
 			.bind('touchmove', self._handle_touch_move)
 			.bind('touchend', self._handle_touch_end);
 	};
 
-	/**
-	 * Update size of menu container.
-	 */
-	self._update_menu_size = function(event) {
-		self._menu.css('height', $(window).height() - self._top_bar.height());
-	};
-
 	/**
 	 * Show menu container.
 	 */
@@ -199,5 +180,3 @@ Caracal.MobileMenu = function() {
 	// complete initialization
 	self._init();
 };
-
-window['MobileMenu'] = Caracal.MobileMenu;