Merge pull request #6 from ofcyln/mobile-first

#2 Mobile First integration
ofcyln · Mar 22, 2020 · 9e494e5 · 9e494e5
2 parents c026571 + 3214667
commit 9e494e5
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 9 deletions.
diff --git a/src/assets/css/styles.scss b/src/assets/css/styles.scss
@@ -1,3 +1,7 @@
+@mixin position($type: initial) {
+	position: $type;
+}
+
 body {
 	width: 100vw;
 	height: 100vh;
@@ -7,9 +11,51 @@ body {
 }
 
 canvas {
-	position: absolute;
+	@include position(fixed);
+}
+
+#video {
+	@include position(fixed);
+	top: 50%;
+	left: 50%;
+	min-width: 100%;
+	min-height: 100%;
+	width: auto;
+	height: auto;
+	transform: translateX(-50%) translateY(-50%);
 }
 
-video {
-	box-shadow: -2px 12px 20px 0 grey;
+@media screen and (min-width: 800px) {
+	body {
+		background-color: #89b1ab;
+
+		&::before {
+			@include position(fixed);
+			content: 'Face Emotion Detector';
+			top: 7%;
+			font-size: 400%;
+			font-family: Arial, sans-serif;
+			color: #fff;
+		}
+	}
+
+	canvas {
+		@include position(absolute);
+	}
+
+	#video {
+		@include position();
+		width: 720px;
+		height: 540px;
+		top: initial;
+		left: initial;
+		min-width: initial;
+		min-height: initial;
+		transform: translateX(0) translateY(0);
+		background-color: #fff;
+	}
+
+	video {
+		box-shadow: -2px 12px 20px 0 grey;
+	}
 }
diff --git a/src/assets/js/index.js b/src/assets/js/index.js
@@ -3,21 +3,29 @@ import '../css/styles.scss';
 
 import * as faceapi from 'face-api.js';
 
-class Execute {
+class FaceEmotionDetector {
 	constructor() {
 		this.MILISECOND_VALUE = 100;
 
 		this.video = document.querySelector('#video');
 
-		this.boxSize = {
-			width: this.video.width, height: this.video.height
-		};
+		this.getBoxSize();
 
 		this.promiseFunctions();
 
 		this.videoEventListener();
 	}
 
+	getBoxSize() {
+		const positionInfo = this.video.getBoundingClientRect();
+		const height = positionInfo.height;
+		const width = positionInfo.width;
+
+		this.boxSize = {width, height};
+
+		return this.boxSize;
+	}
+
 	startCamera() {
 		navigator.getUserMedia({
 			video: {}
@@ -66,6 +74,6 @@ class Execute {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-	new Execute();
+	new FaceEmotionDetector();
 });
 
diff --git a/src/index.html b/src/index.html
@@ -19,6 +19,6 @@
 </head>
 
 <body>
-<video id="video" width="720" height="540" autoplay muted></video>
+<video id="video" autoplay muted></video>
 </body>
 </html>
-Original file line number
+Diff line change
@@ Expand Up / @@ -19,6 +19,6 @@ @@
     </head>
     <body>
-    <video id="video" width="720" height="540" autoplay muted></video>
+    <video id="video" autoplay muted></video>
     </body>
     </html>