Repos/new-moon-dessert-bar
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Finished checkout page and added a prototype sidebar

Browse Source
This commit is contained in:
CodeServer 2021-08-05 14:08:57 +01:00
parent 6f08764bc0
commit 8a59de3d6f
21 changed files with 650 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
footer.php
View File

@ -35,13 +35,3 @@
</div> </div>
</footer> </footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>-->
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="../bootstrap-5.0.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../style/style.js"></script>

4
index.php
View File

@ -304,8 +304,6 @@
</div> </div>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script> <?php include_once 'scripts.php' ?>
<script src="bootstrap-5.0.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="style/style.js"></script>
</body> </body>
</html> </html>

10
php/addingToCart.php
View File

@ -6,6 +6,7 @@ session_start();
$product_id = $_GET['product_id']; $product_id = $_GET['product_id'];
$product_name = $_GET['product_name']; $product_name = $_GET['product_name'];
$product_price = $_GET['product_price']; $product_price = $_GET['product_price'];
$product_img = $_GET['product_img'];
$quantity = (int)$_GET['quantity']; $quantity = (int)$_GET['quantity'];
@ -17,19 +18,12 @@ if(array_key_exists($product_id, $mycar)){
$mycar[$product_id]['buy_price'] += $product_price*$quantity; $mycar[$product_id]['buy_price'] += $product_price*$quantity;
} else { } else {
$mycar[$product_id] = array('buy_id'=>$product_id, 'buy_name'=>$product_name, 'buy_price'=>0, 'buy_num'=>$quantity); $mycar[$product_id] = array('buy_id'=>$product_id, 'buy_name'=>$product_name, 'buy_price'=>0, 'buy_img'=>$product_img, 'buy_num'=>$quantity);
$mycar[$product_id]['buy_price'] += $product_price*$quantity; $mycar[$product_id]['buy_price'] += $product_price*$quantity;
} }
if($_GET[clear]=="yes"){
$_SESSION['mycar']="";
}
$_SESSION['mycar'] = $mycar; $_SESSION['mycar'] = $mycar;
header('location: ../shopping/cart.php'); header('location: ../shopping/cart.php');

18
php/cart_delProduct.php Normal file
View File

@ -0,0 +1,18 @@
<?php
include 'connection.php';
$conn = connectMysql();
session_start();
$buy_id = $_GET['id'];
$mycar = $_SESSION['mycar'];
foreach ($mycar as $product) {
if($product['buy_id'] == $buy_id){
unset($mycar[$buy_id]);
}
}
$_SESSION['mycar'] = $mycar;
header('location: ../shopping/cart.php');
?>

4
scripts.php Normal file
View File

@ -0,0 +1,4 @@
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="../bootstrap-5.0.1-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../style/style.js"></script>

31
shopping/cart.php
View File

@ -52,20 +52,10 @@
<div class="col-sm-12" id="shopping_cart"> <div class="col-sm-12" id="shopping_cart">
<form action="checkout.php" method="get"> <form action="checkout.php" method="get">
<table class="cartTable"> <table class="cartTable">
<thead>
<!-- <tr style="margin:auto; border: 2px solid black;">
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
</tr> -->
</thead>
<tbody> <tbody>
<?php $totalprice = 0;?> <?php $totalprice = 0;?>
<?php foreach ($_SESSION['mycar'] as $product): ?> <?php foreach ($_SESSION['mycar'] as $product): ?>
<tr> <tr>
@ -73,30 +63,33 @@
<h3> <?=$product['buy_num']?> </h3> <h3> <?=$product['buy_num']?> </h3>
</td> </td>
<td class="cart_img">
<img src="../img/<?=$product['buy_img'];?>" style="width: 70px; padding:5px; border: 1px solid black;">
</td>
<td> <td>
<span> <?=$product['buy_name']?> </span> <span> <?=$product['buy_name']?> </span>
</td> </td>
<td class="cart_priceP"> <td class="cart_priceP">
<span> &dollar;<?=$product['buy_price']?> </span> <span> &dollar;<?=$product['buy_price']?> </span>
</td> </td>
<td class="cart_deleteP"> <td class="cart_deleteP">
<a href="cart_delProduct.php?id=<?php echo $product['buy_id'];?>">Delete</a></td> <a href="../php/cart_delProduct.php?id=<?php echo $product['buy_id'];?>">Delete</a></td>
</td> </td>
</tr> </tr>
<?php $totalprice += $product['buy_price']?> <?php $totalprice += $product['buy_price']?>
<?php endforeach; ?> <?php endforeach; ?>
</tbody> </tbody>
</table> </table>
<br> <br>
<div class="subtotal">
<span class="text" style="font-weight: 1em; font-family: cursive;">Subtotal: &dollar;<span><?= $totalprice ?></span></span>
</div>
<br> <br>
<div class="d-grid gap-2 col-lg-4 mx-auto"> <div class="d-grid gap-2 col-lg-4 mx-auto">
@ -111,9 +104,9 @@
</div> </div>
</div> </div>
<?php include '../footer.php' ?> <?php include_once '../footer.php' ?>
<?php include_once '../scripts.php' ?>
</body> </body>
</html> </html>

157
shopping/checkout.php
View File

@ -35,11 +35,69 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="sectionShopping"> <div class="sectionShopping">
<?php include 'shopping_headerNav.php' ?> <?php include 'shopping_headerNav.php' ?>
<h1>Checkout</h1>
<div class="row">
<div class="col-sm-12" id="shopping_cartTitle">
<?php
$totalprice = 0;
foreach ($_SESSION['mycar'] as $product):
$totalprice += $product['buy_price'];
endforeach;
?>
<h1>Comfirm Order</h1>
</div>
</div>
<div class="row checkoutProduct">
<div class="col-sm-12 customer-col">
<table class="checkoutTable">
<thead>
<tr class="tr_title">
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<?php $totalprice = 0;?>
<?php foreach ($_SESSION['mycar'] as $product): ?>
<tr>
<td>
<span> <?=$product['buy_name']?> </span>
</td>
<td id="td_num">
<span > <?=$product['buy_num']?> </span>
</td>
<td class="cart_priceP">
<span> &dollar;<?=$product['buy_price']?> </span>
</td>
</tr>
<?php $totalprice += $product['buy_price']?>
<?php endforeach; ?>
</tbody>
</table>
<br>
</div>
</div>
<div class="row customerInformation"> <div class="row customerInformation">
<div class="col"></div> <div class="col-sm-8"></div>
<div class="col-sm-4"> <div class="col-sm-4 customer-col">
<h2>Customer Information</h2>
<label>Full Name:</label> <label>Full Name:</label>
<label><?php echo $_SESSION['username']?></label> <label><?php echo $_SESSION['username']?></label>
<br> <br>
@ -51,82 +109,53 @@
<br> <br>
<label>Full Address:</label> <label>Full Address:</label>
<br> <br>
<label><?php echo $row["C_UNIT"]?>, <?php echo $row["C_ADDRESS"]?></label> <label><?php if ($row["C_UNIT"] !== '') { echo $row["C_UNIT"] ; echo '-'; }?><?php echo $row["C_ADDRESS"]?></label>
<br> <br>
<label><?php echo $row["C_CITY"]?>, <?php echo $row["C_ZIP"]?></label> <label><?php echo $row["C_CITY"]?>, <?php echo $row["C_ZIP"]?></label>
<br> <br>
<label><?php echo $row["C_COUNTRY"]?></label> <label><?php echo $row["C_COUNTRY"]?></label>
<br> <br>
</div> </div>
<div class="col"></div>
</div> </div>
<div class="row">
<div class="col-sm-12" id="shopping_cartTitle">
<?php
$totalprice = 0;
foreach ($_SESSION['mycar'] as $product):
$totalprice += $product['buy_price'];
endforeach;
?>
<h1>Total</h1> <h1>CA$<?php echo $totalprice?></h1>
<div class="row checkoutSubtotal">
<div class="col-sm-12 customer-col">
<span class="checkout_subtotalSpan" >Subtotal: &dollar;<span class="checkout_subtotalPrice"><?= $totalprice ?></span></span>
</div>
</div>
<div class="row checkoutComfirm">
<div class="col-sm-8"></div>
<div class="col-sm-4 customer-col">
<a class="btn btn-primary checkout_back_button" type="button" href="cart.php"> &#11178; Back To Cart</a>
<button class="btn btn-primary checkout_confirm_button" data-bs-toggle="modal" data-bs-target="#checkoutModal">Confirm</button>
</div> </div>
</div> </div>
<div class="row">
<div class="col-sm-12">
<table class="cartTable">
<thead>
<!-- <tr style="margin:auto; border: 2px solid black;">
<td>Product</td>
<td>Quantity</td>
<td>Price</td>
</tr> -->
</thead>
<tbody>
<?php $totalprice = 0;?>
<?php foreach ($_SESSION['mycar'] as $product): ?>
<tr>
<td class="cart_quantity">
<h3> <?=$product['buy_num']?> </h3>
</td>
<td>
<span> <?=$product['buy_name']?> </span>
</td>
<td class="cart_priceP">
<span> &dollar;<?=$product['buy_price']?> </span>
</td>
</tr>
<?php $totalprice += $product['buy_price']?>
<?php endforeach; ?>
</tbody>
</table>
<br>
<div class="subtotal">
<span class="text" style="font-weight: 1em; font-family: cursive;">Subtotal: &dollar;<span><?= $totalprice ?></span></span>
</div>
</div>
</div>
</div> </div>
<!-- Modal -->
<div class="modal fade" id="checkoutModal" tabindex="-1" aria-labelledby="checkoutLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-body">
<h1 class="checkMarkIcon"></h1>
<h1>Checkout Successful!</h1>
</div>
</div>
</div>
</div>
</div> </div>
<?php include '../footer.php' ?> <?php include_once '../footer.php' ?>
<?php include_once '../scripts.php' ?>
</body> </body>
</html> </html>

49
shopping/productDetails.php
View File

@ -43,18 +43,42 @@
<section class="shopping_productDetails"> <section class="shopping_productDetails">
<h1><?=$product['Product_Name']?></h1> <h1><?=$product['Product_Name']?></h1>
<form action="../php/addingToCart.php" method="get"> <form action="../php/addingToCart.php" method="get">
<div class="row">
<img src="../img/<?= $product['Product_Img'];?>" style="width: 300px; height: 100%; padding:10px; border: 1px solid black;"> <div class="col-sm-4">
<h2 style="font-size: 40px;text-transform: uppercase; "></h2> <img src="../img/<?=$product['Product_Img'];?>" style="width: 300px; height: 100%; padding:10px; border: 1px solid black;">
<h2>Price: &dollar;<?=$product['Product_Price']?></h3> </div>
<div class="col-sm-3"></div>
<h3>Quantity: <input type="number" name="quantity" value="1" min="1" max="20" placeholder="Quantity" required> <div class="col-sm-5 productDetail-col">
<div class="row">
<input type="submit" value="Add To Cart"></h3> <div class="col-sm-12">
<h2>Price: &dollar;<?=$product['Product_Price']?></h2>
<input type="hidden" name="product_id" value="<?=$product['Product_ID']?>"> </div>
<input type="hidden" name="product_name" value="<?=$product['Product_Name']?>"> </div>
<input type="hidden" name="product_price" value="<?=$product['Product_Price']?>"> <div class="row">
<div class="col-sm-4">
<h3>Quantity: </h3>
</div>
<div class="col-sm-8 quantity">
<input type="number" name="quantity" value="1" min="1" max="20" placeholder="Quantity" required>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<a class="btn btn-primary productDetail_back_button" type="button" href="shopping.php">Back To Shopping</a>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<input class="btn btn-primary productDetail_add_button" type="submit" value="Add To Cart">
</div>
</div>
</div>
</div>
<h2 style="font-size: 40px;text-transform: uppercase; "></h2>
<input type="hidden" name="product_id" value="<?=$product['Product_ID']?>">
<input type="hidden" name="product_name" value="<?=$product['Product_Name']?>">
<input type="hidden" name="product_price" value="<?=$product['Product_Price']?>">
<input type="hidden" name="product_img" value="<?=$product['Product_Img']?>">
</form> </form>
</section> </section>
@ -69,6 +93,7 @@
</div> </div>
<?php include_once '../footer.php'?> <?php include_once '../footer.php'?>
<?php include_once '../scripts.php' ?>
</body> </body>

199
shopping/shopping.php
View File

@ -25,73 +25,170 @@
crossorigin="anonymous" crossorigin="anonymous"
/> />
<title>New Moon Dessert Bar</title> <title>New Moon Dessert Bar</title>
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head> </head>
<body class="shopping_body"> <body class="shopping_body">
<div class="container-fluid"> <div class="wrapper_shopping">
<div class="container-fluid">
<div class="sectionShopping"> <div class="sectionShopping">
<?php include 'shopping_headerNav.php' ?> <?php include 'shopping_headerNav.php' ?>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12">
<h1> Shopping </h1> <h1> Shopping </h1>
<p>| · Click on the picture to add to the cart · |</p> <p>| · Click on the picture to add to the cart · |</p>
</div>
</div>
<div class="row">
<?php
$products = getAllProducts($conn);
foreach ($products as $product):
?>
<div class="col-sm-12 col-lg-6 col-xl-3">
<div class="my-img-class">
<a href="productDetails.php?<?=$product['Product_ID']?>">
<img class="imgItem" src="../img/<?= $product['Product_Img']; ?>" alt="<?=$product['Product_Img']?>">
</a>
<p class="shopping_productName"><?= $product['Product_Name']; ?></p>
<p class="shopping_productPrice">&dollar;<?= $product['Product_Price']; ?></p>
</div> </div>
</div> </div>
<?php endforeach; ?>
<div class="row">
<?php
$products = getAllProducts($conn);
foreach ($products as $product):
?>
<div class="col-sm-12 col-lg-6 col-xl-3">
<div class="my-img-class">
<a href="productDetails.php?<?=$product['Product_ID']?>">
<img class="imgItem" src="../img/<?= $product['Product_Img']; ?>" alt="<?=$product['Product_Img']?>">
</a>
<p class="shopping_productName"><?= $product['Product_Name']; ?></p>
<p class="shopping_productPrice">&dollar;<?= $product['Product_Price']; ?></p>
</div>
</div>
<?php endforeach; ?>
</div>
<div class="row">
<nav class="shopping_pageNav" aria-label="Page navigation">
<ul class="pagination justify-content-center">
<li class="page-item">.toggleClass
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">...</a></li>
<li class="page-item">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Next</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</li>
</ul>
</nav>
</div>
</div> </div>
<div class="row">
<nav class="shopping_pageNav" aria-label="Page navigation">
<ul class="pagination justify-content-center"> <div class="my-floating-btn active " id="shopping-my-floating-btn">
<li class="page-item"> <button type="button" class="btn btn-lg my-btn btn-floating" id="sidebarCollapse">
<a class="page-link" href="#" aria-label="Previous"> <i class="fa fa-shopping-cart"></i>
<span aria-hidden="true">&laquo;</span> </button>
</a>
</li>
<li class="page-item">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">...</a></li>
<li class="page-item">
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Next</a>
</li>
<li class="page-item">
<a class="page-link" href="#" aria-label="Next">
<span aria-hidden="true">&raquo;</span>
</a>
</li>
</li>
</ul>
</nav>
</div> </div>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Shopping Cart</h3>
</div>
<ul class="list-unstyled components">
<p></p>
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#">Home 1</a>
</li>
<li>
<a href="#">Home 2</a>
</li>
<li>
<a href="#">Home 3</a>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
<li>
<a href="#pageSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Pages</a>
<ul class="collapse list-unstyled" id="pageSubmenu">
<li>
<a href="#">Page 1</a>
</li>
<li>
<a href="#">Page 2</a>
</li>
<li>
<a href="#">Page 3</a>
</li>
</ul>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
<a href="https://bootstrapious.com/tutorial/files/sidebar.zip" class="download">Download source</a>
</li>
<li>
<a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
</li>
</ul>
</nav>
</div> </div>
</div> </div>
<?php include_once '../footer.php'?> <?php include_once '../footer.php'?>
<!-- jQuery CDN - Slim version (=without AJAX) -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- Popper.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<!-- Bootstrap JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
<?php include_once '../scripts.php' ?>
</body> </body>
</html> </html>

3
shopping/userInfo.php
View File

@ -108,7 +108,8 @@
</div> </div>
<?php include '../footer.php' ?> <?php include_once '../footer.php' ?>
<?php include_once '../scripts.php' ?>
</body> </body>
</html> </html>

1
style/layouts/_footer.sass
View File

@ -10,6 +10,7 @@
.shopping-footer .shopping-footer
background-color: grey background-color: grey
padding-left: 10% padding-left: 10%
margin-top: 2%
h1 h1
color: #fff color: #fff
font-size: 35px font-size: 35px

26
style/modules/_button.sass
View File

@ -21,6 +21,11 @@
a a
color: $button-color color: $button-color
text-decoration: none text-decoration: none
.my-floating-btn.active
display: block
#index-my-floating-btn
button button
float: right float: right
border-radius: 50% border-radius: 50%
@ -29,20 +34,29 @@
width: 100% width: 100%
position: fixed position: fixed
.my-floating-btn.active #shopping-my-floating-btn
display: block button
float: right
border-radius: 50%
margin-right: 20px
top: 90%
width: 100%
position: fixed
.cart_button_1
.cart_button_1, .checkout_back_button, .productDetail_back_button
color: OliveDrab color: OliveDrab
border-color: OliveDrab border-color: OliveDrab
background-color: transparent background-color: transparent
.cart_button_2 .cart_button_2, .checkout_confirm_button, .productDetail_add_button
// color: DarkGrey // color: DarkGrey
border-color: $button-border-color border-color: $button-border-color
background-color: OliveDrab background-color: OliveDrab
.cart_button_1:hover .cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover
border-color: $button-border-color border-color: $button-border-color
background-color: $button-border-color background-color: $button-border-color
.cart_button_2:hover .cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover
border-color: $button-border-color border-color: $button-border-color
background-color: $button-border-color background-color: $button-border-color

12
style/modules/_modal.sass
View File

@ -15,6 +15,17 @@
a a
text-decoration: none text-decoration: none
#checkoutModal
h1
text-align: center
.checkMarkIcon
text-align: center
color: green
font-size: 1200%
.checkMarkIcon:before
font-family: 'FontAwesome'
content: '\f058'
@media (max-width: 483px) @media (max-width: 483px)
#logInModal, #registerModal #logInModal, #registerModal
.mb-3 .mb-3
@ -27,3 +38,4 @@
width: 100%; width: 100%;
margin-left: 10% margin-left: 10%
margin-right: 10% margin-right: 10%

5
style/modules/shopping/_cart.sass
View File

@ -28,4 +28,9 @@
.cart_deleteP .cart_deleteP
text-align: right text-align: right
a
color: black
font-size: 1.3rem
font-family: cursive
text-decoration: none

43
style/modules/shopping/_checkout.sass Normal file
View File

@ -0,0 +1,43 @@
.sectionShopping
div.checkoutProduct, table.checkoutTable
width: 100%
height: 100%
text-align: justify
div.checkoutProduct:after, table.checkoutTable:after
content: ""
display: inline-block
overflow: hidden
width: 100%
div.checkoutProduct
table.checkoutTable .tr_title
font-family: $font-slabo
div.customerInformation
margin-top: 10px
text-align: left
div.customer-col
border: 1px solid grey
margin: 20px 0px
div.checkoutComfirm
div.customer-col
text-align: right
margin-bottom: 20px
div.checkoutSubtotal
div.customer-col
text-align: right
margin-bottom: 20px
span.checkout_subtotalPrice
font-size: 3.2rem
font-weight: bold
color: oliveDrab

3
style/modules/shopping/_navbar_shopping.sass
View File

@ -35,10 +35,11 @@
// #span-shopping-username:active // #span-shopping-username:active
// outline: none // outline: none
#btn-shopping-logout #btn-shopping-logout
position: absolute position: fixed
right: 1rem right: 1rem
top: 1rem top: 1rem
#span-shopping-username:before #span-shopping-username:before
font-family: 'FontAwesome' font-family: 'FontAwesome'
content: '\f2be' content: '\f2be'

22
style/modules/shopping/_sectionShopping.sass
View File

@ -1,7 +1,6 @@
.sectionShopping .sectionShopping
div.customerInformation
text-align: left
background-color: $index-background-color background-color: $index-background-color
.row .row
padding-left: 20% padding-left: 20%
@ -31,6 +30,25 @@
text-align: center text-align: center
color: OliveDrab color: OliveDrab
.shopping_productDetails
div.row
padding: 0
.productDetail-col
div.row:first-of-type
h2
color: OliveDrab
margin-bottom: 15%
div.row:nth-child(2)
margin-bottom: 15%
div.row:last-of-type
margin-top: 2%
div.quantity
display: inline-block
text-align: right
input
height: 100%
a.productDetail_back_button,input.productDetail_add_button
width: 100%
.shopping_productPrice .shopping_productPrice
color: OliveDrab color: OliveDrab

2
style/modules/shopping/_shopping-dir.sass
View File

@ -2,3 +2,5 @@
@import "navbar_shopping" @import "navbar_shopping"
@import "footer" @import "footer"
@import "cart" @import "cart"
@import "checkout"
@import "shopping"

78
style/modules/shopping/_shopping.sass Normal file
View File

@ -0,0 +1,78 @@
.wrapper_shopping
div.container-fluid
display: flex
align-items: stretch
a, a:hover, a:focus
color: OliveDrab
text-decoration: none
transition: all 0.3s
// #sidebarCollapse
// z-index: 999
div.sectionShopping nav.shopping_pageNav a.page-link
color: $navbar-text-color
nav#sidebar
min-width: 250px
max-width: 250px
transition: all 0.3s
background-color: white
z-index: -1
ul.components
padding: 20px 0
border-bottom: 1px solid #47748b
div.sidebar-header
padding: 20px
background-color: DimGrey
div.sidebar-header h3
color: white
ul li a
padding: 10px
font-size: 1.1em
display: block
ul li a:hover
color: mediumSeaGreen
background-color: Gainsboro
ul li.active > a, a[aria-expanded="true"]
color: #fff
background: Gainsboro
a[data-toggle="collapse"]
position: relative
ul ul a
font-size: 0.9em !important
padding-left: 30px !important
ul.CTAs
padding: 20px
ul.CTAs a
text-align: center
font-size: 0.9em
display: block
border-radius: 5px
margin-bottom: 5px
a.download
background: #fff
color: #7386D5
a.article, a.article:hover
background: #6d7fcc
color: #fff
nav#sidebar.active
margin-right: -250px

156
style/style.css
View File

@ -126,6 +126,7 @@ video {
.shopping-footer { .shopping-footer {
background-color: grey; background-color: grey;
padding-left: 10%; padding-left: 10%;
margin-top: 2%;
} }
.shopping-footer h1 { .shopping-footer h1 {
@ -181,9 +182,6 @@ video {
.my-floating-btn { .my-floating-btn {
display: none; display: none;
top: 90%;
width: 100%;
position: fixed;
} }
.my-floating-btn a { .my-floating-btn a {
@ -191,33 +189,51 @@ video {
text-decoration: none; text-decoration: none;
} }
.my-floating-btn button { .my-floating-btn.active {
display: block;
}
#index-my-floating-btn {
top: 90%;
width: 100%;
position: fixed;
}
#index-my-floating-btn button {
float: right; float: right;
border-radius: 50%; border-radius: 50%;
margin-right: 20px; margin-right: 20px;
} }
.my-floating-btn.active { #shopping-my-floating-btn {
display: block; top: 90%;
width: 100%;
position: fixed;
} }
.cart_button_1 { #shopping-my-floating-btn button {
float: right;
border-radius: 50%;
margin-right: 20px;
}
.cart_button_1, .checkout_back_button, .productDetail_back_button {
color: OliveDrab; color: OliveDrab;
border-color: OliveDrab; border-color: OliveDrab;
background-color: transparent; background-color: transparent;
} }
.cart_button_2 { .cart_button_2, .checkout_confirm_button, .productDetail_add_button {
border-color: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.3);
background-color: OliveDrab; background-color: OliveDrab;
} }
.cart_button_1:hover { .cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover {
border-color: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
} }
.cart_button_2:hover { .cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover {
border-color: rgba(255, 255, 255, 0.3); border-color: rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
} }
@ -244,6 +260,21 @@ video {
text-decoration: none; text-decoration: none;
} }
#checkoutModal h1 {
text-align: center;
}
#checkoutModal .checkMarkIcon {
text-align: center;
color: green;
font-size: 1200%;
}
#checkoutModal .checkMarkIcon:before {
font-family: 'FontAwesome';
content: '\f058';
}
@media (max-width: 483px) { @media (max-width: 483px) {
#logInModal .mb-3, #registerModal .mb-3 { #logInModal .mb-3, #registerModal .mb-3 {
width: 90%; width: 90%;
@ -388,10 +419,6 @@ video {
background-color: #edeae8; background-color: #edeae8;
} }
.sectionShopping div.customerInformation {
text-align: left;
}
.sectionShopping .row { .sectionShopping .row {
padding-left: 20%; padding-left: 20%;
padding-right: 20%; padding-right: 20%;
@ -429,6 +456,39 @@ video {
color: OliveDrab; color: OliveDrab;
} }
.sectionShopping .shopping_productDetails div.row {
padding: 0;
}
.sectionShopping .shopping_productDetails .productDetail-col div.row:first-of-type {
margin-bottom: 15%;
}
.sectionShopping .shopping_productDetails .productDetail-col div.row:first-of-type h2 {
color: OliveDrab;
}
.sectionShopping .shopping_productDetails .productDetail-col div.row:nth-child(2) {
margin-bottom: 15%;
}
.sectionShopping .shopping_productDetails .productDetail-col div.row:last-of-type {
margin-top: 2%;
}
.sectionShopping .shopping_productDetails .productDetail-col div.quantity {
display: inline-block;
text-align: right;
}
.sectionShopping .shopping_productDetails .productDetail-col div.quantity input {
height: 100%;
}
.sectionShopping .shopping_productDetails .productDetail-col a.productDetail_back_button, .sectionShopping .shopping_productDetails .productDetail-col input.productDetail_add_button {
width: 100%;
}
.sectionShopping .shopping_productPrice { .sectionShopping .shopping_productPrice {
color: OliveDrab; color: OliveDrab;
} }
@ -480,7 +540,7 @@ video {
} }
.shopping_headerNav #btn-shopping-logout { .shopping_headerNav #btn-shopping-logout {
position: absolute; position: fixed;
right: 1rem; right: 1rem;
top: 1rem; top: 1rem;
} }
@ -529,4 +589,70 @@ video {
.sectionShopping #shopping_cart .cart_deleteP { .sectionShopping #shopping_cart .cart_deleteP {
text-align: right; text-align: right;
} }
.sectionShopping #shopping_cart .cart_deleteP a {
color: black;
font-size: 1.3rem;
font-family: cursive;
text-decoration: none;
}
.sectionShopping div.checkoutProduct, .sectionShopping table.checkoutTable {
width: 100%;
height: 100%;
text-align: justify;
}
.sectionShopping div.checkoutProduct:after, .sectionShopping table.checkoutTable:after {
content: "";
display: inline-block;
overflow: hidden;
width: 100%;
}
.sectionShopping div.checkoutProduct table.checkoutTable .tr_title {
font-family: "Slabo";
}
.sectionShopping div.customerInformation {
margin-top: 10px;
text-align: left;
}
.sectionShopping div.customerInformation div.customer-col {
border: 1px solid grey;
margin: 20px 0px;
}
.sectionShopping div.checkoutComfirm div.customer-col {
text-align: right;
margin-bottom: 20px;
}
.sectionShopping div.checkoutSubtotal div.customer-col {
text-align: right;
margin-bottom: 20px;
}
.sectionShopping div.checkoutSubtotal div.customer-col span.checkout_subtotalPrice {
font-size: 3.2rem;
font-weight: bold;
color: oliveDrab;
}
.wrapper_shopping div.container-fluid {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.wrapper_shopping div.container-fluid a, .wrapper_shopping div.container-fluid a:hover, .wrapper_shopping div.container-fluid a:focus {
color: OliveDrab;
text-decoration: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
/*# sourceMappingURL=style.css.map */ /*# sourceMappingURL=style.css.map */

6
style/style.css.map
View File

File diff suppressed because one or more lines are too long