From 83195b3070d196676b580b4494423c856edbda46 Mon Sep 17 00:00:00 2001
From: Josh Aragon <josharagon99@gmail.com>
Date: Tue, 2 Mar 2021 16:23:14 -0700
Subject: [PATCH 1/2] Center drop down form on mobile

---
 src/css/style.scss | 58 +++++++++++++++++++++++++++++++---------------
 src/index.html     |  4 ++--
 2 files changed, 41 insertions(+), 21 deletions(-)

diff --git a/src/css/style.scss b/src/css/style.scss
index d984a82..96994e0 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -98,7 +98,7 @@ h2{
   justify-content: space-between;
 }
 
-.main-column-hydration {
+.main-column-hydration, .main-column-activity, .main-column-sleep{
   align-items: center;
   padding: 0px 15px;
   display: flex;
@@ -106,32 +106,31 @@ h2{
   height: 100%
 }
 
-.main-column-activity {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
+// .main-column-activity {
+//   align-items: center;
+//   display: flex;
+//   flex-direction: column;
+//   height: 100%;
+// }
 
-.main-column-sleep {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  padding: 0px 15px;
-}
+// .main-column-sleep {
+//   align-items: center;
+//   display: flex;
+//   flex-direction: column;
+//   height: 100%;
+//   padding: 0px 15px;
+// }
 
 .infoContainer-cardContainer-card-horizontal {
   width: 100%;
   background-color: white;
-  // border: 1px solid black;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
 }
 
-.horizontalCard-activity-container {
+.horizontalCard-activity-container, .horizontalCard-sleep-container {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
@@ -140,11 +139,8 @@ h2{
 
 .infoContainer-cardContainer-card-vertical {
   width: 100%;
-  // background-color: white;
-  // border: 1px solid black;
   display: flex;
   flex-direction: row;
-  // margin: 1%;
 }
 
 .card-today-hydration {
@@ -516,6 +512,7 @@ h2{
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
+  text-align: -webkit-center;
 }
 
 .dropdown-content a {
@@ -537,4 +534,27 @@ nav {
 
 .dropdown-menus {
   padding-left: 35px;
+}
+
+
+@media only screen and (max-width: 900px) {
+  nav{
+    grid-template-rows: repeat(2, 1fr);
+    justify-content: center;
+    grid-template-columns: unset;
+  }
+  .body-main-infoContainter {
+    flex-direction: column;
+  }
+  .main-column-hydration, .main-column-activity, .main-column-sleep {
+    padding: 0px;
+  }
+  .card-history-activity, .card-history-hydration, .card-history-sleep {
+    width: -webkit-fill-available;
+  }
+.dropdown-content {
+  right: -111%;
+  width: 360px;
+  padding: 10px;
+}
 }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index ba1908f..958ac0a 100644
--- a/src/index.html
+++ b/src/index.html
@@ -28,11 +28,11 @@
         <p class="sidebar-header-userInfo" id="stepGoalCard"></p>
         <p class="sidebar-header-userInfo" id="avStepGoalCard">
         <p>
+          <button>ADD NEW DAY DATA</button>
       </div>
     </div>
     </div>
     <h1 id="headerText">Activity Tracker</h1>
-
   </nav>
   <section class="main">
     <section class="body-main-infoContainter">
@@ -215,7 +215,7 @@ <h2 class="sidebar-header-name" id="sidebarName">FRIENDLY STEP CHALLENGE!</h2>
       </section>
     </section>
   </section>
-      <form class="userInputField" action="index.html" method="post">
+      <form class="userInputField hidden" action="index.html" method="post">
         <label for="hoursSleptEntry">Time Slept: </label>
         <input class="userInput" id="hoursSleptEntry" type="text" placeholder="hours">
         <label for="sleepQualityEntry">Sleep Quality: </label>

From 77bd59507b6b8c406cd7028dae24467066f3a539 Mon Sep 17 00:00:00 2001
From: Josh Aragon <josharagon99@gmail.com>
Date: Tue, 2 Mar 2021 20:43:27 -0700
Subject: [PATCH 2/2] Refactor some css and make page mobile friendly

---
 src/css/style.scss | 101 +++++++++++----------------------------------
 src/index.html     |  73 ++++++++++++++------------------
 2 files changed, 57 insertions(+), 117 deletions(-)

diff --git a/src/css/style.scss b/src/css/style.scss
index 96994e0..b99ec73 100644
--- a/src/css/style.scss
+++ b/src/css/style.scss
@@ -106,21 +106,6 @@ h2{
   height: 100%
 }
 
-// .main-column-activity {
-//   align-items: center;
-//   display: flex;
-//   flex-direction: column;
-//   height: 100%;
-// }
-
-// .main-column-sleep {
-//   align-items: center;
-//   display: flex;
-//   flex-direction: column;
-//   height: 100%;
-//   padding: 0px 15px;
-// }
-
 .infoContainer-cardContainer-card-horizontal {
   width: 100%;
   background-color: white;
@@ -143,9 +128,8 @@ h2{
   flex-direction: row;
 }
 
-.card-today-hydration {
+.card-today {
   text-align: center;
-  background-color: #5BC8AC;
   height: auto;
   font-size: 1.5em;
   margin: .5em;
@@ -154,66 +138,38 @@ h2{
   flex-direction: column;
   justify-content: space-between;
   width: 80%;
+  &-hydration {
+    @extend .card-today;
+    background-color: #5BC8AC;
+  }
+  &-activity {
+    @extend .card-today;
+    background-color: #DFE166;
+    width: 40%;
+  }
+  &-sleep {
+    @extend .card-today;
+    background-color: #EC96A4;
+  }
 }
 
-.card-today-sleep {
-  text-align: center;
-  background-color: #EC96A4;
-  height: auto;
-  font-size: 1.5em;
-  margin: .5em;
-  font-family: sans-serif;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 80%;
-}
-
-.card-today-activity {
-  text-align: center;
-  background-color: #DFE166;
-  height: auto;
-  font-size: 1.5em;
-  margin: .3em;
-  font-family: sans-serif;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  width: 40%;
-}
-
-.card-history-hydration {
-  text-align: center;
-  background-color: #ffffff;
-  font-size: 1em;
-  // margin: .5em;
-  font-family: sans-serif;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  // width: 50%;
-}
-
-.card-history-sleep {
-  text-align: center;
-  font-size: 1em;
-  margin: .5em;
-  font-family: sans-serif;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-}
-
-.card-history-activity {
+.card-history {
   text-align: center;
   font-size: 1em;
-  margin: .5em;
   font-family: sans-serif;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  // width: 50%;
-  height: 93%;
+  &-hydration {
+    @extend .card-history;
+  }
+  &-activity {
+    @extend .card-history;
+    height: 93%;
+  }
+  &-sleep {
+    @extend .card-history;
+  }
 }
 
 .number {
@@ -481,17 +437,10 @@ h2{
   color: red;
 }
 
-
 .hidden {
   display: none;
 }
 
-
-.visibility {
-  visibility: hidden;
-}
-
-
 .dropbtn {
   background-color: rgba(255, 255, 255, 0);
   color: #ddd;
diff --git a/src/index.html b/src/index.html
index 958ac0a..e831ebd 100644
--- a/src/index.html
+++ b/src/index.html
@@ -14,24 +14,24 @@
 <body>
   <nav>
     <div class="dropdown-menus">
-    <div class="dropdown">
-      <img src="./images/The Rock.jpg" class="sidebar-header-userImage dropbbtn" alt="User Photo" </img>
-      <div class="dropdown-content">
-        <p class="sidebar-header-userInfo" id="userName"></p>
-        <div class="sidebar-header-line"></div>
-        <p class="sidebar-header-userInfo" id="userAddress"></p>
-        <div class="sidebar-header-line"></div>
-        <p class="sidebar-header-userInfo" id="userEmail"></p>
-        <div class="sidebar-header-line"></div>
-        <p class="sidebar-header-userInfo" id="userStridelength"></p>
-        <div class="sidebar-header-line"></div>
-        <p class="sidebar-header-userInfo" id="stepGoalCard"></p>
-        <p class="sidebar-header-userInfo" id="avStepGoalCard">
-        <p>
-          <button>ADD NEW DAY DATA</button>
+      <div class="dropdown">
+        <img src="./images/The Rock.jpg" class="sidebar-header-userImage dropbbtn" alt="User Photo" </img>
+        <div class="dropdown-content">
+          <p class="sidebar-header-userInfo" id="userName"></p>
+          <div class="sidebar-header-line"></div>
+          <p class="sidebar-header-userInfo" id="userAddress"></p>
+          <div class="sidebar-header-line"></div>
+          <p class="sidebar-header-userInfo" id="userEmail"></p>
+          <div class="sidebar-header-line"></div>
+          <p class="sidebar-header-userInfo" id="userStridelength"></p>
+          <div class="sidebar-header-line"></div>
+          <p class="sidebar-header-userInfo" id="stepGoalCard"></p>
+          <p class="sidebar-header-userInfo" id="avStepGoalCard">
+          <p>
+            <button>ADD NEW DAY DATA</button>
+        </div>
       </div>
     </div>
-    </div>
     <h1 id="headerText">Activity Tracker</h1>
   </nav>
   <section class="main">
@@ -57,20 +57,11 @@ <h2 class="middle" id="chart-num">0<span>oz</span></h2>
               <label id="avg-oz-label" for="avg-oz">Average</label>
             </div>
           </div>
-        </section>
-        <section class="infoContainer-cardContainer-card-vertical">
           <div class="card-history-hydration">
             <p class="thisWeek">Water intake this week:</p>
             <div class="sidebar-header-line"></div>
             <div id="chartDiv-numOunces" style="width: 100%; height: 400px;"></div>
           </div>
-          <div class="card-history-hydration hidden">
-            <p class="historicalWeek"></p>
-            <div class="sidebar-header-line"></div>
-            <ul class="card-vertical-list" id="hydrationEarlierWeek">
-              <!-- Hydration week list goes here -->
-            </ul>
-          </div>
         </section>
       </section>
       <section class="main-column-activity">
@@ -215,22 +206,22 @@ <h2 class="sidebar-header-name" id="sidebarName">FRIENDLY STEP CHALLENGE!</h2>
       </section>
     </section>
   </section>
-      <form class="userInputField hidden" action="index.html" method="post">
-        <label for="hoursSleptEntry">Time Slept: </label>
-        <input class="userInput" id="hoursSleptEntry" type="text" placeholder="hours">
-        <label for="sleepQualityEntry">Sleep Quality: </label>
-        <input class="userInput" id="sleepQualityEntry" type="text" placeholder="rating">
-        <label for="numOuncesEntry">Amount drank: </label>
-        <input class="userInput" id="numOuncesEntry" type="text" placeholder="in ounces">
-        <label for="numStepsEntry">Number of Steps: </label>
-        <input class="userInput" id="numStepsEntry" type="text" placeholder="555">
-        <label for="minutesActiveEntry">Minutes Active: </label>
-        <input class="userInput" id="minutesActiveEntry" type="text" placeholder="132">
-        <label for="flightsOfStairsEntry">Flights of Stairs: </label>
-        <input class="userInput" id="flightsOfStairsEntry" type="text" placeholder="Enter total stair flights climbed">
-        <button class="submit-button" type="button" name="button" style="font-size:14px">SUBMIT ACTIVITIES UPDATE</button>
-        <p class="user-input" id="updatingDisplay"></p>
-      </form>
+  <form class="userInputField hidden" action="index.html" method="post">
+    <label for="hoursSleptEntry">Time Slept: </label>
+    <input class="userInput" id="hoursSleptEntry" type="text" placeholder="hours">
+    <label for="sleepQualityEntry">Sleep Quality: </label>
+    <input class="userInput" id="sleepQualityEntry" type="text" placeholder="rating">
+    <label for="numOuncesEntry">Amount drank: </label>
+    <input class="userInput" id="numOuncesEntry" type="text" placeholder="in ounces">
+    <label for="numStepsEntry">Number of Steps: </label>
+    <input class="userInput" id="numStepsEntry" type="text" placeholder="555">
+    <label for="minutesActiveEntry">Minutes Active: </label>
+    <input class="userInput" id="minutesActiveEntry" type="text" placeholder="132">
+    <label for="flightsOfStairsEntry">Flights of Stairs: </label>
+    <input class="userInput" id="flightsOfStairsEntry" type="text" placeholder="Enter total stair flights climbed">
+    <button class="submit-button" type="button" name="button" style="font-size:14px">SUBMIT ACTIVITIES UPDATE</button>
+    <p class="user-input" id="updatingDisplay"></p>
+  </form>
   </section>
 </body>