Make layout fully responsive using matchMedia('(max-width: 799px)')

dev/Common/EnumsUser.js

@@ -96,7 +96,7 @@ export const EditorDefaultType = {
  * @enum {number}
  */
 export const Layout = {
-	NoPreview: 0,
+//	NoPreview: 0,
 	SidePreview: 1,
 	BottomPreview: 2
 };

dev/Settings/User/General.js

@@ -86,7 +86,7 @@ export class UserSettingsGeneral extends AbstractViewSettings {
 			layoutTypes: () => {
 				translateTrigger();
 				return [
-					{ id: Layout.NoPreview, name: i18n('SETTINGS_GENERAL/LAYOUT_NO_SPLIT') },
+					{ id: 0, name: i18n('SETTINGS_GENERAL/LAYOUT_NO_SPLIT') },
 					{ id: Layout.SidePreview, name: i18n('SETTINGS_GENERAL/LAYOUT_VERTICAL_SPLIT') },
 					{ id: Layout.BottomPreview, name: i18n('SETTINGS_GENERAL/LAYOUT_HORIZONTAL_SPLIT') }
 				];

dev/Stores/Theme.js

@@ -8,6 +8,9 @@ import { addSubscribablesTo } from 'External/ko';
 let __themeTimer = 0;
 
 export const
+	// Also see Styles/_Values.less @maxMobileWidth
+	isMobile = matchMedia('(max-width: 799px)'),
+
 	ThemeStore = {
 		theme: ko.observable(''),
 		themes: ko.observableArray(),
@@ -16,7 +19,7 @@ export const
 		fontSansSerif: ko.observable(''),
 		fontSerif: ko.observable(''),
 		fontMono: ko.observable(''),
-		isMobile: ko.observable($htmlCL.contains('rl-mobile')),
+		isMobile: ko.observable(false),
 
 		populate: () => {
 			const themes = Settings.app('themes');
@@ -62,8 +65,6 @@ export const
 	convertThemeName = theme => theme.replace(/@[a-z]+$/, '').replace(/([A-Z])/g, ' $1').trim();
 
 addSubscribablesTo(ThemeStore, {
-	isMobile: value => $htmlCL.toggle('rl-mobile', value),
-
 	fontSansSerif: value => {
 		if (null != value) {
 			let cl = appEl.classList;
@@ -97,3 +98,9 @@ addSubscribablesTo(ThemeStore, {
 		appEl.style.backgroundImage = value ? "url("+serverRequestRaw('UserBackground', value)+")" : null;
 	}
 });
+
+isMobile.onchange = e => {
+	ThemeStore.isMobile(e.matches);
+	$htmlCL.toggle('rl-mobile', e.matches);
+};
+isMobile.onchange(isMobile);

dev/Stores/User/Settings.js

@@ -49,11 +49,10 @@ export const SettingsUserStore = new class {
 
 		self.init();
 
-		self.usePreviewPane = koComputable(() => Layout.NoPreview !== self.layout() && !ThemeStore.isMobile());
+		self.usePreviewPane = koComputable(() => self.layout() && !ThemeStore.isMobile());
 
 		const toggleLayout = () => {
-			const value = ThemeStore.isMobile() ? Layout.NoPreview : self.layout();
+			const value = ThemeStore.isMobile() ? 0 : self.layout();
-			$htmlCL.toggle('rl-no-preview-pane', Layout.NoPreview === value);
 			$htmlCL.toggle('rl-side-preview-pane', Layout.SidePreview === value);
 			$htmlCL.toggle('rl-bottom-preview-pane', Layout.BottomPreview === value);
 			fireEvent('rl-layout', value);

dev/Styles/Admin/Layout.less

@@ -73,7 +73,7 @@
 }
 
 /* desktop */
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: @maxMobileWidth + 1px) {
 	.toggleLeft {
 		display: none;
 	}
@@ -86,8 +86,7 @@
 	}
 }
 
-/* mobile and tablet */
+@media screen and (max-width: @maxMobileWidth) {
-@media screen and (max-width: 999px) {
 	#rl-right {
 		min-width: calc(100% - @rlLowMargin);
 	}

dev/Styles/Main.less

@@ -4,7 +4,7 @@ html.list-loading body {
 	cursor: progress;
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: @maxMobileWidth + 1px) {
 	#rl-app {
 		background-image: var(--main-bg-image);
 		background-size: var(--main-bg-size);
@@ -73,13 +73,14 @@ dialog:not(.animate) {
 
 /**
  * https://github.com/the-djmaze/snappymail/issues/686
-@media screen and (max-width: 999px) {
  */
-.rl-mobile dialog {
+@media screen and (max-width: @maxMobileWidth) {
+	dialog {
 		margin: 0 auto;
 /*		max-height: calc(100vh - 86px);*/
 /*		max-height: 100dvh;*/
 		width: 100%;
+	}
 }
 
 dialog > header {

dev/Styles/Ui.less

@@ -171,8 +171,7 @@ summary.legend {
 	color: var(--error-clr, #b94a48);
 }
 
-/* mobile and tablet */
+@media screen and (max-width: @maxMobileWidth) {
-@media screen and (max-width: 999px) {
 	.form-horizontal {
 		.control-group {
 			> label {

dev/Styles/User/Animations.less

@@ -10,7 +10,7 @@
 	100% {background-position: 60px 0;}
 }
 
-@media screen and (min-width: 1000px) {
+@media screen and (min-width: @maxMobileWidth + 1px) {
 
 	.b-folders li .anim-action-class {
 		animation: highlight-folder-row 0.5s linear;

dev/Styles/User/Contacts.less

@@ -195,7 +195,7 @@
 	}
 }
 
-html:not(.rl-mobile) {
+@media screen and (min-width: @maxMobileWidth + 1px) {
 	.hideContactListCheckbox {
 		.checkboxItem {
 			visibility: hidden;

dev/Styles/User/FolderList.less

@@ -44,7 +44,6 @@
 	}
 
 	.b-toolbar {
-		padding: 10px 0 10px @rlLowMargin;
 		color: #fff;
 	}
 

dev/Styles/User/Layout.less

@@ -12,6 +12,10 @@
 /*	transition: width 0.3s ease-out;*/
 	width: @rlLeftWidth;
 	z-index: 0;
+
+	.b-toolbar {
+		padding: 10px 0 10px @rlLowMargin;
+	}
 }
 
 #rl-right:not([hidden]) {
@@ -19,9 +23,6 @@
 	flex-grow: 1;
 	width: 20%;
 }
-.rl-bottom-preview-pane #rl-right {
-	flex-direction: column;
-}
 
 /*
 .resizable::after {
@@ -41,47 +42,12 @@
 }
 */
 
-.resizer {
-	background: #aaa;
-	background: rgba(255,255,255,0.5);
-	display: none;
-	opacity: 0;
-	position: absolute;
-	z-index: 102;
-}
-.resizer:hover {
-	opacity: 1;
-}
-
 html:not(.rl-left-panel-disabled) #rl-left {
 	resize: horizontal; overflow: auto;
 	min-width: 155px;
 	max-width: 350px;
 }
 
-#rl-left > .resizer,
-.rl-side-preview-pane #V-MailMessageList .resizer {
-	cursor: ew-resize;
-	cursor: col-resize;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	width: 5px;
-}
-.rl-bottom-preview-pane #V-MailMessageList .resizer {
-	cursor: ns-resize;
-	cursor: row-resize;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	height: 5px;
-}
-
-html:not(.rl-left-panel-disabled) #rl-left > .resizer,
-#V-MailMessageList .resizer {
-	display: block;
-}
-
 #top-system-dropdown-id::after,
 #button-add-prop-dropdown-id::after {
 	content: '▼';
@@ -140,38 +106,6 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer,
 	margin-right: 8px;
 }
 
-/* desktop */
-@media screen and (min-width: 1000px) {
-}
-
-/* desktop-large */
-@media screen and (min-width: 1401px) {
-	#rl-left {
-		width: @rlLeftWidth + 20;
-	}
-}
-
-/* mobile and tablet */
-@media screen and (max-width: 999px) {
-	#rl-left {
-		width: 155px;
-	}
-
-	#rl-app {
-		#V-SettingsPane {
-			margin-right: 0;
-		}
-
-		#rl-settings-subscreen {
-			padding: 10px;
-		}
-	}
-
-	.dropdown-menu a {
-		line-height: 2.5;
-	}
-}
-
 html:not(.rl-ctrl-key-pressed) .visible-on-ctrl-btn,
 html.rl-ctrl-key-pressed .hidden-on-ctrl-btn,
 .show-on-panel-disabled {
@@ -197,32 +131,6 @@ html.rl-left-panel-disabled {
 	}
 }
 
-html.rl-mobile #rl-left > .resizer,
-html.rl-no-preview-pane #rl-right .resizer {
-	display: none !important;
-}
-
-html.rl-mobile {
-	#rl-left {
-		background: var(--main-bg-color, #aaa);
-		border-right: 1px solid var(--border-color, #ddd);
-		position: fixed;
-		left: 0;
-		top: 0;
-		bottom: 0;
-		width: 50vw;
-		z-index: 3;
-	}
-	&.rl-left-panel-disabled #rl-left {
-		display: none;
-	}
-}
-
-html.rl-mobile .hide-mobile,
-html:not(.rl-mobile) .show-mobile {
-	display: none !important;
-}
-
 .e-paginator {
 
 	a {
@@ -243,3 +151,94 @@ html:not(.rl-mobile) .show-mobile {
 		}
 	}
 }
+
+@media screen and (max-width: @maxMobileWidth) {
+	#rl-app {
+		#V-SettingsPane {
+			margin-right: 0;
+		}
+
+		#rl-settings-subscreen {
+			padding: 10px;
+		}
+	}
+
+	#rl-left {
+		background: var(--main-bg-color, #aaa);
+		border-right: 1px solid var(--border-color, #ddd);
+		position: fixed;
+		left: 0;
+		top: 0;
+		bottom: 0;
+		width: 155px;
+		z-index: 3;
+	}
+	.rl-left-panel-disabled #rl-left {
+		display: none;
+	}
+
+	.dropdown-menu a {
+		line-height: 2.5;
+	}
+
+	.hide-mobile,
+	#rl-left .resizer,
+	#rl-right .resizer {
+		display: none !important;
+	}
+}
+
+/* desktop */
+@media screen and (min-width: @maxMobileWidth + 1px) {
+	.toggleLeft,
+	#V-MailMessageList .buttonCompose {
+		display: none !important;
+	}
+
+	.rl-bottom-preview-pane #rl-right {
+		flex-direction: column;
+	}
+
+	.resizer {
+		background: #aaa;
+		background: rgba(255,255,255,0.5);
+		display: none;
+		opacity: 0;
+		position: absolute;
+		z-index: 102;
+	}
+	.resizer:hover {
+		opacity: 1;
+	}
+	#rl-left > .resizer,
+	.rl-side-preview-pane #V-MailMessageList .resizer {
+		cursor: ew-resize;
+		cursor: col-resize;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		width: 5px;
+	}
+	.rl-bottom-preview-pane #V-MailMessageList .resizer {
+		cursor: ns-resize;
+		cursor: row-resize;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 5px;
+	}
+	html:not(.rl-left-panel-disabled) #rl-left > .resizer,
+	#V-MailMessageList .resizer {
+		display: block;
+	}
+	html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) #rl-right .resizer {
+		display: none !important;
+	}
+}
+
+/* desktop-large */
+@media screen and (min-width: 1401px) {
+	#rl-left {
+		width: @rlLeftWidth + 20;
+	}
+}

dev/Styles/User/MessageList.less

@@ -1,34 +1,7 @@
 
-html.rl-mobile, html.rl-no-preview-pane {
-	.message-selected #V-MailMessageList {
-		display: none;
-	}
-}
-
 #V-MailMessageList {
 	position: relative;
 }
-.rl-side-preview-pane #V-MailMessageList {
-	height: 100%;
-}
-.rl-no-preview-pane #V-MailMessageList {
-	height: 100%;
-	width: 100%;
-}
-.rl-side-preview-pane #V-MailMessageList .messageList {
-	max-width: 50vw;
-	min-width: 320px;
-	overflow: auto;
-	resize: horizontal;
-	width: 35vw;
-}
-.rl-bottom-preview-pane #V-MailMessageList .messageList {
-	height: 35vh;
-	max-height: 50vh;
-	min-height: 200px;
-	overflow: auto;
-	resize: vertical;
-}
 
 #V-MailMessageList.focused .messageList {
 	border-color: #9d9d9d;
@@ -196,18 +169,6 @@ html.rl-mobile, html.rl-no-preview-pane {
 	}
 }
 
-html:not(.rl-mobile) {
-	.hideMessageListCheckbox {
-		.checkboxCheckAll {
-			visibility: hidden;
-		}
-
-		.messageCheckbox {
-			display: none;
-		}
-	}
-}
-
 .messageListItem > div + div {
 	display: flex;
 	overflow: hidden;
@@ -396,12 +357,50 @@ html:not(.rl-mobile) {
 	}
 }
 
-@media screen and (min-width: 1000px) {
+html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
+	.message-selected #V-MailMessageList {
+		display: none;
+	}
+	#V-MailMessageList {
+		height: 100%;
+		width: 100%;
+	}
+}
+
+@media screen and (min-width: @maxMobileWidth + 1px) {
 	.messageList {
 		.listDragOver {
 			transition: all 400ms ease;
 		}
 	}
+
+	.hideMessageListCheckbox {
+		.checkboxCheckAll {
+			visibility: hidden;
+		}
+		.checkboxMessage {
+			display: none;
+		}
+	}
+
+	.rl-side-preview-pane #V-MailMessageList {
+		height: 100%;
+	}
+	.rl-side-preview-pane #V-MailMessageList .messageList {
+		max-width: 50vw;
+		min-width: 320px;
+		overflow: auto;
+		resize: horizontal;
+		width: 35vw;
+	}
+
+	.rl-bottom-preview-pane #V-MailMessageList .messageList {
+		height: 35vh;
+		max-height: 50vh;
+		min-height: 200px;
+		overflow: auto;
+		resize: vertical;
+	}
 }
 
 /* desktop-large */

dev/Styles/User/MessageView.less

@@ -30,25 +30,11 @@
 	}
 }
 
-html.rl-no-preview-pane {
-	#rl-right:not(.message-selected) #V-MailMessageView {
-		display: none;
-	}
-}
-
 #V-MailMessageView .top-toolbar {
 	color: #fff;
 	padding: 10px 0;
-}
-html.rl-no-preview-pane #V-MailMessageView .top-toolbar {
-	padding-left: 1px;
-}
-html:not(.rl-no-preview-pane) #V-MailMessageView .top-toolbar {
 	visibility: hidden;
 }
-html.rl-bottom-preview-pane #V-MailMessageView .top-toolbar {
-	display: none;
-}
 
 .messageView {
 	background-color: #fff;
@@ -475,13 +461,27 @@ html.rl-bottom-preview-pane #V-MailMessageView .top-toolbar {
 	}
 }
 
-html.rl-no-preview-pane .messageView {
+html:not(.rl-bottom-preview-pane):not(.rl-side-preview-pane) {
+	#rl-right:not(.message-selected) #V-MailMessageView {
+		display: none;
+	}
+	#V-MailMessageView .top-toolbar {
+		padding-left: 1px;
+		visibility: visible;
+	}
+	.messageView {
 		border: 1px solid var(--border-color, #aaa);
 		box-shadow: var(--smMainShadow);
+	}
 }
 
-html.rl-bottom-preview-pane .messageView {
+html.rl-bottom-preview-pane {
+	#V-MailMessageView .top-toolbar {
+		display: none;
+	}
+	.messageView {
 		height: 100%;
+	}
 }
 
 html.rl-fullscreen {

dev/Styles/User/Settings.less

@@ -1,24 +1,5 @@
 
 #V-SettingsMenu {
-
-	.b-footer {
-		position: absolute;
-		bottom: 10px;
-		right: 0;
-		left: 0;
-		padding: 0 10px 0 5px;
-		z-index: 101;
-	}
-
-	.b-content {
-		position: absolute;
-		top: 50px + @rlLowMargin + 10px;
-		bottom: @rlLowMargin;
-		left: 0;
-		right: 0;
-		overflow: hidden;
-	}
-
 	nav {
 
 		a {
@@ -55,11 +36,8 @@
 
 	.btn-toolbar {
 		position: absolute;
-		top: 0;
+		top: 8px;
-		right: 0;
+		left: @rlLowMargin;
-		left: 0;
-		padding: 8px 0;
-		color: #fff;
 	}
 
 	td {

dev/Styles/User/SystemDropDown.less

@@ -58,6 +58,7 @@
 		font-size: 16px;
 		line-height: 29px;
 		max-width: 25vw;
+		margin: 0;
 		overflow: hidden;
 		padding: 1px 8px;
 		text-overflow: ellipsis;

dev/Styles/_Values.less

@@ -2,11 +2,16 @@
 @rlLeftWidth: 200px;
 @rlLowMargin: 8px;
 
+/* mobile and tablet */
+@maxMobileWidth: 799px;
+
 :root {
 	--smDialogShrink: 20px;
 	--smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }
-.rl-mobile {
+/* For Firefox */
-	/* For Firefox */
+@media screen and (max-width: @maxMobileWidth) {
+	:root {
 		--smDialogShrink: 25px;
+	}
 }

dev/View/User/MailBox/MessageList.js

@@ -573,7 +573,7 @@ export class MailMessageList extends AbstractViewRight {
 				fToggle = () => {
 					let layout = SettingsUserStore.layout();
 					setLayoutResizer(top, ClientSideKeyNameMessageListSize,
-						(ThemeStore.isMobile() || Layout.NoPreview === layout)
+						(ThemeStore.isMobile() || !layout)
 							? 0
 							: (Layout.SidePreview === layout ? 'Width' : 'Height')
 					);

dev/View/User/Settings/Menu.js

@@ -1,5 +1,6 @@
 import { settings } from 'Common/Links';
-
+import { mailbox } from 'Common/Links';
+import { getFolderInboxName } from 'Common/Cache';
 import { AbstractViewLeft } from 'Knoin/AbstractViews';
 
 export class SettingsMenuUserView extends AbstractViewLeft {
@@ -15,4 +16,8 @@ export class SettingsMenuUserView extends AbstractViewLeft {
 	link(route) {
 		return settings(route);
 	}
+
+	backToInbox() {
+		hasher.setHash(mailbox(getFolderInboxName()));
+	}
 }

dev/View/User/Settings/Pane.js

@@ -1,5 +1,3 @@
-import { mailbox } from 'Common/Links';
-import { getFolderInboxName } from 'Common/Cache';
 import { leftPanelDisabled, toggleLeftPanel } from 'Common/Globals';
 
 import { MessageUserStore } from 'Stores/User/Message';
@@ -25,8 +23,4 @@ export class SettingsPaneUserView extends AbstractViewRight {
 			ThemeStore.isMobile() && !event.target.closestWithin('.toggleLeft', dom) && leftPanelDisabled(true)
 		);
 	}
-
-	backToInbox() {
-		hasher.setHash(mailbox(getFolderInboxName()));
-	}
 }

dev/View/User/SystemDropDown.js

@@ -12,9 +12,7 @@ import { KeyboardShortcutsHelpPopupView } from 'View/Popup/KeyboardShortcutsHelp
 import { AccountPopupView } from 'View/Popup/Account';
 import { ContactsPopupView } from 'View/Popup/Contacts';
 
-import { doc, leftPanelDisabled, fireEvent, stopEvent, SettingsCapa, registerShortcut } from 'Common/Globals';
+import { fireEvent, stopEvent, SettingsCapa, registerShortcut } from 'Common/Globals';
-
-import { ThemeStore } from 'Stores/Theme';
 
 import Remote from 'Remote/User/Fetch';
 import { getNotification } from 'Common/Translator';
@@ -111,14 +109,6 @@ export class SystemDropDownUserView extends AbstractViewRight {
 		this.allowContacts && showScreenPopup(ContactsPopupView);
 	}
 
-	toggleLayout()
-	{
-		const mobile = !ThemeStore.isMobile();
-		doc.cookie = 'rllayout=' + (mobile ? 'mobile' : 'desktop') + '; samesite=strict';
-		ThemeStore.isMobile(mobile);
-		leftPanelDisabled(mobile);
-	}
-
 	logoutClick() {
 		rl.app.logout();
 	}

dev/boot.js

@@ -4,7 +4,6 @@ const
 	qUri = path => doc.location.pathname.replace(/\/+$/,'') + '/?/' + path,
 	eId = id => doc.getElementById('rl-'+id),
 	admin = '1' == eId('app')?.dataset?.admin,
-	layout = doc.cookie.match(/(^|;) ?rllayout=([^;]+)/) || '',
 
 	toggle = div => {
 		eId('loading').hidden = true;
@@ -41,8 +40,6 @@ try {
 
 let RL_APP_DATA = {};
 
-doc.documentElement.classList.toggle('rl-mobile', 'mobile' === layout[2] || (!layout && 1000 > innerWidth));
-
 window.rl = {
 	adminArea: () => admin,
 
@@ -109,9 +106,7 @@ window.rl = {
 		init = Object.assign({ headers: {} }, init);
 		init.headers.Accept = 'application/json';
 		return rl.fetch(resource, init, postData).then(response => {
-			if (!response.ok) {
+			if (response.ok) {
-				return Promise.reject('Network response error: ' + response.status);
-			}
 				/* TODO: use this for non-developers?
 				response.clone()
 				let data = response.text();
@@ -130,6 +125,8 @@ window.rl = {
 				}
 				*/
 				return response.json();
+			}
+			return Promise.reject('Network response error: ' + response.status);
 		});
 	}
 };

snappymail/v/0.0.0/app/localization/ar-SA/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "ضفّ حساب"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobile version",
-		"BUTTON_DESKTOP_VERSION": "Desktop version"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "البحث المطور",
 		"TEXT": "النص",

snappymail/v/0.0.0/app/localization/bg-BG/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Добави акаунт"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Мобилна версия",
-		"BUTTON_DESKTOP_VERSION": "Десктоп версия"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Разширено търсене",
 		"TEXT": "Текст",

snappymail/v/0.0.0/app/localization/cs-CZ/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Přidat účet"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobilní verze",
-		"BUTTON_DESKTOP_VERSION": "Desktop verze"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Rozšířené hledání",
 		"TEXT": "Text",

snappymail/v/0.0.0/app/localization/da-DK/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Tilføj konto"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobil udgave",
-		"BUTTON_DESKTOP_VERSION": "Desktop udgave"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Avanceret søgning",
 		"TEXT": "Tekst",

snappymail/v/0.0.0/app/localization/de-DE/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Konto hinzufügen"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobile Version",
-		"BUTTON_DESKTOP_VERSION": "Desktop Version"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Erweiterte Suche",
 		"TEXT": "Text",

snappymail/v/0.0.0/app/localization/el-GR/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Προσθήκη λογαριασμού"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobile version",
-		"BUTTON_DESKTOP_VERSION": "Desktop version"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Προχωρημένη αναζήτηση",
 		"TEXT": "Κείμενο",

snappymail/v/0.0.0/app/localization/en-GB/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Add Account"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobile version",
-		"BUTTON_DESKTOP_VERSION": "Desktop version"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Advanced Search",
 		"TEXT": "Text",

snappymail/v/0.0.0/app/localization/en/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Add Account"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobile version",
-		"BUTTON_DESKTOP_VERSION": "Desktop version"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Advanced Search",
 		"TEXT": "Text",

snappymail/v/0.0.0/app/localization/es-ES/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Agregar cuenta"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Versión móvil",
-		"BUTTON_DESKTOP_VERSION": "Versión escritorio"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Búsqueda avanzada",
 		"TEXT": "Texto",

snappymail/v/0.0.0/app/localization/et-EE/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Lisa konto"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobiiliversioon",
-		"BUTTON_DESKTOP_VERSION": "Töölauaversioon"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Täpsem otsing",
 		"TEXT": "Tekst",

snappymail/v/0.0.0/app/localization/eu/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Gehitu kontua"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mugikorreko bertsioa",
-		"BUTTON_DESKTOP_VERSION": "Mahaigaineko bertsioa"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Bilaketa aurreratua",
 		"TEXT": "Testua",

snappymail/v/0.0.0/app/localization/fa-IR/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "ساخت کاربر"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "نسخه موبایل",
-		"BUTTON_DESKTOP_VERSION": "نسخه رومیزی"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "جستجوی پیشرفته",
 		"TEXT": "متن",

snappymail/v/0.0.0/app/localization/fi-FI/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Lisää tili"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobiiliversio",
-		"BUTTON_DESKTOP_VERSION": "Työpöytäversio"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Tarkka haku",
 		"TEXT": "Teksti",

snappymail/v/0.0.0/app/localization/fr-FR/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Ajouter un compte"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Version mobile",
-		"BUTTON_DESKTOP_VERSION": "Version grand écran"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Recherche avancée",
 		"TEXT": "Texte",

snappymail/v/0.0.0/app/localization/hu-HU/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Fiók hozzáadás"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobil verzió",
-		"BUTTON_DESKTOP_VERSION": "Asztali verzió"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Részletes keresés",
 		"TEXT": "Szöveg",

snappymail/v/0.0.0/app/localization/id-ID/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Tambah Akun"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Versi Mobile",
-		"BUTTON_DESKTOP_VERSION": "Versi Desktop"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Pencarian Rinci",
 		"TEXT": "Teks",

snappymail/v/0.0.0/app/localization/is-IS/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Bæta við aðgangi"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Farsímaútgáfa",
-		"BUTTON_DESKTOP_VERSION": "Vinnutölvuútgáfa"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Ítarleg leit",
 		"TEXT": "Texti",

snappymail/v/0.0.0/app/localization/it-IT/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Aggiungi account"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Versione mobile",
-		"BUTTON_DESKTOP_VERSION": "Versione desktop"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Ricerca avanzata",
 		"TEXT": "Messaggio",

snappymail/v/0.0.0/app/localization/ja-JP/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "アカウントを追加"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "モバイル版",
-		"BUTTON_DESKTOP_VERSION": "デスクトップ版"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "高度な検索",
 		"TEXT": "キーワード",

snappymail/v/0.0.0/app/localization/ko-KR/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "계정 추가"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "모바일 버전",
-		"BUTTON_DESKTOP_VERSION": "데스크탑 버전"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "고급 검색",
 		"TEXT": "본문",

snappymail/v/0.0.0/app/localization/lt-LT/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Pridėti paskyrą"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobili versija",
-		"BUTTON_DESKTOP_VERSION": "Standartinė versija"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Detali paieška",
 		"TEXT": "Laiško Tekstas",

snappymail/v/0.0.0/app/localization/lv-LV/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Pievienot kontu"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobilā versija",
-		"BUTTON_DESKTOP_VERSION": "Darba virsmas versija"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Papildus meklēšana",
 		"TEXT": "Teksts",

snappymail/v/0.0.0/app/localization/nb-NO/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Legg til konto"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobilversjon",
-		"BUTTON_DESKTOP_VERSION": "Skrivebordsversjon"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Avansert søk",
 		"TEXT": "Tekst",

snappymail/v/0.0.0/app/localization/nl-NL/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Account toevoegen"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobiele versie",
-		"BUTTON_DESKTOP_VERSION": "Desktop versie"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Geavanceerd zoeken",
 		"TEXT": "Tekst",

snappymail/v/0.0.0/app/localization/pl-PL/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Dodaj konto"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Wersja mobilna",
-		"BUTTON_DESKTOP_VERSION": "Wersja desktopowa"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Wyszukiwanie zaawansowane",
 		"TEXT": "Tekst",

snappymail/v/0.0.0/app/localization/pt-BR/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Adicionar Conta"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Versão Mobile",
-		"BUTTON_DESKTOP_VERSION": "Versão Desktop"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Pesquisa Avançada",
 		"TEXT": "Texto",

snappymail/v/0.0.0/app/localization/pt-PT/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Adicionar conta"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Versão móvel",
-		"BUTTON_DESKTOP_VERSION": "Versão computador"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Pesquisa avançada",
 		"TEXT": "Texto",

snappymail/v/0.0.0/app/localization/pt/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Adicionar conta"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Versão móvel",
-		"BUTTON_DESKTOP_VERSION": "Versão computador"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Pesquisa avançada",
 		"TEXT": "Texto",

snappymail/v/0.0.0/app/localization/ro-RO/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Adaugă un cont"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Versiunea de mobil",
-		"BUTTON_DESKTOP_VERSION": "Versiunea desktop"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Căutare avansată",
 		"TEXT": "Conținut",

snappymail/v/0.0.0/app/localization/ru-RU/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Добавить ещё аккаунт"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Мобильная версия",
-		"BUTTON_DESKTOP_VERSION": "Полная версия"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Расширенный поиск писем",
 		"TEXT": "Текст",

snappymail/v/0.0.0/app/localization/sk-SK/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Pridať účet"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Verzia pre mobil",
-		"BUTTON_DESKTOP_VERSION": "Verzia pre desktop"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Rozšírené hľadanie",
 		"TEXT": "Text",

snappymail/v/0.0.0/app/localization/sl-SI/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Dodaj račun"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobilna različica",
-		"BUTTON_DESKTOP_VERSION": "Namizna različica"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Napredno iskanje",
 		"TEXT": "Besedilo",

snappymail/v/0.0.0/app/localization/sv-SE/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Lägg till konto"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobilversion",
-		"BUTTON_DESKTOP_VERSION": "Datorversion"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Avancerad sök",
 		"TEXT": "Text",

snappymail/v/0.0.0/app/localization/tr-TR/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Hesap Ekle"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobil versiyonu",
-		"BUTTON_DESKTOP_VERSION": "Masaüstü versiyonu"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Detaylı Arama",
 		"TEXT": "Metin",

snappymail/v/0.0.0/app/localization/uk-UA/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Додати ще акаунт"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Мобільна версія",
-		"BUTTON_DESKTOP_VERSION": "Повна версія"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Розширений пошук листів",
 		"TEXT": "Текст",

snappymail/v/0.0.0/app/localization/vi-VN/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "Thêm tài khoản"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Phiên bản điện thoại",
-		"BUTTON_DESKTOP_VERSION": "Phiên bản máy tính"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "Tìm kiếm nâng cao",
 		"TEXT": "Nội dung trong mail",

snappymail/v/0.0.0/app/localization/zh-CN/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "添加账户"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "移动端版本",
-		"BUTTON_DESKTOP_VERSION": "桌面端版本"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "高级搜索",
 		"TEXT": "内容",

snappymail/v/0.0.0/app/localization/zh-TW/user.json

@@ -46,10 +46,6 @@
 	"TOP_TOOLBAR": {
 		"BUTTON_ADD_ACCOUNT": "添加帳戶"
 	},
-	"MOBILE": {
-		"BUTTON_MOBILE_VERSION": "Mobile version",
-		"BUTTON_DESKTOP_VERSION": "Desktop version"
-	},
 	"SEARCH": {
 		"TITLE_ADV": "高級搜索",
 		"TEXT": "內容",

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

@@ -1,19 +1,15 @@
 <div class="btn-toolbar">
-	<!-- ko if: isMobile() -->
 	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
 	<a class="btn buttonCompose" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}, visible: mobileCheckedStateHide()" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
 		<i class="icon-paper-plane"></i>
 	</a>
-	<!-- /ko -->
 	<a class="btn" data-bind="click: reload, visible: mobileCheckedStateHide()" data-i18n="[title]MESSAGE_LIST/BUTTON_RELOAD">
 		<i class="icon-spinner not-animated"></i>
 	</a>
-	<div class="btn-group" data-bind="visible: mobileCheckedStateShow()">
+	<a href="#" tabindex="-1" class="btn" data-bind="visible: mobileCheckedStateShow(), command: moveCommand" data-i18n="[title]GLOBAL/MOVE_TO">
-		<a href="#" tabindex="-1" class="btn" data-bind="command: moveCommand" data-i18n="[title]GLOBAL/MOVE_TO">
 		<i class="icon-copy visible-on-ctrl-btn"></i>
 		<i class="fontastic hidden-on-ctrl-btn">📁</i>
 	</a>
-	</div>
 	<div class="btn-group" data-bind="visible: mobileCheckedStateShow()">
 		<a class="btn fontastic" data-bind="visible: archiveAllowed, command: archiveCommand" data-i18n="[title]GLOBAL/TO_ARCHIVE">🗄</a>
 		<a class="btn fontastic" data-bind="visible: canMarkAsSpam, command: spamCommand" data-i18n="[title]GLOBAL/SPAM">⚠</a>

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

@@ -1,7 +1,7 @@
-<nav class="b-content" data-bind="foreach: menu">
+<div class="b-toolbar btn-toolbar">
+	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'"></a>
+	<a class="btn" data-bind="click: backToInbox" data-icon="⬅" data-i18n="GLOBAL/BACK"></a>
+</div>
+<nav data-bind="foreach: menu">
 	<a data-bind="css: {'selected': selected }, attr: { 'href': $root.link(route), 'data-i18n': label }"></a>
 </nav>
-<div class="b-content show-on-panel-disabled" data-bind="click: toggleLeftPanel"></div>
-<div class="b-footer">
-	<a class="btn fontastic" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'"></a>
-</div>

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

@@ -1,9 +1,4 @@
-<div class="btn-toolbar">
+<div class="btn-toolbar" data-bind="visible: leftPanelDisabled">
-	<!-- ko if: isMobile() -->
+	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel">❯</a>
-	<div class="btn-group" style="margin-left: -1px">
-		<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
-	</div>
-	<!-- /ko -->
-	<a class="btn" data-bind="click: backToInbox" data-icon="⬅" data-i18n="GLOBAL/BACK"></a>
 </div>
 <div id="rl-settings-subscreen"></div>

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

@@ -36,10 +36,6 @@
 				<a href="#" tabindex="-1" data-bind="click: settingsHelp" data-icon="🛈" data-i18n="GLOBAL/HELP"></a>
 			</li>
 			<li class="dividerbar" role="presentation">
-				<a href="#" tabindex="-1" data-bind="click: toggleLayout" data-icon="💻" class="show-mobile" data-i18n="MOBILE/BUTTON_DESKTOP_VERSION"></a>
-				<a href="#" tabindex="-1" data-bind="click: toggleLayout" data-icon="📱" class="hide-mobile" data-i18n="MOBILE/BUTTON_MOBILE_VERSION"></a>
-			</li>
-			<li role="presentation">
 				<a href="#" tabindex="-1" data-bind="click: logoutClick" data-icon="⏻" data-i18n="GLOBAL/LOGOUT"></a>
 			</li>
 		</menu>

vendors/bootstrap/less/button-groups.less

@@ -5,38 +5,36 @@
 
 // Make the div behave like a button
 .btn-group {
+  margin-right: 3px;
   position: relative;
   white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
 }
 
-.btn-group + .btn-group {
-  margin-left: 3px;
-}
-
 // Optional: Group multiple button groups together for a toolbar
 .btn-toolbar {
   .btn-group {
     display: inline-block;
   }
-  .btn + .btn,
+  * {
-  .btn-group + .btn,
+    margin-right: 3px;
-  .btn + .btn-group {
+  }
-    margin-left: 3px;
+  *:last-child {
+    margin-right: 0;
   }
 }
 
 // Float them, remove border radius, then re-add to first and last elements
-.btn-group > .btn {
+.btn-group > * {
-  position: relative;
   border-radius: 0;
+  position: relative;
+  margin-right: 0;
 }
-.btn-group > .btn + .btn {
+.btn-group > * + * {
   margin-left: -1px;
 }
 
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
 .btn-group > .btn:first-child {
-  margin-left: 0;
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
 }