mirror of
https://github.com/cse110-fa22-group29/cse110-fa22-group29.git
synced 2024-12-26 00:49:10 +00:00
modified css for CreatePage and color palette for homepage
Co-authored-by: rheabhutada02 Co-authored-by: Kara Hoagland
This commit is contained in:
d7hernan
parent
1055f7ef26
commit
1798835807
@ -41,6 +41,7 @@
|
||||
<input type="file" accept="image/*" id="mealImg" name="mealImg">
|
||||
</label>
|
||||
<label for="image-alt">
|
||||
<br>
|
||||
Alt Text:
|
||||
<input type="text" id="imgAlt" name="imgAlt">
|
||||
</label>
|
||||
@ -50,7 +51,9 @@
|
||||
<label for="Meal: ">Meal:
|
||||
<input type="text" id="mealName" name="mealName" required>
|
||||
</label>
|
||||
<label for="comments">Comments:
|
||||
<label for="comments">
|
||||
<br>
|
||||
Comments:
|
||||
<br>
|
||||
<textarea name="comments" id="comments"></textarea>
|
||||
</label>
|
||||
@ -73,8 +76,10 @@
|
||||
<label for="tag-form">
|
||||
Tags:
|
||||
<input type="text" id="tag-form" name="tag-form">
|
||||
|
||||
<div class='tag-container' id="tag-container-form">
|
||||
</div>
|
||||
|
||||
<button type="button" id="tag-add-btn">Add Tag</button>
|
||||
</label>
|
||||
|
||||
|
||||
@ -6,20 +6,28 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Food Journal</title>
|
||||
|
||||
<!-- Recipe Card Custom Element -->
|
||||
<script src="assets/scripts/ReviewCard.js" type="module"></script>
|
||||
<!-- 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" /> -->
|
||||
<link rel="stylesheet" href="./static/ReviewDetails.css" />
|
||||
<script src="assets/scripts/ReviewDetails.js" type="module"></script>
|
||||
|
||||
</div>
|
||||
<!-- 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" /> -->
|
||||
<link rel="stylesheet" href="./static/ReviewDetails.css" />
|
||||
<script src="assets/scripts/ReviewDetails.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div class="top-bar">
|
||||
<img src ="./assets/images/icons/Logo.png" alt="logo" />
|
||||
<h1> Food Journal </h1>
|
||||
<img src ="./assets/images/icons/Logo.png" alt="logo" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!--- meal -->
|
||||
<div class = "meal-name">
|
||||
<h1 id="d-mealName"> Cucumber Salad </h1>
|
||||
<h1 id="d-mealName"> Salad (default name) </h1>
|
||||
<h1 id="d-restaurant"> Salad Inc. (default name) </h1>
|
||||
</div>
|
||||
|
||||
<div class = "meal-pics-and-tags">
|
||||
@ -28,13 +36,13 @@
|
||||
alt = "photo" width=40% height=40% id="d-mealImg">
|
||||
|
||||
<div class = "tag-container", id="d-tags">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class = "stars-and-comments">
|
||||
<img src = "./assets/images/icons/5-star.svg" width=10% height=10% id="d-rating">
|
||||
<p id = "d-comments"> The food was good </p>
|
||||
<p id = "d-comments"> Default comment </p>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
@ -43,7 +51,7 @@
|
||||
<button type="button" id="delete-btn" class="danger">Delete</button>
|
||||
</main>
|
||||
|
||||
<div class = journal-form id="update-form-div">
|
||||
<div class = "journal-form" id="update-form-div">
|
||||
<form id="update-food-entry">
|
||||
<fieldset>
|
||||
<legend>Pic:</legend>
|
||||
|
||||
@ -13,7 +13,7 @@ class ReviewCard extends HTMLElement {
|
||||
let styleEl = document.createElement("style");
|
||||
styleEl.textContent = `
|
||||
* {
|
||||
font-family: sans-serif;
|
||||
font-family: Century Gothic;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
@ -28,7 +28,7 @@ class ReviewCard extends HTMLElement {
|
||||
|
||||
article {
|
||||
align-items: center;
|
||||
border: 1px solid rgb(223, 225, 229);
|
||||
border: 2px solid rgb(31, 41, 32);
|
||||
border-radius: 8px;
|
||||
display: grid;
|
||||
grid-template-rows: 118px 56px 14px 18px 15px 36px;
|
||||
@ -53,9 +53,9 @@ class ReviewCard extends HTMLElement {
|
||||
}
|
||||
|
||||
article>img {
|
||||
border-top-left-radius: 8px;
|
||||
border-top-right-radius: 8px;
|
||||
height: 118px;
|
||||
border-top-left-radius: 6px;
|
||||
border-top-right-radius: 6px;
|
||||
height: 119px;
|
||||
object-fit: cover;
|
||||
margin-left: -16px;
|
||||
width: calc(100% + 32px);
|
||||
|
||||
@ -1,7 +1,13 @@
|
||||
/* CreatePage.css */
|
||||
|
||||
@font-face {
|
||||
font-family: "testFont";
|
||||
src: url(CoveredByYourGrace-Regular.ttf);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #13323b;
|
||||
background-color: #F8F3F1;
|
||||
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -21,7 +27,8 @@ h1 {
|
||||
position: relative;
|
||||
top: 2.2cm;
|
||||
font-size: 3cm;
|
||||
color: #eaa9bc;
|
||||
color:#516754;
|
||||
font-family: 'testFont';
|
||||
}
|
||||
|
||||
.top-bar > form {
|
||||
@ -31,12 +38,14 @@ h1 {
|
||||
|
||||
.journal-form {
|
||||
font-size: 120%;
|
||||
font-family: 'Century Gothic';
|
||||
width: 50%;
|
||||
display: block;
|
||||
margin: auto;
|
||||
color: #ccb3bb;
|
||||
border: 3px solid rgb(7 0 0);
|
||||
background-color: #b52754;
|
||||
color: #516754;
|
||||
border: 2px solid rgb(31, 41, 32);
|
||||
border-radius: 8px;
|
||||
background-color: #f7dfd5;
|
||||
}
|
||||
|
||||
.hidden,
|
||||
@ -85,3 +94,32 @@ h1 {
|
||||
.rating > label:hover ~ input:checked ~ label {
|
||||
color: orangered;
|
||||
}
|
||||
|
||||
.tag-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background-color: grey;
|
||||
border-radius: 7px;
|
||||
color: white;
|
||||
padding-right: 7px;
|
||||
padding-left: 7px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.tag::before {
|
||||
display: inline-block;
|
||||
content: "x";
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin-right: 4px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.tag:hover::before {
|
||||
color: red;
|
||||
}
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
/* ReviewDetails.css */
|
||||
|
||||
@font-face {
|
||||
font-family: "testFont";
|
||||
src: url(CoveredByYourGrace-Regular.ttf);
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #13323b;
|
||||
background-color: #F8F3F1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@ -9,28 +14,29 @@ h1 {
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
margin-top: -8cm;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.top-bar > img {
|
||||
position: relative;
|
||||
top: 7.85cm;
|
||||
align-self: center;
|
||||
padding-left: 2.5%;
|
||||
padding-right: 2.5%;
|
||||
}
|
||||
|
||||
.top-bar > h1 {
|
||||
position: relative;
|
||||
top: 2.2cm;
|
||||
font-size: 3cm;
|
||||
color: #eaa9bc;
|
||||
}
|
||||
|
||||
.top-bar > form {
|
||||
position: relative;
|
||||
left: 32cm;
|
||||
text-align: center;
|
||||
/*color: #e4c3d2;*/
|
||||
color:#516754;
|
||||
font-size: 6rem;
|
||||
font-family: 'testFont';
|
||||
}
|
||||
|
||||
.journal-form {
|
||||
font-size: 120%;
|
||||
font-family: 'Calibria';
|
||||
width: 50%;
|
||||
display: none;
|
||||
margin: auto;
|
||||
@ -94,3 +100,32 @@ h1 {
|
||||
.rating > label:hover ~ input:checked ~ label {
|
||||
color: orangered;
|
||||
}
|
||||
|
||||
.journal-form .tag-container{
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.journal-form .tag{
|
||||
background-color: grey;
|
||||
border-radius: 7px;
|
||||
color: white;
|
||||
padding-right: 7px;
|
||||
padding-left: 7px;
|
||||
margin: 3px;
|
||||
}
|
||||
|
||||
.journal-form .tag::before{
|
||||
display: inline-block;
|
||||
content: "x";
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin-right: 4px;
|
||||
text-align: center;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.journal-form .tag:hover::before{
|
||||
color: red;
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
/* homepage.css */
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "testFont";
|
||||
src: url(CoveredByYourGrace-Regular.ttf);
|
||||
@ -8,7 +9,8 @@
|
||||
/* Color*/
|
||||
body{
|
||||
/*background-color: #97a5bd*/
|
||||
background-color: #E3E3EC;
|
||||
/*background-color: #E3E3EC;*/
|
||||
background-color: #F8F3F1;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
@ -26,7 +28,9 @@ body{
|
||||
.top-bar > h1 {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
color: #e4c3d2;
|
||||
/*color: #e4c3d2;*/
|
||||
/*color: rgb(145, 124, 175);*/
|
||||
color:#516754;
|
||||
font-size: 6rem;
|
||||
font-family: 'testFont';
|
||||
}
|
||||
@ -51,8 +55,10 @@ body{
|
||||
#recent-reviews-text {
|
||||
text-align: center;
|
||||
font-size: 4rem;
|
||||
color: #e4c3d2;
|
||||
font-family: 'testFont'
|
||||
/* color: #e4c3d2; */
|
||||
/*color: rgb(145, 124, 175);*/
|
||||
color: #516754;
|
||||
font-family: 'testFont';
|
||||
}
|
||||
|
||||
img#create-btn {
|
||||
@ -69,6 +75,25 @@ img#create-btn {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.review-container > div {
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
}}
|
||||
|
||||
img#create-btn {
|
||||
position: relative;
|
||||
align-self: center;
|
||||
padding-left: 2.5%;
|
||||
padding-right: 2.5%;
|
||||
}
|
||||
|
||||
.review-container {
|
||||
display: flex;
|
||||
position: relative;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.review-container > div {
|
||||
background-color: #f1f1f1;
|
||||
text-align: center;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user