From cc213dce1b85eca70669af21dc7136defa09b817 Mon Sep 17 00:00:00 2001 From: Elias Jansson Date: Mon, 12 May 2025 15:39:12 +0200 Subject: [PATCH] New themese and night/day mode --- Aberwyn/Data/MenuService.cs | 8 +- Aberwyn/Views/Home/Menu.cshtml | 63 ++---- Aberwyn/wwwroot/css/Veckomeny.css | 3 +- Aberwyn/wwwroot/css/meal-menu.css | 214 ------------------ Aberwyn/wwwroot/css/menu.css | 204 +++++++++++++++++ ...t_bbecaddf-0f4b-46c5-8666-62582e61de61.png | Bin 0 -> 4588 bytes Aberwyn/wwwroot/js/menu.js | 73 +++++- 7 files changed, 297 insertions(+), 268 deletions(-) delete mode 100644 Aberwyn/wwwroot/css/meal-menu.css create mode 100644 Aberwyn/wwwroot/css/menu.css create mode 100644 Aberwyn/wwwroot/images/meals/test_bbecaddf-0f4b-46c5-8666-62582e61de61.png diff --git a/Aberwyn/Data/MenuService.cs b/Aberwyn/Data/MenuService.cs index 1fe5b7e..c22bf2d 100644 --- a/Aberwyn/Data/MenuService.cs +++ b/Aberwyn/Data/MenuService.cs @@ -141,7 +141,7 @@ namespace Aberwyn.Data using (var connection = GetConnection()) { connection.Open(); - string query = "SELECT Id, Name FROM Meals"; + string query = "SELECT Id, Name, ImageUrl FROM Meals"; using (var cmd = new MySqlCommand(query, connection)) { using (var reader = cmd.ExecuteReader()) @@ -151,7 +151,8 @@ namespace Aberwyn.Data meals.Add(new Meal { Id = reader.GetInt32("Id"), - Name = reader.GetString("Name") + Name = reader.GetString("Name"), + ImageUrl = reader.IsDBNull(reader.GetOrdinal("ImageUrl")) ? null : reader.GetString(reader.GetOrdinal("ImageUrl")) }); } } @@ -167,7 +168,7 @@ namespace Aberwyn.Data { connection.Open(); string query = @" - SELECT Id, Name, Description, ProteinType, CarbType, RecipeUrl, CreatedAt + SELECT Id, Name, Description, ProteinType, CarbType, RecipeUrl, CreatedAt, ImageUrl FROM Meals ORDER BY CreatedAt DESC"; @@ -184,6 +185,7 @@ namespace Aberwyn.Data ProteinType = reader.IsDBNull(reader.GetOrdinal("ProteinType")) ? null : reader.GetString(reader.GetOrdinal("ProteinType")), CarbType = reader.IsDBNull(reader.GetOrdinal("CarbType")) ? null : reader.GetString(reader.GetOrdinal("CarbType")), RecipeUrl = reader.IsDBNull(reader.GetOrdinal("RecipeUrl")) ? null : reader.GetString(reader.GetOrdinal("RecipeUrl")), + ImageUrl = reader.IsDBNull(reader.GetOrdinal("ImageUrl")) ? null : reader.GetString(reader.GetOrdinal("ImageUrl")), CreatedAt = reader.GetDateTime(reader.GetOrdinal("CreatedAt")) }); } diff --git a/Aberwyn/Views/Home/Menu.cshtml b/Aberwyn/Views/Home/Menu.cshtml index 1ef2936..426d49e 100644 --- a/Aberwyn/Views/Home/Menu.cshtml +++ b/Aberwyn/Views/Home/Menu.cshtml @@ -1,61 +1,33 @@ -@model Aberwyn.Models.MenuViewModel - -@{ - var hideSidebar = Context.Request.Path.Value.EndsWith("/nosidebar", StringComparison.OrdinalIgnoreCase); - Layout = hideSidebar ? null : "_Layout"; -} - + - - Veckomeny + + Veckomeny - - - - + + + - - - + -
+

Veckomeny

-
Vecka {{selectedWeek}} – {{selectedYear}}
-
- - + + +
-
@@ -71,16 +43,15 @@ Middag: {{menu[day].dinnerMealName}}
-
Inte bestämd
+
+ Inte bestämd +
-
+
{{day}}
Frukost: {{menu[day].breakfastMealName}}
diff --git a/Aberwyn/wwwroot/css/Veckomeny.css b/Aberwyn/wwwroot/css/Veckomeny.css index 98ca523..147e6a7 100644 --- a/Aberwyn/wwwroot/css/Veckomeny.css +++ b/Aberwyn/wwwroot/css/Veckomeny.css @@ -127,7 +127,8 @@ /* Dag-cell med ikonknapp */ .day-cell { - max-width: 0px; + min-width: 25px; + max-width: 20px; padding: 8px 12px; font-weight: bold; vertical-align: top; diff --git a/Aberwyn/wwwroot/css/meal-menu.css b/Aberwyn/wwwroot/css/meal-menu.css deleted file mode 100644 index eab75de..0000000 --- a/Aberwyn/wwwroot/css/meal-menu.css +++ /dev/null @@ -1,214 +0,0 @@ -/* Meal Menu Page Styles */ -.meal-menu-page { - background-color: #2A3A48; /* Dark background to match theme */ - padding: 30px 60px; /* Add more padding to the sides */ - border-radius: 12px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - max-width: 900px; /* Adjust width to provide more space */ - margin: 0 auto; - color: #B0BEC5; /* Light gray text */ -} - - .meal-menu-page h1 { - font-size: 2rem; - text-align: center; - color: #FFFFFF; - margin-bottom: 20px; - } - -/* Date Picker */ -.date-picker { - display: flex; - justify-content: center; - align-items: center; - margin-bottom: 30px; - gap: 20px; -} - - .date-picker span { - font-size: 1.2rem; - color: #B0BEC5; - } - - .date-picker button { - background-color: #4A6572; - color: #ffffff; - padding: 12px 25px; - border: none; - border-radius: 8px; - cursor: pointer; - font-size: 1rem; - transition: background-color 0.3s; - } - - .date-picker button:hover { - background-color: #3A4E62; - } - -/* Mode Toggle */ -.mode-toggle { - text-align: center; - margin-bottom: 30px; -} - - .mode-toggle button { - background-color: #4CAF50; - color: #ffffff; - padding: 12px 20px; - border: none; - border-radius: 8px; - cursor: pointer; - font-size: 1rem; - transition: background-color 0.3s; - } - - .mode-toggle button:hover { - background-color: #45a049; - } - -/* Meal Menu Container - Vertical Layout */ -.meal-menu-container { - display: flex; - flex-direction: column; /* Align the days vertically */ - gap: 20px; - justify-content: flex-start; -} - -/* Day Block Styling */ -.day-block { - background-color: #1F2C3C; /* Darker background for day blocks */ - padding: 20px; - border-radius: 10px; - width: 100%; - text-align: center; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -} - -/* Day Header with Line */ -.day-header { - font-size: 1.5rem; - font-weight: bold; - margin-bottom: 15px; - color: #FFEB3B; /* Brighter yellow for the text */ - position: relative; /* Allows absolute positioning for the line */ -} - - .day-header::after { - content: ""; - position: absolute; - bottom: 0; /* Place it at the bottom of the header */ - left: 0; - width: 100%; /* Make the line span across the header */ - height: 2px; /* Thickness of the line */ - background-color: #FFEB3B; /* Yellow line for contrast */ - border-radius: 2px; /* Rounded corners for the line */ - } - -/* Meal Selection */ -.meal-selection { - font-size: 1rem; - color: #B0BEC5; - margin-bottom: 10px; -} - - .meal-selection strong { - color: #FFFFFF; - } - - .meal-selection span { - color: #FFEB3B; /* Highlight the meal names */ - } - -/* Edit Mode Styling */ -.edit-mode select { - background-color: #444; - color: #fff; - border: none; - padding: 10px; - border-radius: 6px; - width: 100%; - font-size: 1rem; - margin-top: 5px; - cursor: pointer; -} - - .edit-mode select:focus { - outline: none; - box-shadow: 0 0 8px rgba(66, 133, 244, 0.8); - } - -/* Save Button */ -.save-menu-button { - display: block; - background-color: #FF9800; - color: #fff; - padding: 12px 25px; - border: none; - border-radius: 8px; - cursor: pointer; - font-size: 1rem; - width: 200px; - margin: 30px auto; - text-align: center; - transition: background-color 0.3s; -} - - .save-menu-button:hover { - background-color: #F57C00; - } - -/* New Meal Form Styling */ -.new-meal-form { - display: flex; - flex-direction: column; /* Stack input fields vertically */ - gap: 15px; /* Space between fields */ - padding: 20px; - background-color: #1F2C3C; /* Dark background to match theme */ - border-radius: 10px; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); - max-width: 400px; /* Control the width of the form */ - margin: 0 auto; -} - - /* Input Fields */ - .new-meal-form input, - .new-meal-form select, - .new-meal-form textarea { - background-color: #444; /* Dark background for inputs */ - color: #fff; /* White text */ - border: none; - padding: 12px 15px; - border-radius: 6px; - font-size: 1rem; - width: 100%; /* Ensure inputs take full width */ - } - - /* Focused Input Fields */ - .new-meal-form input:focus, - .new-meal-form select:focus, - .new-meal-form textarea:focus { - outline: none; - box-shadow: 0 0 8px rgba(66, 133, 244, 0.8); /* Blue focus highlight */ - } - - /* Submit Button */ - .new-meal-form button { - background-color: #FF9800; /* Button color */ - color: #fff; - padding: 12px 20px; - border: none; - border-radius: 8px; - cursor: pointer; - font-size: 1rem; - transition: background-color 0.3s; - width: 100%; /* Button takes full width */ - } - - /* Button Hover */ - .new-meal-form button:hover { - background-color: #F57C00; - } - -.meal-hover { - cursor: pointer; -} diff --git a/Aberwyn/wwwroot/css/menu.css b/Aberwyn/wwwroot/css/menu.css new file mode 100644 index 0000000..324140a --- /dev/null +++ b/Aberwyn/wwwroot/css/menu.css @@ -0,0 +1,204 @@ +:root { + --bg: #F9FAFB; + --bg-mid: #EDF2F7; + --text: #2D3748; + --accent: #3182CE; + --card-bg: #ffffff; + --border-radius: 10px; + --spacing: 20px; + --font-size: 1rem; + --faint-text: #718096; + --subtle-text: #4A5568; +} + +[data-theme="dark"] { + --bg: #1F2C3C; + --bg-mid: #2E3C4F; + --text: #E0E6ED; + --accent: #3182CE; + --card-bg: #2A3A48; + --faint-text: #A0AAB5; + --subtle-text: #D0DCE4; +} + +body { + margin: 0; + font-family: "Segoe UI", sans-serif; + background-color: var(--bg); + color: var(--text); +} + +.meal-menu-page { + position: relative; + padding: var(--spacing); + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + background: radial-gradient(circle at center, var(--bg-mid), var(--bg) 80%); +} + + .meal-menu-page > * { + position: relative; + z-index: 1; + width: 100%; + max-width: 960px; + } + +h1 { + font-size: 2rem; + margin-bottom: var(--spacing); + text-align: center; + color: var(--accent); +} + +.date-picker { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; + margin-bottom: var(--spacing); + font-size: var(--font-size); + color: var(--subtle-text); +} + + .date-picker button { + background: var(--accent); + border: none; + padding: 0.5rem 1rem; + border-radius: var(--border-radius); + cursor: pointer; + font-weight: bold; + color: #ffffff; + transition: background 0.2s ease; + } + + .date-picker button:hover { + background: #2B6CB0; + } + +.view-selector { + position: absolute; + top: var(--spacing); + right: var(--spacing); + display: flex; + align-items: center; + gap: 8px; +} + + .view-selector select { + display: none; + } + + .view-selector .toggle-view-btn, + .view-selector .theme-toggle-btn { + background: none; + border: none; + color: var(--text); + font-size: 1.2rem; + padding: 6px; + cursor: pointer; + border-radius: 4px; + transition: background-color 0.2s; + } + + .view-selector .toggle-view-btn:hover, + .view-selector .theme-toggle-btn:hover { + background-color: rgba(0, 0, 0, 0.1); + } + +.list-view .day-item { + background: var(--card-bg); + margin-bottom: var(--spacing); + padding: var(--spacing); + border-radius: var(--border-radius); +} + +.day-header { + font-size: 1.4rem; + color: var(--accent); + margin-bottom: 8px; + position: relative; +} + + .day-header::after { + content: ''; + position: absolute; + bottom: -4px; + left: 0; + width: 40px; + height: 3px; + background: var(--accent); + border-radius: 2px; + } + +.meal-selection { + margin: 6px 0; + font-size: 1rem; +} + + .meal-selection a { + color: var(--text); + text-decoration: none; + } + + .meal-selection a:hover { + text-decoration: underline; + } + +.not-assigned { + color: var(--faint-text); + font-style: italic; +} + +.card-view .card-container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); + gap: var(--spacing); +} + +.meal-card { + position: relative; + height: 200px; + color: #fff; + background-size: cover; + background-position: center; + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); + display: flex; + align-items: flex-end; + cursor: pointer; +} + + .meal-card::before { + content: ''; + position: absolute; + inset: 0; + background: linear-gradient(to top, rgba(49, 130, 206, 0.3), rgba(0, 0, 0, 0.7), transparent); + pointer-events: none; + transition: opacity 0.3s ease; + opacity: 1; + } + + .meal-card[data-has-image="true"]::before { + opacity: 0; + } + +.card-content { + position: relative; + padding: 12px; + z-index: 1; + width: 100%; +} + + .card-content .day { + font-size: 1.2rem; + font-weight: bold; + margin-bottom: 6px; + } + + .card-content .meal { + font-size: 0.9rem; + line-height: 1.2; + } diff --git a/Aberwyn/wwwroot/images/meals/test_bbecaddf-0f4b-46c5-8666-62582e61de61.png b/Aberwyn/wwwroot/images/meals/test_bbecaddf-0f4b-46c5-8666-62582e61de61.png new file mode 100644 index 0000000000000000000000000000000000000000..e39e4c9d5e07f02a2ce71e07cf0263dd9dce8e50 GIT binary patch literal 4588 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 WgJOR{w { console.log("Måltider hämtade:", res.data); $scope.meals = res.data; + console.log("Alla måltider med bilder:", $scope.meals); return res; }) .catch(err => console.error("Fel vid hämtning av måltider:", err)); @@ -53,8 +59,10 @@ $scope.menu[day][type + 'MealId'] = item[idKey]; $scope.menu[day][type + 'MealName'] = m?.Name || item[nameKey] || 'Okänd rätt'; - if (m?.ImageUrl) { - $scope.menu[day].imageUrl = m.ImageUrl; + if (m?.ImageUrl && !$scope.menu[day].imageUrl) { + $scope.menu[day].imageUrl = m.ImageUrl.startsWith('/') + ? m.ImageUrl + : '/' + m.ImageUrl; } } }); @@ -71,7 +79,17 @@ $scope.getDayImage = function (day) { const item = $scope.menu[day]; - return (item && item.imageUrl) || '/images/default-meal.jpg'; + const img = item?.imageUrl; + + if (img && img.startsWith('/')) { + return img; + } + + if (img && !img.startsWith('/')) { + return '/' + img; // Fixa ev. saknad inledande snedstreck + } + + return '/images/default-meal.jpg'; }; $scope.getMealIdByDay = function (day) { @@ -106,10 +124,57 @@ const yearStart = new Date(d.getFullYear(), 0, 1); return Math.ceil((((d - yearStart) / 86400000) + 1) / 7); } + $scope.getViewIcon = function () { + return $scope.viewMode === 'list' ? '🗒️' : '▣'; + }; + + $scope.toggleView = function () { + $scope.viewMode = $scope.viewMode === 'list' ? 'card' : 'list'; + // Uppdatera knappens ikon + setTimeout(() => { + const btn = document.getElementById('toggle-view'); + if (btn) { + btn.textContent = $scope.getViewIcon(); + } + }, 0); + }; + console.log("Initierar måltidsladdning..."); $scope.loadMeals().then(() => { console.log("Laddar meny efter måltider..."); $scope.loadMenu(); + setTimeout(() => { + const viewBtn = document.getElementById('toggle-view'); + if (viewBtn) viewBtn.textContent = $scope.getViewIcon(); + }, 0); + }); }); +document.addEventListener("DOMContentLoaded", function () { + const themeBtn = document.getElementById('toggle-theme'); + const viewBtn = document.getElementById('toggle-view'); + + if (themeBtn) { + themeBtn.addEventListener('click', () => { + const current = document.documentElement.getAttribute('data-theme'); + const newTheme = current === 'dark' ? 'light' : 'dark'; + setTheme(newTheme); + themeBtn.textContent = newTheme === 'dark' ? '🌙' : '☀️'; + }); + } + + const saved = localStorage.getItem('theme'); + if (saved) { + setTheme(saved); + } else { + const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; + setTheme(systemPrefersDark ? 'dark' : 'light'); + } + + // Initiera ikon för vy + const scope = angular.element(document.body).scope(); + if (viewBtn && scope) { + viewBtn.textContent = scope.viewMode === 'list' ? '🗒️' : '▣'; + } +});