Skip to content

Commit

Permalink
FEATURE template enhancements
Browse files Browse the repository at this point in the history
  • Loading branch information
@jsirish
jsirish committed Jan 15, 2025
1 parent 5a49f01 commit 2435f4e
Show file tree
Hide file tree
Showing 4 changed files with 95 additions and 116 deletions.
43 changes: 1 addition & 42 deletions templates/Dynamic/RecipeBook/Page/Layout/RecipeCategoryPage.ss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,48 +13,7 @@
<% if $RecipeList.Sort('Title') %>
<div class="row">
<% loop $RecipeList.Sort('Title') %>
<div class="col-md-4 mb-4">
<div class="card h-100">
<a href="$Link" class="text-decoration-none">
<% if $Image %>
<img src="$Image.URL" class="card-img-top" alt="$Image.Title">
<% else %>
<img src="https://via.placeholder.com/150" class="card-img-top" alt="No Image">
<% end_if %>
</a>
<div class="card-body">
<% if $PrimaryCategory %>
<p class="text-uppercase text-muted small mb-1">$PrimaryCategory.Title</p>
<% end_if %>
<h5 class="card-title">
<a href="$Link" class="text-decoration-none">$Title</a>
</h5>
<div class="d-flex align-items-center text-muted">
<% if $PrepTime %>
<div class="me-4">
<i class="bi bi-alarm"></i> Prep: $PrepTime
</div>
<% end_if %>
<% if $CookTime %>
<div class="me-4">
<i class="bi bi-clock"></i> Cook: $CookTime
</div>
<% end_if %>
<% if $Servings %>
<div>
<i class="bi bi-people"></i> Servings: $Servings
</div>
<% end_if %>
</div>
<% if $Summary %>
<p class="card-text mt-2">$Summary.LimitCharacters(100)</p>
<% end_if %>
</div>
<div class="card-footer">
<a href="$Link" class="btn btn-primary btn-block">View Recipe</a>
</div>
</div>
</div>
<% include RecipeSummary %>
<% end_loop %>
</div>
<% else %>
Expand Down
40 changes: 1 addition & 39 deletions templates/Dynamic/RecipeBook/Page/Layout/RecipeLanding.ss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,45 +20,7 @@

<!-- Recipes in Category -->
<% loop $RecipeList.Limit(3).Sort('Title') %>
<div class="col-md-4 mb-4">
<div class="card h-100">
<a href="$Link" class="text-decoration-none">
<% if $Image %>
<img src="$Image.URL" class="card-img-top" alt="$Image.Title">
<% else %>
<img src="https://via.placeholder.com/150" class="card-img-top" alt="No Image">
<% end_if %>
</a>
<div class="card-body">
<% if $PrimaryCategory %>
<p class="text-uppercase text-muted small mb-1">$PrimaryCategory.Title</p>
<% end_if %>
<h5 class="card-title">
<a href="$Link" class="text-decoration-none">$Title</a>
</h5>
<div class="d-flex align-items-center text-muted">
<% if $PrepTime %>
<div class="me-4">
<i class="bi bi-alarm"></i> Prep: $PrepTime
</div>
<% end_if %>
<% if $CookTime %>
<div class="me-4">
<i class="bi bi-clock"></i> Cook: $CookTime
</div>
<% end_if %>
<% if $Servings %>
<div>
<i class="bi bi-people"></i> Servings: $Servings
</div>
<% end_if %>
</div>
</div>
<div class="card-footer">
<a href="$Link" class="btn btn-primary btn-block">View Recipe</a>
</div>
</div>
</div>
<% include RecipeSummary %>
<% end_loop %>

<!-- View All Button -->
Expand Down
88 changes: 53 additions & 35 deletions templates/Dynamic/RecipeBook/Page/Layout/RecipePage.ss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
<div class="container">
<!-- Full-Width Recipe Image -->
<% if $Image %>
<div class="row">
<div class="col-12">
<img src="$Image.URL" class="img-fluid mb-4" alt="$Image.Title">
</div>
</div>
<% end_if %>
<div class="row">
<div class="col-12">
<img src="$Image.URL" class="img-fluid mb-4" alt="$Image.Title">
Expand All @@ -15,38 +22,51 @@
<h1 class="card-title">$Title</h1>
<div class="d-flex align-items-center text-muted mb-3">
<div class="me-4">
<i class="bi bi-alarm"></i> Prep: $PreparationTime minutes
<i class="bi bi-alarm"></i> Prep: $PrepTime
</div>
<div class="me-4">
<i class="bi bi-clock"></i> Cook: $CookTime minutes
<i class="bi bi-clock"></i> Cook: $CookTime
</div>
<div>
<i class="bi bi-people"></i> Servings: $Servings
</div>
</div>
</div>
</div>

<!-- Social Sharing -->
<div class="row mb-4">
<div class="col-12">
<div class="d-flex align-items-center">
<h3 class="me-3 text-muted" style="font-size: 1.25rem;">Share This Recipe:</h3>
<a href="https://www.facebook.com/sharer/sharer.php?u=$AbsoluteLink" class="me-2 text-decoration-none" target="_blank" rel="noopener noreferrer">
<i class="bi bi-facebook"></i>
</a>
<a href="https://twitter.com/intent/tweet?url=$AbsoluteLink&text=$Title" class="me-2 text-decoration-none" target="_blank" rel="noopener noreferrer">
<i class="bi bi-twitter"></i>
</a>
<a href="https://www.instagram.com" class="me-2 text-decoration-none" target="_blank" rel="noopener noreferrer">
<i class="bi bi-instagram"></i>
</a>
<a href="https://www.pinterest.com/pin/create/button/?url=$AbsoluteLink&description=$Title" class="me-2 text-decoration-none" target="_blank" rel="noopener noreferrer">
<i class="bi bi-pinterest"></i>
</a>
<a href="mailto:?subject=Check%20out%20this%20recipe!&body=Hi,%0A%0ACheck%20out%20this%20recipe%20I%20found:%20$AbsoluteLink%0A%0AEnjoy!" class="text-decoration-none">
<i class="bi bi-envelope"></i>
</a>
<!-- Additional Categories and Share This Recipe -->
<div class="row mb-4">
<div class="col-md-6">
<% if $CategoryList %>
<h5>Additional Categories:</h5>
<ul class="list-inline">
<% loop $CategoryList %>
<% if $ID != $CurrentCategory.ID %>
<li class="list-inline-item">
<a href="$Link" class="btn btn-outline-secondary btn-sm">$Title</a>
</li>
<% end_if %>
<% end_loop %>
</ul>
<% end_if %>
</div>
<div class="col-md-6">
<h5>Share This Recipe:</h5>
<div class="d-flex">
<a href="https://www.facebook.com/sharer/sharer.php?u=$AbsoluteLink" class="me-2 text-decoration-none" target="_blank" rel="noopener noreferrer">
<i class="bi bi-facebook"></i>
</a>
<a href="https://twitter.com/intent/tweet?url=$AbsoluteLink&text=$Title" class="me-2 text-decoration-none" target="_blank" rel="noopener noreferrer">
<i class="bi bi-twitter"></i>
</a>
<a href="https://www.instagram.com" class="me-2 text-decoration-none" target="_blank" rel="noopener noreferrer">
<i class="bi bi-instagram"></i>
</a>
<a href="https://www.pinterest.com/pin/create/button/?url=$AbsoluteLink&description=$Title" class="me-2 text-decoration-none" target="_blank" rel="noopener noreferrer">
<i class="bi bi-pinterest"></i>
</a>
<a href="mailto:?subject=Check%20out%20this%20recipe!&body=Hi,%0A%0ACheck%20out%20this%20recipe%20I%20found:%20$AbsoluteLink%0A%0AEnjoy!" class="text-decoration-none">
<i class="bi bi-envelope"></i>
</a>
</div>
</div>
</div>
</div>
</div>
Expand All @@ -65,28 +85,26 @@
<h2>Ingredients</h2>
<ul class="list-group mb-4">
<% loop $Ingredients.Sort('Sort') %>
<li class="list-group-item">
<input type="checkbox" id="ingredient-$ID">
<label for="ingredient-$ID">$Title.Plain</label>
<li class="list-group-item d-flex align-items-start">
<input type="checkbox" id="ingredient-$ID" class="me-2 align-self-start mt-1" aria-label="Ingredient: $Title.Plain">
<label for="ingredient-$ID" class="flex-grow-1">$Title.Plain</label>
</li>
<% end_loop %>
</ul>
</div>
<div class="col-md-8">
<h2>Instructions</h2>
<ul class="list-group">
<ol class="list-group list-group-numbered">
<% loop $Directions.Sort('Sort') %>
<li class="list-group-item d-flex align-items-center">
<span class="me-2">$Pos.</span>
<span>$Title</span>
<li class="list-group-item d-flex align-items-start">
<span class="ms-2">$Title</span>
</li>
<% end_loop %>
</ul>
</ol>
</div>
</div>
</div>

<!-- Elemental Area -->
<div>
<div class="mt-4">
$ElementalArea
</div>
40 changes: 40 additions & 0 deletions templates/Includes/RecipeSummary.ss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<div class="col-md-4 mb-4">
<div class="card h-100">
<% if $Image %>
<a href="$Link" class="text-decoration-none">
<img src="$Image.URL" class="card-img-top" alt="$Image.Title">
</a>
<% end_if %>
<div class="card-body">
<% if $PrimaryCategory %>
<p class="text-uppercase text-muted small mb-1">$PrimaryCategory.Title</p>
<% end_if %>
<h5 class="card-title">
<a href="$Link" class="text-decoration-none">$Title</a>
</h5>
<div class="d-flex justify-content-between text-muted small">
<% if $PrepTime %>
<div class="d-flex align-items-center">
<i class="bi bi-alarm me-1"></i> Prep: $PrepTime
</div>
<% end_if %>
<% if $CookTime %>
<div class="d-flex align-items-center">
<i class="bi bi-clock me-1"></i> Cook: $CookTime
</div>
<% end_if %>
<% if $Servings %>
<div class="d-flex align-items-center">
<i class="bi bi-people me-1"></i> Servings: $Servings
</div>
<% end_if %>
</div>
<% if $Summary %>
<p class="card-text mt-2">$Summary.LimitCharacters(100)</p>
<% end_if %>
</div>
<div class="card-footer">
<a href="$Link" class="btn btn-primary btn-block">View Recipe</a>
</div>
</div>
</div>

0 comments on commit 2435f4e

Please sign in to comment.