New layout and veckomeny
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
This commit is contained in:
Elias Jansson
@@ -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<Aberwyn.Models.Meal>;
|
||||
}
|
||||
|
||||
<head>
|
||||
<link rel="stylesheet" href="~/css/Veckomeny.css" asp-append-version="true" />
|
||||
</head>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
|
||||
|
||||
<style>
|
||||
[x-cloak] { display: none !important; }
|
||||
[x-show] {
|
||||
transition: all 0.3s ease-in-out;
|
||||
overflow: hidden;
|
||||
}
|
||||
.rotate-chevron {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.rotate-chevron.open {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
.meal-input {
|
||||
padding: 4px 6px;
|
||||
font-size: 0.85rem;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #546E7A;
|
||||
background: #445A6E;
|
||||
color: #ECEFF1;
|
||||
}
|
||||
.meal-input.new-entry {
|
||||
border-color: #FFC107; /* Orange */
|
||||
background: inherit; /* Lägg till detta om nödvändigt */
|
||||
}
|
||||
|
||||
.meal-input.existing-entry {
|
||||
border-color: #4CAF50; /* Grön */
|
||||
background: inherit; /* Lägg till detta också */
|
||||
}
|
||||
|
||||
|
||||
.add-meal-wrapper {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.add-meal-wrapper input[type=text] {
|
||||
width: 160px;
|
||||
padding: 4px 6px;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
.delete-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
}
|
||||
.delete-btn i {
|
||||
margin-left: 6px;
|
||||
color: #FF8A65;
|
||||
}
|
||||
.week-nav a {
|
||||
color: #FFEB3B;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.week-nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
window.knownMeals = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(
|
||||
(ViewBag.AvailableMeals as List<Aberwyn.Models.Meal>)?.Select(m => m.Name.Trim()).ToList() ?? new List<string>()));
|
||||
window.knownMeals = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(
|
||||
(ViewBag.AvailableMeals as List<Aberwyn.Models.Meal>)?.Select(m => m.Name.Trim()).ToList() ?? new List<string>()));
|
||||
</script>
|
||||
|
||||
<div class="weekly-menu-wrapper"
|
||||
style="display:grid; grid-template-columns:1fr; gap:16px; padding:16px; background:#263238;"
|
||||
x-data="{
|
||||
x-data="{
|
||||
highlightNew(event) {
|
||||
const input = event.target;
|
||||
const val = input.value?.trim().toLowerCase();
|
||||
input.classList.remove('new-entry', 'existing-entry');
|
||||
const input = event.target;
|
||||
const val = input.value?.trim().toLowerCase();
|
||||
input.classList.remove('new-entry', 'existing-entry');
|
||||
|
||||
if (!val) return;
|
||||
if (!val) return;
|
||||
|
||||
const isKnown = window.knownMeals.some(name => 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');
|
||||
}
|
||||
}"
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Rest of the content remains unchanged -->
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="weekly-editor">
|
||||
<h1 style="color:#ECEFF1; margin-bottom:12px;">Veckomeny - Vecka @Model.WeekNumber</h1>
|
||||
<div class="week-nav" style="margin-bottom:12px; display:flex; align-items:center; color:#B0BEC5; font-size:0.9rem;">
|
||||
<a asp-action="Veckomeny" asp-route-week="@(Model.WeekNumber - 1)" asp-route-year="@Model.Year" style="margin-right:8px;">← Föregående vecka</a>
|
||||
<span style="font-weight:bold; color:#ECEFF1;">Vecka @Model.WeekNumber</span>
|
||||
<a asp-action="Veckomeny" asp-route-week="@(Model.WeekNumber + 1)" asp-route-year="@Model.Year" style="margin-left:8px;">Nästa vecka →</a>
|
||||
}">
|
||||
<section class="weekly-editor">
|
||||
<h1>Veckomeny - Vecka @Model.WeekNumber</h1>
|
||||
<div class="week-nav">
|
||||
<a asp-action="Veckomeny" asp-route-week="@(Model.WeekNumber - 1)" asp-route-year="@Model.Year">← Föregående vecka</a>
|
||||
<span>Vecka @Model.WeekNumber</span>
|
||||
<a asp-action="Veckomeny" asp-route-week="@(Model.WeekNumber + 1)" asp-route-year="@Model.Year">Nästa vecka →</a>
|
||||
</div>
|
||||
|
||||
<form method="post" asp-action="SaveVeckomeny">
|
||||
<input type="hidden" name="week" value="@Model.WeekNumber" />
|
||||
<input type="hidden" name="year" value="@Model.Year" />
|
||||
<table style="width:100%; border-collapse:separate; border-spacing:0 4px; font-size:0.9rem;">
|
||||
<thead>
|
||||
<tr style="background:#37474F; color:#ECEFF1;">
|
||||
<th style="padding:8px 12px; text-align:left; border-radius:4px 0 0 4px;">Dag</th>
|
||||
<th style="padding:8px 12px; text-align:left;">Middag</th>
|
||||
<th style="padding:8px 12px; text-align:left;">Kock</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@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");
|
||||
<tbody x-data="{ showExtra: false }">
|
||||
<tr style="background:#2A3A48; color:#ECEFF1;">
|
||||
<td style="padding:8px 12px; font-weight:bold; vertical-align:top; width:12%;">
|
||||
<button type="button" x-on:click="showExtra = !showExtra" style="margin-right:6px; background:none; border:none; color:#ECEFF1; font-size:1rem; cursor:pointer;">
|
||||
<i :class="showExtra ? 'fa-solid fa-chevron-right rotate-chevron open' : 'fa-solid fa-chevron-right rotate-chevron'"></i>
|
||||
</button>
|
||||
@days[i]
|
||||
</td>
|
||||
<td style="padding:8px 12px; vertical-align:top;">
|
||||
<div style="display:flex; align-items:center; gap:4px;">
|
||||
<input type="text" name="Meal[@i][Middag]" value="@dinnerEntry?.DinnerMealName" placeholder="Lägg till middag..." list="meals-list" class="meal-input" :tabindex="showExtra ? 0 : -1" x-on:input="highlightNew($event)" />
|
||||
<button type="button" class="delete-btn" title="Rensa middag" onclick="this.previousElementSibling.value='';">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
<td style="padding:8px 12px; vertical-align:top; width:14%;">
|
||||
<select name="Cook[@i]" :tabindex="showExtra ? 0 : -1" style="width:100%; padding:6px; border-radius:8px; border:1px solid #546E7A; background:#445A6E; color:#ECEFF1; font-size:0.9rem;">
|
||||
<option value="">Välj kock</option>
|
||||
@foreach(var user in Model.AvailableCooks) {
|
||||
var selected = Model.WeeklyMenus.FirstOrDefault(m => m.DayOfWeek == i+1)?.Cook == user.Username;
|
||||
<option value="@user.Username" selected="@selected">@user.Name</option>
|
||||
}
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr x-show="showExtra" x-transition x-cloak style="background:#2A3A48; color:#ECEFF1;">
|
||||
<td></td>
|
||||
<td colspan="2">
|
||||
<div style="display:flex; flex-direction:column; gap:8px;">
|
||||
<div style="display:flex; align-items:center; gap:4px;">
|
||||
<label style="font-size:0.85rem; color:#B0BEC5; min-width:60px;">Frukost:</label>
|
||||
<input type="text" name="Meal[@i][Frukost]" value="@breakfastEntry?.BreakfastMealName" placeholder="Lägg till frukost..." list="meals-list" class="meal-input" :tabindex="showExtra ? 0 : -1" x-on:input="highlightNew($event)" />
|
||||
<button type="button" class="delete-btn" title="Rensa frukost" onclick="this.previousElementSibling.value='';">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:4px;">
|
||||
<label style="font-size:0.85rem; color:#B0BEC5; min-width:60px;">Lunch:</label>
|
||||
<input type="text" name="Meal[@i][Lunch]" value="@lunchEntry?.LunchMealName" placeholder="Lägg till lunch..." list="meals-list" class="meal-input" :tabindex="showExtra ? 0 : -1" x-on:input="highlightNew($event)" />
|
||||
<button type="button" class="delete-btn" title="Rensa lunch" onclick="this.previousElementSibling.value='';">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<input type="hidden" name="week" value="@Model.WeekNumber" />
|
||||
<input type="hidden" name="year" value="@Model.Year" />
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="day-cell">Dag</th>
|
||||
<th>Måltider</th>
|
||||
<th>Kock</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@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");
|
||||
<tbody x-data="{ showExtra: false }">
|
||||
<tr>
|
||||
<td class="day-cell">
|
||||
<button type="button" x-on:click="showExtra = !showExtra">
|
||||
<i :class="showExtra ? 'fa-solid fa-chevron-right rotate-chevron open' : 'fa-solid fa-chevron-right rotate-chevron'"></i>
|
||||
</button>
|
||||
@days[i]
|
||||
</td>
|
||||
<td class="meal-cell">
|
||||
<div class="meal-entry-group">
|
||||
<div class="meal-input-group">
|
||||
<input type="text" name="Meal[@i][Middag]" value="@dinnerEntry?.DinnerMealName" placeholder="Lägg till middag..." list="meals-list" class="meal-input" :tabindex="showExtra ? 0 : -1" x-on:input="highlightNew($event)" />
|
||||
<button type="button" class="delete-btn" title="Rensa middag" onclick="this.previousElementSibling.value='';">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="cook-cell">
|
||||
<select name="Cook[@i]" :tabindex="showExtra ? 0 : -1" class="meal-input">
|
||||
<option value="">Välj kock</option>
|
||||
@foreach(var user in Model.AvailableCooks) {
|
||||
var selected = Model.WeeklyMenus.FirstOrDefault(m => m.DayOfWeek == i+1)?.Cook == user.Username;
|
||||
<option value="@user.Username" selected="@selected">@user.Name</option>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Save button och övrigt -->
|
||||
<div class="add-meal-wrapper">
|
||||
<button type="submit" style="padding:8px 16px; border:none; border-radius:8px; background:#FFEB3B; font-weight:bold; font-size:0.9rem;">Spara veckomeny</button>
|
||||
</div>
|
||||
<aside class="recent-history" style="background:#37474F; border-radius:8px; color:#ECEFF1; padding:16px; margin-top:24px;">
|
||||
<h2 style="margin:0 0 8px; font-size:1rem;">Översikt senaste 4 veckor</h2>
|
||||
@{
|
||||
var lastWeeks = Enumerable.Range(1, 4)
|
||||
.Select(i => DateTime.Now.AddDays(-7 * i))
|
||||
.Select(dt => new { Year = dt.Year, Week = ISOWeek.GetWeekOfYear(dt) })
|
||||
.Distinct().ToList();
|
||||
}
|
||||
<table style="width:100%; border-collapse:collapse; font-size:0.85rem;">
|
||||
<thead>
|
||||
<tr style="background:#546E7A; color:#ECEFF1;">
|
||||
<th style="padding:4px 8px;">Vecka</th>
|
||||
@foreach (var d in days)
|
||||
{
|
||||
<th style="padding:4px 8px;">@d</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var w in lastWeeks)
|
||||
{
|
||||
<tr style="background:#2A3A48; color:#ECEFF1;">
|
||||
<td style="padding:4px 8px; font-weight:bold;">@w.Week</td>
|
||||
@for (int idx = 1; idx <= 7; idx++)
|
||||
{
|
||||
var entry = Model.RecentEntries?.FirstOrDefault(e =>
|
||||
e.Date.Year == w.Year &&
|
||||
ISOWeek.GetWeekOfYear(e.Date) == w.Week &&
|
||||
((int)e.Date.DayOfWeek == (idx % 7))
|
||||
);
|
||||
<td style="padding:4px 8px; white-space:nowrap;">@(entry?.DinnerMealName ?? "—")</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</aside>
|
||||
<datalist id="meals-list">
|
||||
@foreach(var m in ViewBag.AvailableMeals as List<Aberwyn.Models.Meal>) {
|
||||
<option value="@m.Name" id="@m.Name"></option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="extra-row" x-show="showExtra" x-transition x-cloak>
|
||||
<td></td>
|
||||
<td colspan="2">
|
||||
<div class="extra-meals">
|
||||
<div class="meal-input-group">
|
||||
<label>Frukost:</label>
|
||||
<input type="text" name="Meal[@i][Frukost]" value="@breakfastEntry?.BreakfastMealName" placeholder="Lägg till frukost..." list="meals-list" class="meal-input" x-on:input="highlightNew($event)" />
|
||||
<button type="button" class="delete-btn" title="Rensa frukost" onclick="this.previousElementSibling.value='';">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="meal-input-group">
|
||||
<label>Lunch:</label>
|
||||
<input type="text" name="Meal[@i][Lunch]" value="@lunchEntry?.LunchMealName" placeholder="Lägg till lunch..." list="meals-list" class="meal-input" x-on:input="highlightNew($event)" />
|
||||
<button type="button" class="delete-btn" title="Rensa lunch" onclick="this.previousElementSibling.value='';">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
}
|
||||
</datalist>
|
||||
</form>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="add-meal-wrapper">
|
||||
<button type="submit" class="save-menu-btn">Spara veckomeny</button>
|
||||
</div>
|
||||
|
||||
<aside class="recent-history">
|
||||
<h2>Översikt senaste 4 veckor</h2>
|
||||
@{
|
||||
var lastWeeks = Enumerable.Range(1, 4)
|
||||
.Select(i => DateTime.Now.AddDays(-7 * i))
|
||||
.Select(dt => new { Year = dt.Year, Week = ISOWeek.GetWeekOfYear(dt) })
|
||||
.Distinct().ToList();
|
||||
}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Vecka</th>
|
||||
@foreach (var d in days) {
|
||||
<th>@d</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@foreach (var w in lastWeeks) {
|
||||
<tr>
|
||||
<td>@w.Week</td>
|
||||
@for (int idx = 1; idx <= 7; idx++) {
|
||||
var entry = Model.RecentEntries?.FirstOrDefault(e =>
|
||||
e.Date.Year == w.Year &&
|
||||
ISOWeek.GetWeekOfYear(e.Date) == w.Week &&
|
||||
((int)e.Date.DayOfWeek == (idx % 7)));
|
||||
<td>@(entry?.DinnerMealName ?? "—")</td>
|
||||
}
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</aside>
|
||||
|
||||
<datalist id="meals-list">
|
||||
@foreach (var m in ViewBag.AvailableMeals as List<Aberwyn.Models.Meal>) {
|
||||
<option value="@m.Name" />
|
||||
}
|
||||
</datalist>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>@ViewData["Title"]</title>
|
||||
<link rel="stylesheet" href="~/css/site.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
46
Aberwyn/Views/Home/Test.cshtml
Normal file
46
Aberwyn/Views/Home/Test.cshtml
Normal file
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.top-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #1F2C3C;
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.family-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.auth-links {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.auth-links a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header class="top-bar">
|
||||
<h1 class="family-header">
|
||||
<span style="color:red;">L</span>ouise
|
||||
<span style="color:orange;">E</span>lias
|
||||
<span style="color:yellow;">W</span>illiam
|
||||
<span style="color:green;">E</span>lin
|
||||
<span style="color:blue;">L</span>udwig
|
||||
</h1>
|
||||
<div class="auth-links">
|
||||
<a href="#">Register</a>
|
||||
<a href="#">Login</a>
|
||||
</div>
|
||||
</header>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,81 +3,52 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>LEWEL - Dashboard</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
|
||||
<title>LEWEL - Dashboard</title>
|
||||
</head>
|
||||
<header class="header">
|
||||
<partial name="_LoginPartial" />
|
||||
|
||||
<div class="header-container">
|
||||
<h1 class="family-header">
|
||||
<span class="initial L">L</span><span class="name">ouise</span>
|
||||
<span class="initial E">E</span><span class="name">lias</span>
|
||||
<span class="initial W">W</span><span class="name">illiam</span>
|
||||
<span class="initial E2">E</span><span class="name">lin</span>
|
||||
<span class="initial L2">L</span><span class="name">udwig</span>
|
||||
</h1>
|
||||
</div>
|
||||
</header>
|
||||
<body>
|
||||
<div class="grid-container">
|
||||
<aside class="left-sidebar">
|
||||
<ul class="navbar-nav">
|
||||
<header class="top-bar">
|
||||
<div class="header-left">
|
||||
<h1 class="family-header">
|
||||
<span class="initial L">L</span><span class="name">ouise</span>
|
||||
<span class="initial E">E</span><span class="name">lias</span>
|
||||
<span class="initial W">W</span><span class="name">illiam</span>
|
||||
<span class="initial E2">E</span><span class="name">lin</span>
|
||||
<span class="initial L2">L</span><span class="name">udwig</span>
|
||||
</h1>
|
||||
</div>
|
||||
<partial name="_LoginPartial" />
|
||||
</header>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Index">
|
||||
<i class="fas fa-home"></i> Home
|
||||
</a>
|
||||
</li>
|
||||
@if (User.IsInRole("Admin") || User.IsInRole("Budget"))
|
||||
{
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Budget">
|
||||
<i class="fas fa-wallet"></i> Budget
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
<div class="page-content">
|
||||
<aside class="sidebar">
|
||||
<ul class="nav-list">
|
||||
<li><a asp-controller="Home" asp-action="Index"><i class="fas fa-home"></i> Home</a></li>
|
||||
@if (User.IsInRole("Admin") || User.IsInRole("Budget"))
|
||||
{
|
||||
<li><a asp-controller="Home" asp-action="Budget"><i class="fas fa-wallet"></i> Budget</a></li>
|
||||
}
|
||||
<li><a asp-controller="Home" asp-action="Menu"><i class="fas fa-utensils"></i> Menyöversikt</a></li>
|
||||
@if (User.IsInRole("Admin") || User.IsInRole("Chef"))
|
||||
{
|
||||
<li><a asp-controller="FoodMenu" asp-action="Veckomeny"><i class="fas fa-calendar-week"></i> Veckomeny</a></li>
|
||||
<li><a asp-controller="FoodMenu" asp-action="MealAdmin"><i class="fas fa-list"></i> Matlista</a></li>
|
||||
}
|
||||
@if (User.IsInRole("Admin"))
|
||||
{
|
||||
<li><a asp-controller="Admin" asp-action="Index"><i class="fas fa-cog"></i> Adminpanel</a></li>
|
||||
}
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<li class="nav-section-title">Måltider</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-area="" asp-controller="Home" asp-action="Menu">
|
||||
<i class="fas fa-utensils"></i> Menyöversikt
|
||||
</a>
|
||||
</li>
|
||||
@if (User.IsInRole("Admin") || User.IsInRole("Chef"))
|
||||
{
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-area="" asp-controller="FoodMenu" asp-action="Veckomeny">
|
||||
<i class="fas fa-calendar-week"></i> Veckomeny
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" asp-area="" asp-controller="FoodMenu" asp-action="MealAdmin">
|
||||
<i class="fas fa-list"></i> Matlista
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
@if (User.IsInRole("Admin"))
|
||||
{
|
||||
<li><a class="nav-link" href="/Admin">Adminpanel</a></li>
|
||||
}
|
||||
</ul>
|
||||
<main class="main-panel">
|
||||
@RenderBody()
|
||||
@RenderSection("Scripts", required: false)
|
||||
</main>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<main role="main" class="main-content">
|
||||
@RenderBody()
|
||||
@RenderSection("Scripts", required: false)
|
||||
</main>
|
||||
|
||||
<!-- Right Sidebar with budget data from the RightSidebarViewComponent -->
|
||||
<aside class="right-sidebar">
|
||||
@await Component.InvokeAsync("RightSidebar")
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<script src="~/js/site.js" asp-append-version="true"></script>
|
||||
<script src="~/js/site.js" asp-append-version="true"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,28 +1,67 @@
|
||||
@using Microsoft.AspNetCore.Identity
|
||||
@using Aberwyn.Models
|
||||
|
||||
@inject SignInManager<ApplicationUser> SignInManager
|
||||
@inject UserManager<ApplicationUser> UserManager
|
||||
|
||||
<ul class="navbar-nav">
|
||||
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
|
||||
|
||||
@if (SignInManager.IsSignedIn(User))
|
||||
{
|
||||
<li class="nav-item">
|
||||
<a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Home", new { area = "" })">
|
||||
<button id="logout" type="submit" class="nav-link btn btn-link text-dark">Logout</button>
|
||||
</form>
|
||||
</li>
|
||||
<div class="auth-links">
|
||||
<div class="auth-menu">
|
||||
<button class="auth-icon-button" type="button">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</button>
|
||||
<div class="auth-dropdown">
|
||||
<span style="padding: 8px 12px; display: block;">@User.Identity.Name</span>
|
||||
<form method="post" asp-area="Identity" asp-page="/Account/Logout" style="margin: 0;">
|
||||
<button type="submit" class="dropdown-logout-button" style="padding: 8px 12px; width: 100%; text-align: left; background: none; border: none; cursor: pointer;">Logga ut</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" id="register" asp-area="Identity" asp-page="/Account/Register">Register</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link text-dark" id="login" asp-area="Identity" asp-page="/Account/Login">Login</a>
|
||||
</li>
|
||||
<div class="auth-links">
|
||||
<div class="auth-menu">
|
||||
<button class="auth-icon-button" type="button">
|
||||
<i class="fas fa-user-circle"></i>
|
||||
</button>
|
||||
<div class="auth-dropdown">
|
||||
<form method="post" asp-area="Identity" asp-page="/Account/Login" style="padding: 12px; display: flex; flex-direction: column; gap: 8px;">
|
||||
<input type="hidden" name="ReturnUrl" value="/" />
|
||||
<input name="Input.Email" type="email" placeholder="E-post" required style="padding: 6px; font-size: 14px;" />
|
||||
<input name="Input.Password" type="password" placeholder="Lösenord" required style="padding: 6px; font-size: 14px;" />
|
||||
<button type="submit" style="background-color: #3A4E62; color: white; border: none; padding: 6px 10px; border-radius: 4px; font-size: 14px;">
|
||||
Logga in
|
||||
</button>
|
||||
</form>
|
||||
<a href="/Identity/Account/Register" style="padding: 8px 12px; display: block;">Registrera dig</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.querySelectorAll('.auth-icon-button').forEach(button => {
|
||||
const menu = button.closest('.auth-menu');
|
||||
|
||||
button.addEventListener('click', function (e) {
|
||||
e.stopPropagation();
|
||||
document.querySelectorAll('.auth-menu').forEach(m => m.classList.remove('open'));
|
||||
menu.classList.toggle('open');
|
||||
});
|
||||
});
|
||||
|
||||
// Förhindra att klick i dropdownen stänger den
|
||||
document.querySelectorAll('.auth-dropdown').forEach(dropdown => {
|
||||
dropdown.addEventListener('click', e => e.stopPropagation());
|
||||
});
|
||||
|
||||
document.addEventListener('click', () => {
|
||||
document.querySelectorAll('.auth-menu.open').forEach(m => m.classList.remove('open'));
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
185
Aberwyn/wwwroot/css/Veckomeny.css
Normal file
185
Aberwyn/wwwroot/css/Veckomeny.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user