Skip to content

Home button added #1727

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
arushsinghh wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Home button added #1727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
91a8344
Home button added
arushsinghh Jan 17, 2025
d36931d
home page fixes
arushsinghh Jan 17, 2025
33e2066
Test fixes
arushsinghh Jan 17, 2025
13cc1ea
test fix
arushsinghh Jan 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 5 additions & 52 deletions home/templates/home/home_page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,59 +9,12 @@

{% block content %}
<div class="home-page">
<a href="#main-content" class="skip-link" id="skip-to-content">Skip to main content</a>
{% include 'home/tags/banners_list.html' with banners=banners %}
<div id="main-content">
{% if page.home_featured_content %}
{% flat_menu LANGUAGE_CODE|add:'_menu_live' template="nav_bar.html" %}
{% include_block page.home_featured_content %}
{% endif %}
<div>
{% if page.home_featured_content %}
{% flat_menu LANGUAGE_CODE|add:'_menu_live' template="nav_bar.html" %}
{% include_block page.home_featured_content %}
{% endif %}
</div>

</div>

<style>
.skip-link {
position: absolute;
top: -45px;
left: 0;
padding: 10px;
background-color: red;
color: white;
z-index: 1000;
transition: top 0.3s ease;
}

.skip-link.show {
top: 5px;
}

.skip-link:focus {
outline: none;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
var skipLink = document.getElementById('skip-to-content');
var isTabbing = false;

window.addEventListener('keydown', function(event) {
if (event.key === 'Tab') {
skipLink.classList.add('show');
}
});

window.addEventListener('keydown', function(event) {
if (event.key !== 'Tab') {
skipLink.classList.remove('show');
}
});

skipLink.addEventListener('click', function(event) {
event.preventDefault();
document.getElementById('main-content').scrollIntoView({ behavior: 'smooth', block: 'start' });
});
});
</script>
{% endblock content %}
9 changes: 9 additions & 0 deletions home/templates/home/tags/top_level_sections.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,16 @@
{% load static wagtailcore_tags wagtailimages_tags i18n generic_components image_tags %}
{% load static menu_tags i18n wagtailimages_tags home_tags image_tags generic_components %}

{% get_current_language as LANGUAGE_CODE %}

<section class="top-level" id="top-level-sections">
<nav>
<a href="{% translated_home_page_url LANGUAGE_CODE %}" class="btn-primary " style="color:#444; background:#f0f0f0;">
<span class="icon-holder">
<img src="">
</span>
Home
</a>
{% for top_level_section in top_level_sections %}
{% primary_button title=top_level_section.title href=top_level_section.url font_color=top_level_section.font_color background_color=top_level_section.background_color icon=top_level_section.get_icon %}
{% endfor %}
Expand Down