Tai/Aberwyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout ändringar och meal fixar
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Elias Jansson
2025-06-12 13:00:52 +02:00
parent fc78ec0813
commit d1e4901eee
16 changed files with 800 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
Aberwyn/Controllers/HomeController.cs
View File

@@ -27,7 +27,14 @@ namespace Aberwyn.Controllers
{ {
var isOpen = _context.AppSettings.FirstOrDefault(x => x.Key == "RestaurantIsOpen")?.Value == "True"; var isOpen = _context.AppSettings.FirstOrDefault(x => x.Key == "RestaurantIsOpen")?.Value == "True";
ViewBag.RestaurantIsOpen = isOpen; ViewBag.RestaurantIsOpen = isOpen;
return View();
var now = DateTime.Now;
var showDate = now.Hour >= 18 ? now.Date.AddDays(1) : now.Date;
var todaysMenu = _menuService.GetMenuForDate(showDate);
ViewBag.ShowDate = showDate;
return View(todaysMenu);
} }
public IActionResult Privacy() public IActionResult Privacy()

35
Aberwyn/Data/MenuService.cs
View File

@@ -339,6 +339,41 @@ public List<WeeklyMenu> GetWeeklyMenu(int weekNumber, int year)
return menus; return menus;
} }
public WeeklyMenu? GetMenuForDate(DateTime date)
{
int week = ISOWeek.GetWeekOfYear(date);
int year = date.Year;
// Gör om till ISO 8601: Måndag = 1, Söndag = 7
int dayOfWeek = (int)date.DayOfWeek;
if (dayOfWeek == 0) dayOfWeek = 7;
var menu = _context.WeeklyMenus
.FirstOrDefault(w => w.WeekNumber == week && w.Year == year && w.DayOfWeek == dayOfWeek);
if (menu != null)
{
var mealIds = new[] { menu.BreakfastMealId, menu.LunchMealId, menu.DinnerMealId }
.Where(id => id.HasValue)
.Select(id => id.Value)
.Distinct()
.ToList();
var allMeals = _context.Meals
.Where(m => mealIds.Contains(m.Id))
.ToDictionary(m => m.Id, m => m.Name);
if (menu.BreakfastMealId.HasValue && allMeals.TryGetValue(menu.BreakfastMealId.Value, out var breakfast))
menu.BreakfastMealName = breakfast;
if (menu.LunchMealId.HasValue && allMeals.TryGetValue(menu.LunchMealId.Value, out var lunch))
menu.LunchMealName = lunch;
if (menu.DinnerMealId.HasValue && allMeals.TryGetValue(menu.DinnerMealId.Value, out var dinner))
menu.DinnerMealName = dinner;
}
return menu;
}
public List<WeeklyMenu> GetMenuEntriesByDateRange(DateTime startDate, DateTime endDate) public List<WeeklyMenu> GetMenuEntriesByDateRange(DateTime startDate, DateTime endDate)
{ {

3
Aberwyn/Views/Budget/Index.cshtml
View File

@@ -4,8 +4,7 @@
@{ @{
ViewData["Title"] = "Budget"; ViewData["Title"] = "Budget";
} }
<div ng-app="budgetApp" ng-controller="BudgetController" class="budget-page" ng-if="!loading">
<div ng-app="budgetApp" ng-controller="BudgetController" class="budget-page" ng-init="loadBudget()">
<div class="budget-header" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;"> <div class="budget-header" style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
<div class="month-nav-bar" style="display: flex; align-items: center; gap: 10px; position: relative;"> <div class="month-nav-bar" style="display: flex; align-items: center; gap: 10px; position: relative;">
<button class="nav-button" ng-click="previousMonth()">←</button> <button class="nav-button" ng-click="previousMonth()">←</button>

2
Aberwyn/Views/FoodMenu/Veckomeny.cshtml
View File

@@ -145,7 +145,7 @@
<datalist id="meals-list"> <datalist id="meals-list">
@foreach (var meal in (List<Meal>)ViewBag.AvailableMeals) @foreach (var meal in (List<Meal>)ViewBag.AvailableMeals)
{ {
<option value="@meal.Id">@meal.Name</option> <option value="@meal.Name">@meal.Name</option>
} }
</datalist> </datalist>
</form> </form>

24
Aberwyn/Views/Home/Budget.cshtml
View File

@@ -7,16 +7,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" ng-app="budgetApp"> <html lang="en" ng-app="budgetApp">
<head> <head>
<style>
[ng-cloak] {
display: none !important;
}
</style>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Budget Overview</title> <title>Budget Overview</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="~/css/budget.css"> <link rel="stylesheet" type="text/css" href="~/css/budget.css">
</head> </head>
<body ng-controller="BudgetController"> <body ng-controller="BudgetController" ng-cloak>
<div class="budget-page"> <div class="budget-page">
<h1>Budget Overview</h1> <h1 ng-cloak>Budget Overview</h1>
<div class="date-picker" ng-click="toggleDatePicker($event)"> <div class="date-picker" ng-click="toggleDatePicker($event)">
<button type="button" class="date-picker-toggle"> <button type="button" class="date-picker-toggle">
@@ -28,7 +33,11 @@
</div> </div>
</div> </div>
<div class="budget-container"> <div ng-if="isLoadingBudget" class="loading-indicator">
⏳ Laddar budget...
</div>
<div ng-if="!isLoadingBudget" class="budget-container">
<div ng-repeat="category in categories" class="category-block"> <div ng-repeat="category in categories" class="category-block">
<div class="category-header"> <div class="category-header">
{{ category }} {{ category }}
@@ -55,7 +64,7 @@
angular.module('budgetApp', []) angular.module('budgetApp', [])
.controller('BudgetController', function ($scope, $http) { .controller('BudgetController', function ($scope, $http) {
const today = new Date(); const today = new Date();
$scope.isLoadingBudget = true;
// Initialize months and years // Initialize months and years
$scope.months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']; $scope.months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];
$scope.years = [...Array(11).keys()].map(i => today.getFullYear() - 10 + i); $scope.years = [...Array(11).keys()].map(i => today.getFullYear() - 10 + i);
@@ -72,11 +81,16 @@
// Automatically filter when month or year changes // Automatically filter when month or year changes
$scope.filterBudget = function () { $scope.filterBudget = function () {
$scope.isLoadingBudget = true;
$http.get('/api/budgetapi/items', { $http.get('/api/budgetapi/items', {
params: { month: $scope.selectedMonth, year: $scope.selectedYear } params: { month: $scope.selectedMonth, year: $scope.selectedYear }
}).then(response => { }).then(response => {
$scope.budgetItems = response.data; $scope.budgetItems = response.data;
}).catch(error => console.error("Error fetching budget items:", error)); $scope.isLoadingBudget = false;
}).catch(error => {
console.error("Error fetching budget items:", error);
$scope.isLoadingBudget = false;
});
}; };
$scope.getItemsByCategory = function (category) { $scope.getItemsByCategory = function (category) {

56
Aberwyn/Views/Home/Index.cshtml
View File

@@ -1,18 +1,44 @@
@{ @model Aberwyn.Models.WeeklyMenu
ViewData["Title"] = "Welcome to Lewel!"; @{
var showDate = (DateTime)ViewBag.ShowDate;
var day = showDate.ToString("dddd", new System.Globalization.CultureInfo("sv-SE"));
}
<link rel="stylesheet" href="~/css/Welcome.css" />
<section class="welcome-section light-mode">
<div class="welcome-content">
<h1 class="welcome-title">Välkommen till
<span class="initial L">L</span>
<span class="initial E">E</span>
<span class="initial W">W</span>
<span class="initial E2">E</span>
<span class="initial L2">L</span></h1>
<p class="welcome-subtitle">Idag är det <strong>@day</strong> – dagens meny är:</p>
@if (Model != null)
{
<div class="meal-lines">
@if (!string.IsNullOrWhiteSpace(Model.BreakfastMealName)) {
<p><strong>Frukost:</strong> @Model.BreakfastMealName</p>
}
@if (!string.IsNullOrWhiteSpace(Model.LunchMealName)) {
<p><strong>Lunch:</strong> @Model.LunchMealName</p>
}
@if (!string.IsNullOrWhiteSpace(Model.DinnerMealName)) {
<p><strong>Middag:</strong> @Model.DinnerMealName</p>
} }
<!DOCTYPE html> @if (ViewBag.RestaurantIsOpen as bool? == true)
<html lang="en"> {
<head> <p><strong>Pizzerian är öppen!</strong></p><a asp-controller="FoodMenu" asp-action="PizzaOrder">Klicka här för att Beställa pizza</a>
<meta charset="utf-8"> }
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewData["Title"]</title>
</head>
<body>
<div class="container">
<h1>Välkommen</h1> Kika på <a href="/Home/Menu" class="button">Menyn</a> om du vill.
</div> </div>
</body> }
</html> else
{
<p class="no-menu">Ingen meny är inlagd för denna dag.</p>
}
<a class="nav-button" href="/Home/Menu">Visa hela veckomenyn</a>
</div>
</section>

6
Aberwyn/Views/Home/Menu.cshtml
View File

@@ -32,13 +32,13 @@
<div class="day-header">{{day}}</div> <div class="day-header">{{day}}</div>
<div class="meal-info" ng-if="menu[day]"> <div class="meal-info" ng-if="menu[day]">
<div ng-if="menu[day].breakfastMealId" class="meal-selection"> <div ng-if="menu[day].breakfastMealId" class="meal-selection">
<a href="/Meal/View/{{menu[day].breakfastMealId}}" target="_blank"><strong>Frukost:</strong> {{menu[day].breakfastMealName}}</a> <a href="/Meal/View/{{menu[day].breakfastMealId}}"><strong>Frukost:</strong> {{menu[day].breakfastMealName}}</a>
</div> </div>
<div ng-if="menu[day].lunchMealId" class="meal-selection"> <div ng-if="menu[day].lunchMealId" class="meal-selection">
<a href="/Meal/View/{{menu[day].lunchMealId}}" target="_blank"><strong>Lunch:</strong> {{menu[day].lunchMealName}}</a> <a href="/Meal/View/{{menu[day].lunchMealId}}"><strong>Lunch:</strong> {{menu[day].lunchMealName}}</a>
</div> </div>
<div ng-if="menu[day].dinnerMealId" class="meal-selection"> <div ng-if="menu[day].dinnerMealId" class="meal-selection">
<a href="/Meal/View/{{menu[day].dinnerMealId}}" target="_blank"><strong>Middag:</strong> {{menu[day].dinnerMealName}}</a> <a href="/Meal/View/{{menu[day].dinnerMealId}}"><strong>Middag:</strong> {{menu[day].dinnerMealName}}</a>
</div> </div>
</div> </div>
<div ng-if="!menu[day]"> <div ng-if="!menu[day]">

26
Aberwyn/Views/Meal/Index.cshtml
View File

@@ -1,6 +1,3 @@
@{
}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="sv" ng-app="mealGalleryApp"> <html lang="sv" ng-app="mealGalleryApp">
<head> <head>
@@ -9,6 +6,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<link rel="stylesheet" href="/css/meal-gallery.css"> <link rel="stylesheet" href="/css/meal-gallery.css">
<script src="https://kit.fontawesome.com/yourkit.js" crossorigin="anonymous"></script> <!-- om du använder fontawesome -->
<style>
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }
</style>
</head> </head>
<body ng-controller="MealGalleryController"> <body ng-controller="MealGalleryController">
<div class="meal-gallery-container"> <div class="meal-gallery-container">
@@ -21,7 +23,8 @@
</div> </div>
<div class="meal-gallery-grid"> <div class="meal-gallery-grid">
<div class="meal-card" ng-repeat="meal in meals | filter:search"> <div class="meal-card"
ng-repeat="meal in (meals | filter:search) | limitTo:visibleCount track by meal.Id">
<img ng-src="{{ meal.ThumbnailData ? 'data:image/webp;base64,' + meal.ThumbnailData : '/images/fallback.jpg' }}" <img ng-src="{{ meal.ThumbnailData ? 'data:image/webp;base64,' + meal.ThumbnailData : '/images/fallback.jpg' }}"
alt="{{ meal.Name }}"> alt="{{ meal.Name }}">
<div class="meal-card-content"> <div class="meal-card-content">
@@ -37,10 +40,25 @@
angular.module("mealGalleryApp", []).controller("MealGalleryController", function ($scope, $http) { angular.module("mealGalleryApp", []).controller("MealGalleryController", function ($scope, $http) {
$scope.meals = []; $scope.meals = [];
$scope.search = ""; $scope.search = "";
$scope.visibleCount = 12;
$http.get("/api/mealMenuApi/getMeals").then(res => { $http.get("/api/mealMenuApi/getMeals").then(res => {
$scope.meals = res.data; $scope.meals = res.data;
}); });
// Lazy loading on scroll
window.addEventListener('scroll', function () {
if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 150) {
$scope.$applyAsync(() => {
$scope.visibleCount += 8;
});
}
});
// Show all when searching
$scope.$watch('search', function (newVal) {
$scope.visibleCount = newVal ? 9999 : 12;
});
}); });
</script> </script>
</body> </body>

99
Aberwyn/Views/Shared/_Layout.cshtml
View File

@@ -4,6 +4,11 @@
<link rel="manifest" href="/manifest.json"> <link rel="manifest" href="/manifest.json">
<link rel="icon" type="image/png" sizes="512x512" href="/images/lewel-icon.png"> <link rel="icon" type="image/png" sizes="512x512" href="/images/lewel-icon.png">
<meta name="theme-color" content="#6a0dad"> <meta name="theme-color" content="#6a0dad">
<style>
[ng-cloak] {
display: none !important;
}
</style>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LEWEL - Dashboard</title> <title>LEWEL - Dashboard</title>
@@ -28,42 +33,51 @@
</header> </header>
<div class="page-content"> <div class="page-content">
<aside class="sidebar"> <nav class="main-nav">
@if (ViewBag.IsSetupMode as bool? != true) <ul class="nav-list-horizontal">
{ <li><a asp-controller="Home" asp-action="Index"><i class="fas fa-home"></i> Hem</a></li>
<ul class="nav-list">
<li><a asp-controller="Home" asp-action="Index"><i class="fas fa-home"></i> Home</a></li>
@if (User.IsInRole("Budget"))
{
<li><a asp-controller="Budget" asp-action="Index"><i class="fas fa-wallet"></i> Budget</a></li>
}
<li><a asp-controller="Home" asp-action="Menu"><i class="fas fa-utensils"></i> Veckomeny</a></li> <li><a asp-controller="Home" asp-action="Menu"><i class="fas fa-utensils"></i> Veckomeny</a></li>
<li><a asp-controller="Meal" asp-action="Index">Recept</a></li>
@if (ViewBag.RestaurantIsOpen as bool? == true) @if (ViewBag.RestaurantIsOpen as bool? == true)
{ {
<li><a asp-controller="FoodMenu" asp-action="PizzaOrder"><i class="fas fa-pizza-slice"></i> Beställ pizza</a></li> <li><a asp-controller="FoodMenu" asp-action="PizzaOrder"><i class="fas fa-pizza-slice"></i> Beställ pizza</a></li>
} }
@if (User.IsInRole("Budget"))
{
<li><a asp-controller="Budget" asp-action="Index"> Budget</a></li>
}
@if (User.IsInRole("Chef")) @if (User.IsInRole("Chef"))
{ {
<li><a asp-controller="FoodMenu" asp-action="Veckomeny"><i class="fas fa-calendar-week"></i> Administrera Veckomeny</a></li> <li class="dropdown">
<li><a asp-controller="Meal" asp-action="Index"><i class="fas fa-list"></i> Måltider</a></li> <button class="dropdown-toggle" type="button">
<li><a asp-controller="FoodMenu" asp-action="PizzaAdmin"><i class="fas fa-list"></i> Pizza Admin</a></li> <i class="fas fa-list"></i> Kök <i class="fas fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li><a asp-controller="FoodMenu" asp-action="Veckomeny">Planera Veckomeny</a></li>
<li><a asp-controller="FoodMenu" asp-action="PizzaAdmin">Pizza Admin</a></li>
</ul>
</li>
} }
@if (User.IsInRole("Admin")) @if (User.IsInRole("Admin"))
{ {
<li><a asp-controller="Admin" asp-action="Index"><i class="fas fa-cog"></i> Adminpanel</a></li> <li class="dropdown">
<li><a asp-controller="Admin" asp-action="Todo"><i class="fas fa-cog"></i> Todo</a></li> <button class="dropdown-toggle" type="button">
<i class="fas fa-cog"></i> Admin <i class="fas fa-caret-down"></i>
</button>
<ul class="dropdown-menu">
<li><a asp-controller="Admin" asp-action="Index">Adminpanel</a></li>
<li><a asp-controller="Admin" asp-action="Todo">Todo</a></li>
</ul>
</li>
}
}
</ul> </ul>
} else
{ </nav>
<ul class="nav-list">
<li><a asp-controller="Setup" asp-action="Index"> Setup</a></li>
</ul>
}
</aside>
<main class="main-panel"> <main class="main-panel">
@RenderBody() @RenderBody()
@@ -72,6 +86,45 @@
</div> </div>
<script src="~/js/site.js" asp-append-version="true"></script> <script src="~/js/site.js" asp-append-version="true"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
const dropdowns = document.querySelectorAll(".dropdown");
dropdowns.forEach(dropdown => {
const toggle = dropdown.querySelector(".dropdown-toggle");
const menu = dropdown.querySelector(".dropdown-menu");
toggle.addEventListener("click", e => {
e.stopPropagation();
const isOpen = dropdown.classList.contains("open");
// Stäng alla andra först
document.querySelectorAll(".dropdown.open").forEach(d => {
if (d !== dropdown) d.classList.remove("open");
});
dropdown.classList.toggle("open", !isOpen);
if (!isOpen) {
const rect = toggle.getBoundingClientRect();
menu.style.position = "fixed";
menu.style.top = rect.bottom + "px";
menu.style.left = rect.left + "px";
menu.style.zIndex = 3000;
} else {
menu.style.top = "";
menu.style.left = "";
}
});
});
// Klick utanför stänger alla dropdowns
document.addEventListener("click", () => {
document.querySelectorAll(".dropdown.open").forEach(d => d.classList.remove("open"));
});
});
</script>
</body> </body>
</html> </html>

80
Aberwyn/wwwroot/css/Welcome.css Normal file
View File

@@ -0,0 +1,80 @@
.welcome-section.light-mode {
display: flex;
justify-content: center;
align-items: center;
min-height: 90vh;
text-align: center;
padding: 0 20px;
background: linear-gradient(to bottom right, #f9fafb, #e2e8f0);
animation: fadeIn 0.6s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.welcome-content {
max-width: 700px;
color: #1e293b;
font-family: 'Segoe UI', sans-serif;
}
.welcome-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 10px;
color: #1e293b;
}
.highlight {
color: #eab308;
}
.welcome-subtitle {
font-size: 1.35rem;
color: #334155;
margin-bottom: 28px;
}
.meal-lines p {
font-size: 1.2rem;
margin: 8px 0;
color: #0f172a;
}
.meal-lines strong {
color: #475569;
}
.no-menu {
font-size: 1.1rem;
color: #64748b;
margin-bottom: 24px;
}
.nav-button {
background: #3b82f6;
color: white;
text-decoration: none;
padding: 12px 26px;
border-radius: 10px;
font-size: 1rem;
font-weight: 600;
display: inline-block;
margin-top: 24px;
transition: background 0.2s ease, transform 0.2s ease;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.nav-button:hover {
background: #2563eb;
transform: translateY(-2px);
}

10
Aberwyn/wwwroot/css/budget.css
View File

@@ -669,3 +669,13 @@ canvas {
height: auto; height: auto;
} }
} }
.loading-indicator {
text-align: center;
margin-top: 40px;
font-size: 18px;
color: #64748B;
font-style: italic;
}
[ng-cloak] {
display: none !important;
}

84
Aberwyn/wwwroot/css/meal-gallery.css
View File

@@ -6,50 +6,59 @@ body {
} }
.meal-gallery-container { .meal-gallery-container {
max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 2rem 1rem; padding: 2rem 1rem;
width: 100%;
max-width: 1200px;
} }
/* === Header och sökfält === */
.meal-gallery-header { .meal-gallery-header {
text-align: center; text-align: center;
margin-bottom: 2rem; margin-bottom: 1.5rem;
} }
.meal-gallery-header h1 { .meal-gallery-header h1 {
font-size: 2.4rem; font-size: 2.2rem;
font-weight: 600; font-weight: 600;
margin: 0;
} }
.search-container { .search-container {
margin-top: 1rem; margin-top: 1rem;
position: relative; position: relative;
max-width: 400px; width: 100%;
max-width: 500px;
margin-inline: auto; margin-inline: auto;
} }
.search-container input { .search-container input {
width: 100%; width: 100%;
padding: 10px 38px 10px 12px; padding: 8px 34px 8px 12px;
border-radius: 25px; border-radius: 20px;
border: 1px solid #ccc; border: 1px solid #ccc;
font-size: 1rem; font-size: 1rem;
box-sizing: border-box;
} }
.search-container i { .search-container i {
position: absolute; position: absolute;
right: 12px; right: 10px;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
color: #888; color: #888;
font-size: 0.9rem;
} }
/* === Grid layout === */
.meal-gallery-grid { .meal-gallery-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 24px; gap: 20px;
padding-top: 16px;
} }
/* === Kortstruktur === */
.meal-card { .meal-card {
background: white; background: white;
border-radius: 12px; border-radius: 12px;
@@ -67,20 +76,20 @@ body {
.meal-card img { .meal-card img {
width: 100%; width: 100%;
height: 200px; height: 180px;
object-fit: cover; object-fit: cover;
} }
.meal-card-content { .meal-card-content {
padding: 16px; padding: 14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
} }
.meal-card-content h3 { .meal-card-content h3 {
margin: 0 0 8px; margin: 0 0 6px;
font-size: 1.2rem; font-size: 1.15rem;
color: #111; color: #111;
} }
@@ -88,20 +97,63 @@ body {
flex-grow: 1; flex-grow: 1;
font-size: 0.95rem; font-size: 0.95rem;
color: #555; color: #555;
margin: 0;
} }
/* === Läs mer-knapp === */
.btn-readmore { .btn-readmore {
align-self: flex-start; align-self: flex-start;
background: #007d36; background: #007d36;
color: white; color: white;
padding: 8px 12px; padding: 7px 12px;
border-radius: 6px; border-radius: 6px;
text-decoration: none; text-decoration: none;
font-size: 0.95rem; font-size: 0.9rem;
margin-top: 12px; margin-top: auto;
transition: background-color 0.2s ease;
} }
.btn-readmore:hover { .btn-readmore:hover {
background: #005c27; background: #005c27;
} }
/* === Mobilanpassning === */
@media (max-width: 600px) {
.meal-gallery-grid {
grid-template-columns: repeat(2, 1fr); /* exakt 2 per rad */
}
.meal-gallery-header h1 {
font-size: 1.6rem;
}
.search-container {
max-width: 90%;
}
.search-container input {
padding: 6px 30px 6px 10px;
font-size: 0.9rem;
border-radius: 18px;
}
.meal-card img {
height: 130px;
}
.meal-card-content {
padding: 10px;
}
.meal-card-content h3 {
font-size: 1rem;
}
.meal-card-content p {
font-size: 0.85rem;
}
.btn-readmore {
padding: 6px 10px;
font-size: 0.85rem;
}
}

5
Aberwyn/wwwroot/css/menu.css
View File

@@ -1,5 +1,4 @@
:root { :root {
--bg: #F9FAFB;
--bg-mid: #EDF2F7; --bg-mid: #EDF2F7;
--text: #2D3748; --text: #2D3748;
--accent: #3182CE; --accent: #3182CE;
@@ -34,6 +33,10 @@ body {
background-color: var(--bg); background-color: var(--bg);
color: var(--text); color: var(--text);
} }
.fade-out {
opacity: 0;
transition: opacity 0.1s ease-out;
}
.meal-menu-page { .meal-menu-page {
position: relative; position: relative;

162
Aberwyn/wwwroot/css/site.css
View File

@@ -147,25 +147,25 @@ body {
.page-content { .page-content {
display: flex; display: flex;
flex-direction: column;
flex-grow: 1; flex-grow: 1;
padding: 16px;
gap: 16px;
background-color: #223344; background-color: #223344;
width: 100%; /* force full width */
max-width: unset;
position: relative;
z-index: 0;
} }
.sidebar {
width: 155px;
background-color: #f9f9f9;
border-radius: 8px;
padding: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.main-panel { .main-panel {
flex: 1; flex: 1;
background-color: #ffffff; background-color: #ffffff;
border-radius: 10px; border-radius: 0 0 10px 10px;
padding: 20px; padding: 0px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15); box-shadow: 0 4px 12px rgba(0,0,0,0.15);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -173,11 +173,20 @@ body {
color: #2C3E50; color: #2C3E50;
font-size: 16px; font-size: 16px;
line-height: 1.7; line-height: 1.7;
margin-top: 0;
} }
/* ========================================================================== /* ==========================================================================
NAVIGATIONSLISTA <20> KOMPAKT STIL NAVIGATIONSLISTA <20> KOMPAKT STIL
========================================================================== */ ========================================================================== */
/*.sidebar {
width: 155px;
background-color: #f9f9f9;
border-radius: 8px;
padding: 4px;
box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.nav-list { .nav-list {
list-style: none; list-style: none;
padding: 0; padding: 0;
@@ -210,6 +219,70 @@ body {
width: 14px; width: 14px;
text-align: center; text-align: center;
} }
*/
.main-nav {
position: fixed;
top: 54px;
left: 0;
right: 0;
z-index: 2000; /* Högt nog för att ligga över allt annat */
background-color: #f3f4f6;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
padding: 5px 8px;
font-size: 13px;
overflow-x: auto; /* behåll för horisontell scroll */
overflow-y: visible; /* tillåt dropdown att spilla ut */
}
@media (min-width: 769px) {
.main-nav {
position: fixed;
top: 54px;
left: 0;
right: 0;
z-index: 1001;
}
.main-panel {
margin-top: 24px; /* justera beroende på hur hög nav-baren är */
}
}
.nav-list-horizontal {
display: flex;
flex-wrap: nowrap;
gap: 5px 0px 0px 0px;
margin: 5px 0px 0px 0px;
padding: 0;
list-style: none;
white-space: nowrap;
/* Viktigt: ta bort all overflow här */
overflow: visible;
position: relative;
z-index: 1;
}
.nav-list-horizontal li a {
text-decoration: none;
color: #1F2C3C;
padding: 0px 5px;
border-radius: 4px;
font-weight: 500;
font-size: 14px;
display: flex;
align-items: center;
gap: 5px;
transition: background-color 0.2s;
}
.nav-list-horizontal li a:hover {
background-color: #e5e7eb;
}
/* ========================================================================== /* ==========================================================================
RESPONSIVT RESPONSIVT
@@ -223,3 +296,70 @@ body {
width: 100%; width: 100%;
} }
} }
/* ==========================================================================
Dropdown
========================================================================== */
.dropdown {
position: relative;
}
.dropdown-toggle {
font-family: inherit;
font-size: 14px;
font-weight: 500;
color: #1F2C3C;
padding: 0px 5px;
border: none;
background: none;
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.2s;
height: 100%; /* viktigt för vertikal alignment */
}
.dropdown-toggle:hover {
background-color: #e5e7eb;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
transform: translateY(4px); /* lite spacing nedåt */
background-color: #ffffff;
border: 1px solid #ccc;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
border-radius: 8px;
display: none;
flex-direction: column;
min-width: 180px;
z-index: 3000;
padding: 4px 0;
font-size: 14px;
}
.dropdown.open .dropdown-menu {
display: flex;
}
.dropdown-menu li {
list-style: none;
}
.dropdown-menu li a {
padding: 8px 12px;
font-size: 13px;
color: #1F2C3C;
text-decoration: none;
display: block;
}
.dropdown-menu li a:hover {
background-color: #f0f0f0;
}

4
Aberwyn/wwwroot/js/budget.js
View File

@@ -2,7 +2,7 @@
console.log("budget.js loaded"); console.log("budget.js loaded");
app.controller('BudgetController', function ($scope, $http) { app.controller('BudgetController', function ($scope, $http) {
$scope.budget = null; $scope.budget = null;
$scope.loading = false; $scope.loading = true;
$scope.error = null; $scope.error = null;
$scope.menuOpen = false; $scope.menuOpen = false;
$scope.chartMode = "pie"; $scope.chartMode = "pie";
@@ -823,7 +823,7 @@ $scope.addItemFromDefinition = function (cat) {
}); });
}; };
$scope.loading = true;
$scope.loadItemDefinitions().then(() => { $scope.loadItemDefinitions().then(() => {
$scope.loadBudget(); $scope.loadBudget();
}); });

9
Aberwyn/wwwroot/js/menu.js
View File

@@ -94,8 +94,13 @@ angular.module('mealMenuApp', ['ngSanitize'])
$scope.openMeal = function (mealId) { $scope.openMeal = function (mealId) {
if (!mealId) return; if (mealId) {
window.open('/Meal/View/' + mealId, '_blank'); const page = document.querySelector('.meal-menu-page');
page.classList.add('fade-out');
setTimeout(() => {
window.location.href = "/Meal/View/" + mealId;
}, 400); // matchar CSS-transition
}
}; };
$scope.getDayImage = function (day) { $scope.getDayImage = function (day) {