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

Fix help page on mobile

Browse Source
This commit is contained in:
Ajay Ramachandran
2021-10-22 01:29:46 -04:00
parent 628abd03f0
commit 23bebbca7c
2 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/help/index.html
View File

@@ -3,6 +3,7 @@
<head>
<title> SponsorBlock </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="styles.css" rel="stylesheet"/>
@@ -39,7 +40,7 @@
__MSG_helpPageFeatureDisclaimer__
</p>
<iframe src="../options/options.html#embed" width="100%" height="500px" style="border: none"></iframe>
<iframe class="optionsFrame" src="../options/options.html#embed" style="border: none"></iframe>
<h1>__MSG_helpPageHowSkippingWorks__</h1>
@@ -56,14 +57,12 @@
__MSG_helpPageHowSkippingWorks2__
</p>
<div class="center"><img height="120px" src="images/voting on notice.gif"></div>
<div class="center"><img src="images/voting on notice.gif"></div>
<h1>__MSG_Submitting__</h1>
<p class="projectPreview">
<span class="projectPreviewImageLargeRight">
<img src="https://i.imgur.com/A1ilk6x.gif">
</span>
<img class="projectPreviewImageLarge" src="https://i.imgur.com/A1ilk6x.gif">
__MSG_helpPageSubmitting1__

52
public/help/styles.css
View File

@@ -40,14 +40,6 @@ body {
transform: translateY(-20%);
}
.projectPreviewImageLargeRight {
position: absolute;
right: -210px;
width: 200px;
top: 50%;
transform: translateY(-50%);
}
.createdBy {
font-size: 14px;
text-align: center;
@@ -142,18 +134,9 @@ p,li,code,a {
overflow-wrap: break-word;
}
@media screen and (orientation:portrait) {
p,li,code,a {
max-width: 100%;
}
.projectPreviewImage {
position: unset;
width: 130px;
display: block;
margin: auto;
transform: none;
}
.optionsFrame {
width: 100%;
height: 500px;
}
.previewImage {
@@ -187,4 +170,33 @@ svg {
#sbDonate {
font-size: 10px;
}
@media screen and (orientation:portrait) {
.projectPreviewImage {
position: unset;
width: 50%;
display: block;
margin: auto;
transform: none;
}
.projectPreviewImageLarge {
position: unset;
left: 0;
width: 50%;
display: block;
margin: auto;
transform: unset;
}
.container {
max-width: 100%;
margin: 5px;
text-align: center;
}
p,li,code,a {
text-align: center;
}
}