add horizontal-split option

Author: devlinjunker

src/components/NcAppContent/NcAppContent.vue

@@ -60,22 +60,23 @@ The list size must be between the min and the max width value.
 
 		<template v-if="hasList">
 			<!-- Mobile view does not allow resizeable panes -->
-			<div v-if="isMobile || layout === 'no-split'"
+			<div v-if="(isMobile && mobileLayout === 'no-split') || layout === 'no-split' "
 				class="app-content-wrapper app-content-wrapper--no-split"
 				:class="{
 					'app-content-wrapper--show-details': showDetails,
 					'app-content-wrapper--show-list': !showDetails,
-					'app-content-wrapper--mobile': isMobile,}">
+					'app-content-wrapper--mobile': isMobile}">
 				<NcAppDetailsToggle v-if="showDetails" @click.native.stop.prevent="hideDetails" />
 				<slot v-if="!showDetails" name="list" />
 
 				<slot v-else />
 			</div>
 			<div v-else-if="layout === 'vertical-split' || layout === 'horizontal-split'" class="app-content-wrapper">
-				<Splitpanes :horizontal="layout === 'horizontal-split'"
+				<Splitpanes :horizontal="layout === 'horizontal-split' || (isMobile && mobileLayout === 'horizontal-split')"
 					class="default-theme"
-					:class="{ 'splitpanes--horizontal': layout === 'horizontal-split',
-						'splitpanes--vertical': layout === 'vertical-split'
+					:class="{ 'splitpanes--horizontal': layout === 'horizontal-split' || (isMobile && mobileLayout === 'horizontal-split') ,
+						'splitpanes--vertical': layout === 'vertical-split',
+						'splitpanes--horizontal-mobile': mobileLayout == 'horizontal-split'
 					}"
 					:rtl="isRTL"
 					@resized="handlePaneResize">
@@ -175,7 +176,7 @@ export default {
 		},
 
 		/**
-		 * When in mobile view, only the list or the details are shown
+		 * When in 'no-split' mobile view, only the list or the details are shown
 		 * If you provide a list, you need to provide a variable
 		 * that will be set to true by the user when an element of
 		 * the list gets selected. The details will then show a back
@@ -208,12 +209,14 @@ export default {
 		},
 		/**
 		 * Content layout used on mobile. 
+		 * - `no-split` - a single column layout; List is shown when `showDetails` is `false`, otherwise the default slot content is shown with a back button to return to the list.
+		 * - 'horizontal-split' - a 2-column layout with list and default content separated horizontally
 		 */
 		mobileLayout: {
 			type: String,
 			default: 'no-split',
 			validator(value) {
-				return ['no-split'].includes(value)
+				return ['no-split', 'horizontal-split'].includes(value)
 			}
 		}
 	},
@@ -409,6 +412,22 @@ export default {
 		scrollbar-width: auto;
 	}
 
+	&:not(.splitpanes--horizontal-mobile) {
+		.splitpanes__pane-list{
+			@media only screen and (width < $breakpoint-mobile) {
+				display: none;
+			}
+		}	
+	}
+
+	&.splitpanes--horizontal-mobile {
+		.splitpanes__pane-details{
+			@media only screen and (width < $breakpoint-mobile) {
+				min-height:30%;
+			}
+		}
+	}
+
 	.splitpanes__pane {
 		background-color: transparent;
 		transition: none;
@@ -417,9 +436,7 @@ export default {
 			min-width: 300px;
 			position: sticky;
 
-			@media only screen and (width < $breakpoint-mobile) {
-				display: none;
-			}
+			
 		}
 
 		&-details {