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

@@ -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);
 }

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;