Skip to content

Commit

Permalink
Merge pull request #65 from josharagon/feature/responsiveness
Browse files Browse the repository at this point in the history 
Feature/responsiveness
  • Loading branch information
@PaigeVannelli
PaigeVannelli authored Mar 3, 2021
2 parents 0e968f1 + 21030f5 commit 8c55787
Show file tree
Hide file tree
Showing 2 changed files with 67 additions and 106 deletions.
133 changes: 51 additions & 82 deletions src/css/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,40 +98,24 @@ 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;
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;
}

.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;
Expand All @@ -140,29 +124,12 @@ h2{

.infoContainer-cardContainer-card-vertical {
width: 100%;
// background-color: white;
// border: 1px solid black;
display: flex;
flex-direction: row;
// margin: 1%;
}

.card-today-hydration {
text-align: center;
background-color: #5BC8AC;
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-sleep {
.card-today {
text-align: center;
background-color: #EC96A4;
height: auto;
font-size: 1.5em;
margin: .5em;
Expand All @@ -171,53 +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-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 {
Expand Down Expand Up @@ -555,17 +507,10 @@ h2{
color: red;
}


.hidden {
display: none;
}


.visibility {
visibility: hidden;
}


.dropbtn {
background-color: rgba(255, 255, 255, 0);
color: #ddd;
Expand All @@ -586,6 +531,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 {
Expand All @@ -607,4 +553,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;
}
}
40 changes: 16 additions & 24 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,23 +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>
<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">
Expand All @@ -56,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">
Expand Down

0 comments on commit 8c55787

Please sign in to comment.