polishing receipt webpage + buttons!

acmucsd-projects · Aug 12, 2024 · 78954ea · 78954ea
1 parent 4e33339
commit 78954ea
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 16 deletions.
diff --git a/source/css/receipt.css b/source/css/receipt.css
@@ -11,10 +11,7 @@
   height: auto;
 }
 
-button,
-#pencil {
-  background-color: aqua;
-  /* background-image: url("./assets/images/pencil-icon.png"); */
+.pencil {
   background: none;
   border: none;
   height: 25px;
@@ -47,20 +44,22 @@ h2 {
 #user-details h2 {
   padding: 0em 0.5em;
   margin: 0.5em;
+  width: auto;
   font-weight: 400;
   font-size: 1em;
 }
 
 #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-size: 1.5em;
   font-weight: 600;
   height: 100%;
+  width: 5em;
 }
 
 .layout {
@@ -97,14 +96,55 @@ h2 {
   align-items: normal;
   align-content: normal;
   justify-content: normal;
-  /* margin-bottom: 10em; */
   max-width: 50vw;
   max-height: 27.5em;
   overflow: scroll;
 }
 
-#subtotal-total {
+#share-print-back {
   display: flex;
-  flex-direction: row;
-  justify-items: flex-start;
+  flex-direction: column;
+  flex-grow: 0.75;
+  width: 27.5em;
+  height: auto;
+  flex-wrap: nowrap;
+}
+
+.share-print-back-text {
+  background-color: #7c9e57;
+  border: none;
+  border-radius: 10em;
+  flex: 1 1 5em;
+  width: 50vw;
+  max-width: 50vw;
+  max-height: 3em;
+  margin: 0.5em 0em;
+  font: optional;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.share-print-back-text:focus:not(:focus-visible):not(.focus-visible) {
+  box-shadow: none;
+  outline: none;
+}
+
+.share-print-back-text:hover {
+  background-color: #719150;
+}
+
+.share-print-back-text:focus {
+  box-shadow: rgb(102, 132, 72) 0 0 3px;
+  outline: none;
+}
+
+.share-print-back-text:disabled {
+  border-color: rgba(27, 31, 35, 0.1);
+  color: rgba(255, 255, 255, 0.8);
+  cursor: default;
+}
+
+.share-print-back-text:active {
+  background-color: rgb(102, 132, 72);
+  box-shadow: rgba(20, 70, 32, 0.2) 0 1px 0 inset;
 }
diff --git a/source/receipt.html b/source/receipt.html
@@ -23,14 +23,14 @@ <h1>Go Go Grocery</h1>
                 <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> -->
+                        <button class="pencil" type="button">
+                            <img class="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>
+                        <ul id="item-list">
+                            <li>Green Grapes </li>
                             <li>Oreo</li>
                             <li>Chicken Breast</li>
                             <li>Penne Pasta</li>
@@ -57,7 +57,7 @@ <h2>Created Month, Day Year</h2>
                             <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/wholefoods-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">
@@ -73,7 +73,12 @@ <h2>Created Month, Day Year</h2>
                             <li>$34.82</li>
                             <li>$36.13</li>
                         </ul>
-
+                        <div class="right-col" id="share-print-back">
+                            <button class="share-print-back-text">Not Finished?</button>
+                            <button class="share-print-back-text">Share List</button>
+                            <button class="share-print-back-text">Print List</button>
+                        </div>
+
                     </div>
                 </div>
             </div>