File: D:/HostingSpaces/RImmers2/portal.photomenu.nl/wwwroot/views/menus/dishes.html
<style>
.table-hover tbody tr:hover td,
.table-hover tbody tr td:hover {
background: #FFD493;
}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="/dist/css/jquery.fancybox-1.3.4.css" />
<style type="text/css">
a.fancybox img {
border: none;
box-shadow: 0 1px 7px rgba(0,0,0,0.6);
-o-transform: scale(1,1);
-ms-transform: scale(1,1);
-moz-transform: scale(1,1);
-webkit-transform: scale(1,1);
transform: scale(1,1);
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative;
z-index: 999;
-o-transform: scale(1.03,1.03);
-ms-transform: scale(1.03,1.03);
-moz-transform: scale(1.03,1.03);
-webkit-transform: scale(1.03,1.03);
transform: scale(1.03,1.03);
}
</style>
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Menu of "@{model.restaurant.Name}" @{if repository.type == 'admin'}<span style="color:black;font-size:12px">@{model.menu}</span> @{fi}</h1>
</div>
<div align="center">
@{if user.hasLunch}
@{if model.type == 'lunch'}
<select class="form-control" style="width: 200px;" onchange="window.location='/menus/@{model.restaurantID}/@{model.menu}'">
<option value="Lunch" selected>Lunch</option>
<option value="Dinner">Dinner</option>
</select>
@{fi}
@{if model.type == null}
<select class="form-control" style="width: 200px;" onchange="window.location='/menus/@{model.restaurantID}/@{model.menu}/lunch'">
<option value="Lunch">Lunch</option>
<option value="Dinner" selected>Dinner</option>
</select>
@{fi}
@{else}
<h2>Dinner</h2>
@{fi}
</div>
<br/>
<div align="left">
<!-- <a class="pull-right" href="/menus/@{model.restaurantID}/@{model.menu}/edit/new">
<i class="fa fa-plus"></i> Add new dish
</a>
-->
<a href="/menus/@{model.restaurantID}/@{model.menu}/edit/new" style="width:150px" class="btn btn-default"><i class="fa fa-plus" aria-hidden="true"></i> New dish</a>
</div>
</div>
@{if model.type == null}
<div align="center"><font size="4"><a href="#Starters">Starters</a> | <a href="#Side Dish">Side Dish</a> | <a href="#Main Dish">Main Dish</a> | <a href="#Dessert">Desserts</a> | <a href="#Menu">Menus</a> | <a href="#Menu">Drinks</a></font></div>
@{fi}
@{if model.type == 'lunch'}
<div class="col-md-12">
<hr>
<!-- <div><i><font color="blue"><i class="fa fa-info-circle" aria-hidden="true"></i> Select dish to edit</i></font></div>-->
<table class="table table-borders table-striped table-hover">
<thead>
<tr>
<th style="width:100px">Sort order</th>
<th style="width:200px">Active</th>
<th>Title</th>
@{if repository.type == 'admin'}
<th style="width:200px">Description</th>
<th style="width:200px">Ingredients</th>
<th style="width:200px">Vegetarian</th>
@{fi}
<th style="width:200px">Price</th>
@{if repository.type == 'admin' || user.hasStatistics}
<th>Apple</th>
<th>Android</th>
@{fi}
<th style="width:75px">Image</th>
</tr>
</thead>
<tbody>
@{foreach item in model.list}
<!-- <tr @{if item.Inactive} style="color:silver" @{fi} onclick="document.location.href='/menus/@{model.restaurantID}/@{model.menu}/edit/@{item.key}'" style='cursor: pointer;'> -->
<tr @{if item.Inactive} style="color:silver" @{fi}>
<td style="vertical-align: middle">
@{if repository.type == 'admin'}
<font color="silver">@{item['Sort order']} </font>
@{fi}
@{if index !== 0}
<a class="fa fa-arrow-up" title="Move up" href="/menus/@{model.restaurantID}/@{model.menu}/order/up/@{item.key}"></a>
@{fi}
@{if index !== model.list.length - 1}
<a class="fa fa-arrow-down" title="Move down" href="/menus/@{model.restaurantID}/@{model.menu}/order/down/@{item.key}"></a>
@{fi}
</td>
<td style="vertical-align: middle">@{if !item.Inactive} <i class="fa fa-check" aria-hidden="true"></i> @{fi}</td>
<td><a href="#" onclick="document.location.href='/menus/@{model.restaurantID}/@{model.menu}/edit/@{item.key}'">@{item.Title}</a></td>
@{if repository.type == 'admin'}
<td style="vertical-align: middle">@{item.Description}</td>
<td style="vertical-align: middle">@{item.Ingredients}</td>
<td style="vertical-align: middle">@{item.Vegetarian}</td>
@{fi}
<td style="vertical-align: middle">@{item.Price}</td>
@{if repository.type == 'admin' || user.hasStatistics}
<td>@{item['Number of times shown in overview iOS']} (@{item['Number of times shown in detail iOS']})</td>
<td>@{item['Number of times shown in overview android']} (@{item['Number of times shown in detail android']})</td>
@{fi}
<td style="vertical-align: middle">
<img src="@{item.Image}" title="Click to view large image" class="fancybox" height="25px"/>
</td>
</tr>
@{end}
</tbody>
</table>
</div>
@{else}
@{foreach category in model.list}
<div class="col-md-12">
<table width="100%">
<tr>
<td width="150"><a name="@{category.key}" style="font-weight:bolder;color:black;text-decoration: none;"><h2>@{category.key}</a></h2><td>
@{if category.key != 'Starters'}<td align="right"><h1><a href="#Top"><i class="fa fa-home" aria-hidden="true"></i></a></h1></td>@{fi}
</tr>
</table>
<hr>
<table class="table table-borders table-striped table-hover">
<thead>
<tr>
<th style="width:100px">Sort order</th>
<th style="width:50px">Active</th>
<th style="width:300px">Title</th>
@{if repository.type == 'admin'}
<th style="width:300px">Description</th>
<th style="width:300px">Ingredients</th>
<th style="width:300px">Vegetarian</th>
@{fi}
<th style="width:200px">Price</th>
@{if repository.type == 'admin' || user.hasStatistics}
<th>Apple</th>
<th>Android</th>
@{fi}
<th style="width:75px">Image</th>
</tr>
</thead>
<tbody>
@{foreach item in category.value}
<tr @{if item.Inactive} style="color:silver" @{fi}>
<td style="vertical-align: middle">
@{if repository.type == 'admin'}
<font color="silver">@{item['Sort order']} </font>
@{fi}
@{if index !== 0}
<a class="fa fa-arrow-up" title="Move up" href="/menus/@{model.restaurantID}/@{model.menu}/order/up/@{item.key}"></a>
@{fi}
@{if index !== category.value.length - 1}
<a class="fa fa-arrow-down" title="Move down" href="/menus/@{model.restaurantID}/@{model.menu}/order/down/@{item.key}"></a>
@{fi}
</td>
<td style="vertical-align: middle">@{if !item.Inactive} <i class="fa fa-check" aria-hidden="true"></i> @{fi}</td>
<td style="vertical-align: middle">
<a href="#" onclick="document.location.href='/menus/@{model.restaurantID}/@{model.menu}/edit/@{item.key}'">@{item.Title}</a>
</td>
@{if repository.type == 'admin'}
<td style="vertical-align: middle">@{item.Description}</td>
<td style="vertical-align: middle">@{item.Ingredients}</td>
<td style="vertical-align: middle">@{item.Vegetarian}</td>
@{fi}
<td style="vertical-align: middle">@{item.Price}</td>
@{if repository.type == 'admin' || user.hasStatistics}
<td>@{item['Number of times shown in overview iOS']} (@{item['Number of times shown in detail iOS']})</td>
<td>@{item['Number of times shown in overview android']} (@{item['Number of times shown in detail android']})</td>
@{fi}
<td style="vertical-align: middle">
<img src="@{item.Image}" alt="" class="fancybox" title="Click to view large image" style="max-height: 25px;"/>
</td>
</tr>
@{end}
</tbody>
</table>
</div>
@{end}
@{fi }
</div>