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;
|
||||
align-items: center;
|
||||
margin-top: 1rem;
|
||||
gap: 60px;
|
||||
}
|
||||
|
||||
.btn,
|
||||
@@ -387,6 +388,19 @@ textarea {
|
||||
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 */
|
||||
@media (max-width: 600px) {
|
||||
body {
|
||||
|
||||
@@ -277,6 +277,10 @@ a {
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.recipe-card p {
|
||||
color: var(--dusty-red);
|
||||
}
|
||||
|
||||
/* =========================
|
||||
Individual Card (Folder Style)
|
||||
========================= */
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<title>Create Thyme Crunch Recipe</title>
|
||||
<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -83,6 +84,7 @@
|
||||
<span class="dollar" data-value="4">$</span>
|
||||
</div>
|
||||
<input type="hidden" id="cost" value="0">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<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 th:if="${guest}">
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<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 th:if="${guest}">
|
||||
@@ -71,10 +71,18 @@
|
||||
|
||||
<div class="body-right">
|
||||
<div class="sidebar-right">
|
||||
<h1>FAVES</h1>
|
||||
<p style="text-align:center; padding:0 16px;">
|
||||
Your saved recipes appear here.
|
||||
</p>
|
||||
<h1>NEW</h1>
|
||||
<div class="new-recipes">
|
||||
<a th:each="recipe : ${newestRecipes}"
|
||||
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>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<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>
|
||||
<form th:action="@{/logout}" method="post">
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<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 th:if="${guest}">
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
<title>Update Thyme Crunch Recipe</title>
|
||||
<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 rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -75,8 +76,15 @@
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="cost">Estimated Cost: <span class="required">*</span></label>
|
||||
<input type="text" id="cost" placeholder="0">
|
||||
<div class="field">
|
||||
<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>
|
||||
@@ -97,6 +105,7 @@
|
||||
|
||||
<div class="actions">
|
||||
<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>
|
||||
|
||||
@@ -189,6 +198,35 @@ document.getElementById('remove-img-btn').addEventListener('click', function (e)
|
||||
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 ----
|
||||
document.getElementById('tag-input').addEventListener('keydown', function (e) {
|
||||
if (e.key === 'Enter') {
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
<nav class="sidebar-left">
|
||||
<ul>
|
||||
<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>
|
||||
<form th:action="@{/logout}" method="post">
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 2.3 MiB |
Reference in New Issue
Block a user