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"> <form action="checkout.php" method="get">
<table class="cartTable"> <table class="cartTable">
<tbody> <tbody>
<?php $totalprice = 0;?> <?php $totalprice = 0;?>
<?php foreach ($_SESSION['mycar'] as $product): ?> <?php foreach ($_SESSION['mycar'] as $product): ?>

96
shopping/shopping.php
View File

@ -26,9 +26,6 @@
/> />
<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">
@ -67,13 +64,13 @@
<div class="row"> <div class="row">
<nav class="shopping_pageNav" aria-label="Page navigation"> <nav class="shopping_pageNav" aria-label="Page navigation">
<ul class="pagination justify-content-center"> <ul class="pagination justify-content-center" >
<li class="page-item">.toggleClass <li class="page-item">
<a class="page-link" href="#" aria-label="Previous"> <a class="page-link" href="#" aria-label="Previous">
<span aria-hidden="true">&laquo;</span> <span aria-hidden="true">&laquo;</span>
</a> </a>
</li> </li>
<li class="page-item"> <li class="page-item" >
<a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a> <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
</li> </li>
<li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li>
@ -96,24 +93,81 @@
<div class="my-floating-btn active " id="shopping-my-floating-btn"> <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> <i class="fa fa-shopping-cart"></i>
</button> </button>
</div> </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"> <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> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div> </div>
<div class="offcanvas-body"> <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>
</div> </div>
<!-- Sidebar --> <!-- Sidebar -->
<nav id="sidebar"> <!-- <nav id="sidebar">
<div class="sidebar-header"> <div class="sidebar-header">
<h3>Shopping Cart</h3> <h3>Shopping Cart</h3>
</div> </div>
@ -167,27 +221,11 @@
<a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a> <a href="https://bootstrapious.com/p/bootstrap-sidebar" class="article">Back to article</a>
</li> </li>
</ul> </ul>
</nav> </nav> -->
</div> </div>
</div> </div>
<?php include_once '../footer.php'?> <?php include_once '../footer.php'?>
<?php include_once '../scripts.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>

2
style/_variables.sass
View File

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

9
style/modules/_button.sass
View File

@ -39,24 +39,25 @@
float: right float: right
border-radius: 50% border-radius: 50%
margin-right: 20px margin-right: 20px
z-index: 999
top: 90% top: 90%
width: 100% width: 100%
position: fixed position: fixed
.cart_button_1, .checkout_back_button, .productDetail_back_button .back_button, .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, .checkout_confirm_button, .productDetail_add_button .forward_button, .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, .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 border-color: $button-border-color
background-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 border-color: $button-border-color
background-color: $button-border-color background-color: $button-border-color

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

@ -1,5 +1,6 @@
@import "button" @import "button"
@import "modal" @import "modal"
@import "offcanvas"
@import "video" @import "video"
@import "index/index-dir" @import "index/index-dir"
@import "shopping/shopping-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 // div.container-fluid
display: flex // display: flex
align-items: stretch // align-items: stretch
a, a:hover, a:focus // a, a:hover, a:focus
color: OliveDrab // color: OliveDrab
text-decoration: none // text-decoration: none
transition: all 0.3s // transition: all 0.3s
// #sidebarCollapse // // #sidebarCollapse
// z-index: 999 // // z-index: 999
div.sectionShopping nav.shopping_pageNav a.page-link // div.sectionShopping nav.shopping_pageNav a.page-link
color: $navbar-text-color // color: $navbar-text-color
nav#sidebar // nav#sidebar
min-width: 250px // min-width: 250px
max-width: 250px // max-width: 250px
transition: all 0.3s // transition: all 0.3s
background-color: white // background-color: white
z-index: -1 // z-index: -1
ul.components // ul.components
padding: 20px 0 // padding: 20px 0
border-bottom: 1px solid #47748b // border-bottom: 1px solid #47748b
div.sidebar-header // div.sidebar-header
padding: 20px // padding: 20px
background-color: DimGrey // background-color: DimGrey
div.sidebar-header h3 // div.sidebar-header h3
color: white // color: white
ul li a // ul li a
padding: 10px // padding: 10px
font-size: 1.1em // font-size: 1.1em
display: block // display: block
ul li a:hover // ul li a:hover
color: mediumSeaGreen // color: mediumSeaGreen
background-color: Gainsboro // background-color: Gainsboro
ul li.active > a, a[aria-expanded="true"] // ul li.active > a, a[aria-expanded="true"]
color: #fff // color: #fff
background: Gainsboro // background: Gainsboro
a[data-toggle="collapse"] // a[data-toggle="collapse"]
position: relative // position: relative
ul ul a // ul ul a
font-size: 0.9em !important // font-size: 0.9em !important
padding-left: 30px !important // padding-left: 30px !important
ul.CTAs // ul.CTAs
padding: 20px // padding: 20px
ul.CTAs a // ul.CTAs a
text-align: center // text-align: center
font-size: 0.9em // font-size: 0.9em
display: block // display: block
border-radius: 5px // border-radius: 5px
margin-bottom: 5px // margin-bottom: 5px
a.download // a.download
background: #fff // background: #fff
color: #7386D5 // color: #7386D5
a.article, a.article:hover // a.article, a.article:hover
background: #6d7fcc // background: #6d7fcc
color: #fff // 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; float: right;
border-radius: 50%; border-radius: 50%;
margin-right: 20px; 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; color: OliveDrab;
border-color: OliveDrab; border-color: OliveDrab;
background-color: transparent; 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); border-color: rgba(255, 255, 255, 0.3);
background-color: OliveDrab; 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); 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, .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); border-color: rgba(255, 255, 255, 0.3);
background-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 { .video-container-bg {
position: relative; position: relative;
height: 100%; height: 100%;
@ -639,20 +677,4 @@ video {
font-weight: bold; font-weight: bold;
color: oliveDrab; 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 */

3
style/style.css.map
View File

File diff suppressed because one or more lines are too long