Improved responsive view

Removed unused CSS

dev/App/Abstract.js

@@ -3,7 +3,6 @@ import ko from 'ko';
 import {
 	doc,
 	elementById,
-	leftPanelDisabled,
 	Settings
 } from 'Common/Globals';
 
@@ -97,11 +96,6 @@ export class AbstractApp {
 
 		initOnStartOrLangChange();
 
-		leftPanelDisabled(ThemeStore.isMobile());
-		addEventListener('resize', () => leftPanelDisabled(ThemeStore.isMobile() || 767 >= innerWidth));
-
-		leftPanelDisabled.valueHasMutated();
-
 		LanguageStore.populate();
 		ThemeStore.populate();
 	}

dev/App/User.js

@@ -898,6 +898,8 @@ class AppUser extends AbstractApp {
 	bootstart() {
 		super.bootstart();
 
+		addEventListener('resize', () => leftPanelDisabled(ThemeStore.isMobile() || 1000 > innerWidth));
+
 		AppStore.populate();
 		SettingsStore.populate();
 		NotificationStore.populate();

dev/Stores/Theme.js

@@ -1,5 +1,5 @@
 import ko from 'ko';
-import { $htmlCL } from 'Common/Globals';
+import { $htmlCL, leftPanelDisabled } from 'Common/Globals';
 
 export const ThemeStore = {
 	themes: ko.observableArray(),
@@ -17,6 +17,8 @@ export const ThemeStore = {
 			this.userBackgroundName(Settings.get('UserBackgroundName'));
 			this.userBackgroundHash(Settings.get('UserBackgroundHash'));
 		}
+
+		leftPanelDisabled(this.isMobile());
 	}
 };
 

dev/Styles/@Admin.less

@@ -23,7 +23,7 @@
 
 @import "Ui.less";
 @import "Main.less";
-@import "Layout.less";
+@import "LayoutAdmin.less";
 @import "Components.less";
 @import "Login.less";
 @import "Ask.less";

dev/Styles/Admin.less

@@ -107,10 +107,6 @@
 		}
 	}
 
-	.b-settings-content {
-		padding: 20px;
-		padding-left: 30px;
-	}
 }
 
 .btn.btn-logout {

dev/Styles/Layout.less

@@ -5,7 +5,7 @@
 	background-position: center;
 }
 
-#rl-center, #rl-top, #rl-bottom, #rl-left, #rl-right {
+#rl-center, #rl-top, #rl-left, #rl-right {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -48,14 +48,8 @@ html.rl-mobile {
 	z-index: 2;
 }
 
-#rl-bottom {
-	top: auto;
-	z-index: 1;
-}
-
 #rl-left {
 	width: @rlLeftWidth;
-	min-width: 60px;
 }
 
 /*
@@ -131,7 +125,7 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
 	top: 0;
 	bottom: 0;
 	left: 0;
-	width: 500px;
+	width: 50%;
 }
 
 #rl-sub-right {
@@ -139,7 +133,7 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
 	top: 0;
 	bottom: 0;
 	right: 0;
-	left: 500px;
+	left: 50%;
 
 	.b-message-view-backdrop {
 		position: absolute;
@@ -187,6 +181,14 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
 //	-webkit-overflow-scrolling: touch;
 }
 
+.b-settings-content {
+	padding:20px 20px 20px 30px;
+}
+
+/* desktop */
+@media screen and (min-width: 1000px) {
+}
+
 /* desktop-large */
 @media screen and (min-width: 1401px) {
 	#rl-left {
@@ -198,30 +200,11 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
 	}
 
 	#rl-sub-left {
-		width: 500px;
+		width: 40%;
 	}
 
 	#rl-sub-right {
-		left: 500px;
-	}
-}
-
-/* desktop */
-@media screen and (min-width: 1000px) and (max-width: 1400px) {
-	#rl-left {
-		width: @rlLeftWidth;
-	}
-
-	#rl-right {
-		left: @rlLeftWidth;
-	}
-
-	#rl-sub-left {
-		width: 400px;
-	}
-
-	#rl-sub-right {
-		left: 400px;
+		left: 40%;
 	}
 }
 
@@ -235,17 +218,9 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
 		left: 155px;
 	}
 
-	#rl-sub-left {
-		width: 310px;
+	.b-settings-content {
+		padding: 10px 10px 10px 20px;
 	}
-
-	#rl-sub-right {
-		left: 310px;
-	}
-}
-
-/* tablet */
-@media screen and (min-width: 768px) and (max-width: 999px) {
 }
 
 .hidden-on-ctrl-btn,
@@ -272,10 +247,6 @@ html.rl-left-panel-disabled {
 			opacity: 0.3;
 		}
 
-		.visibility-hidden-on-panel-disabled {
-			visibility: hidden;
-		}
-
 		.hide-on-panel-disabled {
 			display: none;
 		}

dev/Styles/LayoutAdmin.less

@@ -0,0 +1,105 @@
+
+.UserBackground body {
+	background-size: contain;
+	background-repeat: no-repeat;
+	background-position: center;
+}
+
+#rl-center, #rl-top, #rl-left, #rl-right {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	padding: 0;
+	margin: 0;
+	border: 0;
+	z-index: 0;
+}
+
+#rl-content {
+	height: 100%;
+	width: 100%;
+}
+
+#rl-center {
+	min-width: 600px;
+	min-height: 400px;
+}
+
+#rl-top {
+	bottom: auto;
+	z-index: 2;
+}
+
+#rl-left {
+	width: @rlLeftWidth;
+}
+
+#rl-right {
+	z-index: 1;
+	left: @rlLeftWidth;
+}
+
+#rl-popups > .rl-view-model {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1100;
+	overflow: auto;
+	background-color: rgba(0,0,0,0.3);
+//	-webkit-overflow-scrolling: touch;
+}
+
+.b-settings-content {
+	padding:20px 20px 20px 30px;
+}
+
+/* desktop */
+@media screen and (min-width: 1000px) {
+	.toggleLeft {
+		display: none;
+	}
+}
+
+/* desktop-large */
+@media screen and (min-width: 1401px) {
+	#rl-left {
+		width: @rlLeftWidth + 20;
+	}
+
+	#rl-right {
+		left: @rlLeftWidth + 20;
+	}
+}
+
+/* mobile and tablet */
+@media screen and (max-width: 999px) {
+	.b-settings-content {
+		padding: 10px 10px 10px 20px;
+	}
+
+	#rl-center {
+		min-width: 250px;
+		min-height: 250px;
+	}
+
+	html:not(.rl-left-panel-disabled) #rl-right {
+		right: 5-@rlLeftWidth;
+	}
+
+	html.rl-left-panel-disabled {
+		#rl-left {
+			width: 0px !important;
+
+			.opacity-on-panel-disabled {
+				opacity: 0.3;
+			}
+		}
+		#rl-right {
+			left: 5px !important;
+		}
+	}
+}

dev/Styles/MessageView.less

@@ -591,7 +591,7 @@ html .messageItem .line-loading {
 
 html.rl-message-fullscreen {
 
-	#rl-left, #rl-bottom {
+	#rl-left {
 		display: none !important;
 	}
 

dev/Styles/Settings.less

@@ -109,11 +109,6 @@
 		}
 	}
 
-	.b-settings-content {
-		padding: 20px;
-		padding-left: 30px;
-	}
-
 	td {
 		padding: 4px 8px;
 		line-height: 30px;

dev/Styles/_BootstrapFix.less

@@ -101,11 +101,6 @@ label.inline, span.inline {
 		width: calc(~'100% - 20px') !important;
 	}
 
-	.b-settings-content {
-		padding: 10px;
-		padding-left: 20px;
-	}
-
 	.form-horizontal {
 		.control-group {
 			.control-label {

dev/View/Admin/Settings/Menu.js

@@ -1,4 +1,3 @@
-import { leftPanelDisabled } from 'Common/Globals';
 import { KeyState } from 'Common/Enums';
 
 import { settingsMenuKeysHandler } from 'Knoin/Knoin';
@@ -11,8 +10,6 @@ class MenuSettingsAdminView extends AbstractViewLeft {
 	constructor(screen) {
 		super('Admin/Settings/Menu', 'AdminMenu');
 
-		this.leftPanelDisabled = leftPanelDisabled;
-
 		this.menu = screen.menu;
 	}
 

dev/View/Admin/Settings/Pane.js

@@ -25,16 +25,10 @@ class PaneSettingsAdminView extends AbstractViewRight {
 			.extend({ rateLimit: 300 });
 	}
 
-	hideLeft(item, event) {
+	toggleLeft(item, event) {
 		event.preventDefault();
 		event.stopPropagation();
-		leftPanelDisabled(true);
-	}
-
-	showLeft(item, event) {
-		event.preventDefault();
-		event.stopPropagation();
-		leftPanelDisabled(false);
+		leftPanelDisabled(!leftPanelDisabled());
 	}
 
 	logoutClick() {