improvement: partly auto hide left menu panel on viewport width less …

…than 900px (LMS #1420)
chilek · Oct 11, 2018 · 26b00bb · 26b00bb
1 parent 5375673
commit 26b00bb
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 1 deletion.
diff --git a/css/style.css b/css/style.css
diff --git a/css/style.less b/css/style.less
@@ -94,6 +94,14 @@ TABLE		{ border-collapse: collapse; border-color: #000000 }
 	align-items: center;
 }
 
+@media all and (max-width: 900px) {
+	#lms-ui-menu-panel {
+		min-width: unset;
+		width: 3em;
+		--lms-mobile: 1;
+	}
+}
+
 #lms-ui-menu-panel-toggle {
 	position: absolute;
 	left: 0.15em;

diff --git a/templates/default/menu-panel.html b/templates/default/menu-panel.html
@@ -103,4 +103,28 @@
 	var menuPanelContainer = $('#lms-ui-menu-panel-container');
 	menuPanelContainer.css('margin-right', menuPanelContainer[0].clientWidth - menuPanelContainer[0].offsetWidth + 'px');
 
+
+	$(function() {
+		$('#lms-ui-menu-panel').on('mouseenter touchstart', function () {
+			if ($('#lms-ui-menu-panel').css('--lms-mobile')) {
+				$(this).animate({
+					width: '12em'
+				});
+			}
+		}).on('mouseleave', function () {
+			if ($('#lms-ui-menu-panel').css('--lms-mobile')) {
+				$(this).animate({
+					width: '3em'
+				});
+			}
+		});
+		$('#lms-ui-contents').on('mouseenter touchstart', function () {
+			if ($('#lms-ui-menu-panel').css('--lms-mobile')) {
+				$('#lms-ui-menu-panel').animate({
+					width: '3em'
+				});
+			}
+		});
+	});
+
 </script>