Skip to content

Commit 5c83ab9

Browse files
OaphiOaphi
authored
Merge pull request #1818 from codidact/0valt/tour-fixes
Fix hints width on the last step of the tour
2 parents e6694c9 + 4726c79 commit 5c83ab9

13 files changed

Lines changed: 261 additions & 190 deletions

‎app/assets/javascripts/tour.js‎

Lines changed: 94 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,99 @@
11
const tour = {
2-
firstAnswer: function () {
3-
$(".js-good-answer").removeClass("hide");
4-
$(".js-answer-counter").text("1 answer");
5-
$(".step-1").addClass("hide");
6-
$(".step-2").removeClass("hide");
7-
},
8-
firstAnswerUpvote: function (self) {
9-
$(self).addClass("is-active");
10-
$(".step-3").addClass("hide");
11-
$(".step-4").removeClass("hide");
12-
$(".js-good-answer .js-upvote-count").text("+1");
13-
$(".js-good-answer .js-upvote-count").text("+1");
14-
window.setTimeout(() => {
15-
tour.secondAnswer();
16-
}, 4000);
17-
},
18-
secondAnswer: function () {
19-
$(".js-bad-answer").removeClass("hide");
20-
$(".js-answer-counter").text("2 answers");
21-
$(".step-4").addClass("hide");
22-
$(".step-5").removeClass("hide");
23-
},
24-
secondAnswerFlag: function () {
25-
$(".step-5").addClass("hide");
26-
$(".step-6").removeClass("hide");
27-
$(".tour-flag-success").removeClass("hide");
28-
$(".js-flag-box").addClass("hide");
29-
30-
window.setTimeout(() => {
31-
$(".js-answer-counter").text("1 answer");
32-
$(".js-bad-answer").addClass("deleted-content");
33-
}, 4000);
34-
window.setTimeout(() => {
35-
$(".js-bad-answer").addClass("hide");
36-
}, 6000);
2+
badAnswerTimeout: null,
3+
firstAnswerTimeout: null,
4+
5+
firstAnswer: function () {
6+
$('.js-good-answer').removeClass('hide');
7+
$('.js-answer-counter').text('1 answer');
8+
$('.step-1').addClass('hide');
9+
$('.step-2').removeClass('hide');
10+
},
11+
firstAnswerUpvote: function (self) {
12+
$(self).addClass('is-active');
13+
$('.step-3').addClass('hide');
14+
$('.step-4').removeClass('hide');
15+
$('.js-good-answer .js-upvote-count').text('+1');
16+
$('.js-good-answer .js-upvote-count').text('+1');
17+
18+
tour.badAnswerTimeout = window.setTimeout(() => {
19+
tour.secondAnswer();
20+
tour.badAnswerTimeout = null;
21+
}, 4000);
22+
},
23+
secondAnswer: function (scrollIntoView = false) {
24+
$('.js-bad-answer').removeClass('hide');
25+
$('.js-answer-counter').text('2 answers');
26+
$('.step-4').addClass('hide');
27+
$('.step-5').removeClass('hide');
28+
29+
if (scrollIntoView) {
30+
$('.js-bad-answer').get(0)?.scrollIntoView({ behavior: 'smooth' });
3731
}
38-
}
32+
},
33+
secondAnswerFlag: function () {
34+
$('.step-5').addClass('hide');
35+
$('.step-6').removeClass('hide');
36+
$('.js-flag-box').addClass('hide');
37+
38+
QPixel.createNotification('success', "Thanks for your report. We'll look into it.");
39+
40+
window.setTimeout(() => {
41+
$('.js-answer-counter').text('1 answer');
42+
$('.js-bad-answer > .post--container').addClass('deleted-content');
43+
}, 4000);
44+
45+
window.setTimeout(() => {
46+
$('.js-bad-answer > .post--container').addClass('hide');
47+
}, 6000);
48+
}
49+
};
50+
51+
document.addEventListener('DOMContentLoaded', () => {
52+
if ($('.js-tour-trigger-qa-page').length) {
53+
tour.firstAnswerTimeout = window.setTimeout(() => {
54+
tour.firstAnswer();
55+
tour.firstAnswerTimeout = null;
56+
}, 8000);
57+
}
58+
59+
$(document).on('click', '.js-tour-scroll-to-post', (ev) => {
60+
const post = $(ev.target).data('post');
61+
62+
switch (post) {
63+
case 'bad-answer':
64+
$('.js-bad-answer').get(0)?.scrollIntoView({ behavior: 'smooth' });
65+
break;
66+
case 'first-answer':
67+
$('.step-3').removeClass('hide');
68+
$('.step-2').addClass('hide');
69+
$('.js-good-answer').get(0)?.scrollIntoView({ behavior: 'smooth' });
70+
break;
71+
}
72+
});
73+
74+
$(document).on('click', '.js-tour-skip-wait', (ev) => {
75+
const timeout = $(ev.target).data('timeout');
3976

40-
$(() => {
41-
if ($(".js-tour-trigger-qa-page").length) {
42-
window.setTimeout(() => {
43-
tour.firstAnswer();
44-
}, 8000);
77+
switch (timeout) {
78+
case 'bad-answer':
79+
clearTimeout(tour.badAnswerTimeout);
80+
tour.badAnswerTimeout = null;
81+
tour.secondAnswer(true);
82+
break;
83+
case 'first-answer':
84+
clearTimeout(tour.firstAnswerTimeout);
85+
tour.firstAnswerTimeout = null;
86+
tour.firstAnswer();
87+
break;
4588
}
89+
});
4690

47-
$("[data-step-from][data-step-to]").click((e) => {
48-
const $this = $(e.target);
49-
$($this.attr("data-step-from")).toggleClass("hide");
50-
$($this.attr("data-step-to")).toggleClass("hide");
51-
});
52-
});
91+
$('[data-step-from][data-step-to]').on('click', (e) => {
92+
const $tgt = $(e.target);
93+
const $from = $($tgt.data('step-from'));
94+
const $to = $($tgt.data('step-to'));
95+
$from.toggleClass('hide');
96+
$to.toggleClass('hide');
97+
$to.get(0)?.scrollIntoView({ behavior: 'smooth' });
98+
});
99+
});

‎app/assets/stylesheets/tour.scss‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,32 @@
88
width: 0;
99
}
1010

11+
.codidactyl-hints {
12+
padding: 1rem;
13+
}
14+
1115
.codidactyl-sticky {
1216
position: sticky;
1317
top: 0.5rem;
14-
padding: 1rem;
1518
}
1619

1720
.codidactyl-small {
1821
max-height: 1em;
1922
}
2023

24+
@media (min-width: 769px) {
25+
.tour-narrow-only {
26+
display: none;
27+
}
28+
}
29+
2130
@media (max-width: 768px) {
22-
.tour-editor-wrapper {
31+
.tour-wide-only {
32+
display: none;
33+
}
34+
35+
.tour-editor-wrapper,
36+
.tour-post-wrapper {
2337
order: 2;
2438
}
2539

‎app/views/tour/_hint_widget.html.erb‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="widget<%= " #{classes}" if defined?(classes) %>">
2+
<div class="widget--header">
3+
<img src="/assets/codidactyl.png" alt="Codidactyl" class="codidactyl-small">
4+
Codidactyl's Hints
5+
</div>
6+
<div class="widget--body">
7+
<%= yield %>
8+
<%= content_for :body %>
9+
</div>
10+
<% if content_for?(:footer) %>
11+
<div class="widget--footer">
12+
<%= yield :footer %>
13+
</div>
14+
<% end %>
15+
</div>

‎app/views/tour/hints/_q3_step1.html.erb‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<%= render(layout: 'hint_widget', locals: { classes: "step-1" }) do %>
2+
<% content_for :body, flush: true do %>
3+
<p>This is your post. We are currently waiting for other people to see and answer it.</p>
4+
<% end %>
5+
<% content_for :footer, flush: true do %>
6+
<button class="button js-tour-skip-wait" data-timeout="first-answer">Skip the wait</button>
7+
<% end %>
8+
<% end %>

‎app/views/tour/hints/_q3_step2.html.erb‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<%= render(layout: 'tour/hint_widget', locals: { classes: "step-2 hide" }) do %>
2+
<% content_for :body, flush: true do %>
3+
<p>There is an answer to your question.</p>
4+
<p>Read through it and consider whether it helps you solve your problem.
5+
Try out the solution if it's practical.</p>
6+
<% end %>
7+
<% content_for :footer, flush: true do %>
8+
<button class="button js-tour-scroll-to-post" data-post="first-answer">Go to answer</button>
9+
<button class="button is-filled" data-step-from=".step-2" data-step-to=".step-3">Next</button>
10+
<% end %>
11+
<% end %>

‎app/views/tour/hints/_q3_step3.html.erb‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<%= render(layout: 'tour/hint_widget', locals: { classes: "step-3 hide" }) do %>
2+
<% content_for :body, flush: true do %>
3+
<p>This answer looks helpful.</p>
4+
<p>To show other readers of this answer that you found it helpful (and also as a way to say "thanks" to the answerer), you can <em>upvote</em> it.</p>
5+
<p>Voting also helps good content be more visible.
6+
Good answers are promoted to the top, while bad ones sink to the bottom.
7+
Please help curate the community by voting responsibly.</p>
8+
<p>Do so by clicking the <svg class="h-c-tertiary-400" width="2em" height="1.33em" viewbox="0 0 100 50">
9+
<path d="M50,0 L100,50 L0,50 Z" fill="currentColor" />
10+
</svg> icon next to the post. After you vote, the tour will continue.</p>
11+
<% end %>
12+
<% content_for :footer, flush: true do %>
13+
<button class="button js-tour-scroll-to-post" data-post="first-answer">Go to answer</button>
14+
<button class="button is-filled" data-step-from=".step-3" data-step-to=".step-2">Back</button>
15+
<% end %>
16+
<% end %>

‎app/views/tour/hints/_q3_step4.html.erb‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<%= render(layout: 'tour/hint_widget', locals: { classes: "step-4 hide" }) do %>
2+
<% content_for :body, flush: true do %>
3+
<p>Thanks.</p>
4+
<p>Let's wait for other answers, which might produce different solutions.</p>
5+
<% end %>
6+
<% content_for :footer, flush: true do %>
7+
<button class="button js-tour-skip-wait" data-timeout="bad-answer">Skip the wait</button>
8+
<% end %>
9+
<% end %>

‎app/views/tour/hints/_q3_step5.html.erb‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<%= render(layout: 'tour/hint_widget', locals: { classes: "step-5 hide" }) do %>
2+
<% content_for :body, flush: true do %>
3+
<p>A second answer has just been posted.</p>
4+
<p>Unfortunately, it doesn't seem to be nice. It isn't helpful to the question and quite snarky.</p>
5+
<p>We expect users to stay civil and to follow our minimal <a href="/policy/code-of-conduct">code of conduct</a>.</p>
6+
<p>This answer should therefore be deleted. <em>Flag</em> it, so that one of our moderators can see and handle it.</p>
7+
<% end %>
8+
<% content_for :footer, flush: true do %>
9+
<button class="button js-tour-scroll-to-post" data-post="bad-answer">Go to answer</button>
10+
<% end %>
11+
<% end %>

‎app/views/tour/hints/_q3_step6.html.erb‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<%= render(layout: 'tour/hint_widget', locals: { classes: "step-6 hide" }) do %>
2+
<% content_for :body, flush: true do %>
3+
<p>Thanks for flagging it.</p>
4+
<p>A moderator will look at it and will likely remove the answer.</p>
5+
<p>Flagging is important to help maintain the site. If you see something rude, flag it.
6+
Inappropriate content will be deleted, but we have to know about it &mdash; flag to let moderators know.
7+
If you see anything else that doesn't look quite right, flag it and let us know about it.</p>
8+
<% end %>
9+
<% content_for :footer, flush: true do %>
10+
<a href="/tour/more" class="button is-filled">Find out more</a>
11+
<% end %>
12+
<% end %>

‎app/views/tour/more.html.erb‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="grid step-1" id="1">
2-
<div class="grid--cell codidactyl">
2+
<div class="grid--cell codidactyl tour-wide-only">
33
<img src="/assets/codidactyl.png" alt="Codidactyl">
44
</div>
55
<div class="grid--cell is-flexible">
@@ -15,7 +15,7 @@
1515
</div>
1616

1717
<div class="grid step-2 hide" id="2">
18-
<div class="grid--cell codidactyl">
18+
<div class="grid--cell codidactyl tour-wide-only">
1919
<img src="/assets/codidactyl.png" alt="Codidactyl">
2020
</div>
2121
<div class="grid--cell is-flexible">
@@ -30,8 +30,8 @@
3030
<% @header_categories.each do |cat| %>
3131
<% next unless (current_user&.trust_level || 0) >= (cat.min_view_trust_level || -1) %>
3232
<tr>
33-
<td class="h-fw-bold"><%= cat.name %></td>
34-
<td><%= raw(sanitize(render_markdown(cat.short_wiki), scrubber: scrubber)) %></td>
33+
<td class="h-fw-bold wrap-word"><%= cat.name %></td>
34+
<td class="wrap-word"><%= raw(sanitize(render_markdown(cat.short_wiki), scrubber: scrubber)) %></td>
3535
</tr>
3636
<% end %>
3737
</table>
@@ -45,7 +45,7 @@
4545
</div>
4646

4747
<div class="grid step-3 hide" id="3">
48-
<div class="grid--cell codidactyl">
48+
<div class="grid--cell codidactyl tour-wide-only">
4949
<img src="/assets/codidactyl.png" alt="Codidactyl">
5050
</div>
5151
<div class="grid--cell is-flexible">
@@ -65,7 +65,7 @@
6565
</div>
6666

6767
<div class="grid step-4 hide" id="4">
68-
<div class="grid--cell codidactyl">
68+
<div class="grid--cell codidactyl tour-wide-only">
6969
<img src="/assets/codidactyl.png" alt="Codidactyl">
7070
</div>
7171
<div class="grid--cell is-flexible">
@@ -102,7 +102,7 @@
102102
</div>
103103

104104
<div class="grid step-5 hide" id="5">
105-
<div class="grid--cell codidactyl">
105+
<div class="grid--cell codidactyl tour-wide-only">
106106
<img src="/assets/codidactyl.png" alt="Codidactyl">
107107
</div>
108108
<div class="grid--cell is-flexible">
@@ -122,7 +122,7 @@
122122
</div>
123123

124124
<div class="grid step-6 hide" id="6">
125-
<div class="grid--cell codidactyl">
125+
<div class="grid--cell codidactyl tour-wide-only">
126126
<img src="/assets/codidactyl.png" alt="Codidactyl">
127127
</div>
128128
<div class="grid--cell is-flexible">

0 commit comments

Comments
 (0)