Experience with "MCSC"

Author: Ali-Sdg90

JS/customScaleCalc.js

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

JS/customScaleCalc.js.map

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

Style/_config.scss

@@ -23,7 +23,7 @@
         resize: none;
         color: white;
         font-family: "Vazirmatn";
-        line-height: 24px;
+        line-height: 22px;
         direction: rtl;
 
         &::selection {

Style/_customScaleCalc.scss

@@ -7,7 +7,7 @@
 }
 
 body {
-  background: rgb(19, 20, 21);
+  background-color: rgb(27, 29, 31);
   color: rgb(237, 232, 232);
   height: 100vh;
   display: flex;
@@ -40,14 +40,15 @@ body {
 }
 
 .default-properties {
-  width: 2095px;
+  width: 100%;
   background-color: rgb(27, 29, 31);
 }
 
 .custom-scale-calc {
-  width: 140vh;
-  overflow: hidden;
-  position: absolute;
+  transform-origin: center;
+  position: relative;
+  top: 24vh;
+  width: 1000px;
 }
 
 @keyframes shake {
@@ -154,7 +155,7 @@ body {
   resize: none;
   color: white;
   font-family: "Vazirmatn";
-  line-height: 24px;
+  line-height: 22px;
   direction: rtl;
 }
 .input-section .input-list::-moz-selection, .input-section .output-list::-moz-selection, .output-section .input-list::-moz-selection, .output-section .output-list::-moz-selection {

Style/_input-output-sections.scss

@@ -8,13 +8,33 @@ const customScaleCalc = () => {
 
     if (pageWidth > 270) {
         if (pageHeight > pageWidth) {
-            console.log(pageWidth, pageHeight);
+            // console.log(pageWidth, pageHeight);
 
             customScaleDiv.classList.add("custom-scale-calc");
 
-            let scale = 1 - ((pageHeight / pageWidth) * 0.5) / (900 / 477);
+            // let scale = 1 - ((pageHeight / pageWidth) * 0.2) / (900 / 477);
 
-            customScaleDiv.style.transform = `scale(${scale}) rotate(90deg)`;
+            // 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);
         } else {
             customScaleDiv.classList.remove("custom-scale-calc");
             // customScaleDiv.style.transform = "";