From 4e33339b4f2ac0f37a843a012d800790d1bb8a4b Mon Sep 17 00:00:00 2001 From: jonathannnty <141669529+jonathannnty@users.noreply.github.com> Date: Mon, 12 Aug 2024 02:29:58 -0700 Subject: [PATCH] =?UTF-8?q?polishing=20receipt=20webpage!=20=F0=9F=98=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- source/css/receipt.css | 153 ++++++++++++++++++++++++----------------- source/receipt.html | 61 +++++++++++++++- 2 files changed, 147 insertions(+), 67 deletions(-) diff --git a/source/css/receipt.css b/source/css/receipt.css index 2c4f00c..e9b28cf 100644 --- a/source/css/receipt.css +++ b/source/css/receipt.css @@ -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; +} diff --git a/source/receipt.html b/source/receipt.html index c9ab29a..7fefa3c 100644 --- a/source/receipt.html +++ b/source/receipt.html @@ -5,6 +5,7 @@ + Go Go Grocery! @@ -18,8 +19,64 @@

Go Go Grocery

-

WIREFRAME PAGE 8

- +
+
+
+

Username's Day Grocery Run

+ +
+

Created Month, Day Year

+
+
    +
  • Grapes
    • +
  • Oreo
    • +
  • Chicken Breast
    • +
  • Penne Pasta
    • +
  • 1 Tomato
    • +
  • Bacon
    • +
  • Eggs
    • +
  • Milk
    • +
+
    +
  • $4.70
    • +
  • $5.98
    • +
  • $12.19
    • +
  • $1.18
    • +
  • $0.27
    • +
  • $3.44
    • +
  • $3.28
    • +
  • $3.78
    • +
+
+ walmart-logo + walmart-logo + walmart-logo + walmart-logo + walmart-logo + walmart-logo + walmart-logo + walmart-logo + walmart-logo + walmart-logo + walmart-logo + walmart-logo +
+
+
+
    +
  • Subtotal
    • +
  • Total
    • +
+
    +
  • $34.82
    • +
  • $36.13
    • +
+ +
+
+