alterware/BetterTwitFix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #227 from MarshDeer/main

Browse Source 
Added "Open in app?" popup template
This commit is contained in:
Dylan
2024-08-31 14:02:23 +01:00
committed by GitHub
parent 260cd055c0 08250e9733
commit b479e534c3
3 changed files with 118 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/preferences.html
View File

@@ -23,7 +23,7 @@
</head>
<body onload="loadPreference()">
<aside>
<aside class="top">
<em> This is not an official X / Twitter website. </em>
</aside>
@@ -48,7 +48,7 @@
</section>
</main>
<aside>
<aside class="bottom">
<em> This is not an official X / Twitter website. </em>
</aside>
</body>

66
static/style.css
View File

@@ -30,6 +30,11 @@ body {
color: var(--fg);
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-areas:
"bannertop"
"header"
"main"
"bannerbot";
font-family: "Roboto", sans-serif;
}
@@ -40,6 +45,7 @@ header {
justify-content: center;
align-items: center;
background: var(--bg);
grid-area: header;
}
header svg {
@@ -58,12 +64,13 @@ main {
flex-direction: column;
overflow-y: auto;
width: calc(100% - 4ch);
max-width: 1500px;
max-width: 80ch;
padding: 0 2ch;
margin: 0 auto;
grid-area: main;
}
label input {
label :has(input) {
grid-area: input;
}
@@ -103,6 +110,7 @@ input[type=checkbox] {
border: 2px solid var(--gray);
border-radius: 5px;
background: var(--bg);
transition: .2s all;
}
input[type=checkbox]+svg {
@@ -127,6 +135,52 @@ input[type=checkbox]:checked+svg {
display: block;
}
/* Popup */
main:has(.popup) {
justify-content: center;
}
.popup {
display: flex;
flex-direction: column;
justify-content: space-between;
height: calc(100% - 4em);
max-height: 400px;
padding: 2em 0;
}
.popup h1 {
text-align: center;
margin: 0;
}
.popup .buttoncontainer {
width: 100%;
display: flex;
flex-direction: column;
align-content: center;
}
.popup button {
background: var(--accent);
color: var(--fg);
width: 60%;
height: 3em;
border-radius: 1.5em;
border: none;
cursor: pointer;
margin: 1em auto;
font-size: larger;
font-weight: bold;
font-family: 'Roboto', sans-serif;
transition: .2s all;
}
.popup button:where(:hover, :focus) {
background: var(--fg);
color: var(--bg);
}
/* "Not a phishing site" warning tape */
aside {
background: repeating-linear-gradient(
@@ -140,3 +194,11 @@ aside em {
background: var(--bg);
color: var(--accent);
}
aside.top {
grid-area: bannertop;
}
aside.bottom {
grid-area: bannerbot;
}

52
templates/popup.html Normal file
View File

@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>vxTwitter - Open in App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<script>
function loadPref() {
if (localStorage.getItem("openLinksPreference") !== null) {
openTweet('{{tweet["TweetID"]}}');
}
}
function savePref(value) {
if (document.getElementById('saveToggle').checked === "true") {
localStorage.setItem("openLinksPreference", value);
}
openTweet('{{tweet["TweetID"]}}');
}
</script>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>
<body onload="loadPref()">
<aside class="top">
<em> This is not an official X / Twitter website. </em>
</aside>
<main>
<section class="popup">
<h1> Open this link with the X&nbsp;/&nbsp;Twitter app? </h1>
<div class="buttoncontainer">
<button onclick="savePref(true)"> Open in App </button>
<button onclick="savePref(false)"> Open in Browser </button>
</div>
<label for="saveToggle">
<h3> Remember on this device </h3>
<div class="checkboxcontainer">
<input type=checkbox checked id=saveToggle>
<svg viewBox="0 0 20 20" aria-hidden="true"><path d="M9.64 18.952l-5.55-4.861 1.317-1.504 3.951 3.459 8.459-10.948L19.4 6.32 9.64 18.952z"></path></svg>
</div>
<p> You may have to save this preference once per vxTwitter domain. </p>
</label>
</section>
</main>
<aside class="bottom">
<em> This is not an official X / Twitter website. </em>
</aside>
</body>
</html>