Merge pull request #22 from yaacov/css-tweaks

hide elements on small screens
yaacov · Oct 2, 2023 · c1b1a4e · c1b1a4e
2 parents d64844f + c9e63c4
commit c1b1a4e
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 18 deletions.
diff --git a/public/css/index.css b/public/css/index.css
@@ -37,10 +37,31 @@
     gap: 30px;
 }
 
+.memory-addr {
+    margin-top: 30px;
+    margin-bottom: 0;
+}
+
+.memory-value {
+    margin-top: 5px;
+}
+
 .compile-button {
     font-weight: bold;
 }
 
 .hex {
     color: #fffdfd;
-}
+}
+
+/* Default style: hide the element */
+.hidden-on-small {
+    display: none;
+}
+
+/* When screen width is 850 or more, show the element */
+@media (min-width: 850px) {
+    .hidden-on-small {
+        display: inherit;
+    }
+}
diff --git a/public/index.html b/public/index.html
@@ -13,7 +13,7 @@
 
         <card-component
                 class="input-card"
-                title="S.M.A.R.T Control and Inputs" width="5" height="2" id="input-card" 
+                title="Control and Inputs" width="5" height="2" id="input-card" 
                 href="https://github.com/yaacov/smart-tools"
                 hreflabel="https://github.com/yaacov/smart-tools">
             <div class="flex-container">
@@ -28,28 +28,28 @@
                 </div>
             </div>
 
-            <div class="flex-container">             
+            <div class="flex-container">         
                 <div class="group-margin">
-                    <p class="title-text">Memory Address</p>
-                    <led-switch-array width="8" value="0" class="address-set" id="address-set-array"></led-switch-array>
+                    <p class="title-text hidden-on-small">Memory Address</p>
+                    <led-switch-array width="8" value="0" class="address-set hidden-on-small" id="address-set-array"></led-switch-array>
                 </div>
 
                 <div class="group-margin">
-                    <p class="title-text">Memory Value</p>
-                    <led-switch-array width="8" value="0" class="memory-set" id="memory-set-array"></led-switch-array>
+                    <p class="title-text hidden-on-small">Memory Value</p>
+                    <led-switch-array width="8" value="0" class="memory-set hidden-on-small" id="memory-set-array"></led-switch-array>
                 </div>
 
                 <div class="group-margin">
-                    <p class="title-text">Set</p>
-                    <led-switch layout="horizontal" autoreset="true" value="false" color="red" class="memory-send" id="memory-set-switch" label="Set memory"></led-switch>
-                    <p>Address: <span id="address-value" class="hex">0x00</span></p>
-                    <p>Value: <span id="memory-value" class="hex">0x00</span></p>
+                    <p class="title-text hidden-on-small">Set Memory</p>
+                    <led-switch layout="horizontal" autoreset="true" value="false" color="red" class="memory-send hidden-on-small" id="memory-set-switch"></led-switch>
+                    <p class="memory-addr hidden-on-small">Addr: <span id="address-value" class="hex">0x00</span></p>
+                    <p class="memory-value hidden-on-small">Value: <span id="memory-value" class="hex">0x00</span></p>
                 </div>
             </div>
         </card-component>
 
         <card-component
-                class="vm-card" title="S.M.A.R.T Virtual Machine" width="3" height="28" id="vm-card"
+                class="vm-card" title="Virtual Machine" width="3" height="28" id="vm-card"
                 href="https://github.com/yaacov/smart-tools">
             <div class="flex-container">
                 <div class="group-margin">
@@ -69,7 +69,7 @@
 
                 <div class="group-margin">
                     <p class="title-text">Turbo</p>
-                    <led-switch layout="horizontal" value="true" color="green" class="turbo" id="turbo-switch"></led-switch>
+                    <led-switch layout="horizontal" value="false" color="green" class="turbo" id="turbo-switch"></led-switch>
                 </div>
             </div>
 
@@ -80,7 +80,7 @@
             <led-memory-table class="ledTable" color="red" id="memory-table"></led-memory-table>
         </card-component>
 
-        <card-component class="editor-card" title="S.M.A.R.T Assembly Code Editor" width="5" height="15" id="editor-card" href="https://github.com/yaacov/smart-tools">
+        <card-component class="editor-card" title="Assembly Code Editor" width="5" height="15" id="editor-card" href="https://github.com/yaacov/smart-tools">
             <div class="main-container">
                 <div class="editor-column">
                     <code-editor theme="new" id="code-editor"></code-editor>

diff --git a/public/js/app.js b/public/js/app.js
@@ -7,7 +7,7 @@ import compile from './src/compiler.mjs';
 // Virtual machine
 const memorySize = 256;
 const vm = new VM(memorySize);
-let runningStepTimeMs = 20;
+let runningStepTimeMs = 250;
 
 let runningSteps = 0;
 let runningInterval;

diff --git a/public/js/components/led-memory-table.js b/public/js/components/led-memory-table.js
@@ -36,6 +36,14 @@ class LedMemoryTable extends HTMLElement {
       .decimal {
         color: #D3D3D3;
       }
+      .hidden-on-small {
+        display: none;
+      }
+      @media (min-width: 850px) {
+        .hidden-on-small {
+              display: table-cell;
+        }
+      }
     `;
     this.shadowRoot.appendChild(this._style);
   }
@@ -123,9 +131,9 @@ class LedMemoryTable extends HTMLElement {
       <td><led-array color="red" width="1" value="${item.indicator ? '1' : '0'}"></led-array>
       <td><led-array color="green" width="8" value="${item.value}"></led-array></td>
       <td>${valueHex}</td>
-      <td class="decimal">${valueDecimal}</td>
-      <td class="label">${item.label || ''}</td>
-      ${item.opCode ? `<td>${item.opCode}</td>` : `<td class="decimal">${item.oprand || ''}</td>`}
+      <td class="decimal hidden-on-small">${valueDecimal}</td>
+      <td class="label hidden-on-small">${item.label || ''}</td>
+      ${item.opCode ? `<td class="hidden-on-small">${item.opCode}</td>` : `<td class="decimal hidden-on-small">${item.oprand || ''}</td>`}
     `;
   }
 }