kevinveenbirkenbach/homepage.veen.world
1
0
Fork 0
mirror of https://github.com/kevinveenbirkenbach/homepage.veen.world.git synced 2025-10-31 07:29:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implemented header and footer menu

Browse Source
This commit is contained in:
Kevin Veen-Birkenbach
2025-01-08 18:06:08 +01:00
parent 59eebbeb92
commit cc04bbf0f5
6 changed files with 87 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/static/css/default.css
View File

@@ -68,10 +68,16 @@ h3.footer-title{
.dropdown-submenu { .dropdown-submenu {
position: relative; position: relative;
list-style: none;
} }
.dropdown-submenu > .dropdown-menu { .dropdown-submenu > .dropdown-menu {
top: 0; top: 0;
left: 100%; left: 100%;
margin-top: -0.5rem; margin-top: -0.5rem;
}
.navbar-nav {
padding: 0;
margin: 0;
} }

18
app/static/js/dynamic-modal.js Normal file
View File

@@ -0,0 +1,18 @@
function openDynamicPopup(subitem) {
// Set modal title and content
document.getElementById('dynamicModalLabel').innerText = subitem.description;
const modalContent = document.getElementById('dynamicModalContent');
modalContent.value = subitem.address;
// Add copy functionality
document.getElementById('dynamicCopyButton').addEventListener('click', function () {
modalContent.select();
navigator.clipboard.writeText(modalContent.value)
.then(() => alert('Content copied to clipboard!'))
.catch(() => alert('Failed to copy content.'));
});
// Show the modal
const modal = new bootstrap.Modal(document.getElementById('dynamicModal'));
modal.show();
}

23
app/templates/base.html
View File

@@ -20,18 +20,23 @@
<img src="{{company.logo}}" alt="logo"/> <img src="{{company.logo}}" alt="logo"/>
<h1>{{company.titel}}</h1> <h1>{{company.titel}}</h1>
<h2>{{company.subtitel}}</h2> <h2>{{company.subtitel}}</h2>
{% include "navigation.html.j2" %}
</header> </header>
{% set menu = "top" %}
{% include "navigation.html.j2"%}
{% block content %}{% endblock %} {% block content %}{% endblock %}
{% set menu = "bottom" %}
<footer class="footer" itemscope itemtype="http://schema.org/LocalBusiness" class="small"> {% include "navigation.html.j2" %}
<p itemprop="name">{{ company.titel }} <br /> <footer class="footer">
{{ company.subtitel }}</p> <div itemscope itemtype="http://schema.org/LocalBusiness" class="small">
<span><i class="fa-solid fa-location-dot"></i> {{ company.address.values() | join(", ") }}</span> <p itemprop="name">{{ company.titel }} <br />
<p><a href="/imprint"><i class="fa-solid fa-scale-balanced"></i> Imprint</a></p> {{ company.subtitel }}</p>
<span><i class="fa-solid fa-location-dot"></i> {{ company.address.values() | join(", ") }}</span>
<p><a href="/imprint"><i class="fa-solid fa-scale-balanced"></i> Imprint</a></p>
</div>
</footer> </footer>
</div> </div>
<!-- Include modal -->
{% include "modal.html.j2" %}
<script src="{{ url_for('static', filename='js/dynamic-modal.js') }}"></script>
</body> </body>
</html> </html>

20
app/templates/modal.html.j2 Normal file
View File

@@ -0,0 +1,20 @@
<!-- Universal Modal Structure -->
<div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="dynamicModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dynamicModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="input-group">
<input type="text" id="dynamicModalContent" class="form-control" readonly>
<button class="btn btn-outline-secondary" type="button" id="dynamicCopyButton">Copy</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

101
app/templates/navigation.html.j2
View File

@@ -1,30 +1,30 @@
<!-- Template for Subitems --> <!-- Template for Subitems -->
{% macro render_subitems(subitems) %} {% macro render_subitems(subitems) %}
{% for subitem in subitems %} {% for subitem in subitems %}
{% if subitems.subitems %} {% if subitems.subitems %}
<li class="dropdown-submenu"> <li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#"> <a class="dropdown-item dropdown-toggle" href="#">
<i class="{{ subitem.icon_class }}"></i> {{ subitem.name }} <i class="{{ subitem.icon_class }}"></i> {{ subitem.name }}
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
{{ render_subitems(subitem.subitems) }} {{ render_subitems(subitem.subitems) }}
</ul> </ul>
</li> </li>
{% elif subitem.popup %} {% elif subitem.popup %}
<li> <li>
<a class="dropdown-item" onclick='openDynamicPopup({{subitem|tojson|safe}})''> <a class="dropdown-item" onclick='openDynamicPopup({{subitem|tojson|safe}})''>
<i class="{{ subitem.icon_class }}"></i> {{ subitem.name }} <i class="{{ subitem.icon_class }}"></i> {{ subitem.name }}
</a> </a>
</li> </li>
{% else %} {% else %}
<li> <li>
<a class="dropdown-item" href="{{ subitem.href }}" {% if subitem.target %} target="{{subitem.target}}" {% endif %}> <a class="dropdown-item" href="{{ subitem.href }}" {% if subitem.target %} target="{{subitem.target}}" {% endif %}>
<i class="{{ subitem.icon_class }}"></i> {{ subitem.name }} <i class="{{ subitem.icon_class }}"></i> {{ subitem.name }}
</a> </a>
</li> </li>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
{% endmacro %} {% endmacro %}
<!-- Navigation Bar --> <!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
@@ -36,7 +36,7 @@
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="collapse navbar-collapse" id="navbarNav"> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto"> <ul class="navbar-nav {% if menu == 'top' %}ms-auto{% endif %}">
{% for item in navigation %} {% for item in navigation %}
{% if item.href %} {% if item.href %}
<!-- Single Item --> <!-- Single Item -->
@@ -60,47 +60,4 @@
</ul> </ul>
</div> </div>
</div> </div>
</nav> </nav>
<!-- Universal Modal Structure -->
<div class="modal fade" id="dynamicModal" tabindex="-1" aria-labelledby="dynamicModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dynamicModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="input-group">
<input type="text" id="dynamicModalContent" class="form-control" readonly>
<button class="btn btn-outline-secondary" type="button" id="dynamicCopyButton">Copy</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Script for Dynamic Modal -->
<script>
function openDynamicPopup(subitem) {
// Set modal title and content
document.getElementById('dynamicModalLabel').innerText = subitem.description;
const modalContent = document.getElementById('dynamicModalContent');
modalContent.value = subitem.address;
// Add copy functionality
document.getElementById('dynamicCopyButton').addEventListener('click', function () {
modalContent.select();
navigator.clipboard.writeText(modalContent.value)
.then(() => alert('Content copied to clipboard!'))
.catch(() => alert('Failed to copy content.'));
});
// Show the modal
const modal = new bootstrap.Modal(document.getElementById('dynamicModal'));
modal.show();
}
</script>

14
app/templates/pages/index.html.j2
View File

@@ -6,18 +6,4 @@
{% include "card.html.j2" %} {% include "card.html.j2" %}
{% endfor %} {% endfor %}
</div> </div>
<div class="row">
<div class="col">
<h3>Networks</h3>
<ul>
{% for network in networks %}
<li>
<a href="{{ network.link }}">
<i class="{{ network.icon }}"></i> {{ network.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endblock %} {% endblock %}