diff --git a/Aberwyn/Views/FoodMenu/Veckomeny.cshtml b/Aberwyn/Views/FoodMenu/Veckomeny.cshtml index d6306a9..8760389 100644 --- a/Aberwyn/Views/FoodMenu/Veckomeny.cshtml +++ b/Aberwyn/Views/FoodMenu/Veckomeny.cshtml @@ -3,227 +3,150 @@ @{ ViewData["Title"] = "Veckomeny"; var days = new[] { "Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag" }; - var allMeals = ViewBag.AvailableMeals as List; } - + + + - - -
name.toLowerCase() === val); - input.classList.add(isKnown ? 'existing-entry' : 'new-entry'); + const isKnown = window.knownMeals.some(name => name.toLowerCase() === val); + input.classList.add(isKnown ? 'existing-entry' : 'new-entry'); } - }" - - - - - - - - - -
-

Veckomeny - Vecka @Model.WeekNumber

-
- ← FöregÃ¥ende vecka - Vecka @Model.WeekNumber - Nästa vecka → + }"> +
+

Veckomeny - Vecka @Model.WeekNumber

+
+ ← FöregÃ¥ende vecka + Vecka @Model.WeekNumber + Nästa vecka →
- - - - - - - - - - - - @for (int i = 0; i < 7; i++) { - var dinnerEntry = Model.GetMealEntry(i, "Middag"); - var lunchEntry = Model.GetMealEntry(i, "Lunch"); - var breakfastEntry = Model.GetMealEntry(i, "Frukost"); - - - - - - - - - - - + + +
DagMiddagKock
- - @days[i] - -
- - -
- 		- -
-
-
- - - -
-
- - - -
-
-
+ + + + + + + + + @for (int i = 0; i < 7; i++) { + var dinnerEntry = Model.GetMealEntry(i, "Middag"); + var lunchEntry = Model.GetMealEntry(i, "Lunch"); + var breakfastEntry = Model.GetMealEntry(i, "Frukost"); + + + + + -
DagMÃ¥ltiderKock
+ + @days[i] + +
+
+ + +
+
+ 		+
- - -
- -
- - - @foreach(var m in ViewBag.AvailableMeals as List) { - + + + + + + +
+
+ + + +
+
+ + + +
+
+ + + } - -
+ + + +
+ +
+ + + + + @foreach (var m in ViewBag.AvailableMeals as List) { + + +
- - - diff --git a/Aberwyn/Views/Home/Index.cshtml b/Aberwyn/Views/Home/Index.cshtml index 905ed9a..defe302 100644 --- a/Aberwyn/Views/Home/Index.cshtml +++ b/Aberwyn/Views/Home/Index.cshtml @@ -8,7 +8,7 @@ @ViewData["Title"] - +
diff --git a/Aberwyn/Views/Home/Test.cshtml b/Aberwyn/Views/Home/Test.cshtml new file mode 100644 index 0000000..95e0069 --- /dev/null +++ b/Aberwyn/Views/Home/Test.cshtml @@ -0,0 +1,46 @@ + + + + + + +
+

+ Louise + Elias + William + Elin + Ludwig +

+
+ Register + Login +
+
+ + diff --git a/Aberwyn/Views/Shared/_Layout.cshtml b/Aberwyn/Views/Shared/_Layout.cshtml index 1267d54..4f413d4 100644 --- a/Aberwyn/Views/Shared/_Layout.cshtml +++ b/Aberwyn/Views/Shared/_Layout.cshtml @@ -3,81 +3,52 @@ + LEWEL - Dashboard - LEWEL - Dashboard -
- - -
-

- Louise - Elias - William - Elin - Ludwig -

-
-
-
-
- - -
- @RenderBody() - @RenderSection("Scripts", required: false) -
- - - -
- - + diff --git a/Aberwyn/Views/Shared/_LoginPartial.cshtml b/Aberwyn/Views/Shared/_LoginPartial.cshtml index 64ecf04..d39c399 100644 --- a/Aberwyn/Views/Shared/_LoginPartial.cshtml +++ b/Aberwyn/Views/Shared/_LoginPartial.cshtml @@ -1,28 +1,67 @@ @using Microsoft.AspNetCore.Identity @using Aberwyn.Models - @inject SignInManager SignInManager @inject UserManager UserManager - + + diff --git a/Aberwyn/wwwroot/css/Veckomeny.css b/Aberwyn/wwwroot/css/Veckomeny.css new file mode 100644 index 0000000..98ca523 --- /dev/null +++ b/Aberwyn/wwwroot/css/Veckomeny.css @@ -0,0 +1,185 @@ +:root { + --surface: #ffffff; + --header: #EDF2F7; /* Ljus blÃ¥grÃ¥ */ + --border: #CBD5E0; /* Neutral grÃ¥blÃ¥ */ + --input: #F7FAFC; /* Nästan vit */ + --text: #2D3748; /* Djup grÃ¥blÃ¥, bra kontrast */ + --subtext: #718096; /* Neutral textgrÃ¥ */ + --highlight: #3182CE; /* Klar blÃ¥ (används till knappar/länkar) */ + --danger: #E53E3E; /* Röd */ + --success: #38A169; /* Grön */ + --warn: #DD6B20; /* Orangebrun */ + --bg: #F9FAFB; /* Väldigt ljus bakgrund */ +} + + + + table { + width: 100%; + border-collapse: separate; + border-spacing: 0 4px; + font-size: 0.9rem; + background: var(--bg); + } + + th { + background: var(--header); + color: var(--text); + padding: 8px 12px; + text-align: left; + } + + td { + background: var(--surface); + padding: 8px 12px; + vertical-align: top; + } + + h1, h2 { + color: var(--text); + } + + .week-nav a { + color: var(--highlight); + font-weight: bold; + text-decoration: none; + margin: 0 6px; + } + + .week-nav a:hover { + text-decoration: underline; + } + + .meal-input { + background: var(--input); + border: 1px solid var(--border); + color: var(--text); + border-radius: 8px; + padding: 6px; + font-size: 0.85rem; + width: 100%; + } + + .meal-input.new-entry { + border-color: var(--warn); + } + + .meal-input.existing-entry { + border-color: var(--success); + } + + .delete-btn { + background: none; + border: none; + color: var(--danger); + cursor: pointer; + padding: 0; + font-size: 1rem; + } + + select.meal-input { + appearance: none; + background: var(--input); + border: 1px solid var(--border); + border-radius: 8px; + color: var(--text); + padding: 6px; + width: 100%; + font-size: 0.9rem; + } + +.save-menu-btn { + background: var(--highlight); + color: white; + padding: 8px 16px; + border: none; + border-radius: 8px; + font-weight: bold; + font-size: 0.9rem; + cursor: pointer; + transition: background 0.2s ease; +} + + .save-menu-btn:hover { + background: #2B6CB0; /* lite mörkare blÃ¥ */ + } + + + .recent-history { + background: var(--header); + border-radius: 8px; + color: var(--text); + padding: 16px; + margin-top: 24px; + } + + .recent-history table { + width: 100%; + border-collapse: collapse; + font-size: 0.85rem; + } + + .recent-history th, + .recent-history td { + padding: 4px 8px; + text-align: left; + } + +/* Dag-cell med ikonknapp */ +.day-cell { + max-width: 0px; + padding: 8px 12px; + font-weight: bold; + vertical-align: top; +} + + .day-cell button { + margin-right: 6px; + background: none; + border: none; + color: var(--text); + font-size: 1rem; + cursor: pointer; + } + +/* MÃ¥ltidscell och frukost/lunchfält */ +.meal-cell { + padding: 8px 12px; + vertical-align: top; +} + +.meal-entry-group { + display: flex; + flex-direction: column; + gap: 4px; +} + +.meal-input-group { + display: flex; + align-items: center; + gap: 4px; +} + +/* Extra-rad under varje dag */ +.extra-row td { + padding: 0; +} + +.extra-meals { + display: flex; + flex-direction: column; + gap: 8px; + padding: 8px 0; +} + + .extra-meals label { + font-size: 0.85rem; + color: var(--subtext); + min-width: 60px; + } + +/* Kockcell */ +.cook-cell { + padding: 8px 12px; + vertical-align: top; +} diff --git a/Aberwyn/wwwroot/css/site.css b/Aberwyn/wwwroot/css/site.css index eb6325b..cbce8f4 100644 --- a/Aberwyn/wwwroot/css/site.css +++ b/Aberwyn/wwwroot/css/site.css @@ -1,227 +1,223 @@ -/* Base Styles */ -body { - background-color: #1F2C3C; /* Dark background */ - color: #B0BEC5; /* Light Gray text for better readability */ - font-family: 'Roboto', sans-serif; - margin: 0; - padding: 20px; /* Keep padding for general layout */ -} - -/* Container for Centering and Max Width */ -.budget-page { - width: 100%; /* Make the page full width */ - max-width: 1900px; /* Adjust or remove this */ - margin: 0 auto; /* Centering */ - padding: 0; /* Removed extra padding for budget page */ -} - -/* Grid Layout */ -.grid-container { - display: grid; - grid-template-columns: 250px 1fr 250px; - gap: 10px; /* Keep existing gap */ - padding: 0; /* Removed padding for grid container */ - margin: 0; /* Removed margin for grid container */ -} - -.left-sidebar, .sidebar-budget-right { - background-color: #f9f9f9; /* Softer background */ - border-radius: 12px; - padding: 10px; /* Adjusted padding for sidebars */ - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); -} - -.main-content { - padding: 10px; - background-color: #f4f4f4; /* Light gray */ - border-radius: 12px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); -} - -.nav-link { - color: #3A4E62; /* Muted blue-gray for consistency */ -} - - .nav-link:hover { - text-decoration: underline; - } - -@media (max-width: 768px) { - .grid-container { - grid-template-columns: 1fr; /* Responsive layout */ - } -} - -.header-container { +/* ========================================================================== + HEADER – LEWEL DESIGN (utan meny) + ========================================================================== */ +.top-bar { display: flex; - justify-content: flex-start; /* Aligns the header to the left */ - align-items: center; /* Centers items vertically */ - margin-bottom: 0px; /* Adjust space below the header as needed */ + justify-content: space-between; + align-items: flex-end; + background: linear-gradient(to right, #1F2C3C, #2E3C4F); + padding: 0 16px 0; + border-bottom: 2px solid #394B5A; + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 2px 8px rgba(0,0,0,0.4); + height: 54px; +} + +.header-left { + display: flex; + align-items: flex-end; + height: 100%; } .family-header { - text-align: left; /* Ensures text aligns to the left */ - margin: 0; /* Removes default margin */ + display: flex; + align-items: baseline; + margin: 0; + padding: 0; + line-height: 1; + font-size: 2em; + letter-spacing: -0.5px; + font-family: 'Segoe UI', sans-serif; + font-weight: 600; + text-shadow: 0 1px 2px rgba(0,0,0,0.2); } + .family-header span { + margin: 0; + padding: 0; + display: inline-block; + line-height: 1; + } + .initial { - font-weight: bold; /* Adjust as needed */ - font-size: 1.2em; /* Adjust size for initials */ + font-weight: 700; + font-size: 1.4em; } .name { - color: #ffffff; /* White for names */ - font-size: 0.4em; /* Adjust size as needed */ + font-size: 0.45em; + color: #f7f7f7; + opacity: 0.95; } -/* Specific colors for initials */ .initial.L { - color: #FF0000; /* Red for first L */ + color: #ff3333; } .initial.E { - color: #FF7F00; /* Orange for first E */ + color: #ff9900; } .initial.W { - color: #FFFF00; /* Yellow */ + color: #ffd700; } -.initial.E2 { /* Second E */ - color: #00FF00; /* Green */ +.initial.E2 { + color: #00cc66; } -.initial.L2 { /* Second L */ - color: #0088CC; /* Blue */ +.initial.L2 { + color: #3399ff; } -.navbar-nav { - list-style-type: none; /* Remove bullet points */ - padding: 0; /* Remove padding */ -} - -.nav-item { - margin: 10px 0; /* Adjust spacing between links */ -} - -.nav-link { - text-decoration: none; /* Remove underline */ - color: #3A4E62; /* Muted blue-gray for consistency */ - display: flex; /* Use flexbox to align icon and text */ - align-items: center; /* Center items vertically */ -} - - .nav-link i { - margin-right: 8px; /* Space between icon and text */ - font-size: 1.2em; /* Adjust icon size */ - } - -/* Sidebar Right Styles */ -.sidebar-section { - margin-bottom: 5px; -} - -.sidebar-header { - cursor: pointer; - background-color: #4CAF50; /* Green */ - color: white; - padding: 8px; /* Slightly more padding */ - border-radius: 5px; - display: flex; - justify-content: space-between; - align-items: center; /* Center items vertically */ - font-size: 14px; - transition: background-color 0.3s; /* Smooth hover transition */ -} - - .sidebar-header:hover { - background-color: #45a049; /* Darker green on hover */ - } - -.accordion-item { - border-top: 1px solid #ddd; /* Separator between items */ -} - -.accordion-header { - display: flex; /* Flexbox for header */ - justify-content: space-between; - align-items: center; /* Center vertically */ - padding: 8px; /* Padding for accordion header */ - cursor: pointer; - background-color: #f1f1f1; /* Light background for header */ - border-radius: 4px; - transition: background-color 0.3s; /* Smooth hover transition */ -} - - .accordion-header:hover { - background-color: #e0e0e0; /* Slightly darker background on hover */ - } - -.accordion-content { - display: none; /* Hidden by default */ - background-color: #fff; /* White background for content */ - padding: 5px; /* Padding for content */ - border-radius: 4px; /* Rounded corners */ -} - -.item-name { - font-weight: normal; /* Normal weight for item names */ - font-size: 12px; /* Smaller font size */ -} - -.item-amount { - color: #333; - font-size: 12px; /* Smaller font size for amounts */ -} - -.date-picker { +.auth-links { position: relative; } -.date-picker-toggle { - background-color: #4A6572; /* Muted blue-gray */ - color: #ffffff; - padding: 10px 15px; +.auth-menu { + position: relative; +} + +.auth-icon-button { + background: none; border: none; - border-radius: 6px; - cursor: pointer; - font-size: 16px; - transition: background-color 0.3s; -} - - .date-picker-toggle:hover { - background-color: #3A4E62; /* Darker blue-gray on hover */ - } - -.date-picker-dropdown { - position: absolute; - top: 100%; - left: 0; - background-color: #333; color: #ffffff; - padding: 10px; - border-radius: 8px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); - margin-top: 8px; - z-index: 1000; - display: flex; - gap: 10px; - width: max-content; + font-size: 20px; + cursor: pointer; + padding: 6px; + transition: opacity 0.2s; } - .date-picker-dropdown select { - background-color: #444; - color: #ffffff; - border: none; - padding: 8px; - border-radius: 4px; - font-size: 14px; - appearance: none; - cursor: pointer; - transition: background-color 0.3s; + .auth-icon-button:hover { + opacity: 0.85; } - .date-picker-dropdown select:hover { - background-color: #555; +.auth-dropdown { + position: absolute; + top: 36px; + right: 0; + background-color: #ffffff; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + min-width: 160px; + display: none; + flex-direction: column; + z-index: 1001; +} + + .auth-dropdown a { + padding: 8px 12px; + color: #1F2C3C; + text-decoration: none; + font-size: 13px; + border-bottom: 1px solid #eee; + } + + .auth-dropdown a:last-child { + border-bottom: none; } + .auth-dropdown a:hover { + background-color: #f0f0f0; + } + +.auth-menu.open .auth-dropdown { + display: flex; +} + +/* ========================================================================== + LAYOUT – OMBYGGD STRUKTUR + ========================================================================== */ +body { + background-color: #1F2C3C; + color: #D0DCE4; + font-family: 'Segoe UI', sans-serif; + margin: 0; + padding: 0; + display: flex; + flex-direction: column; + min-height: 100vh; + font-size: 15px; + line-height: 1.5; +} + +.page-content { + display: flex; + flex-grow: 1; + padding: 16px; + gap: 16px; + background-color: #223344; +} + +.sidebar { + width: 155px; + background-color: #f9f9f9; + border-radius: 8px; + padding: 4px; + box-shadow: 0 1px 4px rgba(0,0,0,0.1); +} + +.main-panel { + flex: 1; + background-color: #ffffff; + border-radius: 10px; + padding: 20px; + box-shadow: 0 4px 12px rgba(0,0,0,0.15); + display: flex; + flex-direction: column; + gap: 16px; + color: #2C3E50; + font-size: 16px; + line-height: 1.7; +} + +/* ========================================================================== + NAVIGATIONSLISTA – KOMPAKT STIL + ========================================================================== */ +.nav-list { + list-style: none; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + gap: 0; +} + + .nav-list a { + text-decoration: none; + color: #1F2C3C; + font-weight: 500; + display: flex; + align-items: center; + gap: 6px; + padding: 4px 6px; + border-radius: 4px; + font-size: 13px; + transition: background-color 0.2s; + line-height: 1.3; + } + + .nav-list a:hover { + background-color: #e0e0e0; + } + + .nav-list i { + font-size: 0.9em; + width: 14px; + text-align: center; + } + +/* ========================================================================== + RESPONSIVT + ========================================================================== */ +@media (max-width: 768px) { + .page-content { + flex-direction: column; + } + + .sidebar { + width: 100%; + } +}