summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--extensions/BugModal/web/bug_modal.css4
-rw-r--r--extensions/BugModal/web/bug_modal.js39
-rw-r--r--extensions/BugModal/web/common_bug_modal.css4
-rw-r--r--extensions/BugModal/web/common_bug_modal.js39
-rw-r--r--js/global.js21
-rw-r--r--js/instant-search.js1
-rw-r--r--skins/standard/global.css49
-rw-r--r--skins/standard/page.css7
-rw-r--r--template/en/default/bug/summarize-time.html.tmpl3
-rw-r--r--template/en/default/global/footer.html.tmpl2
-rw-r--r--template/en/default/global/header.html.tmpl4
-rw-r--r--template/en/default/search/field.html.tmpl1
-rw-r--r--template/en/default/search/form.html.tmpl5
-rw-r--r--template/en/default/search/search-instant.html.tmpl2
-rw-r--r--template/en/default/search/search-specific.html.tmpl6
15 files changed, 93 insertions, 94 deletions
diff --git a/extensions/BugModal/web/bug_modal.css b/extensions/BugModal/web/bug_modal.css
index b70a838c1..0fbc536b9 100644
--- a/extensions/BugModal/web/bug_modal.css
+++ b/extensions/BugModal/web/bug_modal.css
@@ -826,10 +826,10 @@ body.platform-Win32 .comment-text, body.platform-Win64 .comment-text {
/* theme */
-#bugzilla-body {
+#main-inner {
+ margin: 15px auto;
max-width: 1024px;
min-width: 800px;
- width: 100%;
}
.vcard {
diff --git a/extensions/BugModal/web/bug_modal.js b/extensions/BugModal/web/bug_modal.js
index 1218b4f27..c1080cde8 100644
--- a/extensions/BugModal/web/bug_modal.js
+++ b/extensions/BugModal/web/bug_modal.js
@@ -141,7 +141,7 @@ $(function() {
$('#top-btn')
.click(function(event) {
event.preventDefault();
- $.scrollTo($('body'));
+ $.scrollTo($('#main-inner'));
});
// bottom btn
@@ -1421,31 +1421,26 @@ $(function() {
return -1;
},
- // Bring an element into view, leaving space for the outline.
- // If passed a string, it will be treated as an id - the page will scroll
- // unanimated and the url will be added to the browser's history.
- // If passed an element, an smooth scroll will take place and no entry
- // will be added to the history.
+ // Bring an element into view, leaving space for the outline. If passed
+ // a string, it will be treated as an id - the page will scroll and the
+ // url will be added to the browser's history. If passed an element, no
+ // entry will be added to the history.
scrollTo: function(target, complete) {
+ let $target;
+
if (typeof target === 'string') {
- var el = $('#' + target);
+ $target = $('#' + target);
window.location.hash = target;
- var $html = $('html');
- if (Math.abs($html.scrollTop() - el.offset().top) <= 1) {
- $html.scrollTop($html.scrollTop() - 10);
- }
- $html.scrollLeft(0);
+ } else {
+ $target = target;
}
- else {
- var offset = target.offset();
- $('html')
- .animate({
- scrollTop: offset.top - 20,
- scrollLeft: 0
- },
- 200,
- complete
- );
+
+ if ($target.length) {
+ $('main').scrollTop(Math.round($target.position().top) - 20);
+ }
+
+ if (complete) {
+ complete();
}
}
diff --git a/extensions/BugModal/web/common_bug_modal.css b/extensions/BugModal/web/common_bug_modal.css
index b71254cc0..473c4a445 100644
--- a/extensions/BugModal/web/common_bug_modal.css
+++ b/extensions/BugModal/web/common_bug_modal.css
@@ -815,10 +815,10 @@ body.platform-Win32 .comment-text, body.platform-Win64 .comment-text {
/* theme */
-#bugzilla-body {
+#main-inner {
+ margin: 15px auto;
max-width: 1024px;
min-width: 800px;
- width: 100%;
}
.vcard {
diff --git a/extensions/BugModal/web/common_bug_modal.js b/extensions/BugModal/web/common_bug_modal.js
index cc7f31dfd..160f922cc 100644
--- a/extensions/BugModal/web/common_bug_modal.js
+++ b/extensions/BugModal/web/common_bug_modal.js
@@ -141,7 +141,7 @@ $(function() {
$('#top-btn')
.click(function(event) {
event.preventDefault();
- $.scrollTo($('body'));
+ $.scrollTo($('#main-inner'));
});
// bottom btn
@@ -1348,31 +1348,26 @@ $(function() {
return -1;
},
- // Bring an element into view, leaving space for the outline.
- // If passed a string, it will be treated as an id - the page will scroll
- // unanimated and the url will be added to the browser's history.
- // If passed an element, an smooth scroll will take place and no entry
- // will be added to the history.
+ // Bring an element into view, leaving space for the outline. If passed
+ // a string, it will be treated as an id - the page will scroll and the
+ // url will be added to the browser's history. If passed an element, no
+ // entry will be added to the history.
scrollTo: function(target, complete) {
+ let $target;
+
if (typeof target === 'string') {
- var el = $('#' + target);
+ $target = $('#' + target);
window.location.hash = target;
- var $html = $('html');
- if (Math.abs($html.scrollTop() - el.offset().top) <= 1) {
- $html.scrollTop($html.scrollTop() - 10);
- }
- $html.scrollLeft(0);
+ } else {
+ $target = target;
}
- else {
- var offset = target.offset();
- $('html')
- .animate({
- scrollTop: offset.top - 20,
- scrollLeft: 0
- },
- 200,
- complete
- );
+
+ if ($target.length) {
+ $('main').scrollTop(Math.round($target.position().top) - 20);
+ }
+
+ if (complete) {
+ complete();
}
}
diff --git a/js/global.js b/js/global.js
index 2b353a69e..93f364c9e 100644
--- a/js/global.js
+++ b/js/global.js
@@ -192,6 +192,16 @@ $().ready(function() {
});
/**
+ * Focus the main content when the page is loaded and there is no autofocus
+ * element, so the user can immediately scroll down the page using keyboard.
+ */
+const focus_main_content = () => {
+ if (!document.querySelector('[autofocus]')) {
+ document.querySelector('main').focus();
+ }
+}
+
+/**
* Check if Gravatar images on the page are successfully loaded, and if blocked
* (by any content blocker), replace them with the default/fallback image.
*/
@@ -210,17 +220,16 @@ const detect_blocked_gravatars = () => {
*/
const scroll_element_into_view = () => {
if (location.hash) {
- const $header = document.querySelector('#header');
- const $comment = document.querySelector(location.hash);
+ const $main = document.querySelector('main');
+ const $target = document.querySelector(location.hash);
- if ($comment) {
- window.setTimeout(() => {
- window.scrollTo(0, $comment.offsetTop - $header.offsetHeight - 20);
- }, 250);
+ if ($target) {
+ window.setTimeout(() => $main.scrollTop = $target.offsetTop - 20, 50);
}
}
}
+window.addEventListener('DOMContentLoaded', focus_main_content, { once: true });
window.addEventListener('load', detect_blocked_gravatars, { once: true });
window.addEventListener('load', scroll_element_into_view, { once: true });
window.addEventListener('hashchange', scroll_element_into_view);
diff --git a/js/instant-search.js b/js/instant-search.js
index 8277b97a9..946f8ccfc 100644
--- a/js/instant-search.js
+++ b/js/instant-search.js
@@ -15,7 +15,6 @@ Event.onDOMReady(function() {
} else {
YAHOO.bugzilla.instantSearch.reset();
}
- Dom.get('content').focus();
});
YAHOO.bugzilla.instantSearch = {
diff --git a/skins/standard/global.css b/skins/standard/global.css
index a00839de9..ab0a68a11 100644
--- a/skins/standard/global.css
+++ b/skins/standard/global.css
@@ -36,10 +36,13 @@
/* global (begin) */
body {
+ position: absolute;
+ margin: 0;
+ width: 100%;
+ height: 100%;
font-family: sans-serif;
color: #000;
background: #fff url("global/body-back.gif") repeat-x;
- scroll-behavior: smooth;
}
body, td, th, input {
font-family: Verdana, sans-serif;
@@ -51,25 +54,25 @@
}
/* global (end) */
-/* header (begin) */
- #header {
+/* wrapper (begin) */
+ #wrapper {
+ display: flex;
+ flex-direction: column;
position: absolute;
- top: 0;
- left: 0;
- z-index: 1000;
width: 100%;
+ height: 100%;
+ }
+/* wrapper (end) */
+
+/* header (begin) */
+ #header {
+ flex: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
color: #555;
background-color: #FFF;
}
- @media only screen and (min-device-width: 1024px) {
- #header {
- position: fixed; /* Make the header fixed on desktop */
- }
- }
-
#header a,
#header a:visited,
#header a:hover {
@@ -398,6 +401,7 @@
position: absolute;
top: 48px;
right: 0;
+ z-index: 100;
display: flex;
align-items: center;
padding: 8px;
@@ -1127,6 +1131,7 @@ hr {
}
#mfa-warning {
+ flex: none;
margin: 0 -15px;
padding: 10px 15px;
color: #FFF;
@@ -1134,10 +1139,17 @@ hr {
}
#bugzilla-body {
- background: none;
- border: none;
- color: #404040;
- margin: 15px auto 0;
+ flex: auto;
+ position: relative;
+ outline: none;
+ padding: 0 15px;
+ overflow-x: hidden;
+ overflow-y: scroll;
+ scroll-behavior: smooth;
+}
+
+#main-inner {
+ margin: 15px 0;
}
#bugzilla-body th {
@@ -1625,11 +1637,6 @@ table.tabs {
padding-bottom: 6px;
}
-body {
- margin: 0;
- padding: 50px 15px 15px;
-}
-
#header .btn, #header .txt {
font-size: 100%;
}
diff --git a/skins/standard/page.css b/skins/standard/page.css
index da0c3be8d..82d4bacb1 100644
--- a/skins/standard/page.css
+++ b/skins/standard/page.css
@@ -20,11 +20,8 @@
/* This CSS is used by various informational pages in the
template/en/default/pages/ directory. */
-#bugzilla-body {
- padding: 0 1em;
-}
-
-#bugzilla-body > * {
+#main-inner {
+ margin: 15px auto;
/* People have an easier time reading narrower columns of text. */
max-width: 45em;
}
diff --git a/template/en/default/bug/summarize-time.html.tmpl b/template/en/default/bug/summarize-time.html.tmpl
index 50c777063..120bd74ad 100644
--- a/template/en/default/bug/summarize-time.html.tmpl
+++ b/template/en/default/bug/summarize-time.html.tmpl
@@ -282,7 +282,7 @@
<b><label accesskey="s"
for="start_date">Period <u>s</u>tarting</label></b>:
</td><td colspan="3">
- <input type="text" id="start_date" name="start_date" size="11"
+ <input type="text" id="start_date" name="start_date" size="11" autofocus
align="right" value="[% start_date FILTER html %]" maxlength="10"
onchange="updateCalendarFromField(this)">
<button type="button" class="calendar_button"
@@ -345,7 +345,6 @@
<!--
createCalendar('start_date');
createCalendar('end_date');
- document.forms['summary'].start_date.focus();
//--></script>
<hr noshade size=1>
[% END %]
diff --git a/template/en/default/global/footer.html.tmpl b/template/en/default/global/footer.html.tmpl
index 7922e494b..f1ad69fc9 100644
--- a/template/en/default/global/footer.html.tmpl
+++ b/template/en/default/global/footer.html.tmpl
@@ -19,7 +19,9 @@
# Svetlana Harisova <light@rathedg.com>
#%]
+</div> [%# main-inner %]
</main> [%# bugzilla-body %]
+</div> [%# wrapper %]
[% Hook.process("end") %]
diff --git a/template/en/default/global/header.html.tmpl b/template/en/default/global/header.html.tmpl
index f339b80b1..5d00b7216 100644
--- a/template/en/default/global/header.html.tmpl
+++ b/template/en/default/global/header.html.tmpl
@@ -234,6 +234,7 @@
# 'bannerhtml'
#%]
+<div id="wrapper">
<header id="header" role="banner">
<div class="inner">
<h1 id="header-title" class="title"><a href="./" title="Go to home page">[% terms.Bugzilla %]</a></h1>
@@ -376,7 +377,8 @@
</aside>
[% END %]
-<main id="bugzilla-body">
+<main id="bugzilla-body" tabindex="-1">
+<div id="main-inner">
[%# in most cases the "header" variable provides redundant information, however
# there are exceptions where not displaying this text is problematic. %]
diff --git a/template/en/default/search/field.html.tmpl b/template/en/default/search/field.html.tmpl
index a2ff5718b..0d10d4f6b 100644
--- a/template/en/default/search/field.html.tmpl
+++ b/template/en/default/search/field.html.tmpl
@@ -43,6 +43,7 @@
%]
<input name="[% field.name FILTER html %]"
id="[% field.name FILTER html %]" size="40"
+ [% IF autofocus %] autofocus[% END %]
[% IF onchange %] onchange="[% onchange FILTER html %]"[% END %]
value="[% value FILTER html %]">
[% CASE constants.FIELD_TYPE_KEYWORDS %]
diff --git a/template/en/default/search/form.html.tmpl b/template/en/default/search/form.html.tmpl
index 02357e473..49c311806 100644
--- a/template/en/default/search/form.html.tmpl
+++ b/template/en/default/search/form.html.tmpl
@@ -141,11 +141,8 @@ TUI_hide_default('information_query');
value = default.short_desc.0
type_selected = default.short_desc_type.0
accesskey = "s"
+ autofocus = 1
%]
- <script> <!--
- document.forms[queryform].short_desc.focus();
- // -->
- </script>
[% IF button_name %]
<input type="submit" id="[% button_name FILTER css_class_quote %]_top"
diff --git a/template/en/default/search/search-instant.html.tmpl b/template/en/default/search/search-instant.html.tmpl
index 8e4298654..01af804fc 100644
--- a/template/en/default/search/search-instant.html.tmpl
+++ b/template/en/default/search/search-instant.html.tmpl
@@ -71,7 +71,7 @@ YAHOO.bugzilla.instantSearch.setLabels( {
<b><label for="content">Words:</label></b>
</td>
<td>
- <input id="content" spellcheck="true" size="60"
+ <input id="content" spellcheck="true" size="60" autofocus
value="[% default.content.0 FILTER html %]">
</td>
</tr>
diff --git a/template/en/default/search/search-specific.html.tmpl b/template/en/default/search/search-specific.html.tmpl
index 79b5b2932..3b4cc3514 100644
--- a/template/en/default/search/search-specific.html.tmpl
+++ b/template/en/default/search/search-specific.html.tmpl
@@ -98,12 +98,8 @@ for "crash secure SSL flash".
<label for="content">Words:</label>
</th>
<td>
- <input name="content" size="60" id="content"
+ <input name="content" size="60" id="content" autofocus
value="[% default.content.0 FILTER html %]">
- <script> <!--
- document.forms['queryform'].content.focus();
- // -->
- </script>
</td>
</tr>
<tr>
generated by cgit v1.2.3-24-g4f1b (git 2.32.0) at 2024-06-20 16:00:31 +0200