Fixed layout issues

Author: mikecentola

src/webviews/apps/calc/calc.html

@@ -72,8 +72,8 @@ <h3>Chip Load</h3>
                     <section id="mrr" class="calculator">
                         <h3>Metal Removal</h3>
                         <vscode-divider role="separator"></vscode-divider>
-                        <vscode-text-field id="mrr-ap" placeholder="Axial DoC" size="6">A<sub>p</sub> - Axial Depth of Cut</vscode-text-field>
-                        <vscode-text-field id="mrr-ae" placeholder="Radial DoC" size="6">A<sub>e</sub> - Radial Depth of Cut</vscode-text-field>
+                        <vscode-text-field id="mrr-ap" placeholder="Axial DoC" size="6">A<sub>p</sub> - Axial DoC</vscode-text-field>
+                        <vscode-text-field id="mrr-ae" placeholder="Radial DoC" size="6">A<sub>e</sub> - Radial DoC</vscode-text-field>
                         <vscode-text-field id="mrr-fr" placeholder="Enter Feedrate" size="6">Feedrate</vscode-text-field>
                         <label class="results">Metal Removal</label><span id="mrr-results" class="results"></span>
                         <vscode-button id="mrr-calc-btn">Calculate</vscode-button>

src/webviews/apps/calc/calc.scss

@@ -4,6 +4,7 @@
 
 .container {
     display: flex;
+    justify-content: center;
     min-height: 100%;
     margin: 0;
     padding: 0;

src/webviews/apps/calc/calc.ts

@@ -134,10 +134,16 @@ export class CalcApp extends GWebviewApp {
         switch (this._machineType) {
             case MachineTypes.Mill:
                 {
+                    // Focus Speeds Tab
+                    const speedsTab = document.getElementById('tab-1') as HTMLElement;
+                    if (speedsTab) {
+                        speedsTab.click();
+                    }
+
                     // Hide Surface Finish Calculator
-                    const finishSection = document.getElementById('finish')?.parentElement as HTMLElement;
+                    const finishSection = document.getElementById('finish') as HTMLElement;
                     if (finishSection) {
-                        finishSection.style.display = 'none';
+                        finishSection.style.visibility = 'hidden';
                     }
 
                     const mrrTab = document.getElementById('tab-3') as HTMLElement;
@@ -169,14 +175,14 @@ export class CalcApp extends GWebviewApp {
                     // Update MRR Calculator
                     const mrrDepth = document.getElementById('mrr-ap') as HTMLElement;
                     if (mrrDepth) {
-                        mrrDepth.setAttribute('placeholder', 'Axial Depth of Cut');
-                        mrrDepth.innerHTML = 'A<sub>p</sub> - Axial Depth of Cut';
+                        mrrDepth.setAttribute('placeholder', 'Axial DoC');
+                        mrrDepth.innerHTML = 'A<sub>p</sub> - Axial DoC';
                     }
 
                     const mrrSpeed = document.getElementById('mrr-ae') as HTMLElement;
                     if (mrrSpeed) {
-                        mrrSpeed.setAttribute('placeholder', 'Radial Depth of Cut');
-                        mrrSpeed.innerHTML = 'A<sub>e</sub> - Radial Depth of Cut';
+                        mrrSpeed.setAttribute('placeholder', 'Radial DoC');
+                        mrrSpeed.innerHTML = 'A<sub>e</sub> - Radial DoC';
                     }
                 }
                 break;
@@ -220,14 +226,14 @@ export class CalcApp extends GWebviewApp {
 
                     const mrrSpeed = document.getElementById('mrr-ae') as HTMLElement;
                     if (mrrSpeed) {
-                        mrrSpeed.setAttribute('placeholder', 'Enter Cutting Speed');
+                        mrrSpeed.setAttribute('placeholder', `Enter ${this._units === Units.MM ? 'SMM' : 'SFM'}`);
                         mrrSpeed.innerHTML = 'Cutting Speed';
                     }
 
                     // Show Surface Finish Calculator
-                    const finishSection = document.getElementById('finish')?.parentElement as HTMLElement;
+                    const finishSection = document.getElementById('finish') as HTMLElement;
                     if (finishSection) {
-                        finishSection.style.display = '';
+                        finishSection.style.visibility = '';
                     }
 
                     const mrrTab = document.getElementById('tab-3') as HTMLElement;