Menu - Pre 9 .net
This commit is contained in:
Elias Jansson
@@ -1,54 +1,97 @@
|
||||
@model Aberwyn.Models.MenuViewModel
|
||||
|
||||
@{
|
||||
// Define a flag to hide the sidebar if the URL path matches '/nosidebar' (relative part after the controller)
|
||||
bool hideSidebar = Context.Request.Path.Value.EndsWith("/nosidebar", StringComparison.OrdinalIgnoreCase);
|
||||
Layout = hideSidebar ? null : "_Layout"; // No layout if the path ends with '/nosidebar'
|
||||
var hideSidebar = Context.Request.Path.Value.EndsWith("/nosidebar", StringComparison.OrdinalIgnoreCase);
|
||||
Layout = hideSidebar ? null : "_Layout";
|
||||
}
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" ng-app="mealMenuApp">
|
||||
<html lang="sv" ng-app="mealMenuApp">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Meal Menu Overview</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>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="~/css/meal-menu.css">
|
||||
<!-- 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>
|
||||
</head>
|
||||
<body ng-controller="MealMenuController">
|
||||
<body ng-controller="MealMenuController" ng-init="viewMode='list'">
|
||||
<div class="meal-menu-page" style="position:relative">
|
||||
<h1>Veckomeny</h1>
|
||||
|
||||
<div class="meal-menu-page">
|
||||
<h1 class="page-title">Meal Menu Overview</h1>
|
||||
|
||||
<div class="date-picker">
|
||||
<button type="button" class="date-btn" ng-click="goToPreviousWeek()">Föregående vecka</button>
|
||||
<span class="week-info">Vecka {{ selectedWeek }} - {{ selectedYear }}</span>
|
||||
<button type="button" class="date-btn" ng-click="goToNextWeek()">Nästa vecka</button>
|
||||
</div>
|
||||
|
||||
<div class="meal-menu-container">
|
||||
<div ng-repeat="day in daysOfWeek" class="day-item">
|
||||
<div class="day-header">{{ day }}</div>
|
||||
|
||||
<div class="meal-info" ng-if="!isEditing">
|
||||
<div ng-if="menu[day]">
|
||||
<div ng-if="menu[day].breakfastMealName">
|
||||
<span><strong>Frukost:</strong> {{ menu[day].breakfastMealName }}</span>
|
||||
</div>
|
||||
<div ng-if="menu[day].lunchMealName">
|
||||
<span><strong>Lunch:</strong> {{ menu[day].lunchMealName }}</span>
|
||||
</div>
|
||||
<div ng-if="menu[day].dinnerMealName">
|
||||
<span><strong>Middag:</strong> {{ menu[day].dinnerMealName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="!menu[day]">
|
||||
<span class="not-assigned">Inte bestämd</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 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>
|
||||
</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">
|
||||
<div class="day-header">{{day}}</div>
|
||||
<div class="meal-info" ng-if="menu[day]">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</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 class="card-content">
|
||||
<div class="day">{{day}}</div>
|
||||
<div class="meal" ng-if="menu[day].breakfastMealName">Frukost: {{menu[day].breakfastMealName}}</div>
|
||||
<div class="meal" ng-if="menu[day].lunchMealName">Lunch: {{menu[day].lunchMealName}}</div>
|
||||
<div class="meal" ng-if="menu[day].dinnerMealName">Middag: {{menu[day].dinnerMealName}}</div>
|
||||
<div class="meal" ng-if="!menu[day]">Inte bestämd</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user