Skip to content

Commit e9b687d

Browse files
ajayyyajayyy
committed
Improve help page layout and update some text
1 parent e89dfed commit e9b687d

7 files changed

Lines changed: 210 additions & 120 deletions

File tree

‎public/_locales‎

‎public/help/images/popup.png‎

69.8 KB
Loading

‎public/help/images/submission menu.png‎

9.75 KB
Loading

‎public/help/images/votebuttons.gif‎

64.1 KB
Loading

‎public/help/index.html‎

Lines changed: 109 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -21,128 +21,124 @@
2121
<div class="container sponsorBlockPageBody">
2222

2323
<p class="createdBy">
24-
<img src="https://ajay.app/newprofilepic.jpg" height="30" class="profilepiccircle"/>
24+
<img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle"/>
2525
Created By <a href="https://ajay.app">Ajay Ramachandran</a>
26-
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(Donate)</a>
2726
</p>
2827

29-
<p>
30-
__MSG_helpPageThanksForInstalling__ By using this extension, you agree to the <a href="https://gist.github.com/ajayyy/aa9f8ded2b573d4f73a3ffa0ef74f796">Privacy Policy</a> and <a href="https://gist.github.com/ajayyy/9e8100f069348e0bc062641f34d6af12">Terms of Use</a>.
31-
</p>
32-
33-
<p>
34-
Come contribute, make some suggestions and help out on <a href="https://discord.gg/SponsorBlock">Discord</a> or on <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org">Matrix</a>.
35-
</p>
36-
37-
<a href="https://dearrow.ajay.app"
38-
target="_blank"
39-
id="dearrow-link"
40-
class="dearrow-link hidden"
41-
rel="noreferrer">
42-
<img src="/icons/dearrow.svg"/>
43-
44-
<span id="dearrow-link-text">
45-
46-
</span>
47-
48-
<img src="/icons/close.png" class="close-button"/>
49-
</a>
50-
51-
<p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
52-
53-
<p class="smallText">
54-
__MSG_helpPageFeatureDisclaimer__
55-
</p>
56-
57-
<iframe class="optionsFrame" src="../options/options.html#embed" style="border: none"></iframe>
58-
59-
<h1>__MSG_helpPageHowSkippingWorks__</h1>
60-
61-
<p class="projectPreview">
62-
<span class="projectPreviewImageLarge">
63-
<img src="images/popup.png">
64-
</span>
65-
66-
__MSG_helpPageHowSkippingWorks1__
28+
<span class="help-page-flex-container">
29+
<div class="left-sidebar">
30+
<div class="box1">
31+
<p>
32+
__MSG_helpPageThanksForInstalling__ By using this extension, you agree to the <a href="https://gist.github.com/ajayyy/aa9f8ded2b573d4f73a3ffa0ef74f796">Privacy Policy</a> and <a href="https://gist.github.com/ajayyy/9e8100f069348e0bc062641f34d6af12">Terms of Use</a>.
33+
</p>
6734

68-
<br/>
69-
<br/>
70-
71-
__MSG_helpPageHowSkippingWorks2__
72-
</p>
73-
74-
<div class="center"><img src="images/voting on notice.gif"></div>
75-
76-
<h1>__MSG_Submitting__</h1>
77-
78-
<p class="projectPreview">
79-
<img class="projectPreviewImageLarge" src="https://i.imgur.com/A1ilk6x.gif">
80-
81-
__MSG_helpPageSubmitting1__
82-
83-
<br/>
84-
<br/>
85-
86-
__MSG_helpPageSubmitting2__
87-
</p>
88-
89-
<h1>__MSG_Editing__</h1>
90-
91-
<p class="projectPreview">
92-
<span class="projectPreviewImageLarge">
93-
<img src="https://wiki.sponsor.ajay.app/images/6/6a/Popup_only.png">
94-
</span>
95-
96-
__MSG_helpPageEditing1__
97-
98-
</p>
99-
100-
<h1>__MSG_helpPageTooSlow__</h1>
101-
102-
<p>
103-
__MSG_helpPageTooSlow1__
104-
</p>
105-
106-
<h1>__MSG_helpPageCopyOfDatabase__</h1>
107-
108-
<p>
109-
__MSG_helpPageCopyOfDatabase1__ <a href="https://sponsor.ajay.app/database">https://sponsor.ajay.app/database</a>. __MSG_helpPageCopyOfDatabase2__
110-
</p>
111-
112-
<h1>__MSG_helpPageNews__</h1>
113-
114-
<p>
115-
See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>.
116-
</p>
117-
118-
<h1>__MSG_helpPageSourceCode__</h1>
35+
<p>
36+
Come contribute, make some suggestions and help out on <a href="https://discord.gg/SponsorBlock">Discord</a> or on <a href="https://matrix.to/#/#sponsor:ajay.app?via=ajay.app&via=matrix.org&via=mozilla.org">Matrix</a>.
37+
</p>
38+
39+
<a href="https://dearrow.ajay.app"
40+
target="_blank"
41+
id="dearrow-link"
42+
class="dearrow-link hidden"
43+
rel="noreferrer">
44+
<img src="/icons/dearrow.svg"/>
45+
46+
<span id="dearrow-link-text">
47+
48+
</span>
49+
50+
<img src="/icons/close.png" class="close-button"/>
51+
</a>
52+
53+
<div id="donate-component" class="donate-ask">
54+
<div class="donate-text">
55+
<img
56+
src="../icons/newprofilepic.jpg"
57+
alt="Ajay's avatar"
58+
></img>
59+
__MSG_supportSponsorBlock__
60+
</div>
61+
62+
<a href="https://sponsor.ajay.app/donate" class="donate-button" target="_blank" rel="noopener">
63+
__MSG_Donate__
64+
</a>
65+
</div>
66+
</div>
67+
<div class="box3">
68+
<h1>__MSG_helpPageHowSkippingWorks__</h1>
69+
70+
<p class="projectPreview">
71+
__MSG_helpPageHowSkippingWorks2__
72+
</p>
73+
74+
<div class="center"><img src="images/voting on notice.gif"></div>
75+
76+
<p class="projectPreview">
77+
__MSG_helpPageHowSkippingWorks1__
78+
</p>
79+
80+
<div class="center"><img style="height: 400px;" src="images/popup.png"></div>
11981

120-
<h4 style="display: inline">Client:</h4>
121-
<!-- Github logo -->
122-
<a href="https://github.com/ajayyy/SponsorBlock"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
82+
<h1>__MSG_Submitting__</h1>
83+
84+
<p class="projectPreview">
85+
__MSG_helpPageSubmitting1__
86+
</p>
12387

124-
<h4 style="display: inline; padding-left: 20px">Server:</h4>
125-
<!-- Github logo -->
126-
<a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
88+
<div class="center"><img src="images/votebuttons.gif"></div>
12789

128-
<h1>__MSG_Credits__</h1>
90+
<p class="projectPreview">
91+
__MSG_helpPageSubmitting2__
92+
</p>
12993

130-
<p>
131-
Thanks to all <a href="https://github.com/ajayyy/SponsorBlock/graphs/contributors">SponsorBlock contributors</a>,
132-
<a href="https://github.com/ajayyy/SponsorBlockServer/graphs/contributors">SponsorBlockServer contributors</a> and
133-
<a href="https://github.com/ajayyy/SponsorBlockSite/graphs/contributors">SponsorBlockSite contributors</a> such
134-
as <a href="https://github.com/NDevTK">NDev</a>, <a href="https://github.com/Joe-Dowd">Joe Dowd</a>,
135-
<a href="https://mchang.name/">Michael Chang</a> and more.
136-
</p>
94+
<div class="center"><img src="images/submission menu.png"></div>
13795

138-
<p>The awesome <a href="https://github.com/omarroth/invidious/wiki/API">Invidious API</a> is used to grab the time the video was published.</p>
96+
<p class="projectPreview center">
97+
<a href="https://wiki.sponsor.ajay.app/w/Guidelines" target="_blank">__MSG_guidelines__</a>
98+
<br/>
99+
<a href="https://wiki.sponsor.ajay.app/w/Advice_for_submitting" target="_blank">__MSG_AdviceForSubmitting__</a>
100+
</p>
139101

140-
<p>Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
102+
<h1>__MSG_helpPageCopyOfDatabase__</h1>
141103

142-
<p>Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
143-
144-
<p style="text-align: center;"><a href="/oss-attribution/attribution.txt">Open Source Licenses</a></p>
145-
146-
</div>
147-
104+
<p>
105+
__MSG_helpPageCopyOfDatabase1__ <a href="https://sponsor.ajay.app/database">https://sponsor.ajay.app/database</a>. __MSG_helpPageCopyOfDatabase2__
106+
</p>
107+
108+
<h4 style="display: inline">Client:</h4>
109+
<!-- Github logo -->
110+
<a href="https://github.com/ajayyy/SponsorBlock"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
111+
112+
<h4 style="display: inline; padding-left: 20px">Server:</h4>
113+
<!-- Github logo -->
114+
<a href="https://github.com/ajayyy/SponsorBlockServer"><svg aria-hidden="true" version="1.1" viewBox="0 0 16 16" height="58px" style="padding-left: 15px"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg></a>
115+
116+
<h1>__MSG_Credits__</h1>
117+
118+
<p>
119+
Thanks to all <a href="https://github.com/ajayyy/SponsorBlock/graphs/contributors">SponsorBlock contributors</a>,
120+
<a href="https://github.com/ajayyy/SponsorBlockServer/graphs/contributors">SponsorBlockServer contributors</a> and
121+
<a href="https://github.com/ajayyy/SponsorBlockSite/graphs/contributors">SponsorBlockSite contributors</a> such
122+
as <a href="https://github.com/NDevTK">NDev</a>, <a href="https://github.com/Joe-Dowd">Joe Dowd</a>,
123+
<a href="https://mchang.name/">Michael Chang</a> and more.
124+
</p>
125+
126+
<p>Some icons made by <a href="https://www.flaticon.com/authors/gregor-cresnar" title="Gregor Cresnar">Gregor Cresnar</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
127+
128+
<p>Some icons made by <a href="https://www.flaticon.com/authors/freepik" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> and are licensed by <a href="https://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
129+
130+
<p style="text-align: center;"><a href="/oss-attribution/attribution.txt">Open Source Licenses</a></p>
131+
</div>
132+
</div>
133+
134+
<div class="box2">
135+
<p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
136+
137+
<p class="smallText" style="margin-bottom: 0; margin-top: 0">
138+
__MSG_helpPageFeatureDisclaimer__
139+
</p>
140+
141+
<iframe class="optionsFrame" src="../options/options.html#embed" style="border: none"></iframe>
142+
</div>
143+
</span>
148144
</body>

‎public/help/styles.css‎

Lines changed: 99 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,11 @@ html {
2929
}
3030

3131
.bigText {
32-
font-size: 50px;
32+
font-size: 30px;
33+
}
34+
35+
.smallText {
36+
font-size: 14px;
3337
}
3438

3539
body {
@@ -46,7 +50,6 @@ body {
4650
}
4751

4852
.container {
49-
max-width: 60%;
5053
margin: auto;
5154
}
5255

@@ -168,7 +171,7 @@ p,li,code,a {
168171

169172
.optionsFrame {
170173
width: 100%;
171-
height: 500px;
174+
height: 100%;
172175
}
173176

174177
.previewImage {
@@ -194,14 +197,59 @@ img {
194197
h1,h2,h3,h4,h5,h6 {
195198
color: var(--title);
196199
text-align: center;
200+
201+
font-size: 25px;
202+
margin: 5px 0px;
197203
}
198204

199205
svg {
200206
text-decoration: none;
201207
}
202208

203-
#sbDonate {
204-
font-size: 10px;
209+
.donate-ask {
210+
background-color: rgb(26, 26, 26, 0.95);
211+
border-radius: 15px;
212+
213+
text-align: center;
214+
padding: 10px;
215+
216+
margin: 0.7em 0px;
217+
}
218+
219+
.donate-ask .donate-text {
220+
margin-top: 10px;
221+
margin-bottom: 10px;
222+
223+
display: flex;
224+
align-items: center;
225+
justify-content: center;
226+
}
227+
228+
.donate-ask .donate-text img {
229+
height: 2rem;
230+
border-radius: 100%;
231+
232+
margin-right: 15px;
233+
}
234+
235+
.donate-ask a {
236+
text-decoration: none;
237+
color: #eee;
238+
border-radius: 15px;
239+
background-color: rgb(58, 58, 58, 0.9);
240+
padding: 10px;
241+
242+
transition: background-color 0.3s ease;
243+
244+
display: block;
245+
width: fit-content;
246+
margin: auto;
247+
margin-top: 10px;
248+
margin-bottom: 10px;
249+
}
250+
251+
.donate-ask a:hover {
252+
background-color: rgba(70, 70, 70, 0.9);
205253
}
206254

207255
@media screen and (orientation:portrait) {
@@ -351,4 +399,50 @@ svg {
351399

352400
.hidden {
353401
display: none;
402+
}
403+
404+
.help-page-flex-container {
405+
display: flex;
406+
flex-direction: row;
407+
gap: 20px;
408+
margin-left: 20px;
409+
margin-right: 20px;
410+
}
411+
412+
.left-sidebar {
413+
display: flex;
414+
flex-direction: column;
415+
416+
flex: 1 1 50%;
417+
}
418+
419+
.box2 {
420+
flex: 1 1 50%;
421+
}
422+
423+
/* Mobile */
424+
@media only screen and (max-width: 600px) {
425+
.box1 {
426+
order: 1;
427+
}
428+
429+
.box2 {
430+
order: 2;
431+
}
432+
433+
.box3 {
434+
order: 3;
435+
}
436+
437+
.left-sidebar {
438+
display: contents;
439+
}
440+
441+
.help-page-flex-container {
442+
flex-direction: column;
443+
}
444+
445+
.optionsFrame {
446+
height: 500px;
447+
}
354448
}

‎src/help.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,6 @@ async function init() {
4747
}
4848

4949
if (!showDonationLink()) {
50-
document.getElementById("sbDonate").style.display = "none";
50+
document.getElementById("donate-component").style.display = "none";
5151
}
5252
}

0 commit comments

Comments
 (0)