Drop target should follow window size when you resize it to be taller

szTheory · Feb 3, 2020 · f673550 · f673550
1 parent eb0157e
commit f673550
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 6 deletions.
diff --git a/src/renderer/index.html b/src/renderer/index.html
@@ -9,13 +9,15 @@
 <body>
 	<main>
 		<div class="pt-2">
-			<div id='empty' class="empty mx-2">
-				<div class="empty-icon">
-					<i class="icon icon-photo icon-3x"></i>
+			<div id='empty' class="empty">
+				<div class="empty-inner">
+					<div class="empty-icon">
+						<i class="icon icon-photo icon-3x"></i>
+					</div>
+					<p class="empty-title h5">No images selected</p>
+					<p class="empty-subtitle">Drag and drop files here for processing.</p>
+					<div class="empty-action"></div>
 				</div>
-				<p class="empty-title h5">No images selected</p>
-				<p class="empty-subtitle">Drag and drop files here for processing.</p>
-				<div class="empty-action"></div>
 			</div>
 
 			<table id="file-list" class="table table-striped table-hover d-none">

diff --git a/src/styles/empty.scss b/src/styles/empty.scss
@@ -1,3 +1,29 @@
 .empty {
+	// border in day mode
 	border: 1px dashed #3b4351;
+
+	display: block;
+	height: calc(100% - 14px);
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	margin-top: 6px;
+	margin-left: 8px;
+	margin-right: 8px;
+	margin-bottom: 6px;
+	padding: 0;
+
+	.empty-inner {
+		position: absolute;
+
+		// position the top+left edges of the element
+		// at the middle of the parent
+		top: 50%;
+		left: 50%;
+
+		// This is a shorthand of translateX(-50%) and translateY(-50%)
+		transform: translate(-50%, -50%);
+	}
 }