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

New themese and night/day mode
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Elias Jansson
2025-05-12 15:39:12 +02:00
parent 3ff2833101
commit cc213dce1b
7 changed files with 297 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,61 +1,33 @@
@model Aberwyn.Models.MenuViewModel
@{
var hideSidebar = Context.Request.Path.Value.EndsWith("/nosidebar", StringComparison.OrdinalIgnoreCase);
Layout = hideSidebar ? null : "_Layout";
}
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="sv" ng-app="mealMenuApp">
<head>
<meta charset="utf-8" />
<title>Veckomeny</title>
<meta charset="utf-8" />
<title>Veckomeny</title>
<!-- AngularJS -->
<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-sanitize.js"></script>
<script src="~/js/menu.js"></script>
<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-sanitize.js"></script>
<script src="~/js/menu.js"></script>
<!-- CSS -->
<link rel="stylesheet" href="~/css/meal-menu.css" />
<style>
.view-selector { position: absolute; top: 24px; right: 24px; }
.view-selector select { padding: 6px 10px; border-radius: 4px; border: none; background: #546E7A; color: #ECEFF1; font-size: 0.95rem; cursor: pointer; }
.list-view .day-item { background: #37474F; margin-bottom: 16px; padding: 16px; border-radius: 8px; }
.list-view .day-header { font-size: 1.4rem; color: #FFEB3B; margin-bottom: 8px; position: relative; }
.list-view .day-header::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 40px; height: 3px; background: #FFEB3B; border-radius: 2px; }
.meal-selection { margin: 6px 0; font-size: 1rem; }
.meal-selection a { color: #ECEFF1; text-decoration: none; }
.meal-selection a:hover { text-decoration: underline; }
.not-assigned { color: #B0BEC5; font-style: italic; }
.card-view .card-container { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 16px; }
.meal-card { position: relative; height: 180px; color: #fff; background-size: cover; background-position: center; border-radius: 8px; 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(0,0,0,0.7),transparent); }
.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; }
</style>
<link rel="stylesheet" href="~/css/menu.css" />
</head>
<body ng-controller="MealMenuController" ng-init="viewMode='list'">
<div class="meal-menu-page" style="position:relative">
<div class="meal-menu-page">
<h1>Veckomeny</h1>
<!-- Vecko-navigering -->
<div class="date-picker">
<button ng-click="goToPreviousWeek()">← Föregående vecka</button>
<span>Vecka {{selectedWeek}} – {{selectedYear}}</span>
<button ng-click="goToNextWeek()">Nästa vecka →</button>
</div>
<!-- Vy-väljare -->
<div class="view-selector">
<label for="viewModeSelect">Visa:</label>
<select id="viewModeSelect" ng-model="viewMode">
<option value="list">Lista</option>
<option value="card">Kort</option>
</select>
<button id="toggle-view" class="toggle-view-btn" ng-click="toggleView()" title="Byt vy">🗒️</button>
<button id="toggle-theme" class="theme-toggle-btn" title="Byt tema">
🌙
</button>
</div>
<!-- Vy: List eller Kort -->
<div ng-switch="viewMode">
<div ng-switch-when="list" class="list-view">
<div ng-repeat="day in daysOfWeek" class="day-item">
@@ -71,16 +43,15 @@
<a href="/Meal/View/{{menu[day].dinnerMealId}}" target="_blank"><strong>Middag:</strong> {{menu[day].dinnerMealName}}</a>
</div>
</div>
<div ng-if="!menu[day]"><span class="not-assigned">Inte bestämd</span></div>
<div ng-if="!menu[day]">
<span class="not-assigned">Inte bestämd</span>
</div>
</div>
</div>
<div ng-switch-when="card" class="card-view">
<div class="card-container">
<div ng-repeat="day in daysOfWeek"
class="meal-card"
ng-style="{'background-image':'url('+getDayImage(day)+')'}"
ng-click="openMeal(getMealIdByDay(day))">
<div ng-repeat="day in daysOfWeek" class="meal-card" ng-class="ng-attr-data-has-image" ng-style="{'background-image':'url('+getDayImage(day)+')'}" ng-click="openMeal(getMealIdByDay(day))">
<div class="card-content">
<div class="day">{{day}}</div>
<div class="meal" ng-if="menu[day].breakfastMealName">Frukost: {{menu[day].breakfastMealName}}</div>