Improved responsiveness on small screens

* better responsiveness and alignment especially on narrower screens
* removed rounded borders for drum pads and main card

drum-machine/public/index.html

@@ -36,5 +36,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
   </body>
 </html>

drum-machine/src/App.js

@@ -123,28 +123,22 @@ class App extends React.Component {
   }
 
   render() {
-    const drumPadRows = this.state.drumPadKeys.map((row, rowIndex) => {
+    const drumPadKeys = [];
-      return (
+    this.state.drumPadKeys.forEach((drumPad, index) => {
-        <div
+      drumPadKeys.push(
-          className="row justify-content-center"
-          id={`drum-pads-row-${rowIndex}`}
-        >
-          {row.map((note) => {
-            return (
         <DrumPad
-                drumPadKey={note.key}
+          drumPadKey={drumPad.key}
-                isKeyPressed={this.state.latestKeyPressed === note.key}
+          isKeyPressed={this.state.latestKeyPressed === drumPad.key}
-                noteName={this.state.bank ? note.altName : note.name}
+          noteName={this.state.bank ? drumPad.altName : drumPad.name}
-                audioSrc={this.state.bank ? note.altAudioSrc : note.audioSrc}
+          audioSrc={this.state.bank ? drumPad.altAudioSrc : drumPad.audioSrc}
           power={this.state.power}
           volume={this.state.volume}
-                colSize={Math.trunc(12 / row.length || 1)}
           displayDrumPadPress={this.displayDrumPadPress}
         />
       );
-          })}
+      if (index % 3 === 2) {
-        </div>
+        drumPadKeys.push(<div className="w-100"></div>);
-      );
+      }
     });
     return (
       <div
@@ -152,14 +146,14 @@ class App extends React.Component {
         id="drum-machine"
       >
         <div className="container">
-          <div className="card">
-            <div className="card-body text-black">
           <div
-                className="row justify-content-center justify-content-md-left"
+            className="row p-4 justify-content-center justify-content-md-left bg-white text-black"
             id="drum-pads-and-controls"
           >
-                <div className="col-md-7 col-12">{drumPadRows}</div>
+            <div className="col-md-8 col-12">
-                <div className="col-md-3 col-sm-6 col-8">
+              <div className="row pe-auto pe-md-3">{drumPadKeys}</div>
+            </div>
+            <div className="col-md-4 col-sm-6 col-8">
               <div className="row h-100">
                 <div className="col-12 mt-2 mb-0 my-md-0">
                   <p className="m-0">Power</p>
@@ -193,8 +187,6 @@ class App extends React.Component {
               </div>
             </div>
           </div>
-            </div>
-          </div>
           <footer className="mt-2">
             <p>
               <a
@@ -237,14 +229,20 @@ class DrumPad extends React.Component {
 
   render() {
     return (
+      <div className="col-4 p-1">
         <button
           id={this.props.drumPadKey}
-        className={`drum-pad btn col-${this.props.colSize} m-1 custom-el-color`}
+          className={`drum-pad w-100 h-100 btn custom-el-color rounded-0`}
-        style={{ height: 80, width: 100, fontWeight: "bold" }}
+          style={{
+            paddingTop: "20%",
+            paddingBottom: "20%",
+            fontWeight: "bold",
+          }}
           onClick={this.handleClick}
         >
           {this.props.drumPadKey}
         </button>
+      </div>
     );
   }
 }

drum-machine/src/App.scss

@@ -10,9 +10,9 @@ $font-family-base: quicksand, roboto !default;
 @import "~bootstrap/scss/bootstrap";
 
 :root {
-  --custom-color: #666;
+  --custom-color: #27ae60;
-  --custom-darker-color: #555;
+  --custom-darker-color: darken(#27ae60, 10%);
-  --custom-super-light-color: #eee;
+  --custom-super-light-color: fade-out(#27ae60, 0.9);
 }
 
 $CustomColor: var(--custom-color);
@@ -55,3 +55,17 @@ $CustomSuperLightColor: var(--custom-super-light-color);
   color: black;
   border: 1px solid $CustomColor;
 }
+
+/*@media (min-width: 576px) {
+  .drum-pad {
+    width: 100px;
+    height: 80px;
+  }
+}
+
+@media (max-width: 576px) {
+  .drum-pad {
+    width: 70px;
+    height: 56px;
+  }
+}*/

drum-machine/src/drumPadKeys.js

@@ -1,5 +1,4 @@
 export const drumPadKeys = [
-  [
   {
     key: "Q",
     name: "Heater 1",
@@ -21,8 +20,6 @@ export const drumPadKeys = [
     audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3",
     altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3",
   },
-  ],
-  [
   {
     key: "A",
     name: "Heater 4",
@@ -45,8 +42,6 @@ export const drumPadKeys = [
     audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3",
     altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3",
   },
-  ],
-  [
   {
     key: "Z",
     name: "Kick n' Hat",
@@ -60,8 +55,7 @@ export const drumPadKeys = [
     name: "Kick",
     altName: "Side Stick",
     audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3",
-      altAudioSrc:
+    altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3",
-        "https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3",
   },
   {
     key: "C",
@@ -70,5 +64,4 @@ export const drumPadKeys = [
     audioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3",
     altAudioSrc: "https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3",
   },
-  ],
 ];