InitialCommit
This commit is contained in:
Generated
+14
@@ -0,0 +1,14 @@
|
||||
# Default ignored files
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# Ignored default folder with query files
|
||||
/queries/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
# Editor-based HTTP Client requests
|
||||
/httpRequests/
|
||||
/ExampleWebsiyte.iml
|
||||
/modules.xml
|
||||
/vcs.xml
|
||||
/php.xml
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><path fill="#000000" fill-rule="evenodd" d="M256 42.667C138.18 42.667 42.667 138.179 42.667 256c0 117.82 95.513 213.334 213.333 213.334c117.822 0 213.334-95.513 213.334-213.334S373.822 42.667 256 42.667m0 384c-94.105 0-170.666-76.561-170.666-170.667S161.894 85.334 256 85.334c94.107 0 170.667 76.56 170.667 170.666S350.107 426.667 256 426.667m26.714-256c0 15.468-11.262 26.667-26.497 26.667c-15.851 0-26.837-11.2-26.837-26.963c0-15.15 11.283-26.37 26.837-26.37c15.235 0 26.497 11.22 26.497 26.666m-48 64h42.666v128h-42.666z"/></svg>
|
||||
|
After Width: | Height: | Size: 619 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 1024 1024"><path fill="#000000" d="M128 1024V128h896v896H128zm832-832H192v640h768V192zm-576 64q53 0 90.5 37.5T512 384t-37.5 90.5T384 512t-90-37.5t-38-90.5v-1q1-53 38-90t90-37zm47 337l174 175H256v-93l82-82q18-18 46.5-18t46.5 18zm259-128q18-18 46.5-18t46.5 18l113 113v190H695L542 615zM64 896H0V0h896v64H64v832z"/></svg>
|
||||
|
After Width: | Height: | Size: 395 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 20 20"><path fill="#000000" d="M8.58 2.39c.32 0 .59.05.81.14c1.25.55 1.69 2.24 1.7 3.97c.59-.82 2.15-2.29 3.41-2.29s2.94.73 3.53 3.55c-1.13-.65-2.42-.94-3.65-.94c-1.26 0-2.45.32-3.29.89c.4-.11.86-.16 1.33-.16c1.39 0 2.9.45 3.4 1.31c.68 1.16.47 3.38-.76 4.14c-.14-2.1-1.69-4.12-3.47-4.12c-.44 0-.88.12-1.33.38C8 10.62 7 14.56 7 19H2c0-5.53 4.21-9.65 7.68-10.79c-.56-.09-1.17-.15-1.82-.15C6.1 8.06 4.05 8.5 2 10c.76-2.96 2.78-4.1 4.69-4.1c1.25 0 2.45.5 3.2 1.29c-.66-2.24-2.49-2.86-4.08-2.86c-.8 0-1.55.16-2.05.35c.91-1.29 3.31-2.29 4.82-2.29zM13 11.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5s.67 1.5 1.5 1.5s1.5-.67 1.5-1.5z"/></svg>
|
||||
|
After Width: | Height: | Size: 707 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 36 36"><circle cx="13.33" cy="29.75" r="2.25" fill="#000000" class="clr-i-outline clr-i-outline-path-1"/><circle cx="27" cy="29.75" r="2.25" fill="#000000" class="clr-i-outline clr-i-outline-path-2"/><path fill="#000000" d="M33.08 5.37a1 1 0 0 0-.77-.37H11.49l.65 2H31l-2.67 12h-15L8.76 4.53a1 1 0 0 0-.66-.65L4 2.62a1 1 0 1 0-.59 1.92L7 5.64l4.59 14.5l-1.64 1.34l-.13.13A2.66 2.66 0 0 0 9.74 25A2.75 2.75 0 0 0 12 26h16.69a1 1 0 0 0 0-2H11.84a.67.67 0 0 1-.56-1l2.41-2h15.44a1 1 0 0 0 1-.78l3.17-14a1 1 0 0 0-.22-.85Z" class="clr-i-outline clr-i-outline-path-3"/><path fill="none" d="M0 0h36v36H0z"/></svg>
|
||||
|
After Width: | Height: | Size: 685 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 36 36"><circle cx="13.33" cy="29.75" r="2.25" fill="#000000" class="clr-i-outline--badged clr-i-outline-path-1--badged"/><circle cx="27" cy="29.75" r="2.25" fill="#000000" class="clr-i-outline--badged clr-i-outline-path-2--badged"/><path fill="#000000" d="M22.57 7a7.52 7.52 0 0 1-.07-1a7.52 7.52 0 0 1 .07-1H11.49l.65 2Z" class="clr-i-outline--badged clr-i-outline-path-3--badged"/><path fill="#000000" d="M30 13.5h-.42L28.33 19h-15L8.76 4.53a1 1 0 0 0-.66-.65L4 2.62a1 1 0 1 0-.59 1.92L7 5.64l4.59 14.5l-1.64 1.34l-.13.13A2.66 2.66 0 0 0 9.74 25A2.75 2.75 0 0 0 12 26h16.69a1 1 0 0 0 0-2H11.84a.67.67 0 0 1-.56-1l2.41-2h15.44a1 1 0 0 0 1-.78l1.57-6.91a7.51 7.51 0 0 1-1.7.19Z" class="clr-i-outline--badged clr-i-outline-path-4--badged"/><circle cx="30" cy="6" r="5" fill="#000000" class="clr-i-outline--badged clr-i-outline-path-5--badged clr-i-badge"/><path fill="none" d="M0 0h36v36H0z"/></svg>
|
||||
|
After Width: | Height: | Size: 976 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 36 36"><circle cx="13.5" cy="29.5" r="2.5" fill="#000000" class="clr-i-solid clr-i-solid-path-1"/><circle cx="26.5" cy="29.5" r="2.5" fill="#000000" class="clr-i-solid clr-i-solid-path-2"/><path fill="#000000" d="M33.1 6.39a1 1 0 0 0-.79-.39H9.21l-.45-1.43a1 1 0 0 0-.66-.65L4 2.66a1 1 0 1 0-.59 1.92L7 5.68l4.58 14.47l-1.63 1.34l-.13.13A2.66 2.66 0 0 0 9.74 25A2.75 2.75 0 0 0 12 26h16.69a1 1 0 0 0 0-2H11.84a.67.67 0 0 1-.56-1l2.41-2h15.43a1 1 0 0 0 1-.76l3.2-13a1 1 0 0 0-.22-.85Z" class="clr-i-solid clr-i-solid-path-3"/><path fill="none" d="M0 0h36v36H0z"/></svg>
|
||||
|
After Width: | Height: | Size: 646 B |
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<link rel="stylesheet" href="StyleSheets/ExampleStructure.css">
|
||||
</head>
|
||||
<body class="debug">
|
||||
<div class="NavBarWrapper HFlexBox SpaceBetween">
|
||||
<div class="NavBarSection HFlexBox AlignLeft">
|
||||
<img alt="" class="NavIcon" src="/Assets/Icons/palmtree.svg" style="">
|
||||
<p class="Title">ExampleTitle</p>
|
||||
</div>
|
||||
<div class="NavBarSection HFlexBox AlignRight">
|
||||
<div class="HamburgerWrapper HFlexBox">
|
||||
<div id="HamburgerNavContent" class="HamburgerNavMenu">
|
||||
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='index.html';"><img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-line.svg" style="">Home</button>
|
||||
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/gallery.svg" style="">Gallery</button>
|
||||
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/about.svg" style="">About Us</button>
|
||||
</div>
|
||||
<button id="HamburgerNav" class="Hamburger VFlexBox Center" onclick="ExpandHamburgerMenu();">
|
||||
<span class="HamburgerSlab First"></span>
|
||||
<span class="HamburgerSlab Middle"></span>
|
||||
<span class="HamburgerSlab Last"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="Javascript/CartManager.js"></script>
|
||||
<div class="CartContainer VFlexBox" id="CartContainer">
|
||||
<script>
|
||||
LoadWhatsInCart(document.getElementById('CartContainer'));
|
||||
</script>
|
||||
</div>
|
||||
<script src="Javascript/Hamburger.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
function AddToCart(object, buttonID, type){
|
||||
if(object !== "null" && object !== null) {
|
||||
if (sessionStorage.getItem("CartObjects") === null || sessionStorage.getItem("CartObjects") === '' || !sessionStorage.getItem("CartObjects").includes(object)) {
|
||||
sessionStorage.setItem("CartObjects", sessionStorage.getItem("CartObjects") + "?Type=" + type + "&" + object);
|
||||
}
|
||||
document.getElementById(buttonID).classList.add("ClickedBtn");
|
||||
document.getElementById(buttonID).innerHTML = 'Added <img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-solid.svg" style=" margin:0 0.5vh; width: 4vh; height: 4vh;">'
|
||||
document.getElementById(buttonID).onclick = null;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function LoadWhatsInCart(SourceContainer){
|
||||
if(sessionStorage.getItem("CartObjects") !== null && sessionStorage.getItem("CartObjects") !== ''){
|
||||
let CartItems = sessionStorage.getItem("CartObjects").split("?");
|
||||
for(let i = 0; i < CartItems.length; i++){
|
||||
if(CartItems[i] !== null && CartItems[i] !== "null" && CartItems[i] !== '') {
|
||||
let ElementToDisplay = "<div class='VFlexBox' id='CartListing" + i + "' style='margin:2vh;'>"
|
||||
let ItemsInsideCart = CartItems[i].split("&");
|
||||
for (let Item = 0; Item < ItemsInsideCart.length; Item++) {
|
||||
let Variable = ItemsInsideCart[Item].split("=");
|
||||
ElementToDisplay += "<div class='HFlexBox'><p class='ExampleText'>" + Variable[0] + ":</p>"
|
||||
ElementToDisplay += "<p class='ExampleText2'> " + Variable[1] + "</p></div>";
|
||||
}
|
||||
ElementToDisplay += '<button class="ExampleButton" onclick="RemoveFromCart(' + "'" + CartItems[i] + "','" + i + "'" + ');">Remove</button></div>';
|
||||
SourceContainer.innerHTML += ElementToDisplay;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function RemoveFromCart(object, index){
|
||||
if(sessionStorage.getItem("CartObjects").includes(("?" + object))) {
|
||||
sessionStorage.setItem("CartObjects", sessionStorage.getItem("CartObjects").replace(("?" + object), ""));
|
||||
}
|
||||
let buttonID = "CartListing" + index;
|
||||
let ListingID = "CartListing" + index;
|
||||
document.getElementById(buttonID).onclick = null;
|
||||
document.getElementById(buttonID).remove();
|
||||
document.getElementById(ListingID).remove();
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
var hamburger = document.getElementById("HamburgerNav");
|
||||
var hamburgerContent = document.getElementById("HamburgerNavContent");
|
||||
function Setup(){
|
||||
hamburger = document.getElementById("HamburgerNav");
|
||||
hamburgerContent = document.getElementById("HamburgerNavContent");
|
||||
}
|
||||
function ExpandHamburgerMenu(){
|
||||
if(hamburger.classList.contains("Active")){
|
||||
hamburger.classList.remove("Active");
|
||||
hamburgerContent.classList.remove("Active");
|
||||
}
|
||||
else {
|
||||
hamburger.classList.add("Active");
|
||||
hamburgerContent.classList.add("Active");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,55 @@
|
||||
/* no CSS is needed for this but this just gives it structure */
|
||||
.VFlexBox{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.CartContainer{
|
||||
width: 100vw;
|
||||
min-height: 50vh;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
.ExampleText{
|
||||
font-size: 4vh;
|
||||
font-family: Arial,serif;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
.ExampleText2{
|
||||
font-size: 4vh;
|
||||
font-family: "Monotype",serif;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.ExampleButton:hover{
|
||||
color:white;
|
||||
background-color: black;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.ExampleButton{
|
||||
color:black;
|
||||
background-color: white;
|
||||
transition: 0.25s;
|
||||
cursor: pointer;
|
||||
width: 10vw;
|
||||
height: 5vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*Not needed but is good for setting up the web page */
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:1px black solid; /*set this to none in the actual site if you dont plan on a border */
|
||||
background-color: transparent;
|
||||
}
|
||||
body{
|
||||
max-width: 100vw;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
<head>
|
||||
<link rel="stylesheet" href="CartCSS.css">
|
||||
</head>
|
||||
|
||||
<script src="CartManager.js"></script>
|
||||
<!-- load what's in cart -->
|
||||
<div class="CartContainer VFlexBox" id="CartContainer">
|
||||
<script>
|
||||
LoadWhatsInCart(document.getElementById('CartContainer'));
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<!-- Button to add something to cart -->
|
||||
<div class="VFlexBox">
|
||||
<p class="ExampleText">SomeItem</p>
|
||||
<!-- the first value in the AddToCart function is the actual cart item itself, you can load these with JS or just do it manually like here -->
|
||||
<button class="ExampleButton" id="CartButton1" onclick="AddToCart('Name=SuperAwesomeItem&Description=EpicDescription&Delivery=NextDay&Price=£30','CartButton1','ProductCategory1');">Add to Cart</button>
|
||||
</div>
|
||||
@@ -0,0 +1,39 @@
|
||||
function AddToCart(object, buttonID, type){
|
||||
if(object !== "null" && object !== null) {
|
||||
if (sessionStorage.getItem("CartObjects") === null || sessionStorage.getItem("CartObjects") === '' || !sessionStorage.getItem("CartObjects").includes(object)) {
|
||||
sessionStorage.setItem("CartObjects", sessionStorage.getItem("CartObjects") + "?Type=" + type + "&" + object);
|
||||
}
|
||||
document.getElementById(buttonID).classList.add("ClickedBtn");
|
||||
document.getElementById(buttonID).innerHTML = 'Added <img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-solid.svg" style=" margin:0 0.5vh; width: 4vh; height: 4vh;">'
|
||||
document.getElementById(buttonID).onclick = null;
|
||||
}
|
||||
}
|
||||
|
||||
function LoadWhatsInCart(SourceContainer){
|
||||
if(sessionStorage.getItem("CartObjects") !== null && sessionStorage.getItem("CartObjects") !== ''){
|
||||
let CartItems = sessionStorage.getItem("CartObjects").split("?");
|
||||
for(let i = 0; i < CartItems.length; i++){
|
||||
if(CartItems[i] !== null && CartItems[i] !== "null" && CartItems[i] !== '') {
|
||||
let ElementToDisplay = "<div class='VFlexBox' id='CartListing" + i + "' style='margin:2vh;'>"
|
||||
let ItemsInsideCart = CartItems[i].split("&");
|
||||
for (let Item = 0; Item < ItemsInsideCart.length; Item++) {
|
||||
let Variable = ItemsInsideCart[Item].split("=");
|
||||
ElementToDisplay += "<div class='HFlexBox'><p class='ExampleText'>" + Variable[0] + ":</p>"
|
||||
ElementToDisplay += "<p class='ExampleText2'> " + Variable[1] + "</p></div>";
|
||||
}
|
||||
ElementToDisplay += '<button class="ExampleButton" onclick="RemoveFromCart(' + "'" + CartItems[i] + "','" + i + "'" + ');">Remove</button></div>';
|
||||
SourceContainer.innerHTML += ElementToDisplay;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
function RemoveFromCart(object, index){
|
||||
if(sessionStorage.getItem("CartObjects").includes(("?" + object))) {
|
||||
sessionStorage.setItem("CartObjects", sessionStorage.getItem("CartObjects").replace(("?" + object), ""));
|
||||
}
|
||||
let buttonID = "CartListing" + index;
|
||||
let ListingID = "CartListing" + index;
|
||||
document.getElementById(buttonID).onclick = null;
|
||||
document.getElementById(buttonID).remove();
|
||||
document.getElementById(ListingID).remove();
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
/*the hamburgers container, lays them in a centred column to make sure they're even */
|
||||
.Hamburger{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin: 0 2vh;
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
/*turns the hamburger shape into a cross when its enabled*/
|
||||
.Hamburger.Active{
|
||||
.HamburgerSlab.First{
|
||||
transform: rotate(45deg) translateX(1.125vh)translateY(0.9vh);
|
||||
}
|
||||
.HamburgerSlab.Middle{
|
||||
color:transparent;
|
||||
background-color:transparent;
|
||||
}
|
||||
.HamburgerSlab.Last{
|
||||
transform: rotate(-45deg) translateX(0.75vh)translateY(-0.75vh);
|
||||
}
|
||||
}
|
||||
.HamburgerNavMenu.Active{
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
.Hamburger:hover{
|
||||
.HamburgerSlab{
|
||||
transform: scaleX(1.2);
|
||||
}
|
||||
}
|
||||
.HamburgerSlab{
|
||||
outline: none;
|
||||
width:5vh ;
|
||||
height: 0.75vh;
|
||||
margin-top:0.25vh;
|
||||
margin-bottom: 0.25vh;
|
||||
transition: 0.5s;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
/*gives each hamburger bar a separate colour*/
|
||||
.Hamburger{
|
||||
/*you can reference two consecutive classes for styling
|
||||
so for example here, the hamburger slab span element has
|
||||
class="HamburgerSlab First" or class="HamburgerSlab Middle"
|
||||
and you can reference them individually
|
||||
*/
|
||||
.HamburgerSlab.First{
|
||||
color:slategray;
|
||||
background-color:slategray;
|
||||
}
|
||||
.HamburgerSlab.Middle{
|
||||
color:dimgrey;
|
||||
background-color:dimgray;
|
||||
}
|
||||
.HamburgerSlab.Last{
|
||||
color:darkslategray;
|
||||
background-color:darkslategray;
|
||||
}
|
||||
}
|
||||
|
||||
/*this is for only mobile or 4:3 and lower screen aspect ratios*/
|
||||
@media only screen and (max-aspect-ratio: 12/9) {
|
||||
/* drop down menu is a window not in the hotbar */
|
||||
.HamburgerNavMenu {
|
||||
padding: 0.5vh;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
top: 9vh;
|
||||
right: 0;
|
||||
transform: translateX(0) translateY(-100vh);
|
||||
transition: 0.25s;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
/* ::After is a pseudo element, it allows us to put the little point arrow */
|
||||
.HamburgerNavMenu::After {
|
||||
content: '';
|
||||
position: absolute; /* if the parent element is positioned as relative, absolute defines position relative to the parent*/
|
||||
right: 15%;
|
||||
bottom: 100%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 1.2vh solid transparent;
|
||||
border-right: 1.2vh solid transparent;
|
||||
border-bottom: 1.7vh solid black;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/*this is only for desktop screen aspect ratios */
|
||||
@media only screen and (min-aspect-ratio: 12/9) {
|
||||
/*positions hamburger elements on hotbar when open
|
||||
to always have a window style, move whats inside the @media only screen and (max-aspect-ratio: 12/9)
|
||||
outside of the query and delete the @media boxes*/
|
||||
.HamburgerNavMenu {
|
||||
padding: 0.5vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
transform: translateX(100vw) translateY(0);
|
||||
transition: 0.25s;
|
||||
justify-content: left;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/*this isnt part of the hamburger itself but its needed for laying out the buttons horizontally*/
|
||||
/* sets the alignment of an element to be horizontal, flexbox allows dynamic resizing */
|
||||
.HFlexBox{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*this isnt part of the hamburger menu but its necessary for the buttons inside it*/
|
||||
.NavIcon:hover{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.NavIcon{
|
||||
margin:0 0.5vh;
|
||||
width: 4vh;
|
||||
height: 4vh;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.NavButton{
|
||||
font-size: 3vh;
|
||||
height: 6vh;
|
||||
min-width: 6vh;
|
||||
font-family: Arial,serif;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
margin: 0 1vh; /*this sets the horizontal margin to 1% of the viewport height but the vertical margin to nothing*/
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
<head>
|
||||
<link rel="stylesheet" href="Hamburger.css">
|
||||
</head>
|
||||
<div class="HamburgerWrapper HFlexBox">
|
||||
<div id="HamburgerNavContent" class="HamburgerNavMenu">
|
||||
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-line.svg" style="">My Cart</button>
|
||||
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/gallery.svg" style="">Gallery</button>
|
||||
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/about.svg" style="">About Us</button>
|
||||
</div>
|
||||
<button id="HamburgerNav" class="Hamburger VFlexBox Center" onclick="ExpandHamburgerMenu();">
|
||||
<span class="HamburgerSlab First"></span>
|
||||
<span class="HamburgerSlab Middle"></span>
|
||||
<span class="HamburgerSlab Last"></span>
|
||||
</button>
|
||||
</div>
|
||||
<script src="Hamburger.js"></script>
|
||||
@@ -0,0 +1,16 @@
|
||||
var hamburger = document.getElementById("HamburgerNav");
|
||||
var hamburgerContent = document.getElementById("HamburgerNavContent");
|
||||
function Setup(){
|
||||
hamburger = document.getElementById("HamburgerNav");
|
||||
hamburgerContent = document.getElementById("HamburgerNavContent");
|
||||
}
|
||||
function ExpandHamburgerMenu(){
|
||||
if(hamburger.classList.contains("Active")){
|
||||
hamburger.classList.remove("Active");
|
||||
hamburgerContent.classList.remove("Active");
|
||||
}
|
||||
else {
|
||||
hamburger.classList.add("Active");
|
||||
hamburgerContent.classList.add("Active");
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,233 @@
|
||||
/*so you can see the structure of the page when body has the tag .debug*/
|
||||
.debug{
|
||||
*{
|
||||
outline: 1px black solid;
|
||||
}
|
||||
}
|
||||
/*removing default styling for body and buttons*/
|
||||
*{
|
||||
box-sizing: border-box;
|
||||
margin:0;
|
||||
padding:0;
|
||||
border:none;
|
||||
background-color: transparent;
|
||||
}
|
||||
body{
|
||||
max-width: 100vw;
|
||||
overflow-x:hidden;
|
||||
}
|
||||
/* child elements inside a flexbox with this class will be centered*/
|
||||
.Center{
|
||||
justify-content: center;
|
||||
}
|
||||
/* child elements inside a flexbox with this class will be separated as far apart as they can be*/
|
||||
.SpaceBetween{
|
||||
justify-content: space-between !important; /*Important overrides any other styles that set justify content*/
|
||||
}
|
||||
.VFlexBox{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.CartContainer{
|
||||
width: 100vw;
|
||||
min-height: 50vh;
|
||||
margin-top: 10vh;
|
||||
}
|
||||
.ExampleText{
|
||||
font-size: 4vh;
|
||||
font-family: Arial,serif;
|
||||
font-weight: normal;
|
||||
text-align: center;
|
||||
}
|
||||
.ExampleText2{
|
||||
font-size: 4vh;
|
||||
font-family: "Monotype",serif;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
}
|
||||
.ExampleButton:hover{
|
||||
color:white;
|
||||
background-color: black;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.ExampleButton{
|
||||
color:black;
|
||||
background-color: white;
|
||||
transition: 0.25s;
|
||||
cursor: pointer;
|
||||
width: 10vw;
|
||||
height: 5vh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
.Title{
|
||||
font-size: 5vh;
|
||||
font-family: Arial,serif;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
}
|
||||
/* these allow elements to set their own alignment even within a flex box*/
|
||||
.AlignLeft{
|
||||
justify-self: flex-start;
|
||||
}
|
||||
.AlignRight{
|
||||
justify-self: flex-end;
|
||||
}
|
||||
/*sets the position of the navigation bar to the top of the page and makes*/
|
||||
.NavBarWrapper{
|
||||
position: fixed;
|
||||
top:0;
|
||||
left:0;
|
||||
max-width:100vw; /*max width so it does not get wider than the viewport*/
|
||||
width: 100vw;
|
||||
min-height: 7vh; /*min height so it can be dynamically re-sized*/
|
||||
padding: 0.5vh;
|
||||
}
|
||||
/* sets the alignment of an element to be horizontal, flexbox allows dynamic resizing */
|
||||
.HFlexBox{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*Navigation classes*/
|
||||
.NavBarSection{
|
||||
min-width: 30%;
|
||||
flex-wrap: nowrap;
|
||||
margin:1vh;
|
||||
padding:0;
|
||||
}
|
||||
.NavIcon:hover{
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.NavIcon{
|
||||
margin:0 0.5vh;
|
||||
width: 4vh;
|
||||
height: 4vh;
|
||||
transition: 0.5s;
|
||||
}
|
||||
.NavButton{
|
||||
font-size: 3vh;
|
||||
height: 6vh;
|
||||
min-width: 6vh;
|
||||
font-family: Arial,serif;
|
||||
font-weight: bolder;
|
||||
text-align: center;
|
||||
margin: 0 1vh; /*this sets the horizontal margin to 1% of the viewport height but the vertical margin to nothing*/
|
||||
}
|
||||
/*the hamburgers container, lays them in a centred column to make sure they're even */
|
||||
.Hamburger{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
align-items: center;
|
||||
margin: 0 2vh;
|
||||
width: 5vh;
|
||||
height: 5vh;
|
||||
cursor: pointer;
|
||||
}
|
||||
/*turns the hamburger shape into a cross when its enabled*/
|
||||
.Hamburger.Active{
|
||||
.HamburgerSlab.First{
|
||||
transform: rotate(45deg) translateX(1.125vh)translateY(0.9vh);
|
||||
}
|
||||
.HamburgerSlab.Middle{
|
||||
color:transparent;
|
||||
background-color:transparent;
|
||||
}
|
||||
.HamburgerSlab.Last{
|
||||
transform: rotate(-45deg) translateX(0.75vh)translateY(-0.75vh);
|
||||
}
|
||||
}
|
||||
.HamburgerNavMenu.Active{
|
||||
transform: translateX(0) translateY(0);
|
||||
}
|
||||
.Hamburger:hover{
|
||||
.HamburgerSlab{
|
||||
transform: scaleX(1.2);
|
||||
}
|
||||
}
|
||||
.HamburgerSlab{
|
||||
outline: none;
|
||||
width:5vh ;
|
||||
height: 0.75vh;
|
||||
margin-top:0.25vh;
|
||||
margin-bottom: 0.25vh;
|
||||
transition: 0.5s;
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
/*gives each hamburger bar a separate colour*/
|
||||
.Hamburger{
|
||||
/*you can reference two consecutive classes for styling
|
||||
so for example here, the hamburger slab span element has
|
||||
class="HamburgerSlab First" or class="HamburgerSlab Middle"
|
||||
and you can reference them individually
|
||||
*/
|
||||
.HamburgerSlab.First{
|
||||
color:slategray;
|
||||
background-color:slategray;
|
||||
}
|
||||
.HamburgerSlab.Middle{
|
||||
color:dimgrey;
|
||||
background-color:dimgray;
|
||||
}
|
||||
.HamburgerSlab.Last{
|
||||
color:darkslategray;
|
||||
background-color:darkslategray;
|
||||
}
|
||||
}
|
||||
|
||||
/*this is for only mobile or 4:3 and lower screen aspect ratios*/
|
||||
@media only screen and (max-aspect-ratio: 12/9) {
|
||||
/* drop down menu is a window not in the hotbar */
|
||||
.HamburgerNavMenu {
|
||||
padding: 0.5vh;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
top: 9vh;
|
||||
right: 0;
|
||||
transform: translateX(0) translateY(-100vh);
|
||||
transition: 0.25s;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-content: flex-start;
|
||||
}
|
||||
/* ::After is a pseudo element, it allows us to put the little point arrow */
|
||||
.HamburgerNavMenu::After {
|
||||
content: '';
|
||||
position: absolute; /* if the parent element is positioned as relative, absolute defines position relative to the parent*/
|
||||
right: 15%;
|
||||
bottom: 100%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 1.2vh solid transparent;
|
||||
border-right: 1.2vh solid transparent;
|
||||
border-bottom: 1.7vh solid black;
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
|
||||
/*this is only for desktop screen aspect ratios */
|
||||
@media only screen and (min-aspect-ratio: 12/9) {
|
||||
/*positions hamburger elements on hotbar when open
|
||||
to always have a window style, move whats inside the @media only screen and (max-aspect-ratio: 12/9)
|
||||
outside of the query and delete the @media boxes*/
|
||||
.HamburgerNavMenu {
|
||||
padding: 0.5vh;
|
||||
position: relative;
|
||||
display: flex;
|
||||
transform: translateX(100vw) translateY(0);
|
||||
transition: 0.25s;
|
||||
justify-content: left;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
}
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Title</title>
|
||||
<link rel="stylesheet" href="StyleSheets/ExampleStructure.css">
|
||||
</head>
|
||||
<body class="debug">
|
||||
<div class="NavBarWrapper HFlexBox SpaceBetween">
|
||||
<div class="NavBarSection HFlexBox AlignLeft">
|
||||
<img alt="" class="NavIcon" src="/Assets/Icons/palmtree.svg" style="">
|
||||
<p class="Title">ExampleTitle</p>
|
||||
</div>
|
||||
<div class="NavBarSection HFlexBox AlignRight">
|
||||
<div class="HamburgerWrapper HFlexBox">
|
||||
<div id="HamburgerNavContent" class="HamburgerNavMenu">
|
||||
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='Cart.html';"><img alt="" class="NavIcon" src="/Assets/Icons/shopping-cart-line.svg" style="">My Cart</button>
|
||||
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/gallery.svg" style="">Gallery</button>
|
||||
<button tabindex="0" class="NavButton HFlexBox" onclick="document.location.href='';"><img alt="" class="NavIcon" src="/Assets/Icons/about.svg" style="">About Us</button>
|
||||
</div>
|
||||
<button id="HamburgerNav" class="Hamburger VFlexBox Center" onclick="ExpandHamburgerMenu();">
|
||||
<span class="HamburgerSlab First"></span>
|
||||
<span class="HamburgerSlab Middle"></span>
|
||||
<span class="HamburgerSlab Last"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="CartContainer VFlexBox" id="CartContainer">
|
||||
<div class="VFlexBox">
|
||||
<p class="ExampleText">SomeItem</p>
|
||||
<button class="ExampleButton" id="CartButton1" onclick="AddToCart('Name=SuperAwesomeItem&Description=EpicDescription&Delivery=NextDay&Price=£30','CartButton1','ProductCategory1');">Add to Cart</button>
|
||||
</div>
|
||||
<div class="VFlexBox">
|
||||
<p class="ExampleText">SomeItem1</p>
|
||||
<button class="ExampleButton" id="CartButton2" onclick="AddToCart('Name=SuperAwesomeObject&DDescription=EpicDescription&Delivery=NextDay&Price=£30','CartButton2','ProductCategory1');">Add to Cart</button>
|
||||
</div>
|
||||
<div class="VFlexBox">
|
||||
<p class="ExampleText">SomeItem2</p>
|
||||
<button class="ExampleButton" id="CartButton3" onclick="AddToCart('Name=SuperAwesomeItem2&DDescription=EpicDescription&Delivery=NextDay&Price=£30','CartButton3','ProductCategory2');">Add to Cart</button>
|
||||
</div>
|
||||
<div class="VFlexBox">
|
||||
<p class="ExampleText">SomeItem3</p>
|
||||
<button class="ExampleButton" id="CartButton4" onclick="AddToCart('Name=SuperNintendo&DDescription=EpicDescription&Delivery=NextDay&Price=£30','CartButton4','ProductCategory2');">Add to Cart</button>
|
||||
</div>
|
||||
<div class="VFlexBox">
|
||||
<p class="ExampleText">SomeItem4</p>
|
||||
<button class="ExampleButton" id="CartButton5" onclick="AddToCart('Name=SuperAwesomeElectronic&DDescription=EpicDescription&Delivery=NextDay&Price=£30','CartButton5','ProductCategory3');">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
<script src="Javascript/CartManager.js"></script>
|
||||
<script src="Javascript/Hamburger.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user