fixed form formatting, moved it to its own file

This commit is contained in:
rheabhutada02 2022-11-21 13:52:44 -08:00
parent 661feafa40
commit 46b1ec4b07
10 changed files with 287 additions and 463 deletions

View File

@ -15,6 +15,7 @@
<!-- 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/CreatePage.css" /> <link rel="stylesheet" href="./static/CreatePage.css" />
<link rel="stylesheet" href="./static/reviewForm.css" />
<link rel="icon" href="./assets/images/icons/favicon.ico"> <link rel="icon" href="./assets/images/icons/favicon.ico">
<script src="./assets/scripts/CreatePage.js" type="module"></script> <script src="./assets/scripts/CreatePage.js" type="module"></script>
</head> </head>
@ -28,62 +29,61 @@
</header> </header>
<body> <body>
<input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
<div class="journal-form"> <div class="journal-form">
<h1>New Entry</h1> <h1>New Entry</h1>
<form id="new-food-entry"> <form id="new-food-entry">
<fieldset>
Choose Input type: <fieldset>
<select id="select" name="select"> <legend>PICTURE:</legend>
<option value="file">File Upload</option> <select id="select" name="select">
<option value="url">From an URL</option> <option value="file">File Upload</option>
</select> <option value="url">From an URL</option>
<label for="mealImage" id="source"> </select>
<input type="file" accept="image/*" id="mealImg" name="mealImg"> <label for="mealImage" id="source">
</label> <input type="file" accept="image/*" id="mealImg" name="mealImg">
</fieldset> </label>
<fieldset> </fieldset>
<legend> Meal: </legend>
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="comments">
<br>
Comments:
<br>
<textarea name="comments" id="comments"></textarea>
</label>
</fieldset>
<fieldset class="rating">
<br>
Rating:
<br>
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5" id="s5-select"> 5 stars </label>
<input type="radio" id="s4" name="rating" value="4"/> <label for="s4" id="s4-select"> 4 stars </label>
<input type="radio" id="s3" name="rating" value="3"/> <label for="s3" id="s3-select"> 3 stars </label>
<input type="radio" id="s2" name="rating" value="2"/> <label for="s2" id="s2-select"> 2 stars </label>
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1" id="s1-select"> 1 star </label>
</fieldset>
<fieldset> <fieldset>
<legend>MEAL NAME:</legend>
<label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label>
</fieldset>
<label for="restaurant"> <fieldset>
Restaurant: <legend>RESTAURANT NAME:</legend>
<input type="text" id="restaurant" name="restaurant" required> <label for="Name:"> <input type="text" id="restaurant" name="restaurant" required> </label>
</label> </fieldset>
<label for="tag-form">
Tags:
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form"> <fieldset>
</div> <legend>RATING:</legend>
<div style="display: flex; justify-content: flex-start; align-items: center;">
<div class="rating">
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5" id="s5-select"> 5 stars </label>
<input type="radio" id="s4" name="rating" value="4"/> <label for="s4" id="s4-select"> 4 stars </label>
<input type="radio" id="s3" name="rating" value="3"/> <label for="s3" id="s3-select"> 3 stars </label>
<input type="radio" id="s2" name="rating" value="2"/> <label for="s2" id="s2-select"> 2 stars </label>
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1" id="s1-select"> 1 star </label>
</div>
</div>
</fieldset>
<fieldset>
<legend>COMMENTS:</legend>
<textarea name="comments" id="comments" rows="5" style="resize: none; width: 100%;"></textarea>
</fieldset>
<fieldset>
<legend>TAGS: (ex. cuisine, distance, cost, etc)</legend>
<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"> + </button>
</fieldset>
<button type="button" id="tag-add-btn">Add Tag</button>
</label>
</fieldset>
<button type="submit" id="save-btn" value="Submit">Save Review</button> <button type="submit" id="save-btn" value="Submit">Save Review</button>
<input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
</form> </form>
</div> </div>
</body> </body>

View File

@ -6,17 +6,18 @@
<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> <link rel="stylesheet" href="./static/reviewForm.css" />
<script src="assets/scripts/ReviewDetails.js" type="module"></script>
</head> </head>
<body> <body>
<header> <header>
<div class="top-bar"> <div class="top-bar">
<img src ="./assets/images/icons/Logo.png" alt="logo" /> <img src ="./assets/images/icons/Logo.png" alt="logo" />
<h1> Food Journal </h1> <h1> Food Journal </h1>
@ -27,7 +28,7 @@
<!--- meal --> <!--- meal -->
<div class = "meal-name"> <div class = "meal-name">
<h1 id="d-mealName"> Salad (default name) </h1> <h1 id="d-mealName"> Salad (default name) </h1>
<h1 id="d-restaurant"> Salad Inc. (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">
@ -51,58 +52,61 @@
<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 hidden" id="update-form">
<form id="update-food-entry"> <h1>Update Entry</h1>
<fieldset>
<legend>Pic:</legend>
Choose Input type:
<select id="select" name="select">
<option value="file">File Upload</option>
<option value="url">From an URL</option>
</select>
<label for="mealImage" id="source">
Source:
<input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
</fieldset>
<fieldset>
<legend> Meal: </legend> <form id="new-food-entry">
<label for="Meal: ">Meal:
<input type="text" id="mealName" name="mealName" required>
</label>
<label for="comments">Comments:
<br>
<textarea name="comments" id="comments"></textarea>
</label>
</fieldset>
<fieldset class="rating"> <fieldset>
<legend> Rating: </legend> <legend>PICTURE:</legend>
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5" id="s5-select"> 5 stars </label> <select id="select" name="select">
<input type="radio" id="s4" name="rating" value="4"/> <label for="s4" id="s4-select"> 4 stars </label> <option value="file">File Upload</option>
<input type="radio" id="s3" name="rating" value="3"/> <label for="s3" id="s3-select"> 3 stars </label> <option value="url">From an URL</option>
<input type="radio" id="s2" name="rating" value="2"/> <label for="s2" id="s2-select"> 2 stars </label> </select>
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1" id="s1-select"> 1 star </label> <label for="mealImage" id="source">
</fieldset> <input type="file" accept="image/*" id="mealImg" name="mealImg">
</label>
</fieldset>
<fieldset> <fieldset>
<legend>Other Info:</legend> <legend>MEAL NAME:</legend>
<label for="restaurant"> <label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label>
Restaurant: </fieldset>
<input type="text" id="restaurant" name="restaurant" required>
</label>
<label for="tag-form">
Tags:
<input type="text" id="tag-form" name="tag-form">
<div class='tag-container' id="tag-container-form">
</div> <fieldset>
<button type="button" id="tag-add-btn">Add Tag</button> <legend>RESTAURANT NAME:</legend>
</label> <label for="Name:"> <input type="text" id="restaurant" name="restaurant" required> </label>
</fieldset>
</fieldset> <fieldset>
<button type="submit" id="save-btn" value="Submit">Update Review</button> <legend>RATING:</legend>
<div style="display: flex; justify-content: flex-start; align-items: center;">
<div class="rating">
<input type="radio" id="s5" name="rating" value="5"/> <label for="s5" id="s5-select"> 5 stars </label>
<input type="radio" id="s4" name="rating" value="4"/> <label for="s4" id="s4-select"> 4 stars </label>
<input type="radio" id="s3" name="rating" value="3"/> <label for="s3" id="s3-select"> 3 stars </label>
<input type="radio" id="s2" name="rating" value="2"/> <label for="s2" id="s2-select"> 2 stars </label>
<input type="radio" id="s1" name="rating" value="1"/> <label for="s1" id="s1-select"> 1 star </label>
</div>
</div>
</fieldset>
<fieldset>
<legend>COMMENTS:</legend>
<textarea name="comments" id="comments" rows="5" style="resize: none; width: 100%;"></textarea>
</fieldset>
<fieldset>
<legend>TAGS: (ex. cuisine, distance, cost, etc)</legend>
<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"> + </button>
</fieldset>
<button type="submit" id="save-btn" value="Submit">Save Review</button>
<input type="button" value="Home" id="home-btn" onclick="window.location.assign('./index.html')">
</form> </form>
</div> </div>
</body> </body>

View File

@ -80,7 +80,22 @@ class ReviewCard extends HTMLElement {
time { time {
color: #70757A; color: #70757A;
font-size: 12px; font-size: 12px;
} }
.tag-container {
display: flex;
flex-flow: row wrap;
}
.tag {
background-color:#94da97;
border-radius: 7px;
color: #94da97;
padding-right: 7px;
padding-left: 7px;
margin: 3px;
font-weight: bold;
}
`; `;
articleEl.append(styleEl); articleEl.append(styleEl);
shadowEl.append(articleEl); shadowEl.append(articleEl);

View File

@ -68,11 +68,12 @@ function setupUpdate(){
let currID = JSON.parse(sessionStorage.getItem("currID")); let currID = JSON.parse(sessionStorage.getItem("currID"));
let currReview = getReviewFromStorage(currID); let currReview = getReviewFromStorage(currID);
let form = document.getElementById("update-food-entry"); let form = document.getElementById("update-food-entry");
let updateDiv = document.getElementById("update-form-div"); let updateDiv = document.getElementById("update-form");
updateBtn.addEventListener("click", function(){ updateBtn.addEventListener("click", function(){
//update function //update function
updateDiv.style.display = "block"; updateDiv.classList.remove("hidden");
let tagContainer = document.getElementById("tag-container-form"); let tagContainer = document.getElementById("tag-container-form");
//Set value of each input element to current's values //Set value of each input element to current's values

View File

@ -31,8 +31,7 @@
<div class="search-bar"> <div class="search-bar">
<form id="form"> <form id="form">
<input type="search" id="searching" name="searchBar" placeholder="Search journal..."> <input type="search" id="searching" name="searchBar" placeholder="Search journal...">
<button class="click" type="search"> Search <button class="click" type="search"> Search </button>
</button>
<div class="Filter-box"> <div class="Filter-box">
</div> </div>

View File

@ -1,8 +1,8 @@
/* CreatePage.css */ /* CreatePage.css */
@font-face { @font-face {
font-family: "testFont"; font-family: "testFont";
src: url(CoveredByYourGrace-Regular.ttf); src: url(CoveredByYourGrace-Regular.ttf);
} }
body { body {
@ -25,102 +25,7 @@ body {
.top-bar > h1 { .top-bar > h1 {
position: relative; position: relative;
text-align: center; text-align: center;
/*color: #e4c3d2;*/
/*color: rgb(145, 124, 175);*/
color:#516754; color:#516754;
font-size: 6rem; font-size: 6rem;
font-family: 'testFont';
}
.journal-form > h1 {
font-family: 'testFont'; font-family: 'testFont';
text-align: center;
}
.journal-form {
font-size: 120%;
font-family: 'Century Gothic';
width: 50%;
display: block;
margin: auto;
color: #516754;
border: 2px solid rgb(31, 41, 32);
border-radius: 8px;
background-color: #f7dfd5;
}
.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
display: none;
}
/* Unchecked stars */
.rating:not(:checked) > label {
/* Make stars line up sideways and not vertically */
float: right;
/* Hide label text */
width: 1em;
overflow: hidden;
white-space: nowrap;
/* Star default color and size */
font-size: 200%;
line-height: 1.2;
color: #b3b3cc;
}
.rating > label:active {
position: relative;
}
.rating:not(:checked) > label::before {
content: "★";
}
/* Checked star color */
.rating > input:checked ~ label {
color: #ffbf00;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: orangered;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover ~ label,
.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;
} }

View File

@ -33,99 +33,3 @@ h1 {
font-size: 6rem; font-size: 6rem;
font-family: 'testFont'; font-family: 'testFont';
} }
.journal-form {
font-size: 120%;
font-family: 'Calibria';
width: 50%;
display: none;
margin: auto;
color: #ccb3bb;
border: 3px solid rgb(7 0 0);
background-color: #b52754;
}
.meal-name {
font-size: 150%;
margin: left;
width: 50%;
border: 3px;
color: rgb(228 119 119);
text-align: left;
}
.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
display: none;
}
/* Unchecked stars */
.rating:not(:checked) > label {
/* Make stars line up sideways and not vertically */
float: right;
/* Hide label text */
width: 1em;
overflow: hidden;
white-space: nowrap;
/* Star default color and size */
font-size: 200%;
line-height: 1.2;
color: #b3b3cc;
}
.rating > label:active {
position: relative;
}
.rating:not(:checked) > label::before {
content: "★";
}
/* Checked star color */
.rating > input:checked ~ label {
color: #ffbf00;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: orangered;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover ~ label,
.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;
}

View File

@ -52,6 +52,18 @@ body{
justify-content: center; justify-content: center;
} }
.search-bar > form {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: rgb(239, 183, 183);
font-size: 17px;
border: none;
border-radius: 12px;
cursor: pointer;
}
#recent-reviews-text { #recent-reviews-text {
text-align: center; text-align: center;
font-size: 4rem; font-size: 4rem;

View File

@ -1,158 +0,0 @@
/* This is a generic CSS file that sets preliminary rules for content that should be the same across pages */
html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
address,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
samp,
small,
strong,
sub,
sup,
var,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
nav ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
content: "";
content: none;
}
a {
margin: 0;
padding: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input,
select {
vertical-align: middle;
}
img,
fieldset,
object {
border: none;
}
*,
*::after,
*::before {
box-sizing: border-box;
}
button,
label {
cursor: pointer;
}
html,
body {
height: 100%;
}
form {
border: solid;
}

View File

@ -0,0 +1,142 @@
.journal-form > h1 {
font-family: 'testFont';
text-align: center;
}
.journal-form {
font-size: 120%;
font-family: 'Century Gothic';
width: 50%;
margin: auto;
color: #516754;
border: 2px solid rgb(31, 41, 32);
border-radius: 8px;
background-color: #f7dfd5;
}
fieldset {
border: none;
}
input[type=text] {
width: 100%;
box-sizing: border-box;
background-color: #f7dfd5;
border: none;
border-bottom: 1px solid rgb(0, 0, 0);
}
input[type=text]:focus {
outline: none;
border-bottom: 1px solid rgb(0, 0, 0);
}
.rating {
display: flex; flex-wrap: nowrap; flex-direction: row-reverse;
}
.hidden,
.rating:not(:checked) > input { /* Hide radio circles while star rating */
display: none;
}
/* Unchecked stars */
.rating:not(:checked) > label {
/* Make stars line up sideways and not vertically */
float: right;
/* Hide label text */
width: 1em;
overflow: hidden;
white-space: nowrap;
/* Star default color and size */
font-size: 200%;
line-height: 1.2;
color: #b3b3cc;
}
.rating > label:active {
position: relative;
}
.rating:not(:checked) > label::before {
content: "★";
}
/* Checked star color */
.rating > input:checked ~ label {
color: #ffbf00;
}
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: orangered;
}
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover ~ label,
.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;
}
#tag-add-btn {
background-color: #94da97; /* Green */
border: round;
color: rgb(206, 83, 179);
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 10%;
margin-top: 5px;
}
#tag-add-btn:hover {
background-color: rgb(206, 83, 179); /* Green */
border: round;
color: #94da97;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
cursor: pointer;
border-radius: 10%;
margin-top: 5px;
}
.hidden {
display: none;
}