Make the code more readable and easier with some style

This commit is contained in:
Francesco Lorenzo D'Amico
2025-05-27 13:48:39 +02:00
parent 5c9f6c8120
commit 907e19e398
2 changed files with 48 additions and 63 deletions
@@ -4,44 +4,28 @@
<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)
@foreach (var instruction in Model.Instructions.OrderBy(i => i.Number))
{
<div class="instruction-card">
<div class="instruction-image">
@if (instruction.MediaFiles != null && instruction.MediaFiles.Any())
{
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>
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>