Fallback updates & optimize sizing of picture

Project-Sloth · Apr 16, 2023 · e473d97 · e473d97
1 parent e427ce2
commit e473d97
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 30 deletions.
diff --git a/client/nui/app.js b/client/nui/app.js
@@ -10,43 +10,47 @@ function setLocation(location) {
 
 function open(image) {
 	if (!displayPicture) {
-	  $('.picture-container').removeClass('hide');
-	  if (image) {
-		$('.picture').css({
-		  'background-image': `url(${image})`,
-		});
-	  } else {
-		$('.picture').css({
-		  'background-image': `url(https://slang.net/img/slang/lg/kekl_6395.png)`,
-		});
-	  }
-  
-	  displayPicture = true;
+		$('.picture-container').removeClass('hide');
+		if (image) {
+			$('.picture').css({
+				'background-image': `url(${image})`,
+			});
+		} else {
+			$('.picture').css({
+				'background-image': `url(https://slang.net/img/slang/lg/kekl_6395.png)`,
+			});
+		}
+
+		displayPicture = true;
 	}
-  }
+}
 
-  function close() {
-    if (displayPicture) {
-        $('.picture-container').addClass('hide');
-        $('#location').html('');
-        $('.picture').css({ background: '' });
-        displayPicture = false;
-        $.post(`https://${GetParentResourceName()}/close`);
-    }
+function close() {
+	if (displayPicture) {
+		$('.picture-container').addClass('hide');
+		$('#location').html('');
+		$('.picture').css({ background: '' });
+		displayPicture = false;
+		$.post(`https://${GetParentResourceName()}/close`);
+	}
 }
 
 $(document).ready(function () {
 	window.addEventListener('message', function (event) {
 		switch (event.data.action) {
 			case 'Open':
 				open(event.data.image);
-				document.getElementById('camera-overlay').classList.remove('hide');
+				document
+					.getElementById('camera-overlay')
+					.classList.remove('hide');
 				break;
 			case 'SetLocation':
 				setLocation(event.data.location);
 				break;
 			case 'showOverlay':
-				document.getElementById('camera-overlay').classList.remove('hide');
+				document
+					.getElementById('camera-overlay')
+					.classList.remove('hide');
 				break;
 			case 'hideOverlay':
 				document.getElementById('camera-overlay').classList.add('hide');
@@ -67,4 +71,4 @@ $(document).ready(function () {
 				break;
 		}
 	};
-});
+});
diff --git a/client/nui/main.css b/client/nui/main.css
@@ -14,7 +14,6 @@ body {
 .picture-container {
 	position: relative;
 	width: 1000px;
-	height: 700px;
 	padding: 25px;
 	border: 1px solid #999999;
 	border-radius: 2px;
@@ -26,12 +25,12 @@ body {
 .picture {
 	background-repeat: no-repeat;
 	background-size: contain;
-	width: 100%;
-	height: 90%;
+	background-position: center center;
+	aspect-ratio: 16 / 9;
 }
 
 .info {
-	margin-top: 1em;
+	margin-top: 2em;
 	text-align: center;
 	user-select: none;
 	font-family: 'Encode Sans SC', sans-serif;
@@ -53,7 +52,7 @@ body {
 	padding: 10vh;
 	color: white;
 	font-family: 'Plus Jakarta Sans', sans-serif;
-  }
+}
 
 .frame {
 	position: relative;
@@ -167,4 +166,4 @@ body {
 
 .hide {
 	display: none;
-}
+}