frnix_06/Francescos.Recipes.World
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the code more readable and easier with some style

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
Francesco.Recipes.World/Views/Shared/_RecipeInstructionGridPartial.cshtml
+18 -34
View File
@@ -4,44 +4,28 @@
<h3>Instructions</h3> <h3>Instructions</h3>
<div class="instructions-grid"> <div class="instructions-grid">
@{ @foreach (var instruction in Model.Instructions.OrderBy(i => i.Number))
var groupedInstructions = Model.Instructions.OrderBy(i => i.Number).ToList(); {
var instructionRows = groupedInstructions <div class="instruction-card">
.Select((instruction, index) => new { Instruction = instruction, Index = index }) <div class="instruction-image">
.GroupBy(x => x.Index / 3) @if (instruction.MediaFiles != null && instruction.MediaFiles.Any())
.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]; var mediaFile = instruction.MediaFiles.First();
<div class="instruction-card"> if (mediaFile.Data != null && mediaFile.Data.Length > 0)
<div class="instruction-image"> {
@if (instruction.MediaFiles != null && instruction.MediaFiles.Any()) <img src="data:@mediaFile.MimeType;base64,@Convert.ToBase64String(mediaFile.Data)" alt="Step @instruction.Number" />
{ }
var mediaFile = instruction.MediaFiles.First(); }
@if (mediaFile.Data != null && mediaFile.Data.Length > 0) else
{ {
<img src="data:@mediaFile.MimeType;base64,@Convert.ToBase64String(mediaFile.Data)" alt="Step @instruction.Number" /> <div class="placeholder-image">
} <i class="bi bi-image"></i>
}
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>
} }
<span class="step-number">@instruction.Number</span>
</div> </div>
} <p class="instruction-text">@instruction.Description</p>
</div>
} }
</div> </div>
</div> </div>
Francesco.Recipes.World/wwwroot/css/site.css
+30 -29
View File
@@ -89,38 +89,36 @@ textarea.form-control {
/* Recipe Instructions Grid Layout */ /* Recipe Instructions Grid Layout */
.instructions-grid { .instructions-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 2rem; margin-top: 2rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.instruction-row {
display: flex;
justify-content: space-between;
margin-bottom: 2.5rem;
flex-wrap: wrap;
}
.instruction-card {
width: calc(33.333% - 20px);
margin-bottom: 1.5rem;
}
@media (max-width: 992px) { @media (max-width: 992px) {
.instruction-card { .instructions-grid {
width: calc(50% - 15px); grid-template-columns: repeat(2, 1fr);
} }
} }
@media (max-width: 576px) { @media (max-width: 576px) {
.instruction-card { .instructions-grid {
width: 100%; grid-template-columns: 1fr;
} }
} }
.instruction-card {
border: 1px solid #ccc;
padding: 1rem;
border-radius: 8px;
background-color: white;
}
.instruction-image { .instruction-image {
position: relative; position: relative;
width: 100%; width: 100%;
aspect-ratio: 1/1; aspect-ratio: 1 / 1;
border: 1px solid #ddd; border: 1px solid #ddd;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
@@ -129,36 +127,38 @@ textarea.form-control {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #f8f9fa; background-color: #f8f9fa;
text-align: center;
} }
.instruction-image img { .instruction-image img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
border-radius: 4px;
} }
.placeholder-image { .placeholder-image {
display: flex;
align-items: center;
justify-content: center;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: #aaa; display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
color: #999;
background-color: #f0f0f0;
border-radius: 4px;
} }
.placeholder-image i {
font-size: 2rem;
}
.step-number { .step-number {
position: absolute; position: absolute;
bottom: 5px; bottom: 8px;
right: 10px; right: 8px;
background-color: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.6);
color: white; color: white;
font-weight: bold;
padding: 3px 8px; padding: 3px 8px;
border-radius: 50%; border-radius: 50%;
font-size: 0.875rem;
font-weight: bold;
} }
.instruction-text { .instruction-text {
@@ -183,3 +183,4 @@ textarea.form-control {
background-color: #007bff; background-color: #007bff;
} }