Mobile adjustments

brandondong · Aug 11, 2024 · 4dab548 · 4dab548
1 parent 4d16aa9
commit 4dab548
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 19 deletions.
diff --git a/src/CompiledMachinePageBody.css b/src/CompiledMachinePageBody.css
@@ -44,13 +44,13 @@ p+p {
   grid-row: 5;
 }
 
-[id*="TAPE_VALUE_PREFIX"]::before,
-p::before {
+[id*="TAPE_VALUE_PREFIX"]::after,
+p::after {
   content: "0";
 }
 
-[id*="TAPE_VALUE_PREFIX"]:checked::before,
-:checked+*+*+*+*+*+p::before {
+[id*="TAPE_VALUE_PREFIX"]:checked::after,
+:checked+*+*+*+*+*+p::after {
   content: "1";
 }
 
@@ -77,7 +77,7 @@ p::before {
   visibility: hidden;
 }
 
-[id*="HEAD_POS_PREFIX"]::before {
+[id*="HEAD_POS_PREFIX"]::after {
   content: "▲";
 }
 
@@ -101,11 +101,11 @@ label:hover {
   background-color: #16a34a;
 }
 
-label::before {
+label::after {
   content: "Execute Step";
 }
 
-[for="STARTED_ID"]::before {
+[for="STARTED_ID"]::after {
   content: "Start";
 }
 
@@ -125,17 +125,18 @@ p+i+i {
   display: block;
   font-style: normal;
   grid-row: 1;
-  grid-column: 1 / 15;
-}
-
-i::before {
-  content: "State: ";
+  grid-column: 1 / 16;
 }
 
 p+i+i {
   grid-row: 4;
 }
 
+i::after {
+  position: sticky;
+  left: 0px;
+}
+
 /* Show the start label initially. */
 #STARTED_ID:not(:checked)~[for="STARTED_ID"] {
   display: block;
@@ -153,8 +154,8 @@ p+i+i {
 }
 
 /* Use the second state label to show a help message before starting. */
-#STARTED_ID:not(:checked)~p+i+i::before {
-  content: "Set the initial tape input by clicking on the squares above.";
+#STARTED_ID:not(:checked)~p+i+i::after {
+  content: "Set the initial tape input by clicking on the squares above." !important;
 }
 
 /* Fade the top elements after starting and the bottom is the destination. */

diff --git a/src/CompiledMachinePageBody.jsx b/src/CompiledMachinePageBody.jsx
@@ -154,7 +154,7 @@ function getBufferPrefix(buffer) {
 export default function toHTML(statesConfig, numTapeCells) {
   return '<!DOCTYPE html>\n<html>\n<head>\n<meta charset="utf-8"/>\n<style>\n' +
     getCompiledMachinePageStyles(statesConfig) +
-    '\n</style>\n<title>CSS Turing Machine</title>\n</head>\n<body>\n' +
+    '\n</style>\n<meta name="viewport" content="width=device-width, initial-scale=1.0"/>\n<title>CSS Turing Machine</title>\n</head>\n<body>\n' +
     getCompiledMachinePageBody(statesConfig, numTapeCells) +
     '\n</body>\n</html>';
 }
@@ -199,13 +199,14 @@ function addBufferSwitchLabelStyling(sb, statesConfig) {
 function addStateDisplayStyling(sb, statesConfig) {
   const stateNames = getOrderedStateNames(statesConfig);
   stateNames.forEach((stateName, idx) => {
+    const stateNameString = `State: ${stateName}`;
     const b0StateInputId = getInputId(0, STATE_PREFIX, idx);
     const b1StateInputId = getInputId(1, STATE_PREFIX, idx);
 
     const displayStateNameTop = select(id(b0StateInputId).checked(), '~', 'p', '+', 'i::after')
-      .content(stateName);
-    const displayStateNameBottom = select(id(STARTED_ID).checked(), '~', id(b1StateInputId).checked(), '~', 'p', '+', 'i', '+', 'i::after')
-      .content(stateName);
+      .content(stateNameString);
+    const displayStateNameBottom = select(id(b1StateInputId).checked(), '~', 'p', '+', 'i', '+', 'i::after')
+      .content(stateNameString);
 
     sb.push(displayStateNameTop);
     sb.push(displayStateNameBottom);

diff --git a/src/TuringMachineForm.css b/src/TuringMachineForm.css
@@ -9,7 +9,7 @@
 }
 
 .tape-cell-input {
-  width: 3em;
+  width: 5.5ch;
 }
 
 .top-spacing {