Finalize customScaleCalc /

Tidy up project /
Maybe use Webpack in future

Author: Ali-Sdg90

JS/customScaleCalc.js

@@ -17,9 +17,7 @@
     flex-flow: row nowrap;
     justify-content: center;
     align-items: center;
-    // padding: 0 10px 10px;
     margin-bottom: 5px;
-    // border: 1px solid red;
 
     .section-header {
         width: 100%;

JS/customScaleCalc.js.map

@@ -6,10 +6,8 @@
 }
 
 body {
-    // background: rgb(19, 20, 21);
     background-color: rgb(27, 29, 31);
     color: rgb(237, 232, 232);
-    // width: 100%;
     height: 100vh;
     display: flex;
     flex-flow: column nowrap;

Style/_base-sections.scss

@@ -1,19 +1,10 @@
 .default-properties {
-    // width: 300vw;
     width: 100%;
     background-color: rgb(27, 29, 31);
-    // box-shadow: 0 0 10px 10px rgba(13, 13, 13, 0.732);
+    transform-origin: top;
 }
 
 .custom-scale-calc {
-    // position: absolute;
-    // right: 50vw;
-    // transform: scale(0.5) rotate(90deg) translate(-50%, -53%);
-    // width: 140vh;
-    // transform-origin: left-top;
-    // height: 500px !important;
-    transform-origin: center;
     position: relative;
-    top: 24vh;
-    width: 1000px;
+    width: 1000px !important;
 }

Style/_config.scss

@@ -1,6 +1,5 @@
 .edit-section {
     width: 400px;
-    // height: 80%;
     height: 490px;
     border-radius: 10px;
     overflow: hidden;
@@ -10,6 +9,7 @@
     direction: rtl;
     border: 1px solid black;
     box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
+    margin: 0 0.6vw;
 
     .edit-list-container {
         min-height: 300px;

Style/_customScaleCalc.scss

@@ -4,11 +4,11 @@
     border: 1px solid rgb(0, 0, 0);
     border-radius: 10px;
     overflow: hidden;
-    // height: 80%;
     height: 490px;
     position: relative;
     padding-top: 30px;
     box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
+    margin: 0 0.6vw;
 
     .input-list,
     .output-list {

Style/_edit-section.scss

@@ -42,13 +42,12 @@ body {
 .default-properties {
   width: 100%;
   background-color: rgb(27, 29, 31);
+  transform-origin: top;
 }
 
 .custom-scale-calc {
-  transform-origin: center;
   position: relative;
-  top: 24vh;
-  width: 1000px;
+  width: 1000px !important;
 }
 
 @keyframes shake {
@@ -139,6 +138,7 @@ body {
   position: relative;
   padding-top: 30px;
   box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
+  margin: 0 0.6vw;
 }
 .input-section .input-list,
 .input-section .output-list,
@@ -230,6 +230,7 @@ body {
   direction: rtl;
   border: 1px solid black;
   box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.1);
+  margin: 0 0.6vw;
 }
 .edit-section .edit-list-container {
   min-height: 300px;

Style/_input-output-sections.scss

@@ -2,59 +2,43 @@ const customScaleDiv = document.querySelector(
     ".custom-scale-div"
 ) as HTMLElement;
 
+// CustomScaleCalc
+// This is a method I created myself, and I find it very interesting. I named it customScaleCalc.
+// Adjusts the scale and rotation of the element based on the window size.
+// For landscape displays, scales the element by height for optimal viewing.
+// For portrait displays, rotates the element 90 degrees and scales down for mobile compatibility.
+// Ultimately, in the mobile device's browser, the application is correctly displayed with a 90-degree rotation,
+// allowing devices with different sizes to use the program. Ensures the app looks good on any screen size by recalculating on window resize.
+
 const customScaleCalc = () => {
     const pageWidth = window.innerWidth;
     const pageHeight = window.innerHeight;
 
     if (pageWidth > 270) {
         if (pageHeight > pageWidth) {
-            // console.log(pageWidth, pageHeight);
-
             customScaleDiv.classList.add("custom-scale-calc");
 
-            // let scale = 1 - ((pageHeight / pageWidth) * 0.2) / (900 / 477);
-
-            // customScaleDiv.style.transform = `scale(${scale}) rotate(90deg)`;
-
-            // customScaleDiv.classList.remove("custom-scale-calc");
-            // customScaleDiv.style.transform = "";
-
             let scaleValue = 0;
-
             if (pageHeight / pageWidth > 1130 / 780) {
                 scaleValue = (1 * pageWidth) / 695;
             } else {
                 scaleValue = (0.7 * pageWidth) / 695;
             }
 
-            customScaleDiv.style.transform = `scale(${scaleValue}) rotate(90deg)`;
-            customScaleDiv.style.display = "block";
-
-            // customScaleDiv.style.top = `${(pageHeight - 920 * scaleValue)/2}px`;
-
-            // customScaleDiv.style.transformOrigin = "top";
-
-            // console.log("scale", scale);
+            customScaleDiv.style.transform = `scale(${scaleValue}) rotate(90deg) translate(50%, -50%)`;
+            customScaleDiv.style.top = `${
+                (pageHeight - 1000 * scaleValue) / 2
+            }px`;
         } else {
             customScaleDiv.classList.remove("custom-scale-calc");
-            // customScaleDiv.style.transform = "";
+
             const scaleValue = (1 * pageHeight) / 695;
 
             customScaleDiv.style.transform = `scale(${scaleValue})`;
-            customScaleDiv.style.display = "block";
-            customScaleDiv.style.transformOrigin = "top";
+            customScaleDiv.style.width = `${pageWidth / scaleValue}px`;
         }
     }
 };
 
 customScaleCalc();
 window.addEventListener("resize", customScaleCalc);
-
-// Description: This is a method I created myself, and I find it very
-// interesting. I named it customScaleCalc. What it does is, when the
-// height of the screen is greater than the width (as in the case of some
-// smartphones), it rotates the screen by 90 degrees and scales down the
-// content with a certain ratio. Ultimately, in the mobile device's
-// browser,the application is correctly displayed with a 90-degree
-// rotation, allowing devices with different sizes to use the program.
-// This calculation of how to display the screen is performed.