Skip to content

Commit

Permalink
polishing receipt webpage! 😌
Browse files Browse the repository at this point in the history
  • Loading branch information
jonathannnty committed Aug 12, 2024
1 parent dd3b1c2 commit 4e33339
Show file tree
Hide file tree
Showing 2 changed files with 147 additions and 67 deletions.
153 changes: 88 additions & 65 deletions source/css/receipt.css
Original file line number Diff line number Diff line change
@@ -1,87 +1,110 @@
#display {
background-color: #F3F3F3;
border-radius: 10px;
padding: 1em;
margin: 1em 2em;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: auto;
height: 100vh;
overflow-y: auto;
.display {
background-color: #f3e9ce;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
overflow-y: auto;
border-radius: 1em;
padding: 1.5em 1.25em;
margin: 1em 2em;
height: auto;
}

#display h1 {
align-self: start;
padding-bottom: 0;
margin-bottom: 0;
padding-left: 0.5em;
white-space: nowrap;
button,
#pencil {
background-color: aqua;
/* background-image: url("./assets/images/pencil-icon.png"); */
background: none;
border: none;
height: 25px;
width: 21px;
padding: 0em;
align-self: center;
}

#display h2 {
align-self: start;
padding: 0em 0.5em;
margin: 0.5em;
font-weight: 400;
font-size: 1em;
#title-icon {
display: flex;
align-items: flex-end;
height: 35px;
width: auto;
}

#listandimage {
display: flex;
flex-direction: column;
#user-details {
display: flex;
flex-direction: column;
align-items: flex-start;
}

#listandimg {
display: flex;
flex-direction: row;
justify-content: space-between;
align-self: center;
width: 90vw;
height: 95vh;
#user-details h1,
h2 {
white-space: nowrap;
align-self: start;
margin: 0;
padding: 0.2em 0.5em 0em;
}

#list ul {
padding: 1em;
margin: 0;
text-align: left;
list-style-type: none;
font-size: large;
white-space: nowrap;
#user-details h2 {
padding: 0em 0.5em;
margin: 0.5em;
font-weight: 400;
font-size: 1em;
}

#list #items {
line-height: 2.5em;
font-weight: 600;
#user-details ul {
text-align: left;
list-style-type: none;
font-size: 1.5em;
white-space: nowrap;
padding: 1em;
margin: 0;
line-height: 2.5em;
font-weight: 600;
height: 100%;
}

#list #prices {
flex-grow: 0.5;
text-align: right;
line-height: 2.5em;
font-weight: 400;
padding-left: 8em;
.layout {
display: flex;
flex-direction: row;
justify-content: space-between;
align-self: center;
width: 90vw;
height: auto;
}

#listandimg div {
display: flex;
flex-wrap: wrap;
flex-direction: row;
overflow: hidden;
justify-content: center;
align-items: center;
gap: 10px;
#user-details .price {
flex-shrink: 1;
text-align: right;
line-height: 2.5em;
font-weight: 400;
padding-left: 5em;
}

#listandimg #store {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
.img {
flex: 1 1 5em;
max-width: 100%;
height: auto;
max-height: 13em;
object-fit: contain;
display: block;
margin: 0.5em 0em;
}

#list {
display: flex;
flex-direction: row;
.right-col {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: normal;
align-content: normal;
justify-content: normal;
/* margin-bottom: 10em; */
max-width: 50vw;
max-height: 27.5em;
overflow: scroll;
}

#subtotal-total {
display: flex;
flex-direction: row;
justify-items: flex-start;
}
61 changes: 59 additions & 2 deletions source/receipt.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewpoint" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/receipt.css">
<title>Go Go Grocery!</title>
</head>

Expand All @@ -18,8 +19,64 @@ <h1>Go Go Grocery</h1>
</header>

<main>
<h1>WIREFRAME PAGE 8</h1>
<!--CODE FOR THE PRODUCT LIST - item | item image | description/nutrition fact-->
<div class="display">
<div id="user-details">
<div id="title-icon">
<h1>Username's Day Grocery Run</h1>
<!-- <button type="button">
<img id="pencil" src="./assets/images/pencil-icon.png" alt="edit-list-name">
</button> -->
</div>
<h2>Created Month, Day Year</h2>
<div class="layout">
<ul>
<li>Grapes</li>
<li>Oreo</li>
<li>Chicken Breast</li>
<li>Penne Pasta</li>
<li>1 Tomato</li>
<li>Bacon</li>
<li>Eggs</li>
<li>Milk</li>
</ul>
<ul class="price">
<li>$4.70</li>
<li>$5.98</li>
<li>$12.19</li>
<li>$1.18</li>
<li>$0.27</li>
<li>$3.44</li>
<li>$3.28</li>
<li>$3.78</li>
</ul>
<div class="right-col">
<img class="img" src="./assets/images/amazon-icon.png" alt="walmart-logo">
<img class="img" src="./assets/images/walmart-icon.png" alt="walmart-logo">
<img class="img" src="./assets/images/costco-icon.png" alt="walmart-logo">
<img class="img" src="./assets/images/grocery-outlet-icon.png" alt="walmart-logo">
<img class="img" src="./assets/images/traderjoes-icon.png" alt="walmart-logo">
<img class="img" src="./assets/images/ralphs-icon.png" alt="walmart-logo">
<img class="img" src="./assets/images/target-icon.png" alt="walmart-logo">
<img class="img" src="./assets/images/walmart-icon.png" alt="walmart-logo">
<img class="img" src="./assets/images/walmart-icon.png" alt="walmart-logo">
<img class="img" src="./assets/images/walmart-icon.png" alt="walmart-logo">
<img class="img" src="./assets/images/walmart-icon.png" alt="walmart-logo">
<img class="img" src="./assets/images/walmart-icon.png" alt="walmart-logo">
</div>
</div>
<div class="layout">
<ul>
<li>Subtotal</li>
<li>Total</li>
</ul>
<ul class="price">
<li>$34.82</li>
<li>$36.13</li>
</ul>

</div>
</div>
</div>
</main>
</body>

Expand Down

0 comments on commit 4e33339

Please sign in to comment.