fix chuck button display on mobile after adding record button

ccrma · Apr 26, 2024 · 6c83436 · 6c83436
1 parent c6eabac
commit 6c83436
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -238,9 +238,9 @@
           <div id="chuckBarLeft" class="flex justify-left items-center">
 
             <!-- WebChucK Button-->
-            <button id="webchuckButton" type="button" class="font-semibold bg-orange text-white mr-2 py-2 px-1 max-h-full w-40 md:w-56 2xl:w-64 rounded-md enabled:hover:bg-orange-400 transition-all overflow-hidden truncate disabled:opacity-50" disabled>Loading...</button>
+            <button id="webchuckButton" type="button" class="font-semibold bg-orange text-white mr-2 py-2 px-1 max-h-full w-40 md:w-48 2xl:w-64 rounded-md enabled:hover:bg-orange-400 transition-all overflow-hidden truncate disabled:opacity-50" disabled>Loading...</button>
             <!-- Chuck Buttons -->
-            <div class="flex h-full justify-start items-center" style="width: calc(100% - 6rem); min-width: 13rem;">
+            <div class="flex h-full justify-start items-center">
               <button id="micButton"      type="button" class="chuck-button" title="Enable Microphone" disabled>
                 <img src="img/mic.svg" alt="Microphone" class="h-11" draggable="false">
               </button>

diff --git a/src/components/recorder.ts b/src/components/recorder.ts
@@ -1,3 +1,15 @@
+//--------------------------------------------------------
+// title: Recorder
+// desc:  Recording audio from ChucK VM with a simple button
+//        - when no shreds, arm recorder waiting for addShred (play)
+//        - when shreds, start recording
+//        - when recording and no shreds, stop recording
+//        adapted from celeste betancur 220a recorder
+//
+// author: terry feng ([email protected])
+// date: April 2024
+//--------------------------------------------------------
+
 import Console from "./console";
 import ProjectSystem from "./fileExplorer/projectSystem";
 import VmMonitor from "./vmMonitor";

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -51,9 +51,17 @@
         grid-template-rows: 5fr 2px 5fr;
         grid-template-columns: 100%;
     }
-    #chuckBarLeft {
+    #chuck-bar {
         width: 100%;
     }
+    #chuckBarLeft {
+        /* 
+            @tzfeng
+            weird hack to make mobile look good
+            cut off the record button on mobile
+        */
+        width: calc(100% + 4rem);
+    }
     #chuckBarRight {
         display: none;
     }
@@ -154,6 +162,7 @@
 /* CHUCK BAR */
 #chuck-bar .chuck-button {
     @apply px-1 mr-2 disabled:opacity-50 focus:outline-none enabled:hover:filter enabled:hover:invert-20 transition duration-300;
+    min-width: 2.75rem; /* same height as chuck button */
 }
 
 /* FILE EXPLORER */