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

Improved sidebar but login modal is not working

Browse Source
This commit is contained in:
CodeServer 2021-08-05 15:13:25 +01:00
parent 8a59de3d6f
commit dd2b80206a
10 changed files with 209 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
shopping/cart.php
View File

@ -53,8 +53,6 @@
<form action="checkout.php" method="get">
<table class="cartTable">
<tbody>
<?php $totalprice = 0;?>
<?php foreach ($_SESSION['mycar'] as $product): ?>

90
shopping/shopping.php
View File

@ -26,9 +26,6 @@
/>
<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>
<body class="shopping_body">
@ -68,7 +65,7 @@
<div class="row">
<nav class="shopping_pageNav" aria-label="Page navigation">
<ul class="pagination justify-content-center" >
<li class="page-item">.toggleClass
<li class="page-item">
<a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span>
</a>
@ -96,24 +93,81 @@
<div class="my-floating-btn active " id="shopping-my-floating-btn">
<button type="button" class="btn btn-lg my-btn btn-floating" id="sidebarCollapse">
<button type="button" class="btn btn-lg my-btn btn-floating" id="sidebarCollapse" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCart" aria-controls="offcanvasRight">
<i class="fa fa-shopping-cart"></i>
</button>
</div>
<!-- <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCart" aria-controls="offcanvasCart">Toggle right offcanvas</button> -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasCart" aria-labelledby="offcanvasCartLabel">
<div class="offcanvas-header">
<h5 id="offcanvasRightLabel">Offcanvas right</h5>
<h5 id="offcanvasCartLabel">Shopping Cart</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
...
<div class="row">
<div class="col-sm-12 shopping_cart">
<form action="checkout.php" method="get">
<table class="cartTable">
<tbody>
<?php $totalprice = 0;?>
<?php foreach ($_SESSION['mycar'] as $product): ?>
<tr>
<td class="cart_quantity">
<h3> <?=$product['buy_num']?> </h3>
</td>
<td class="cart_img">
<img src="../img/<?=$product['buy_img'];?>" style="width: 70px; padding:5px; border: 1px solid black;">
</td>
<td>
<span> <?=$product['buy_name']?> </span>
</td>
<td class="cart_priceP">
<span> &dollar;<?=$product['buy_price']?> </span>
</td>
<td class="cart_deleteP">
<a href="../php/cart_delProduct.php?id=<?php echo $product['buy_id'];?>">Delete</a></td>
</td>
</tr>
<?php $totalprice += $product['buy_price']?>
<?php endforeach; ?>
</tbody>
</table>
<br>
<br>
<div class="d-grid gap-2 col-lg-12 mx-auto">
<div class="row">
<div class="col-sm-6 back-col">
<a class="btn btn-primary back_button" type="button" href="shopping.php"> &#10094; Continue Shopping</a>
</div>
<div class="col-sm-6 forward-col">
<input class="btn btn-primary forward_button" type="submit" value="Go To Checkout" name="placeorder">
</div>
</div>
</div>
<?php $products = getProducts($_SERVER["QUERY_STRING"],$conn); ?>
</form>
</div>
</div>
</div>
</div>
<!-- Sidebar -->
<nav id="sidebar">
<!-- <nav id="sidebar">
<div class="sidebar-header">
<h3>Shopping Cart</h3>
</div>
@ -167,26 +221,10 @@
<a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
</li>
</ul>
</nav>
</nav> -->
</div>
</div>
<?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>

2
style/_variables.sass
View File

@ -14,3 +14,5 @@ $button-color-hover: white
$index-background-color: #edeae8
$transparent: rgba(255,255,255,0)
$preferred-text-color: OliveDrab

9
style/modules/_button.sass
View File

@ -39,24 +39,25 @@
float: right
border-radius: 50%
margin-right: 20px
z-index: 999
top: 90%
width: 100%
position: fixed
.cart_button_1, .checkout_back_button, .productDetail_back_button
.back_button, .cart_button_1, .checkout_back_button, .productDetail_back_button
color: OliveDrab
border-color: OliveDrab
background-color: transparent
.cart_button_2, .checkout_confirm_button, .productDetail_add_button
.forward_button, .cart_button_2, .checkout_confirm_button, .productDetail_add_button
// color: DarkGrey
border-color: $button-border-color
background-color: OliveDrab
.cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover
.back_button:hover, .cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover
border-color: $button-border-color
background-color: $button-border-color
.cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover
.forward_button:hover, .cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover
border-color: $button-border-color
background-color: $button-border-color

1
style/modules/_modules-dir.sass
View File

@ -1,5 +1,6 @@
@import "button"
@import "modal"
@import "offcanvas"
@import "video"
@import "index/index-dir"
@import "shopping/shopping-dir"

28
style/modules/_offcanvas.sass Normal file
View File

@ -0,0 +1,28 @@
#offcanvasCart
.offcanvas-header
h5
color: $preferred-text-color
.offcanvas-body
.shopping_cart
margin-top: 5%
.cartTable
margin: auto
.cart_priceP
text-align: right
.cart_deleteP
text-align: right
a
color: black
font-size: 1.3rem
font-family: cursive
text-decoration: none
.back_button, .forward_button
height: 100%
width: 90%
.back-col, .forward-col
display: inline-block
text-align: center

116
style/modules/shopping/_shopping.sass
View File

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

62
style/style.css
View File

@ -215,25 +215,26 @@ video {
float: right;
border-radius: 50%;
margin-right: 20px;
z-index: 999;
}
.cart_button_1, .checkout_back_button, .productDetail_back_button {
.back_button, .cart_button_1, .checkout_back_button, .productDetail_back_button {
color: OliveDrab;
border-color: OliveDrab;
background-color: transparent;
}
.cart_button_2, .checkout_confirm_button, .productDetail_add_button {
.forward_button, .cart_button_2, .checkout_confirm_button, .productDetail_add_button {
border-color: rgba(255, 255, 255, 0.3);
background-color: OliveDrab;
}
.cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover {
.back_button:hover, .cart_button_1:hover, .checkout_back_button:hover, .productDetail_back_button:hover {
border-color: rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.3);
}
.cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover {
.forward_button:hover, .cart_button_2:hover, .checkout_confirm_button:hover, .productDetail_add_button:hover {
border-color: rgba(255, 255, 255, 0.3);
background-color: rgba(255, 255, 255, 0.3);
}
@ -292,6 +293,43 @@ video {
}
}
#offcanvasCart .offcanvas-header h5 {
color: OliveDrab;
}
#offcanvasCart .offcanvas-body {
margin-top: 5%;
}
#offcanvasCart .offcanvas-body .cartTable {
margin: auto;
}
#offcanvasCart .offcanvas-body .cart_priceP {
text-align: right;
}
#offcanvasCart .offcanvas-body .cart_deleteP {
text-align: right;
}
#offcanvasCart .offcanvas-body .cart_deleteP a {
color: black;
font-size: 1.3rem;
font-family: cursive;
text-decoration: none;
}
#offcanvasCart .offcanvas-body .back_button, #offcanvasCart .offcanvas-body .forward_button {
height: 100%;
width: 90%;
}
#offcanvasCart .offcanvas-body .back-col, #offcanvasCart .offcanvas-body .forward-col {
display: inline-block;
text-align: center;
}
.video-container-bg {
position: relative;
height: 100%;
@ -639,20 +677,4 @@ video {
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 */

3
style/style.css.map
View File

File diff suppressed because one or more lines are too long