mirror of
				https://github.com/cse110-fa22-group29/cse110-fa22-group29.git
				synced 2025-10-30 19:46:49 +00:00 
			
		
		
		
	Move filter bar to separate div
This commit is contained in:
		| @@ -1,64 +1,66 @@ | |||||||
| <!DOCTYPE html> | <!DOCTYPE html> | ||||||
| <html lang="en"> | <html lang="en"> | ||||||
| 	<head> |  | ||||||
| 		<meta charset="UTF-8" /> |  | ||||||
| 		<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |  | ||||||
| 		<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |  | ||||||
| 		<title>Food Journal</title> |  | ||||||
|  |  | ||||||
| 		<!--Add Favicon--> | <head> | ||||||
| 		<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico"> | 	<meta charset="UTF-8" /> | ||||||
|  | 	<meta http-equiv="X-UA-Compatible" content="IE=edge" /> | ||||||
|  | 	<meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||||||
|  | 	<title>Food Journal</title> | ||||||
|  |  | ||||||
| 		<!-- Recipe Card Custom Element --> | 	<!--Add Favicon--> | ||||||
| 		<script src="assets/scripts/ReviewCard.js" type="module"></script> | 	<link rel="icon" type="image/x-icon" href="./assets/images/favicon.ico"> | ||||||
|  |  | ||||||
| 		<!-- Main Stylesheets & Scripts -->  | 	<!-- Recipe Card Custom Element --> | ||||||
| 		<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config--> | 	<script src="assets/scripts/ReviewCard.js" type="module"></script> | ||||||
| 		<!-- <link rel="stylesheet" href="/static/reset.css" /> --> |  | ||||||
| 		<link rel="stylesheet" href="./static/homepage.css" /> |  | ||||||
| 		<script src="assets/scripts/main.js" type="module"></script> |  | ||||||
| 	</head> |  | ||||||
| 	<body> |  | ||||||
| 		<header> |  | ||||||
| 			<div class="top-bar"> |  | ||||||
| 				<img src ="./assets/images/Logo.png" alt="logo" /> |  | ||||||
| 				<h1> Food Journal </h1> |  | ||||||
| 				<img src ="./assets/images/Logo.png" alt="logo" /> |  | ||||||
| 			</div> |  | ||||||
| 		</header> |  | ||||||
| 		<main> |  | ||||||
| 			<div class="body-container"> |  | ||||||
| 				<div style="width: 20%;"></div> |  | ||||||
| 				<div style="width: 60%;"> |  | ||||||
| 					<div class="search-bar"> |  | ||||||
| 						<form id="form"> |  | ||||||
| 							<input type="search" id="search-bar" name="searchBar" placeholder="Search tags..."> |  | ||||||
| 							<!---  |  | ||||||
| 								<button class="click" type="search"> Search </button> |  | ||||||
| 							---> |  | ||||||
| 							<div class="Filter-box"> |  | ||||||
|  |  | ||||||
| 							</div> | 	<!-- Main Stylesheets & Scripts --> | ||||||
| 						</form> | 	<!-- Temporarily commented out reset.css due to furthur discussion needed on the values of the default config--> | ||||||
| 						<img src ="./assets/images/search_button.png" alt="SEARCH BTN" id="search-btn"/> | 	<!-- <link rel="stylesheet" href="/static/reset.css" /> --> | ||||||
| 					</div> | 	<link rel="stylesheet" href="./static/homepage.css" /> | ||||||
| 					<div class="center-display">		 | 	<script src="assets/scripts/main.js" type="module"></script> | ||||||
| 						<img src ="./assets/images/create_button.png" alt="CREATE" id="create-btn" title="Add an entry!" onclick="window.location.assign('./CreatePage.html')"/> | </head> | ||||||
| 						<h2 id="recent-reviews-text"> Recent Reviews </h2> |  | ||||||
| 						<img src ="./assets/images/create_button.png" id="create-btn-invis" draggable="false"/> | <body> | ||||||
| 						<label for="sort">Filtering Method:</label> | 	<header> | ||||||
| 						<select id="sort"> | 		<div class="top-bar"> | ||||||
| 							<option value="recent">Most Recent</option> | 			<img src="./assets/images/Logo.png" alt="logo" /> | ||||||
| 							<option value="top">Top Rated</option> | 			<h1> Food Journal </h1> | ||||||
| 						</select> | 			<img src="./assets/images/Logo.png" alt="logo" /> | ||||||
|  | 		</div> | ||||||
|  | 	</header> | ||||||
|  | 	<main> | ||||||
|  | 		<div class="body-container"> | ||||||
|  | 			<div style="width: 20%;"></div> | ||||||
|  | 			<div style="width: 60%;"> | ||||||
|  | 				<div class="search-bar"> | ||||||
|  | 					<form id="form"> | ||||||
|  | 						<input type="search" id="search-bar" name="searchBar" placeholder="Search tags..."> | ||||||
| 						<button id="clear-search">Clear Search</button> | 						<button id="clear-search">Clear Search</button> | ||||||
| 					</div> | 					</form> | ||||||
|  | 					<img src="./assets/images/search_button.png" alt="SEARCH BTN" id="search-btn" /> | ||||||
|  | 				</div> | ||||||
|  |  | ||||||
| 					<div class="review-container" id="review-container"></div> | 				<div class="filter-bar"> | ||||||
|  | 					<label for="sort">Filtering Method:</label> | ||||||
|  | 					<select id="sort"> | ||||||
|  | 						<option value="recent">Most Recent</option> | ||||||
|  | 						<option value="top">Top Rated</option> | ||||||
|  | 					</select> | ||||||
| 				</div> | 				</div> | ||||||
| 				<div style="width: 20%;"> | 				 | ||||||
|  | 				<div class="center-display"> | ||||||
|  | 					<img src="./assets/images/create_button.png" alt="CREATE" id="create-btn" title="Add an entry!" | ||||||
|  | 						onclick="window.location.assign('./CreatePage.html')" /> | ||||||
|  | 					<h2 id="recent-reviews-text"> Recent Reviews </h2> | ||||||
|  | 					<img src="./assets/images/create_button.png" id="create-btn-invis" draggable="false" /> | ||||||
| 				</div> | 				</div> | ||||||
|  |  | ||||||
|  | 				<div class="review-container" id="review-container"></div> | ||||||
| 			</div> | 			</div> | ||||||
| 		</main> | 			<div style="width: 20%;"> | ||||||
| 	</body> | 			</div> | ||||||
|  | 		</div> | ||||||
|  | 	</main> | ||||||
|  | </body> | ||||||
|  |  | ||||||
| </html> | </html> | ||||||
		Reference in New Issue
	
	Block a user