From f8f41d680b76dd191d70e483166a367ec7163ca1 Mon Sep 17 00:00:00 2001 From: kaipher7 Date: Tue, 21 Apr 2026 23:54:16 -0600 Subject: [PATCH] new recipe bar on home working --- .../demo/controller/SiteController.java | 6 +- .../demo/service/Impl/RecipeServiceImpl.java | 11 + .../example/demo/service/RecipeService.java | 2 + src/main/resources/static/css/explore.css | 4 +- src/main/resources/static/css/home.css | 57 ++- src/main/resources/static/css/my-profile.css | 5 +- .../resources/static/css/public-profile.css | 425 ++++++++++++++++++ src/main/resources/templates/home.html | 12 +- .../resources/templates/public-profile.html | 12 +- 9 files changed, 513 insertions(+), 21 deletions(-) create mode 100644 src/main/resources/static/css/public-profile.css diff --git a/src/main/java/com/example/demo/controller/SiteController.java b/src/main/java/com/example/demo/controller/SiteController.java index a23ae7f..18c225e 100644 --- a/src/main/java/com/example/demo/controller/SiteController.java +++ b/src/main/java/com/example/demo/controller/SiteController.java @@ -26,8 +26,10 @@ public class SiteController { @GetMapping("/") public String viewHomePage(Model model) { - List recipes = recipeService.getAllRecipes(); - model.addAttribute("recipes", recipes); + List recipes = recipeService.getAllRecipes(); + List newest = recipeService.getNewestRecipes(5); + model.addAttribute("recipes", recipes); + model.addAttribute("newestRecipes", newest); return "home"; } diff --git a/src/main/java/com/example/demo/service/Impl/RecipeServiceImpl.java b/src/main/java/com/example/demo/service/Impl/RecipeServiceImpl.java index 44f8585..d20c6d9 100644 --- a/src/main/java/com/example/demo/service/Impl/RecipeServiceImpl.java +++ b/src/main/java/com/example/demo/service/Impl/RecipeServiceImpl.java @@ -206,6 +206,17 @@ public class RecipeServiceImpl implements RecipeService { return list; } + + @Override + @Transactional + public List getNewestRecipes(int limit) { + return recipeRepository.findAll().stream() + .filter(r -> r.getCreatedAt() != null) + .sorted((a, b) -> b.getCreatedAt().compareTo(a.getCreatedAt())) + .limit(limit) + .map(this::convertToDto) + .collect(Collectors.toList()); + } @Override @Transactional diff --git a/src/main/java/com/example/demo/service/RecipeService.java b/src/main/java/com/example/demo/service/RecipeService.java index 055c34d..0369585 100644 --- a/src/main/java/com/example/demo/service/RecipeService.java +++ b/src/main/java/com/example/demo/service/RecipeService.java @@ -18,6 +18,8 @@ public interface RecipeService { RecipeDto getRecipeById(Integer recipeId); + List getNewestRecipes(int limit); + List getRecipes(String name, List tags, List prices, List cookTime, List prepTime); RecipeDto updateRecipe(RecipeDto recipedto, Integer Id, String currentUsername); diff --git a/src/main/resources/static/css/explore.css b/src/main/resources/static/css/explore.css index 1980017..cddae2b 100644 --- a/src/main/resources/static/css/explore.css +++ b/src/main/resources/static/css/explore.css @@ -95,7 +95,7 @@ body, html { background-color: var(--peach); color: var(--dark); padding: 6px; - font-size: 1.75em; + font-size: 1.8em; font-weight: 900; letter-spacing: 1.5px; display: flex; @@ -128,7 +128,7 @@ body, html { border: none; padding: 0; cursor: pointer; - height: 100px; + height: 85px; width: auto; border-radius: 8px; transition: transform 0.2s ease; diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css index d203aa3..2b47191 100644 --- a/src/main/resources/static/css/home.css +++ b/src/main/resources/static/css/home.css @@ -87,7 +87,7 @@ body, html { background-color: var(--peach); color: var(--dark); padding: 6px; - font-size: 1.75em; + font-size: 1.8em; font-weight: 900; letter-spacing: 1.5px; display: flex; @@ -112,7 +112,7 @@ body, html { } .sidebar-left a:hover { - color: var(--dusty-red-hover); + color: var(--dusty-red); } .sidebar-left .nav_icon { @@ -120,7 +120,7 @@ body, html { border: none; padding: 0; cursor: pointer; - height: 100px; + height: 85px; width: auto; border-radius: 8px; transition: transform 0.2s ease; @@ -130,6 +130,7 @@ body, html { transform: scale(1.05); } + /* ========================= Floating Create Icon ========================= */ @@ -179,7 +180,7 @@ body, html { .sidebar-right { display: flex; flex-direction: column; - justify-content: space-between; + justify-content: flex-start; align-items: center; margin: 25px; padding: 5px; @@ -191,20 +192,52 @@ body, html { font-size: 1.6em; font-weight: 900; letter-spacing: 1.5px; + overflow: scroll; + scrollbar-width: none; } -.sidebar-right ul { - list-style: none; - padding: 0; +.sidebar-right h1 { + margin-bottom: 10px; } -.sidebar-right li { - margin-bottom: 5px; +.new-recipes { + display: flex; + flex-direction: column; + gap: 10px; + width: 100%; + padding: 0 8px; } -.sidebar-right a { - color: var(--dusty-red); - text-decoration: none; +.new-recipe-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 6px; + background: var(--dusty-red); + color: var(--dark-yellow); + border-radius: 10px; + padding: 6px; + width: 95%; + box-sizing: border-box; + margin: 5px; +} + +.new-recipe-item:hover { + background: var(--dusty-red-hover); +} + +.new-recipe-item p { + margin: 1px; + font-size: 0.65em; + font-weight: 700; + text-align: center; +} + +.new-recipe-item img { + width: 100%; + height: 75px; + object-fit: cover; + border-radius: 6px; } /* ========================= diff --git a/src/main/resources/static/css/my-profile.css b/src/main/resources/static/css/my-profile.css index 5b3a175..6737bb3 100644 --- a/src/main/resources/static/css/my-profile.css +++ b/src/main/resources/static/css/my-profile.css @@ -91,7 +91,7 @@ body, html { background-color: var(--peach); color: var(--dark); padding: 6px; - font-size: 1.75em; + font-size: 1.8em; font-weight: 900; letter-spacing: 1.5px; display: flex; @@ -124,7 +124,7 @@ body, html { border: none; padding: 0; cursor: pointer; - height: 100px; + height: 85px; width: auto; border-radius: 8px; transition: transform 0.2s ease; @@ -134,6 +134,7 @@ body, html { transform: scale(1.05); } + /* ========================= Floating Create Icon ========================= */ diff --git a/src/main/resources/static/css/public-profile.css b/src/main/resources/static/css/public-profile.css new file mode 100644 index 0000000..6737bb3 --- /dev/null +++ b/src/main/resources/static/css/public-profile.css @@ -0,0 +1,425 @@ +/* ========================= + Root Variables +========================= */ +:root { + --dusty-red: #D43F3F; + --dusty-red-hover: #C73636; + --dark-yellow: #FFD27F; + --pale-yellow: #FFECB3; + --peach: #F5A96E; + --dark: #850000; +} + +/* ========================= + Global Styles +========================= */ +.delius { + font-family: 'Delius Swash Caps', cursive; + font-weight: 400; + font-style: normal; +} + +.mali-regular { + font-family: 'Mali', cursive; + font-weight: 400; + font-style: normal; +} + +body, html { + height: 100vh; + margin: 0; + font-family: 'Mali', cursive; + background-color: var(--pale-yellow); + overflow: clip; +} + +/* ========================= + Layout Structure +========================= */ +.body { + display: flex; + flex-direction: row; + height: 100%; +} + +.body-left, .body-right { + position: sticky; + flex-grow: 0; + width: 400px; +} + +.body-right { + width: 50%; +} + +/* ========================= + Header Styles +========================= */ +.top-header { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + height: 60px; + padding: 10px 20px; + background-color: var(--dusty-red); + color: var(--dark-yellow); +} + +.top-header .swirl { + height: 40px; + width: auto; + margin: 0 20px; +} + +.site-name { + font-family: 'Delius Swash Caps', serif; + font-size: 2.5em; + font-weight: bold; + letter-spacing: 4px; + color: var(--dark-yellow); +} + +/* ========================= + Left Sidebar +========================= */ +.sidebar-left { + overflow: hidden; + margin: 25px; + border-radius: 20px; + z-index: 10; + background-color: var(--peach); + color: var(--dark); + padding: 6px; + font-size: 1.8em; + font-weight: 900; + letter-spacing: 1.5px; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; +} + +.sidebar-left ul { + list-style: none; + padding: 0; +} + +.sidebar-left li { + margin-bottom: 7px; +} + +.sidebar-left a { + color: var(--dark); + text-decoration: none; + transition: 0.1s ease; +} + +.sidebar-left a:hover { + color: var(--dusty-red); +} + +.sidebar-left .nav_icon { + background: none; + border: none; + padding: 0; + cursor: pointer; + height: 85px; + width: auto; + border-radius: 8px; + transition: transform 0.2s ease; +} + +.sidebar-left .nav_icon:hover { + transform: scale(1.05); +} + + +/* ========================= + Floating Create Icon +========================= */ +.create_icon { + position: fixed; + bottom: 30px; + left: 55px; + z-index: 1000; + transition: transform 0.2s ease; +} + +.create_icon::after { + content: "Create a recipe"; + display: none; + position: absolute; + left: 50%; + bottom: 100%; + transform: translateX(-50%); + background: var(--dark-yellow); + color: var(--dusty-red); + font-family: 'Mali', cursive; + font-size: 0.85em; + font-weight: 600; + white-space: nowrap; + padding: 4px 10px; + border-radius: 10px; +} + +.create_icon:hover::after { + display: block; +} + +.create_icon:hover { + transform: scale(1.02); +} + +.create_icon img { + width: 150px; + height: auto; + border-radius: 10%; +} + +/* ========================= + Right Sidebar +========================= */ +.sidebar-right { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + margin: 25px; + padding: 10px; + height: 75%; + border-radius: 20px; + z-index: 10; + background-color: var(--peach); + color: var(--dusty-red); + font-size: 1.4em; + font-weight: 900; + overflow: auto; + scrollbar-color: var(--dusty-red) transparent; + scrollbar-width: none; /* hid the scroll bar but you can scroll */ +} + +.sidebar-right p { + margin: 0 0 6px; + text-align: center; +} + +.sidebar-right strong { + font-size: 1.2em; + color: var(--dark); + letter-spacing: 1px; +} + +.profile-form { + width: 100%; + display: flex; + flex-direction: column; + gap: 10px; + padding: 12px; + box-sizing: border-box; + color: var(--dusty-red); +} + +.profile-form label { + font-size: 0.85em; + color: var(--dark); + font-weight: 700; + margin-bottom: 4px; + display: block; +} + +.profile-form input[type="text"], +.profile-form textarea { + width: 100%; + box-sizing: border-box; + background: var(--pale-yellow); + border: none; + border-radius: 8px; + padding: 6px 10px; + font-family: 'Mali', cursive; + font-size: 0.75em; + font-weight: 500; + color: var(--dusty-red); + resize: vertical; +} + +.profile-form input[type="text"]:focus, +.profile-form textarea:focus { + outline: 2px solid var(--dusty-red); +} + +.profile-form button[type="submit"] { + background: var(--dusty-red); + color: var(--dark-yellow); + border: none; + border-radius: 8px; + padding: 8px 16px; + font-family: 'Mali', cursive; + font-size: 0.75em; + font-weight: 700; + cursor: pointer; + align-self: center; +} + +.view-profile-btn { + background: var(--dusty-red); + color: var(--dark-yellow) !important; + border-radius: 8px; + padding: 6px 14px; + font-weight: 700; + font-size: 0.7em; + text-decoration: none !important; + display: inline-block; + margin-bottom: 16px; +} + +.view-profile-btn:hover { + background: var(--dusty-red-hover); +} + +.profile-form button[type="submit"]:hover { + background: var(--dusty-red-hover); +} + +/* ========================= + Main Content Area +========================= */ +.main-content { + width: 80%; + flex-grow: 1; + /*display: flex; this line was breaking the searched results. They returned recipes would not load at the top of the page*/ + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + overflow: auto; + scrollbar-color: var(--dusty-red) var(--pale-yellow); + height: auto; + color: var(--dusty-red); +} + +/* ========================= + Recipe Cards Layout +========================= */ +.recipe-card { + padding-top: 20px; + margin-top: 35px; + width: 99.5%; + display: flex; + flex-wrap: wrap; + gap: 35px; + justify-content: flex-start; + flex-direction: row; + height: fit-content; + padding-right: 10px; + overflow-y: auto; + flex: 1; + scrollbar-color: var(--dusty-red) var(--pale-yellow); +} + + +a { + text-decoration: none; + color: var(--dark); +} + +/* ========================= + Individual Card (Folder Style) +========================= */ +.card { + position: relative; /* needed for tab */ + display: flex; + align-items: center; + gap: 10px; + flex: 1 1 260px; + max-width: 400px; + max-height: 200px; + padding: 25px 20px 20px; /* extra space for tab */ + border-radius: 12px; + background: var(--peach); +} + +/* Folder Tab */ +.card::before { + content: ""; + position: absolute; + top: -16px; + left: 0px; + width: 100px; + height: 28px; + background: var(--peach); + border-radius: 6px 6px 0 0; +} + +.card-wrapper { + position: relative; + flex: 1 1 260px; + max-width: 400px; +} + +.edit-link { + position: absolute; + top: -3px; + left: 12px; + background: var(--dusty-red); + color: var(--dark-yellow); + font-size: 0.8em; + font-weight: 700; + font-family: 'Mali', cursive; + padding: 2px 8px; + border-radius: 6px; + z-index: 10; +} + +.edit-link:hover { + background: var(--dusty-red-hover); +} +/* ========================= + Card Content +========================= */ +.card .card-text { + height: 100%; + overflow: hidden; /* the scroll bars were difficult to look at, the user can just view the recipe*/ + color: var(--dark); + transition: 0.1s ease; +} + +.card .card-text:hover{ + color: var(--dusty-red-hover); +} + +/* .card .card-text h2 { + overflow: hidden; + text-overflow: ellipsis; +} */ + +.card .card-text p { + margin: 0 0 4px; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.card-cost { + font-weight: 800; + color: var(--dusty-red); +} + +/* ========================= + Card Image +========================= */ +.card img { + width: 100%; + height: 100px; + object-fit: cover; + border-radius: 8px; +} + +/* ========================= + Card Columns +========================= */ +.card-left, +.card-right { + flex-shrink: 0; + width: 50%; +} diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html index 7420eff..4385102 100644 --- a/src/main/resources/templates/home.html +++ b/src/main/resources/templates/home.html @@ -60,12 +60,22 @@

NEW

+
+ +

Title

+
+ Recipe Image +
+ +
+ \ No newline at end of file