Layout prices as simple table

DataONEorg · Feb 11, 2022 · 3fe5873 · 3fe5873
1 parent 0f12590
commit 3fe5873
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 4 deletions.
diff --git a/app/purser/css/purser.css b/app/purser/css/purser.css
@@ -44,3 +44,17 @@ button {
     display: none;
     transition: all 0.5s;
   }
+
+  section#ptable {
+    display: table;
+    width: 30%;
+    margin-bottom: 2rem;
+  }
+
+  section#ptable > * {
+    display: table-row;
+  }
+
+  section#ptable .col {
+    display: table-cell;
+  }
diff --git a/app/purser/hosted-form.html b/app/purser/hosted-form.html
@@ -15,10 +15,34 @@ <h1>Payment</h1>
 
         <div class="product-select" id="products">
             <p>Select products for payment:</p>
-            <input type="checkbox" id="dataoneplus" name="DataONEPlus">
-            <label for="DataONEPlus">DataONE Plus</label>
-            <input type="checkbox" id="hostedrepo" name="HostedRepo">
-            <label for="HostedRepo">Hosted Repository</label>
+            <section id="ptable">
+                <header>
+                  <div class="col"></div>
+                  <div class="col">Price</div>
+                </header>
+                <div class="row">
+                  <div class="col">            
+                    <input type="checkbox" id="dataoneplus" name="DataONEPlus">
+                    <label for="DataONEPlus">DataONE Plus</label>
+                    </div>
+                    <div class="col">$575.04</div>
+                </div>
+                <div class="row">
+                    <div class="col">            
+                        <input type="checkbox" id="hostedrepo" name="HostedRepo">
+                        <label for="HostedRepo">Hosted Repository</label>        
+                    </div>
+                    <div class="col">$12,999.96</div>
+                </div>
+                <div class="row">
+                    <div class="col">            
+                        <input type="checkbox" id="hastorage" name="HAStorage">
+                        <label for="HAStorage">HA Storage (1 TB)</label>        
+                    </div>
+                    <div class="col">$150.00</div>
+                </div>
+            </section>
+
             <button id="checkout"><span>Checkout</span></button>
             <script type="text/javascript" src="js/payment.js"></script>
         </div>

diff --git a/app/purser/js/payment.js b/app/purser/js/payment.js
@@ -23,6 +23,9 @@ function calc_total() {
     if (document.getElementById('dataoneplus').checked) {
         total += prices().dataoneplus;
     }
+    if (document.getElementById('hastorage').checked) {
+        total += prices().hastorage;
+    }
     return(total);
 }