Skip to content

Commit

Permalink
Merge pull request #66 from edwin-chalmers/feat/tom_viewChanges
Browse files Browse the repository at this point in the history 
Add HTML structure for new views
  • Loading branch information
@edwin-chalmers
edwin-chalmers authored Feb 22, 2024
2 parents 754f0aa + 9fb5b6a commit 8f7d8a2
Show file tree
Hide file tree
Showing 2 changed files with 96 additions and 64 deletions.
15 changes: 9 additions & 6 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,14 @@
<a class="sleepButton" href="#sleepCard">Sleep</a>
<a class="accountButton" href="#accountCard">Account</a>
</nav>
<main class="mainContainer" id="top">
<main class="mainContainer condensed" id="top">
<article>
<img class="full" src="./images/fitlit-logo.png" id="logo" alt="FitLit Logo">
<h1 class="welcome-message" id="welcomeMessage">welcome back (person.name)</h1>
</article>
<section class="steps-main info-card" id="stepCard">
<section class="sortContainer"></section>
<section class="sizeableContainer">
<section class="steps-main info-card draggable" draggable="true" id="stepCard">
<div class="section-text">
<section class="iconSection" id="stepCardHeader">
<p class="icon">&#128099;</p>
Expand All @@ -47,7 +49,7 @@ <h3>Activity Data</h3>
<canvas id="stepChart"></canvas>
</div>
</section>
<section class="water-main info-card" id="waterCard">
<section class="water-main info-card draggable" draggable="true" id="waterCard">
<div class="section-text">
<section class="iconSection" id="waterCardHeader">
<p class="icon">&#128167;</p>
Expand All @@ -59,8 +61,8 @@ <h3>Hydration Data</h3>
<canvas id="wklyHydChart"></canvas>
</div>
</section>
<section class="sleep-main info-card" id="sleepCard">
<div>
<section class="sleep-main info-card draggable" draggable="true" id="sleepCard">
<div class="section-text">
<section class="iconSection" id="sleepCardHeader">
<p class="icon">&#128719;</p>
<h3>Sleep Data</h3>
Expand All @@ -76,7 +78,7 @@ <h3>Sleep Data</h3>
<canvas id="avgSleepChart"></canvas>
</div>
</section>
<section class="account-main info-card" id="accountCard">
<section class="account-main info-card draggable" draggable="true" id="accountCard">
<div class="section-text">
<section class="iconSection" id="accoundCardHeader">
<p class="icon">&#128100;</p>
Expand All @@ -97,6 +99,7 @@ <h3>Account Details</h3>
<span><p>Friends:</p><h3 id="friends">friends</h3></span> -->
</div>
</section>
</section>
</main>
<!-- Do not include the scripts.js file here - it is done automatically by the webpack server -->
<script src="bundle.js"></script>
Expand Down
145 changes: 87 additions & 58 deletions src/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,54 @@ body, html {
background-size: 100% 100%;
}
main {
.sortContainer{
display: none;
}
display: flex;
flex-direction: column;
align-items: center;
article {
display: flex;
flex-wrap: nowrap;
align-items: center;
flex-direction: column;
padding-top: 10em;
height: 100vh;
img {
z-index: 0;
position: fixed;
}
}
.sizeableContainer {
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
}
.info-card {
border-radius: 5%;
width: 75%;
height: 75%;
display: flex;
box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
overflow: scroll;
flex-direction: column;
justify-content: flex-start;
max-width: 75%;
align-items: center;
padding: 10px;
background: transparent;

.section-text {
width: 75%;
height: 100vh;
padding: 6%;
margin: 10px;
display: flex;
justify-content: center;
}
}
}

input {
Expand Down Expand Up @@ -70,44 +115,6 @@ nav a:hover {
text-shadow: 0px 0px 11px rgb(0, 0, 0);
}

.info-card {
width: 75%;
height: 100vh;
padding: 6%;
margin: 10px;
display: flex;
justify-content: center;
}

.info-card div {
border-radius: 5%;
width: 75%;
height: 75%;
display: flex;
box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
overflow: hidden;
flex-direction: column;
justify-content: space-around;
max-width: 75%;
align-items: center;
padding: 10px;
background: transparent;
}

article {
display: flex;
flex-wrap: nowrap;
align-items: center;
flex-direction: column;
padding-top: 10em;
height: 100vh;
}

img {
z-index: 0;
position: fixed;
}

.underline {
text-decoration: underline;
}
Expand Down Expand Up @@ -202,19 +209,23 @@ canvas {
}

.condensed {
position: absolute;
display: flex;
flex-direction: row;
height: 78%;
width: 90%;
align-items: center;
left: 72px;
top: 157px;
padding: 30px;
border: black inset thin;
justify-content: center;
flex-wrap: wrap;
align-content: center;
justify-content: flex-end;
align-items: flex-start;
.sortContainer{
display: flex;
width: 35%;
height: 100vh;
margin-top: 90px;
margin-right: 150px;
box-shadow: inset #0000008a -1px -2px 20px 14px;
border-radius: 25px;
}
.sizeableContainer {
width: 25%;
margin-top: 90px;
}
article{
padding: 0px;
position: fixed;
Expand All @@ -229,23 +240,41 @@ canvas {
}
}
.info-card{
width: 40%;
height: 40%;
padding: 0;
margin: 0;
font-size: 12px;
overflow: scroll;
position: absolute;
border-radius: 5%;
width: 75%;
height: 250px;
display: flex;
box-shadow: rgba(0, 0, 0, 0.631372549) 12px 12px 20px 4px;
max-width: 75%;
align-items: center;
background: transparent;
flex-direction: column;
justify-content: flex-start;
margin: 10px;
padding: 0px;
.section-text{
width: 75%;
height: 100%;
padding: 0px;
margin: 5px;
display: flex;
justify-content: center;
flex-wrap: wrap;
flex-direction: row;
align-content: flex-start;
font-size: 10px;
}
.iconSection{
height: 28px;
z-index: 10;
font-size: 10px;
margin-bottom: 5px;
justify-content: center;
&:hover{
cursor: grab;
}
}
canvas {
height: 170px !important;
width: 500px !important;
}
p{
font-size: 10px;
Expand Down

0 comments on commit 8f7d8a2

Please sign in to comment.