fixed and styled review details page

Co-authored-by: Kara Hoagland <KH-Cl@users.noreply.github.com>
Co-authored-by: Arthur Lu <learthurgo@gmail.com>
Co-authored-by: d7hernan <d7hernan@users.noreply.github.com>
This commit is contained in:
rheabhutada02 2022-11-21 16:07:20 -08:00
parent 23657853e5
commit 4073d2cc4b
3 changed files with 41 additions and 26 deletions

View File

@ -12,8 +12,6 @@
<!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script>
<!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config-->
<!-- <link rel="stylesheet" href="/static/reset.css" /> -->
@ -30,30 +28,37 @@
</div>
</header>
<!--- meal -->
<div class = "meal-name">
<h1 id="d-mealName"></h1>
<h1 id="d-restaurant"></h1>
</div>
<div class = "meal-pics-and-tags">
<!-- image source -->
<img width=40% height=40% id="d-mealImg"/>
<div class = "tag-container", id="d-tags">
</div>
</div>
<div class = "stars-and-comments">
<img width=10% height=10% id="d-rating"/>
<p id = "d-comments"></p>
</div>
<main>
<div class="journal-form">
<form>
<fieldset class = "meal-name">
<h1 id="d-mealName" style="font-family: Century Gothic;"></h1>
<h1 id="d-restaurant" style="font-family: Century Gothic; font-size: 30px;"></h1>
</fieldset>
<fieldset class = "meal-pics">
<!-- image source -->
<img width=40% height=40% id="d-mealImg" style="margin-left: auto; margin-right: auto; display: block;"/>
</fieldset>
<fieldset class = "stars-and-comments" style="text-align: center;">
<img width=30% height=30% id="d-rating" style="margin-left: auto; margin-right: auto; display: block;"/>
<p id = "d-comments"></p>
</fieldset>
<fieldset class = "meal-tags">
<div class = "tag-container" id="d-tags" style="justify-content: center;"></div>
</fieldset>
</form>
</div>
<!---Navigation Buttons-->
<div style="display: flex; justify-content: center; margin: 10px;">
<input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
<button type="button" id="update-btn">Update</button>
<button type="button" id="delete-btn" class="danger">Delete</button>
</div>
</main>
<div class="journal-form hidden" id="update-form">

View File

@ -1,4 +1,4 @@
.journal-form > h1 {
.journal-form h1 {
font-family: 'testFont';
text-align: center;
}

View File

@ -33,3 +33,13 @@ h1 {
font-size: 6rem;
font-family: 'testFont';
}
.d-tag {
background-color: grey;
border-radius: 7px;
color: white;
padding-right: 7px;
padding-left: 7px;
margin-left: 10px;
margin-right: 10px;
}