Skip to content

Commit

Permalink
added scroll bar to menu item modals
Browse files Browse the repository at this point in the history
  • Loading branch information
Crystal Yang authored and Crystal Yang committed May 6, 2022
1 parent d5b197d commit 14439db
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 49 deletions.
97 changes: 49 additions & 48 deletions build/menu.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,55 +17,56 @@
<h2>Menu:</h2>
<div class="item-bar" id="item-list"></div>
<div class = "item-info" id="item-info">
<h4 class = "item-name" > Item name </h2>
<img class = "item-img" src = ""/>
<h1 class = "item-name" id ="large"> Item name</h1>
<p class = "item-desc"> description daady</p>
<div class = "reviews-list">
<h2> Reviews</h2>
<div class="post">
<div class="text">Thanks for rating us!</div>
<div class="scroll" style="float:right">
<h4 class = "item-name" > Item name </h2>
<img class = "item-img" src = ""/>
<h1 class = "item-name" id ="large"> Item name</h1>
<p class = "item-desc"> description daady</p>
<div class = "reviews-list">
<h2> Reviews</h2>
<div class="post">
<div class="text">Thanks for rating us!</div>
</div>

<div class ="stars">
<input type="radio" name="rate" id ="rate5">
<label for="rate5" class="fas fa-star"></label>
<input type="radio" name="rate" id ="rate4">
<label for="rate4" class="fas fa-star"></label>
<input type="radio" name="rate" id ="rate3">
<label for="rate3" class="fas fa-star"></label>
<input type="radio" name="rate" id ="rate2">
<label for="rate2" class="fas fa-star"></label>
<input type="radio" name="rate" id ="rate1">
<label for="rate1" class="fas fa-star"></label>
<form action="#">
<header></header>
<div class="textarea">
<textarea cols="30"></textarea>
</div>
<div class="btn">
<button type="submit">Submit Review</button>
</div>
</form>
</div>
<script>
const btn = document.querySelector("button");
const post = document.querySelector(".post");
const widget = document.querySelector(".stars");
const editBtn = document.querySelector(".edit");
btn.onclick = ()=>{
widget.style.display = "none";
post.style.display = "block";
editBtn.onclick = ()=>{
widget.style.display = "block";
post.style.display = "none";
}
return false;
}
</script>
</div>

<div class ="stars">
<input type="radio" name="rate" id ="rate5">
<label for="rate5" class="fas fa-star"></label>
<input type="radio" name="rate" id ="rate4">
<label for="rate4" class="fas fa-star"></label>
<input type="radio" name="rate" id ="rate3">
<label for="rate3" class="fas fa-star"></label>
<input type="radio" name="rate" id ="rate2">
<label for="rate2" class="fas fa-star"></label>
<input type="radio" name="rate" id ="rate1">
<label for="rate1" class="fas fa-star"></label>
<form action="#">
<header></header>
<div class="textarea">
<textarea cols="30"></textarea>
</div>
<div class="btn">
<button type="submit">Submit Review</button>
</div>
</form>
</div>
<script>
const btn = document.querySelector("button");
const post = document.querySelector(".post");
const widget = document.querySelector(".stars");
const editBtn = document.querySelector(".edit");
btn.onclick = ()=>{
widget.style.display = "none";
post.style.display = "block";
editBtn.onclick = ()=>{
widget.style.display = "block";
post.style.display = "none";
}
return false;
}
</script>
</div>
<button onclick= "closeModel()" >Close</button>
<button onclick="console.log('Pressed button')" id="actbutton">Add to cart</button>
<button onclick= "closeModel()" >Close</button>
<button onclick="console.log('Pressed button')" id="actbutton">Add to cart</button>
</div>


Expand Down
2 changes: 2 additions & 0 deletions build/styles/addtocart.css
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
.item-info{
background-color: white;
width: 500px;
height:500px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
border-radius: 10px;
}

.item-img{
Expand Down
2 changes: 1 addition & 1 deletion build/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
background-size: cover;
border-radius: 15px;
display: flex;
flex-direction: row;
/* flex-direction: row; */
}

.img2 {
Expand Down
8 changes: 8 additions & 0 deletions build/styles/menu.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,4 +165,12 @@ form .btn button:hover{
display:none;
font-size:30px;
margin-bottom:15px;
}
.scroll {
width:500px;
height:500px;
background: rbg(11, 11, 114);
overflow:hidden;
overflow-y:scroll;

}

0 comments on commit 14439db

Please sign in to comment.