Add app content list

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 155 insertions, 0 deletions

diff --git a/core/css/apps.scss b/core/css/apps.scss
index 8f49df7fdaf..a730d383699 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -906,3 +906,158 @@ kbd {
 
 	}
 }
+
+
+#app-content-wrapper {
+	display: flex;
+}
+.app-content-list {
+	width: 300px;
+	height: 100%;
+	overflow-x: hidden;
+	overflow-y: auto;
+	border-right: 1px solid nc-darken($color-main-background, 8%);
+	display: flex;
+	flex-direction: column;
+	transition: transform 250ms ease-in-out;
+
+	.app-content-list-item {
+		position: relative;
+		height: 68px;
+		border-top: 1px solid nc-darken($color-main-background, 8%);
+		cursor: pointer;
+		padding: 10px 7px;
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+
+		&:hover, &:focus,
+		&.active {
+			background-color: nc-darken($color-main-background, 6%);
+		}
+
+		.app-content-list-item-icon {
+			position: absolute;
+			left: 6px;
+			top: 14px;
+			display: inline-block;
+			height: 40px;
+			width: 40px;
+			line-height: 40px;
+			border-radius: 50%;
+			vertical-align: middle;
+			margin-right: 10px;
+			color: #fff;
+			text-align: center;
+			font-size: 1.5em;
+			text-transform: capitalize;
+			object-fit: cover;
+			user-select: none;
+		}
+
+		.app-content-list-item-star {
+			position: absolute;
+			display: none; /* change to inline-block when we implement it */
+			left: 16px;
+			top: 28px;
+			padding: 20px;
+			background-size: 16px;
+			z-index: 100;
+		}
+
+		.app-content-list-item-line-one,
+		.app-content-list-item-line-two {
+			display: block;
+			padding-left: 50px;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			order: 1;
+			flex: 1 1 0;
+			padding-right: 10px;
+		}
+
+		.app-content-list-item-line-two {
+			opacity: .5;
+			order: 3;
+			flex: 1 0 calc(100% - 24px);
+		}
+
+		.app-content-list-item-details {
+			order: 2;
+			white-space: nowrap;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			max-width: 100px;
+			opacity: 0.5;
+			user-select: none;
+		}
+
+		[class^='icon-'],
+		[class*=' icon-'] {
+			order: 4;
+			width: 24px;
+			height: 24px;
+			opacity: 0.3;
+			&:hover, &:focus {
+				opacity: 0.7;
+			}
+		}
+	}
+}
+/* App content */
+.app-content-detail {
+	width: 70%;
+
+	#app-navigation-toggle-back {
+		display: none;
+	}
+}
+
+/* Mobile width < 768px */
+@media only screen and (max-width: 768px) {
+
+	/* full width for message list on mobile */
+	.app-content-list {
+		width: 100%;
+		background: $color-main-background;
+		position: relative;
+		z-index: 100;
+	}
+
+	/* overlay message detail on top of message list */
+	.app-content-detail {
+		background: $color-main-background;
+		width: 100%;
+		left: 0;
+		height: 100%;
+		top: 0;
+		box-shadow: 0 0 100px rgba(100, 100, 100, .9);
+		position: absolute;
+	}
+
+	/* Show app details page */
+	#app-content.showdetails {
+		#app-navigation-toggle {
+			transform: translateX(-44px);
+		}
+		#app-navigation-toggle-back {
+			position: fixed;
+			display: inline-block !important;
+			top: 45px;
+			left: 0;
+			width: 44px;
+			height: 44px;
+			z-index: 149;
+			background-color: rgba(255, 255, 255, .7);
+			cursor: pointer;
+			opacity: .6;
+			transform: rotate(90deg);
+		}
+		.app-content-list {
+			transform: translateX(-100%);
+		}
+	}
+
+	/* end of media query */
+}