Skip to content

Commit 3b44a11

Browse files
vimugdhabatravimugdhabatra
authored
7 html files changes: By Arush: 20thDec (#1721)
2 parents 34ce1f9 + b914966 commit 3b44a11

File tree

7 files changed

+190
-37
lines changed

7 files changed

+190
-37
lines changed

‎home/templates/home/home_page.html‎

Lines changed: 56 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,67 @@
99

1010
{% block content %}
1111
<div class="home-page">
12+
<a href="#main-content" class="skip-link" id="skip-to-content">Skip to main content</a>
1213
{% include 'home/tags/banners_list.html' with banners=banners %}
13-
<div>
14+
<div id="main-content">
1415
{% if page.home_featured_content %}
1516
{% flat_menu LANGUAGE_CODE|add:'_menu_live' template="nav_bar.html" %}
1617
{% include_block page.home_featured_content %}
1718
{% endif %}
1819
</div>
20+
1921
</div>
22+
23+
<style>
24+
.skip-link {
25+
position: absolute;
26+
top: -45px;
27+
left: 0;
28+
padding: 10px;
29+
background-color: red;
30+
color: white;
31+
z-index: 1000;
32+
transition: top 0.3s ease;
33+
}
34+
35+
.skip-link.show {
36+
top: 5px;
37+
}
38+
39+
.skip-link:focus {
40+
outline: none;
41+
}
42+
</style>
43+
44+
<script>
45+
document.addEventListener("DOMContentLoaded", function() {
46+
var skipLink = document.getElementById('skip-to-content');
47+
var isTabbing = false;
48+
var isMouseActive = false;
49+
50+
window.addEventListener('mousedown', function() {
51+
isMouseActive = true;
52+
skipLink.classList.remove('show');
53+
});
54+
55+
window.addEventListener('keydown', function(event) {
56+
if (isMouseActive) {
57+
return;
58+
}
59+
60+
if (event.key === 'Tab') {
61+
skipLink.classList.add('show');
62+
isTabbing = true;
63+
} else {
64+
skipLink.classList.remove('show');
65+
}
66+
});
67+
68+
skipLink.addEventListener('click', function(event) {
69+
console.log("hii")
70+
event.preventDefault();
71+
document.getElementById('main-content').scrollIntoView({ behavior: 'smooth' });
72+
});
73+
});
74+
</script>
2075
{% endblock content %}

‎home/templates/home/tags/language_switcher.html‎

Lines changed: 95 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,100 @@
11
{% load generic_components %}
22
<div class="language_drop">
3-
<a href="#" style="{% language_picker_style %}">
4-
{{ current_language.name_local }}
5-
<span class="arrow"></span>
6-
</a>
7-
<ul class="drop">
3+
<a
4+
href="#"
5+
id="language-toggle"
6+
role="button"
7+
aria-haspopup="true"
8+
aria-expanded="false"
9+
aria-controls="language-options"
10+
style="{{ language_picker_style }}"
11+
tabindex="0"
12+
>
13+
{{ current_language.name_local }}
14+
<span class="arrow"></span>
15+
</a>
16+
17+
<ul
18+
id="language-options"
19+
class="drop"
20+
role="menu"
21+
aria-labelledby="language-toggle"
22+
tabindex="-1"
23+
>
824
{% for option in language_options %}
9-
<li class="{% if option.selected %}selected{% endif %}">
10-
<a href="{{ option.url }}" rel="alternate" hreflang="{{ option.language.code }}">
11-
{{ option.language.name_local }}
12-
</a>
13-
</li>
25+
<li class="{% if option.selected %}selected{% endif %}" role="menuitem">
26+
<a
27+
href="{{ option.url }}"
28+
rel="alternate"
29+
hreflang="{{ option.language.code }}"
30+
tabindex="0"
31+
>
32+
{{ option.language.name_local }}
33+
</a>
34+
</li>
1435
{% endfor %}
15-
</ul>
36+
</ul>
1637
</div>
38+
39+
<script>
40+
document.addEventListener("DOMContentLoaded", function () {
41+
const languageToggle = document.getElementById("language-toggle");
42+
const languageOptions = document.getElementById("language-options");
43+
let isOpen = false;
44+
45+
languageToggle.addEventListener("click", function (e) {
46+
e.preventDefault();
47+
toggleDropdown();
48+
});
49+
50+
// languageToggle.addEventListener("keydown", function (e) {
51+
// if (e.key === "Enter" || e.key === " ") {
52+
// e.preventDefault();
53+
// toggleDropdown();
54+
// }
55+
// });
56+
57+
document.addEventListener("click", function (e) {
58+
if (
59+
!languageToggle.contains(e.target) &&
60+
!languageOptions.contains(e.target)
61+
) {
62+
closeDropdown();
63+
}
64+
});
65+
66+
languageOptions.addEventListener("keydown", function (e) {
67+
console.log("Key pressed: " + e.key);
68+
// const options = languageOptions.querySelectorAll("a");
69+
// const focusedElement = document.activeElement;
70+
// let index = Array.from(options).indexOf(focusedElement);
71+
72+
if(e.key === "Escape"){
73+
console.log("Escape1");
74+
e.preventDefault();
75+
e.stopPropagation();
76+
closeDropdown();
77+
return;
78+
}
79+
});
80+
81+
function toggleDropdown() {
82+
isOpen = !isOpen;
83+
languageOptions.style.display = isOpen ? "block" : "none";
84+
languageToggle.setAttribute("aria-expanded", isOpen.toString());
85+
86+
if (isOpen) {
87+
const options = languageOptions.querySelectorAll("a");
88+
if (options.length > 0) {
89+
options[0].focus();
90+
}
91+
}
92+
}
93+
94+
function closeDropdown() {
95+
isOpen = false;
96+
languageOptions.style.display = "none";
97+
languageToggle.setAttribute("aria-expanded", "false");
98+
}
99+
});
100+
</script>

‎iogt/templates/generic_components/article_card.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
class="{% if is_first_content %}first-content{% endif %}">
88
<div class="article-header">
99
{% if display_section_title %}
10-
<p class="sm-paragraph" style="color:{{ font_color }};">
10+
<p class="sm-paragraph" style="color:{{ font_color }}; font-weight: bold !important;">
1111
{{ article.top_level_section.title|upper }}
1212
</p>
1313
{% endif %}

‎iogt/templates/header.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@
77

88
<header id="header" style="background: {{ settings.home.ThemeSettings.header_background_color }}">
99
<div class="header-holder">
10-
<div class="header-content">
11-
<div class="logo-holder">
12-
<a href="{% translated_home_page_url LANGUAGE_CODE %}">
13-
{% image settings.home.SiteSettings.logo width-120 class='xs-image' %}
14-
</a>
15-
</div>
16-
<div class="language__select">
17-
{% language_switcher page %}
10+
<div class="btn-holder">
11+
<div class="nav-bar__item">
12+
{% url 'account_login' as login_url %}
13+
{% if request.user.is_anonymous %}
14+
{% primary_button title="Log in / Create account" href=login_url icon_path='icons/login.svg' extra_classnames='login-create-account-btn' %}
15+
{% else %}
16+
{% url 'user_profile' as profile_url %}
17+
{% primary_button title="Profile" href=profile_url icon_path='icons/profile.svg' %}
18+
{% endif %}
1819
</div>
1920
</div>
2021
<div class="form-holder search-form-holder">
@@ -30,15 +31,14 @@
3031
</label>
3132
</form>
3233
</div>
33-
<div class="btn-holder">
34-
<div class="nav-bar__item">
35-
{% url 'account_login' as login_url %}
36-
{% if request.user.is_anonymous %}
37-
{% primary_button title="Log in / Create account" href=login_url icon_path='icons/login.svg' extra_classnames='login-create-account-btn' %}
38-
{% else %}
39-
{% url 'user_profile' as profile_url %}
40-
{% primary_button title="Profile" href=profile_url icon_path='icons/profile.svg' %}
41-
{% endif %}
34+
<div class="header-content">
35+
<div class="logo-holder">
36+
<a href="{% translated_home_page_url LANGUAGE_CODE %}">
37+
{% image settings.home.SiteSettings.logo width-120 class='xs-image' %}
38+
</a>
39+
</div>
40+
<div class="language__select">
41+
{% language_switcher page %}
4242
</div>
4343
</div>
4444
</div>

‎questionnaires/templates/poll/poll.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h1 class="title polls-widget__title">{{ page.title }}</h1>
1818
{% endif %}
1919
{% if user.is_authenticated or request.is_preview or page.allow_anonymous_submissions %}
2020
{% if form %}
21-
<form class="polls-widget__form"
21+
<form id="survey-form" class="polls-widget__form"
2222
action="{% pageurl page %}?back_url={{ request.path }}"
2323
method="POST">
2424
{% csrf_token %}

‎questionnaires/templates/questionnaires/tags/submit_button.html‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,21 @@
11
{% load i18n %}
22

3-
<button type="submit" class="cust-btn cust-btn--dark survey-page__btn questionnaire-submit-btn">
4-
<span>
5-
{% translate submit_button_text %}
6-
</span>
7-
</button>
3+
<form id="survey-form" method="POST">
4+
{% csrf_token %}
5+
6+
<button type="submit" class="cust-btn cust-btn--dark survey-page__btn questionnaire-submit-btn" id="submit-btn">
7+
<span>
8+
{% translate submit_button_text %}ss
9+
</span>
10+
</button>
11+
</form>
12+
13+
<script>
14+
const form = document.getElementById('survey-form');
15+
const submitButton = document.getElementById('submit-btn');
16+
17+
form.addEventListener('submit', function(event) {
18+
submitButton.setAttribute('disabled', true)
19+
submitButton.innerHTML = '<span>{% translate submit_button_text %}...</span>';
20+
});
21+
</script>

‎questionnaires/templates/survey/survey.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ <h1 class="title survey-page__title">{{ page.title }}</h1>
1919
{% if user.is_authenticated or request.is_preview or page.allow_anonymous_submissions %}
2020
{% if form %}
2121
<form action="{% get_action_url page self fields_step request form %}"
22-
method="POST" class="survey-page__content">
22+
method="POST" class="survey-page__content" id="survey-form">
2323
{% csrf_token %}
2424
<div class="survey-page__content">
2525
{% for field in form %}

0 commit comments

Comments
 (0)