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;
+		left: 40%;
-	}
-}
-
-/* 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;
 	}
 }
 
@@ -235,17 +218,9 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
 		left: 155px;
 	}
 
-	#rl-sub-left {
+	.b-settings-content {
-		width: 310px;
+		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);
+		leftPanelDisabled(!leftPanelDisabled());
-	}
-
-	showLeft(item, event) {
-		event.preventDefault();
-		event.stopPropagation();
-		leftPanelDisabled(false);
 	}
 
 	logoutClick() {

snappymail/v/0.0.0/app/libraries/RainLoop/Actions/Admin.php

@@ -67,11 +67,10 @@ trait Admin
 		{
 			$this->oLogger->Write('Cannot store an admin token',
 				\MailSo\Log\Enumerations\Type::WARNING);
-
+			return '';
-			$sRand = '';
 		}
 
-		return '' === $sRand ? '' : Utils::EncodeKeyValuesQ(array('token', \md5(APP_SALT), $sRand));
+		return Utils::EncodeKeyValuesQ(array('token', \md5(APP_SALT), $sRand));
 	}
 
 	private function setCapaFromParams(\RainLoop\Config\Application $oConfig, string $sParamName, string $sCapa) : void

snappymail/v/0.0.0/app/templates/Views/Admin/AdminMenu.html

@@ -1,11 +1,5 @@
 <div class="b-admin-left g-ui-user-select-none">
-	<div class="b-toolbar">
+	<div class="b-toolbar"></div>
-        <div class="btn-group show-on-panel-disabled">
-            <a class="btn buttonResize" data-bind="click: function () { leftPanelDisabled(!leftPanelDisabled()); }">
-				<i data-bind="css: {'icon-resize-out': leftPanelDisabled(), 'icon-resize-in': !leftPanelDisabled()}"></i>
-            </a>
-        </div>
-	</div>
 	<div class="b-content opacity-on-panel-disabled">
 		<div class="b-admin-menu" data-bind="foreach: menu">
 			<!-- ko if: disabled -->
@@ -20,5 +14,4 @@
 			<!-- /ko -->
 		</div>
 	</div>
-    <div class="b-content show-on-panel-disabled" data-bind="click: function () { leftPanelDisabled(false); }"></div>
 </div>

snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html

@@ -1,7 +1,6 @@
 <div class="b-settings b-admin-right">
 	<div class="b-toolbar g-ui-user-select-none">
-		<a class="btn btn-thin-2 show-mobile fontastic" data-bind="click: hideLeft, visible: !leftPanelDisabled()">❮</a>
+		<a class="btn btn-thin-2 fontastic toggleLeft" data-bind="click: toggleLeft, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
-		<a class="btn btn-thin-2 show-mobile fontastic" data-bind="click: showLeft, visible: leftPanelDisabled()">❯</a>
 		<i class="icon-spinner" style="margin: 10px" data-bind="style: {'visibility': adminManLoadingVisibility }"></i>
 		<h4>SnappyMail - <span data-i18n="TOP_PANEL/LABEL_ADMIN_PANEL"></span></h4>
 		<a class="btn btn-logout fontastic" data-bind="click: logoutClick">⏻</a>
@@ -9,7 +8,7 @@
 	<div class="b-content">
 		<div class="content">
 			<div class="content-wrapper">
-				<div id="rl-settings-subscreen" class="b-settings-content" style="position: relative; z-index: 2"></div>
+				<div id="rl-settings-subscreen" class="b-settings-content"></div>
 			</div>
 		</div>
 	</div>

snappymail/v/0.0.0/app/templates/Views/User/SettingsPane.html

@@ -16,7 +16,7 @@
 	<div class="b-content">
 		<div class="content">
 			<div class="content-wrapper">
-				<div id="rl-settings-subscreen" class="b-settings-content" style="position: relative; z-index: 2"></div>
+				<div id="rl-settings-subscreen" class="b-settings-content"></div>
 			</div>
 		</div>
 	</div>

vendors/bootstrap/less/wells.less

@@ -12,6 +12,7 @@
   border: 1px solid darken(@wellBackground, 7%);
   border-radius: 4px;
   box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
+  display: inline-block;
 }
 
 // Sizes