Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-06 19:47:04 +03:00
Code Issues Packages Projects Releases Wiki Activity

Improve help page layout and update some text

Browse Source
This commit is contained in:
Ajay
2025-07-16 00:50:35 -04:00
parent e89dfed07e
commit e9b687df6a
7 changed files with 213 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/_locales

Submodule public/_locales updated: 1314fb8089...aeee576b7e

BIN
public/help/images/popup.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 54 KiB

After

Width:  |  Height:  |  Size: 124 KiB

BIN
public/help/images/submission menu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
public/help/images/votebuttons.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 64 KiB

90
public/help/index.html
View File

@@ -21,11 +21,13 @@
<div class="container sponsorBlockPageBody">
<p class="createdBy">
<img src="https://ajay.app/newprofilepic.jpg" height="30" class="profilepiccircle"/>
<img src="../icons/newprofilepic.jpg" height="30" class="profilepiccircle"/>
Created By <a href="https://ajay.app">Ajay Ramachandran</a>
<a href="https://sponsor.ajay.app/donate" target="_blank" rel="noopener" id="sbDonate">(Donate)</a>
</p>
<span class="help-page-flex-container">
<div class="left-sidebar">
<div class="box1">
<p>
__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>.
</p>
@@ -48,59 +50,53 @@
<img src="/icons/close.png" class="close-button"/>
</a>
<p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
<p class="smallText">
__MSG_helpPageFeatureDisclaimer__
</p>
<iframe class="optionsFrame" src="../options/options.html#embed" style="border: none"></iframe>
<div id="donate-component" class="donate-ask">
<div class="donate-text">
<img
src="../icons/newprofilepic.jpg"
alt="Ajay's avatar"
></img>
__MSG_supportSponsorBlock__
</div>
<a href="https://sponsor.ajay.app/donate" class="donate-button" target="_blank" rel="noopener">
__MSG_Donate__
</a>
</div>
</div>
<div class="box3">
<h1>__MSG_helpPageHowSkippingWorks__</h1>
<p class="projectPreview">
<span class="projectPreviewImageLarge">
<img src="images/popup.png">
</span>
__MSG_helpPageHowSkippingWorks1__
<br/>
<br/>
__MSG_helpPageHowSkippingWorks2__
</p>
<div class="center"><img src="images/voting on notice.gif"></div>
<p class="projectPreview">
__MSG_helpPageHowSkippingWorks1__
</p>
<div class="center"><img style="height: 400px;" src="images/popup.png"></div>
<h1>__MSG_Submitting__</h1>
<p class="projectPreview">
<img class="projectPreviewImageLarge" src="https://i.imgur.com/A1ilk6x.gif">
__MSG_helpPageSubmitting1__
</p>
<br/>
<br/>
<div class="center"><img src="images/votebuttons.gif"></div>
<p class="projectPreview">
__MSG_helpPageSubmitting2__
</p>
<h1>__MSG_Editing__</h1>
<div class="center"><img src="images/submission menu.png"></div>
<p class="projectPreview">
<span class="projectPreviewImageLarge">
<img src="https://wiki.sponsor.ajay.app/images/6/6a/Popup_only.png">
</span>
__MSG_helpPageEditing1__
</p>
<h1>__MSG_helpPageTooSlow__</h1>
<p>
__MSG_helpPageTooSlow1__
<p class="projectPreview center">
<a href="https://wiki.sponsor.ajay.app/w/Guidelines" target="_blank">__MSG_guidelines__</a>
<br/>
<a href="https://wiki.sponsor.ajay.app/w/Advice_for_submitting" target="_blank">__MSG_AdviceForSubmitting__</a>
</p>
<h1>__MSG_helpPageCopyOfDatabase__</h1>
@@ -109,14 +105,6 @@
__MSG_helpPageCopyOfDatabase1__ <a href="https://sponsor.ajay.app/database">https://sponsor.ajay.app/database</a>. __MSG_helpPageCopyOfDatabase2__
</p>
<h1>__MSG_helpPageNews__</h1>
<p>
See <a href="https://sponsor.ajay.app/news">https://sponsor.ajay.app/news</a>.
</p>
<h1>__MSG_helpPageSourceCode__</h1>
<h4 style="display: inline">Client:</h4>
<!-- Github logo -->
<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>
@@ -135,14 +123,22 @@
<a href="https://mchang.name/">Michael Chang</a> and more.
</p>
<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>
<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>
<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>
<p style="text-align: center;"><a href="/oss-attribution/attribution.txt">Open Source Licenses</a></p>
</div>
</div>
<div class="box2">
<p style="margin-bottom: 0; margin-top: 0" class="bigText center">__MSG_helpPageReviewOptions__</p>
<p class="smallText" style="margin-bottom: 0; margin-top: 0">
__MSG_helpPageFeatureDisclaimer__
</p>
<iframe class="optionsFrame" src="../options/options.html#embed" style="border: none"></iframe>
</div>
</span>
</body>

104
public/help/styles.css
View File

@@ -29,7 +29,11 @@ html {
}
.bigText {
font-size: 50px;
font-size: 30px;
}
.smallText {
font-size: 14px;
}
body {
@@ -46,7 +50,6 @@ body {
}
.container {
max-width: 60%;
margin: auto;
}
@@ -168,7 +171,7 @@ p,li,code,a {
.optionsFrame {
width: 100%;
height: 500px;
height: 100%;
}
.previewImage {
@@ -194,14 +197,59 @@ img {
h1,h2,h3,h4,h5,h6 {
color: var(--title);
text-align: center;
font-size: 25px;
margin: 5px 0px;
}
svg {
text-decoration: none;
}
#sbDonate {
font-size: 10px;
.donate-ask {
background-color: rgb(26, 26, 26, 0.95);
border-radius: 15px;
text-align: center;
padding: 10px;
margin: 0.7em 0px;
}
.donate-ask .donate-text {
margin-top: 10px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
}
.donate-ask .donate-text img {
height: 2rem;
border-radius: 100%;
margin-right: 15px;
}
.donate-ask a {
text-decoration: none;
color: #eee;
border-radius: 15px;
background-color: rgb(58, 58, 58, 0.9);
padding: 10px;
transition: background-color 0.3s ease;
display: block;
width: fit-content;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
}
.donate-ask a:hover {
background-color: rgba(70, 70, 70, 0.9);
}
@media screen and (orientation:portrait) {
@@ -352,3 +400,49 @@ svg {
.hidden {
display: none;
}
.help-page-flex-container {
display: flex;
flex-direction: row;
gap: 20px;
margin-left: 20px;
margin-right: 20px;
}
.left-sidebar {
display: flex;
flex-direction: column;
flex: 1 1 50%;
}
.box2 {
flex: 1 1 50%;
}
/* Mobile */
@media only screen and (max-width: 600px) {
.box1 {
order: 1;
}
.box2 {
order: 2;
}
.box3 {
order: 3;
}
.left-sidebar {
display: contents;
}
.help-page-flex-container {
flex-direction: column;
}
.optionsFrame {
height: 500px;
}
}

2
src/help.ts
View File

@@ -47,6 +47,6 @@ async function init() {
}
if (!showDonationLink()) {
document.getElementById("sbDonate").style.display = "none";
document.getElementById("donate-component").style.display = "none";
}
}