Francesco Lorenzo D'Amico
48 lines
1.4 KiB
Plaintext
48 lines
1.4 KiB
Plaintext
@model Francesco.Recipes.World.Models.InstructionViewModel
|
|
|
|
<div class="recipe-instructions-section">
|
|
<h3>Instructions</h3>
|
|
|
|
<div class="instructions-grid">
|
|
@{
|
|
var groupedInstructions = Model.Instructions.OrderBy(i => i.Number).ToList();
|
|
var instructionRows = groupedInstructions
|
|
.Select((instruction, index) => new { Instruction = instruction, Index = index })
|
|
.GroupBy(x => x.Index / 3)
|
|
.Select(g => g.Select(x => x.Instruction).ToList())
|
|
.ToList();
|
|
|
|
foreach (var row in instructionRows)
|
|
{
|
|
<div class="instruction-row">
|
|
@for (var instruction in row)
|
|
{
|
|
var instruction = groupedInstructions[row * 3 + col];
|
|
<div class="instruction-card">
|
|
<div class="instruction-image">
|
|
@if (instruction.MediaFiles != null && instruction.MediaFiles.Any())
|
|
{
|
|
var mediaFile = instruction.MediaFiles.First();
|
|
@if (mediaFile.Data != null && mediaFile.Data.Length > 0)
|
|
{
|
|
<img src="data:@mediaFile.MimeType;base64,@Convert.ToBase64String(mediaFile.Data)" alt="Step @instruction.Number" />
|
|
}
|
|
}
|
|
|
|
else
|
|
{
|
|
<div class="placeholder-image">
|
|
<i class="bi bi-image"></i>
|
|
</div>
|
|
}
|
|
<span class="step-number">@instruction.Number</span>
|
|
</div>
|
|
<p class="instruction-text">@instruction.Description</p>
|
|
</div>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
</div>
|