In-Class exercise: Responsive Design

1. We'll be using the following GitHub project:
   • GitHub React project: https://github.com/nrhodes-hmc/cs124sp22-exercises
   • branch: 15-responsive-design-starter
   1. If you haven't yet already cloned that project, follow the instructions.
   2. If you have already cloned that project:
      1. Pull the latest changes (git pull from terminal, or Git/Pull... menu from WebStorm).
      2. Checkout the specified branch above
2. Update the project to specify that it depends on the react-responsive package.
   • If using WebStorm:
     1. Edit package.json and modify the scripts object to add install-dependencies:

        "scripts": {
          "start": "react-scripts start",
          "build": "react-scripts build",
          "test": "react-scripts test",
          "eject": "react-scripts eject",
          "install-dependencies": "npm install react-responsive"
        },
        

     2. Right-click on package.json, and select "Show npm scripts"
     3. Double-click on install-dependencies in npm pane
   • Otherwise, in terminal, run npm install react-responsive
3. The application you're working on is like the People app, but is read-only. Try it out.

   Notice that it requires horizontal scrolling as the screen becomes narrow.

4. Take a look at the generated HTML in the Chrome developer tools console. Notice that it uses a fairly simple table.
5. Modify so that the table resizes as the window resizes:
   1. Add the tag that's necessary to enable responsive design.

      Within the head of index.html, add:

      <meta name="viewport" content="width=device-width, initial-scale=1" />
      

   2. In People.css, adjust the width of the table to be 100%.
   3. Now try. Notice that as you make the screen narrow, the rows become quite narrow and hard-to-read.
6. Add some shading to alternate rows of the table (in People.css):

   Hint: use nth-child(odd) in css.

7. Make it so that when the width of the window is 600 pixels or less, the cells in each row are laid out vertically rather than horizontally:
   1. Add a media query that is active when the width is 600 pixels or less and contains the following CSS rule:

      /* Force table to not be like tables anymore */
      table, thead, tbody, th, td, tr {
          display: block;
      }
      

   2. Add a call to useMediaQuery in People.js to ensure that the header row isn't rendered if the width is 600 pixels or less.
8. Although we are showing each person's attribute vertically, we've lost the labels of which is which. Add labels to the left:
   1. Reserve space at the left by adding the following CSS rule to the media query:

      td {
          position: relative;
          padding-left: XX%;  /* set appropriate percentage here */
      }
      

      Make sure to set the value for padding-left to reserve enough space for the labels.

   2. Use the before selector to add some text before each cell:

      td:nth-of-type(1):before { content: "Name"; }
      

      Add similar labels for Email and Phone.

   3. Make sure the labels are at the left of each row with the following CSS rule:

      td:before {
          position: absolute;
          top: Xpx;  /* set amount for top padding */
          left: Xpx; /* set amount for left padding */
      }
      

      Make sure to set the values for top and left to set the location of the labels.

      Also make sure that the labels are smaller and bolded.

9. Challenge: When you print from this application, have the header say People rather than People (#/# selected).