mirror of
https://gitlab.com/etc404/software-engineering-project.git
synced 2026-05-10 20:52:58 +00:00
fixes
This commit is contained in:
@@ -351,6 +351,7 @@ textarea {
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
|
gap: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn,
|
.btn,
|
||||||
@@ -386,6 +387,19 @@ textarea {
|
|||||||
|
|
||||||
transition: background-color 0.1s ease, transform 0.2s ease;
|
transition: background-color 0.1s ease, transform 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn-delete {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--dusty-red);
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 50px;
|
||||||
|
font-family: 'Mali', cursive;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
/* small screens */
|
/* small screens */
|
||||||
@media (max-width: 600px) {
|
@media (max-width: 600px) {
|
||||||
|
|||||||
@@ -277,6 +277,10 @@ a {
|
|||||||
color: var(--dark);
|
color: var(--dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.recipe-card p {
|
||||||
|
color: var(--dusty-red);
|
||||||
|
}
|
||||||
|
|
||||||
/* =========================
|
/* =========================
|
||||||
Individual Card (Folder Style)
|
Individual Card (Folder Style)
|
||||||
========================= */
|
========================= */
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
<title>Create Thyme Crunch Recipe</title>
|
<title>Create Thyme Crunch Recipe</title>
|
||||||
<link rel="stylesheet" th:href="@{/css/create-recipe.css}">
|
<link rel="stylesheet" th:href="@{/css/create-recipe.css}">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@@ -76,13 +77,14 @@
|
|||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label>Estimated Cost: <span class="required">*</span></label>
|
<label>Estimated Cost: <span class="required">*</span></label>
|
||||||
<div class="cost-selector" id="cost-selector">
|
<div class="cost-selector" id="cost-selector">
|
||||||
<span class="dollar" data-value="1">$</span>
|
<span class="dollar" data-value="1">$</span>
|
||||||
<span class="dollar" data-value="2">$</span>
|
<span class="dollar" data-value="2">$</span>
|
||||||
<span class="dollar" data-value="3">$</span>
|
<span class="dollar" data-value="3">$</span>
|
||||||
<span class="dollar" data-value="4">$</span>
|
<span class="dollar" data-value="4">$</span>
|
||||||
</div>
|
</div>
|
||||||
<input type="hidden" id="cost" value="0">
|
<input type="hidden" id="cost" value="0">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
<nav class="sidebar-left">
|
<nav class="sidebar-left">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a th:href="@{/explore}">Explore</a></li>
|
<li><a th:href="@{/explore}">Explore</a></li>
|
||||||
<li><a th:href="${guest} ? @{/login} : @{/}">Favorites</a></li>
|
<li><a th:href="${guest} ? @{/login} : @{/}">Saved</a></li>
|
||||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||||
|
|
||||||
<li th:if="${guest}">
|
<li th:if="${guest}">
|
||||||
|
|||||||
@@ -19,7 +19,7 @@
|
|||||||
<nav class="sidebar-left">
|
<nav class="sidebar-left">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a th:href="@{/explore}">Explore</a></li>
|
<li><a th:href="@{/explore}">Explore</a></li>
|
||||||
<li><a th:href="${guest} ? @{/login} : @{/}">Favorites</a></li>
|
<li><a th:href="${guest} ? @{/login} : @{/}">Saved</a></li>
|
||||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||||
|
|
||||||
<li th:if="${guest}">
|
<li th:if="${guest}">
|
||||||
@@ -71,10 +71,18 @@
|
|||||||
|
|
||||||
<div class="body-right">
|
<div class="body-right">
|
||||||
<div class="sidebar-right">
|
<div class="sidebar-right">
|
||||||
<h1>FAVES</h1>
|
<h1>NEW</h1>
|
||||||
<p style="text-align:center; padding:0 16px;">
|
<div class="new-recipes">
|
||||||
Your saved recipes appear here.
|
<a th:each="recipe : ${newestRecipes}"
|
||||||
</p>
|
th:href="@{/recipes/{id}(id=${recipe.id})}"
|
||||||
|
class="new-recipe-item">
|
||||||
|
<p th:text="${recipe.title}">Title</p>
|
||||||
|
<div th:if="${recipe.images != null and !#lists.isEmpty(recipe.images)}">
|
||||||
|
<img th:src="${recipe.images[0].imageUrl}" alt="Recipe Image">
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
<nav class="sidebar-left">
|
<nav class="sidebar-left">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a th:href="@{/explore}">Explore</a></li>
|
<li><a th:href="@{/explore}">Explore</a></li>
|
||||||
<li><a href="/">Favorites</a></li>
|
<li><a href="/">Saved</a></li>
|
||||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||||
<li>
|
<li>
|
||||||
<form th:action="@{/logout}" method="post">
|
<form th:action="@{/logout}" method="post">
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
<nav class="sidebar-left">
|
<nav class="sidebar-left">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a th:href="@{/explore}">Explore</a></li>
|
<li><a th:href="@{/explore}">Explore</a></li>
|
||||||
<li><a th:href="${guest} ? @{/login} : @{/}">Favorites</a></li>
|
<li><a th:href="${guest} ? @{/login} : @{/}">Saved</a></li>
|
||||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||||
|
|
||||||
<li th:if="${guest}">
|
<li th:if="${guest}">
|
||||||
|
|||||||
@@ -7,6 +7,7 @@
|
|||||||
<title>Update Thyme Crunch Recipe</title>
|
<title>Update Thyme Crunch Recipe</title>
|
||||||
<link rel="stylesheet" th:href="@{/css/create-recipe.css}">
|
<link rel="stylesheet" th:href="@{/css/create-recipe.css}">
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Mali:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
@@ -75,8 +76,15 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label for="cost">Estimated Cost: <span class="required">*</span></label>
|
<div class="field">
|
||||||
<input type="text" id="cost" placeholder="0">
|
<label>Estimated Cost: <span class="required">*</span></label>
|
||||||
|
<div class="cost-selector" id="cost-selector">
|
||||||
|
<span class="dollar" data-value="1">$</span>
|
||||||
|
<span class="dollar" data-value="2">$</span>
|
||||||
|
<span class="dollar" data-value="3">$</span>
|
||||||
|
<span class="dollar" data-value="4">$</span>
|
||||||
|
</div>
|
||||||
|
<input type="hidden" id="cost" value="0">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -97,6 +105,7 @@
|
|||||||
|
|
||||||
<div class="actions">
|
<div class="actions">
|
||||||
<button class="btn-create" id="publish-btn" type="button">UPDATE</button>
|
<button class="btn-create" id="publish-btn" type="button">UPDATE</button>
|
||||||
|
<button class="btn-delete" id="delete-btn" type="button"><i class="fa fa-trash"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -189,6 +198,35 @@ document.getElementById('remove-img-btn').addEventListener('click', function (e)
|
|||||||
imageRemoved = true;
|
imageRemoved = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ---- Cost display ----
|
||||||
|
const dollars = document.querySelectorAll('.dollar');
|
||||||
|
|
||||||
|
dollars.forEach(dollar => {
|
||||||
|
dollar.addEventListener('click', () => {
|
||||||
|
const val = parseInt(dollar.dataset.value);
|
||||||
|
document.getElementById('cost').value = val;
|
||||||
|
dollars.forEach(d => {
|
||||||
|
d.classList.toggle('active', parseInt(d.dataset.value) <= val);
|
||||||
|
});
|
||||||
|
clearError(document.getElementById('cost-selector'));
|
||||||
|
});
|
||||||
|
|
||||||
|
dollar.addEventListener('mouseover', () => {
|
||||||
|
const val = parseInt(dollar.dataset.value);
|
||||||
|
dollars.forEach(d => {
|
||||||
|
d.classList.toggle('active', parseInt(d.dataset.value) <= val);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
dollar.addEventListener('mouseout', () => {
|
||||||
|
const selected = parseInt(document.getElementById('cost').value);
|
||||||
|
dollars.forEach(d => {
|
||||||
|
d.classList.toggle('active', parseInt(d.dataset.value) <= selected);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
// ---- Tags ----
|
// ---- Tags ----
|
||||||
document.getElementById('tag-input').addEventListener('keydown', function (e) {
|
document.getElementById('tag-input').addEventListener('keydown', function (e) {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
<nav class="sidebar-left">
|
<nav class="sidebar-left">
|
||||||
<ul>
|
<ul>
|
||||||
<li><a th:href="@{/explore}">Explore</a></li>
|
<li><a th:href="@{/explore}">Explore</a></li>
|
||||||
<li><a href="/">Favorites</a></li>
|
<li><a href="/">Saved</a></li>
|
||||||
<li><a th:href="@{/my-profile}">Profile</a></li>
|
<li><a th:href="@{/my-profile}">Profile</a></li>
|
||||||
<li>
|
<li>
|
||||||
<form th:action="@{/logout}" method="post">
|
<form th:action="@{/logout}" method="post">
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Reference in New Issue
Block a user