HTML validation: Remove invalid <button href> attribute.

For .start-button, Bootstrap carousel already supports <button
data-target> as a valid alternative to <button href>.  For
.call-to-action, the margin is decreased to exactly offset the lack of
margin collapsing with display: inline-block.  There should be no
visual change.

Signed-off-by: Anders Kaseorg <anders@zulipchat.com>
This commit is contained in:
Anders Kaseorg
2019-07-19 17:24:04 -07:00
committed by Tim Abbott
parent bf919fd354
commit 82828bdba4
4 changed files with 11 additions and 17 deletions

View File

@@ -194,10 +194,6 @@ var load = function () {
}
});
$(".carousel-link-button").click(function () {
window.location.href = $(this).attr("href");
});
$('.carousel').on('slid', function () {
var $this = $(this);
$this.find('.visibility-control').show();

View File

@@ -1520,22 +1520,23 @@ nav ul li.active::after {
margin: 0 auto;
}
.tour .carousel-inner button.call-to-action {
display: block;
margin: 70px auto;
.tour .carousel-inner .call-to-action {
display: inline-block;
margin: 40px auto;
padding: 11px 25px 11px 25px;
font-size: 1.2rem;
line-height: 20px;
font-weight: 400;
color: hsl(0, 0%, 100%);
background-color: hsl(185, 38%, 55%);
background: linear-gradient(145deg, hsl(191, 56%, 55%), hsl(169, 65%, 42%));
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.2);
border: 0;
border-radius: 4px;
}
.tour .carousel-inner button.call-to-action:hover {
.tour .carousel-inner .call-to-action:hover {
background-color: hsl(169, 65%, 42%);
box-shadow: 0px 3px 10px hsla(0, 0%, 0%, 0.3);
}
@@ -3564,8 +3565,8 @@ nav ul li.active::after {
height: 450px;
}
.tour .carousel-inner button.call-to-action {
margin: 40px auto;
.tour .carousel-inner .call-to-action {
margin: 10px auto;
}
}

View File

@@ -45,7 +45,7 @@
<div class="item active">
<div class="item-inner">
<button href="#tour-carousel" data-slide="next" type="button" name="button" class="start-button">Take the tour</button>
<button data-target="#tour-carousel" data-slide="next" type="button" name="button" class="start-button">Take the tour</button>
<img src="/static/images/story-tutorial/zulip-topic-blurred.png" alt="" class="start-image">
</div>
</div>
@@ -125,10 +125,9 @@
<div class="item">
<div class="item-inner">
<p class="tour-item-header tour-item-header-top-push tour-item-header-centered">Zulip Free is free for an unlimited number of users.</p>
<button href="/plans" type="button" name="button"
class="call-to-action carousel-link-button">
<a href="/plans" class="call-to-action">
{{ _('See plans and pricing') }}
</button>
</a>
<div class="other-resources">
<div class="other-resources-section">
<a href="/why-zulip"><img src="/static/images/landing-page/organised.svg" alt=""></a>

View File

@@ -33,8 +33,6 @@ VNU_IGNORE = re.compile(r'|'.join([
r'No “p” element in scope but a “p” end tag seen\.',
r'Element “div” not allowed as child of element “ul” in this context\. '
+ r'\(Suppressing further errors from this subtree\.\)',
r'The element “button” must not appear as a descendant of the “a” element\.',
r'Attribute “href” not allowed on element “button” at this point\.',
# Warnings that are probably less important.
r'The “type” attribute is unnecessary for JavaScript resources\.',