alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2024-12-26 17:09:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

modified css for CreatePage and color palette for homepage

Browse Source 
Co-authored-by: rheabhutada02
Co-authored-by: Kara Hoagland
This commit is contained in:
d7hernan 2022-11-21 00:56:54 -08:00
parent 1055f7ef26
commit 1798835807
6 changed files with 150 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
source/CreatePage.html
View File

@ -41,6 +41,7 @@
<input type="file" accept="image/*" id="mealImg" name="mealImg"> <input type="file" accept="image/*" id="mealImg" name="mealImg">
</label> </label>
<label for="image-alt"> <label for="image-alt">
<br>
Alt Text: Alt Text:
<input type="text" id="imgAlt" name="imgAlt"> <input type="text" id="imgAlt" name="imgAlt">
</label> </label>
@ -50,7 +51,9 @@
<label for="Meal: ">Meal: <label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required> <input type="text" id="mealName" name="mealName" required>
</label> </label>
<label for="comments">Comments: <label for="comments">
<br>
Comments:
<br> <br>
<textarea name="comments" id="comments"></textarea> <textarea name="comments" id="comments"></textarea>
</label> </label>
@ -73,8 +76,10 @@
<label for="tag-form"> <label for="tag-form">
Tags: Tags:
<input type="text" id="tag-form" name="tag-form"> <input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form"> <div class='tag-container' id="tag-container-form">
</div> </div>
<button type="button" id="tag-add-btn">Add Tag</button> <button type="button" id="tag-add-btn">Add Tag</button>
</label> </label>

34
source/ReviewDetails.html
View File

@ -6,20 +6,28 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Food Journal</title> <title>Food Journal</title>
<!-- Recipe Card Custom Element --> <!-- Recipe Card Custom Element -->
<script src="assets/scripts/ReviewCard.js" type="module"></script> <script src="assets/scripts/ReviewCard.js" type="module"></script>
<!-- Main Stylesheets & Scripts --> <!-- Main Stylesheets & Scripts -->
<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config--> <!-- 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/reset.css" /> -->
<link rel="stylesheet" href="./static/ReviewDetails.css" /> <link rel="stylesheet" href="./static/ReviewDetails.css" />
<script src="assets/scripts/ReviewDetails.js" type="module"></script> <script src="assets/scripts/ReviewDetails.js" type="module"></script>
</head>
</div> <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 --> <!--- meal -->
<div class = "meal-name"> <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>
<div class = "meal-pics-and-tags"> <div class = "meal-pics-and-tags">
@ -28,13 +36,13 @@
alt = "photo" width=40% height=40% id="d-mealImg"> alt = "photo" width=40% height=40% id="d-mealImg">
<div class = "tag-container", id="d-tags"> <div class = "tag-container", id="d-tags">
</div> </div>
</div> </div>
<div class = "stars-and-comments"> <div class = "stars-and-comments">
<img src = "./assets/images/icons/5-star.svg" width=10% height=10% id="d-rating"> <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> </div>
<main> <main>
@ -43,7 +51,7 @@
<button type="button" id="delete-btn" class="danger">Delete</button> <button type="button" id="delete-btn" class="danger">Delete</button>
</main> </main>
<div class = journal-form id="update-form-div"> <div class = "journal-form" id="update-form-div">
<form id="update-food-entry"> <form id="update-food-entry">
<fieldset> <fieldset>
<legend>Pic:</legend> <legend>Pic:</legend>

10
source/assets/scripts/ReviewCard.js
View File

@ -13,7 +13,7 @@ class ReviewCard extends HTMLElement {
let styleEl = document.createElement("style"); let styleEl = document.createElement("style");
styleEl.textContent = ` styleEl.textContent = `
* { * {
font-family: sans-serif; font-family: Century Gothic;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -28,7 +28,7 @@ class ReviewCard extends HTMLElement {
article { article {
align-items: center; align-items: center;
border: 1px solid rgb(223, 225, 229); border: 2px solid rgb(31, 41, 32);
border-radius: 8px; border-radius: 8px;
display: grid; display: grid;
grid-template-rows: 118px 56px 14px 18px 15px 36px; grid-template-rows: 118px 56px 14px 18px 15px 36px;
@ -53,9 +53,9 @@ class ReviewCard extends HTMLElement {
} }
article>img { article>img {
border-top-left-radius: 8px; border-top-left-radius: 6px;
border-top-right-radius: 8px; border-top-right-radius: 6px;
height: 118px; height: 119px;
object-fit: cover; object-fit: cover;
margin-left: -16px; margin-left: -16px;
width: calc(100% + 32px); width: calc(100% + 32px);

48
source/static/CreatePage.css
View File

@ -1,7 +1,13 @@
/* CreatePage.css */ /* CreatePage.css */
@font-face {
font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
}
body { body {
background-color: #13323b; background-color: #F8F3F1;
} }
h1 { h1 {
@ -21,7 +27,8 @@ h1 {
position: relative; position: relative;
top: 2.2cm; top: 2.2cm;
font-size: 3cm; font-size: 3cm;
color: #eaa9bc; color:#516754;
font-family: 'testFont';
} }
.top-bar > form { .top-bar > form {
@ -31,12 +38,14 @@ h1 {
.journal-form { .journal-form {
font-size: 120%; font-size: 120%;
font-family: 'Century Gothic';
width: 50%; width: 50%;
display: block; display: block;
margin: auto; margin: auto;
color: #ccb3bb; color: #516754;
border: 3px solid rgb(7 0 0); border: 2px solid rgb(31, 41, 32);
background-color: #b52754; border-radius: 8px;
background-color: #f7dfd5;
} }
.hidden, .hidden,
@ -85,3 +94,32 @@ h1 {
.rating > label:hover ~ input:checked ~ label { .rating > label:hover ~ input:checked ~ label {
color: orangered; 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;
}

57
source/static/ReviewDetails.css
View File

@ -1,7 +1,12 @@
/* ReviewDetails.css */ /* ReviewDetails.css */
@font-face {
font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf);
}
body { body {
background-color: #13323b; background-color: #F8F3F1;
} }
h1 { h1 {
@ -9,28 +14,29 @@ h1 {
} }
.top-bar { .top-bar {
margin-top: -8cm; display: flex;
justify-content: center;
} }
.top-bar > img { .top-bar > img {
position: relative; position: relative;
top: 7.85cm; align-self: center;
padding-left: 2.5%;
padding-right: 2.5%;
} }
.top-bar > h1 { .top-bar > h1 {
position: relative; position: relative;
top: 2.2cm; text-align: center;
font-size: 3cm; /*color: #e4c3d2;*/
color: #eaa9bc; color:#516754;
} font-size: 6rem;
font-family: 'testFont';
.top-bar > form {
position: relative;
left: 32cm;
} }
.journal-form { .journal-form {
font-size: 120%; font-size: 120%;
font-family: 'Calibria';
width: 50%; width: 50%;
display: none; display: none;
margin: auto; margin: auto;
@ -94,3 +100,32 @@ h1 {
.rating > label:hover ~ input:checked ~ label { .rating > label:hover ~ input:checked ~ label {
color: orangered; 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;
}

33
source/static/homepage.css
View File

@ -1,5 +1,6 @@
/* homepage.css */ /* homepage.css */
@font-face { @font-face {
font-family: "testFont"; font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf); src: url(CoveredByYourGrace-Regular.ttf);
@ -8,7 +9,8 @@
/* Color*/ /* Color*/
body{ body{
/*background-color: #97a5bd*/ /*background-color: #97a5bd*/
background-color: #E3E3EC; /*background-color: #E3E3EC;*/
background-color: #F8F3F1;
} }
.top-bar { .top-bar {
@ -26,7 +28,9 @@ body{
.top-bar > h1 { .top-bar > h1 {
position: relative; position: relative;
text-align: center; text-align: center;
color: #e4c3d2; /*color: #e4c3d2;*/
/*color: rgb(145, 124, 175);*/
color:#516754;
font-size: 6rem; font-size: 6rem;
font-family: 'testFont'; font-family: 'testFont';
} }
@ -51,8 +55,10 @@ body{
#recent-reviews-text { #recent-reviews-text {
text-align: center; text-align: center;
font-size: 4rem; font-size: 4rem;
color: #e4c3d2; /* color: #e4c3d2; */
font-family: 'testFont' /*color: rgb(145, 124, 175);*/
color: #516754;
font-family: 'testFont';
} }
img#create-btn { img#create-btn {
@ -69,6 +75,25 @@ img#create-btn {
justify-content: center; 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 { .review-container > div {
background-color: #f1f1f1; background-color: #f1f1f1;
text-align: center; text-align: center;