dereklseitz/BloomValleyNursery
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor: Modularized footer.njk and header-footer.css

Browse Source 
- Split header-footer.css into:
    - header.css
    - footer.css
    - modals.css
- Split footer.njk into:
    - footer.njk
    - modals.njk
- Updated front matter of:
    - index.njk
    - about.njk
    - credits.njk
    - gallery.njk
    - community.njk
This commit is contained in:
Derek L. Seitz
2025-09-06 20:17:47 -05:00
parent f30c846e9e
commit 732be668f7
12 changed files with 250 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/_includes/base.njk
View File

@@ -38,6 +38,8 @@
{% include "footer.njk" %}
{% include "modals.njk" %}
{% if pageScripts %}
{% for script in pageScripts %}
<script src="{{ script }}"></script>

49
src/_includes/footer.njk
View File

@@ -56,52 +56,3 @@
<div id="copyright">&copy; 2025, Derek L. Seitz, <a href="https://dlseitz.dev">dlseitz.dev</a>. Images used with permissions from <a href="/credits/" target="_blank" rel="noopener noreferrer">these contributors</a>.</div>
</footer>
<!-- Custom Newsletter Modal -->
<div id="custom-alert" class="modal hidden">
<div class="modal-content">
<span class="close-modal" id="alert-close-btn">&times;</span>
<p id="alert-message"></p>
<button id="alert-ok-button">OK</button>
</div>
</div>
<!-- Modal for Shopping Cart -->
<div id="cart-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal">&times;</span>
<h2>Your Shopping Cart</h2>
<ul id="cart-items"></ul> <!-- Dynamically populated -->
<p id="cart-total"></p> <!-- Sub-total will appear here -->
<div class="modal-buttons">
<button id="clear-cart-modal-btn">Clear Cart</button>
<button id="process-order-modal-btn">Process Order</button>
</div>
</div>
</div>
<!-- Modal for Item Added -->
<div id="item-added-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal" id="item-added-close">&times;</span>
<p id="item-added-message"></p> <!-- Dynamically set message -->
</div>
</div>
<!-- Confirmation Modal -->
<div id="confirmation-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal" id="confirmation-close-btn">&times;</span>
<p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
<button id="confirmation-confirm-btn">Confirm</button>
<button id="confirmation-close-btn">Close</button>
</div>
</div>
<!-- Final Confirmation Modal -->
<div id="final-confirmation-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal" id="final-confirmation-close-btn">&times;</span>
<p id="final-confirmation-message"></p> <!-- Message after successful action -->
<button id="final-confirmation-close-btn">Close</button>
</div>
</div>

49
src/_includes/modals.njk Normal file
View File

@@ -0,0 +1,49 @@
<!-- Custom Newsletter Modal -->
<div id="custom-alert" class="modal hidden">
<div class="modal-content">
<span class="close-modal" id="alert-close-btn">&times;</span>
<p id="alert-message"></p>
<button id="alert-ok-button">OK</button>
</div>
</div>
<!-- Modal for Shopping Cart -->
<div id="cart-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal">&times;</span>
<h2>Your Shopping Cart</h2>
<ul id="cart-items"></ul> <!-- Dynamically populated -->
<p id="cart-total"></p> <!-- Sub-total will appear here -->
<div class="modal-buttons">
<button id="clear-cart-modal-btn">Clear Cart</button>
<button id="process-order-modal-btn">Process Order</button>
</div>
</div>
</div>
<!-- Modal for Item Added -->
<div id="item-added-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal" id="item-added-close">&times;</span>
<p id="item-added-message"></p> <!-- Dynamically set message -->
</div>
</div>
<!-- Confirmation Modal -->
<div id="confirmation-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal" id="confirmation-close-btn">&times;</span>
<p id="confirmation-message"></p> <!-- Dynamic confirmation message -->
<button id="confirmation-confirm-btn">Confirm</button>
<button id="confirmation-close-btn">Close</button>
</div>
</div>
<!-- Final Confirmation Modal -->
<div id="final-confirmation-modal" class="modal" style="display: none;">
<div class="modal-content">
<span class="close-modal" id="final-confirmation-close-btn">&times;</span>
<p id="final-confirmation-message"></p> <!-- Message after successful action -->
<button id="final-confirmation-close-btn">Close</button>
</div>
</div>