Html css tweaks (#53)

- button and menu size - compiler options in table - position of run and reset - adding missing units - compiler options button placement
gbdev · Sep 19, 2024 · f81d613 · f81d613
1 parent b59c2ec
commit f81d613
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 23 deletions.
diff --git a/css/style.css b/css/style.css
@@ -53,7 +53,7 @@ textarea {
 button {
   border: 1px solid #555;
   border-radius: 4px;
-  padding: 2px 8px;
+  padding: 4px 16px;
   margin: 2px;
   background-color: var(--background);
   color: var(--color);
@@ -133,6 +133,20 @@ td {
   border: 1px solid var(--border-color);
   background: var(--background);
 }
+
+.noborder table {
+  width: 100%;
+}
+.noborder table,
+.noborder td {
+  border: 0px;
+  padding: 4px;
+}
+
+.noborder .fill {
+  width: 100%;
+}
+
 body {
   margin: 0;
 }
@@ -151,8 +165,10 @@ canvas {
 .menubar li {
   display: block;
   float: left;
-  border: 1px solid var(--background-alt);
-  padding: 0px 15px;
+  border-top: 1px solid var(--background-alt);
+  border-right: 1px solid var(--background-alt);
+  border-left: 1px solid var(--background-alt);
+  padding: 4px 16px;
   position: relative;
   background-color: var(--background);
   cursor: pointer;
@@ -169,6 +185,9 @@ canvas {
 .menubar li ul li {
   width: 100%;
 }
+.menubar li ul li:last-child {
+  border-bottom: 1px solid var(--background-alt);
+}
 .menubar ul li:hover {
   background-color: var(--background-alt);
 }
@@ -184,7 +203,7 @@ canvas {
 .filelist li {
   overflow: auto;
   background: var(--background);
-  padding: 1px;
+  padding: 4px 8px;
   cursor: pointer;
   user-select: none;
 }
@@ -247,7 +266,7 @@ canvas {
 .container {
   display: grid;
   grid-template-columns: 200px auto 520px;
-  grid-template-rows: 21px auto 20%;
+  grid-template-rows: 24px auto 20%;
   grid-gap: 0;
   height: 100%;
 }
@@ -291,34 +310,34 @@ canvas {
 }
 
 .emulator_screen_container {
-  width: 512;
-  height: 512;
+  width: 512px;
+  height: 512px;
 }
 .emulator_canvas_screen {
-  width: 480;
+  width: 480px;
 }
 .emulator_vram_screen {
-  width: 512;
+  width: 512px;
 }
 
 @media only screen and (max-height: 600px) {
   .emulator_screen_container {
-    width: 256;
-    height: 256;
+    width: 256px;
+    height: 256px;
   }
   .emulator_canvas_screen {
-    width: 240;
+    width: 240px;
   }
   .emulator_vram_screen {
-    width: 256;
+    width: 256px;
   }
 }
 
 @media only screen and (max-width: 600px) {
   .container {
     display: grid;
     grid-template-columns: auto;
-    grid-template-rows: 22px 600px auto 100px 300px;
+    grid-template-rows: 24px 600px auto 100px 300px;
     grid-gap: 0;
   }
   .menubar {

diff --git a/index.html b/index.html
@@ -147,11 +147,11 @@
               <button id="download_rom">Download</button>
             </td>
             <td>
-              <button id="cpu_single_step">step</button><button id="cpu_frame_step">frame</button
-              ><input id="cpu_run_check" type="checkbox" />run
+              <button id="cpu_single_step">step</button>
+              <button id="cpu_frame_step">frame</button>
             </td>
+            <td><input id="cpu_run_check" type="checkbox" />run</td>
             <td><button id="cpu_reset">Reset</button></td>
-            <td></td>
           </tr>
           <tr>
             <td class="right">PC:</td>
@@ -309,12 +309,35 @@
               for="settings_mode_compiler"
               >Compiler</label
             >
-            <div>
-              <p>Additional options for</p>
-              <p>RGBASM: <input id="copmpiler_settings_asm" /></p>
-              <p>RGBLINK: <input id="copmpiler_settings_link" /></p>
-              <p>RGBFIX: <input id="copmpiler_settings_fix" /></p>
-              <p><button id="copmpiler_settings_set">Set</button></p>
+            <div class="noborder">
+              <table>
+                <tr>
+                  <td colspan="3">Additional options for</td>
+                </tr>
+                <tr>
+                  <td>&nbsp;</td>
+                  <td class="fill">&nbsp;</td>
+                  <td>&nbsp;</td>
+                </tr>
+                <tr>
+                  <td>RGBASM:</td>
+                  <td colspan="2"><input class="fill" id="copmpiler_settings_asm" /></td>
+                </tr>
+                <tr>
+                  <td>RGBLINK:</td>
+                  <td colspan="2"><input class="fill" id="copmpiler_settings_link" /></td>
+                </tr>
+                <tr>
+                  <td>RGBFIX:</td>
+                  <td colspan="2"><input class="fill" id="copmpiler_settings_fix" /></td>
+                </tr>
+                <tr>
+                  <td colspan="2"></td>
+                  <td>
+                    <button id="copmpiler_settings_set">Set</button>
+                  </td>
+                </tr>
+              </table>
             </div>
           </div>
         </div>