Merge pull request #91 from YummyOreo/2024-03-28

feat: adds click to link to most pages, changes video on about page to playlist video + more
TBfighters · Jun 15, 2024 · 56543e5 · 56543e5
2 parents bf6844d + 8179b3f
commit 56543e5
Show file tree

Hide file tree

Showing 20 changed files with 695 additions and 80 deletions.
diff --git a/about.html b/about.html
@@ -19,12 +19,16 @@
 		<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"
 			rel="stylesheet" />
 		<link rel="stylesheet" href="style.css" />
+		<link rel="stylesheet" href="libs/toastify/toastify.css">
 		<link rel="icon" type="image/x-icon" href="img/favicon.ico">
 		<script src="jquery-3.7.1.min.js"></script>
 		<script src="menu.js"></script>
+		<script src="libs/toastify/toastify.js"></script>
 		<!-- Variable Tags -->
 		<meta property="og:title" content="About Us | TBFighters" />
 		<meta property="og:description" content="Fighting for accessible tuberculosis testing and treatment to save over a million lives a year. Take action with us now." />
+		<script src="./actions.js"></script>
+		<script src="./header-link.js" defer></script>
 		<title>About Us | TBFighters</title>
 	</head>
 	<body class="about">
@@ -62,7 +66,9 @@ <h1 class="break-anywhere">About TBFighters</h1>
 					<p>
 						<a href="https://www.youtube.com/playlist?list=PLHaAg4A3ezRPslu3SYmwnmfq2DLcpDbXa" target="_blank">More vlogbrothers TB videos</a>
 					</p>
-					<h2 id="getinvolved">Get Involved</h2>
+					<h2 id="getinvolved">Get Involved
+						<div class="header-copy"><noscript><a href="#getinvolved"></a></noscript></div>
+					</h2>
 					<p>
 						You can become a TBFighter by <a href="action.html">taking action</a> to tell the world it's time to end tuberculosis, participating in campaigns from <a href="resources.html#campaigns">trusted public health organizations</a> fighting TB, or <a href="action.html#list">signing up for our newsletter</a> to receive emails from TBFighters and partners about ways to assist in our campaigns, new calls to action, and other campaign updates.
 					</p>
@@ -81,7 +87,7 @@ <h2 id="getinvolved">Get Involved</h2>
 				&copy; The TBFighters Project | <a href="privacy.html" class="footer-link">Privacy Policy</a>
 			</p>
 			<p class="too-small">
-				
+
 				We lead by following and we act with compassion. Get in touch: contact at tbfighters dot org
 			</p>
 		</footer>

diff --git a/action-page.css b/action-page.css
@@ -6,7 +6,7 @@
 	text-shadow: #121212 1px 1px 10px;
 }
 
-#petition-wrapper div div {
+#petition-wrapper .action {
 	margin-left: 40%;
 	max-width: 40%;
 }
@@ -17,7 +17,7 @@
 		background: #3c3f60;
 	}
 
-	#petition-wrapper div div {
+	#petition-wrapper .action {
 		margin: 0 1em;
 		width: auto;
 		max-width: none;

diff --git a/action.html b/action.html
@@ -19,15 +19,18 @@
 		<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"
 			rel="stylesheet" />
 		<link rel="stylesheet" href="style.css" />
+		<link rel="stylesheet" href="libs/toastify/toastify.css">
 		<link rel="icon" type="image/x-icon" href="img/favicon.ico">
 		<script src="jquery-3.7.1.min.js"></script>
 		<script src="menu.js"></script>
+		<script src="libs/toastify/toastify.js"></script>
 		<!-- Variable Tags -->
 		<meta property="og:title" content="Take Action | TBFighters" />
 		<meta property="og:description" content="Fighting for accessible tuberculosis testing and treatment to save over a million lives a year. Take action with us now."
 		/>
 		<script src="actions.js"></script>
 		<script src="action-page.js" defer></script>
+		<script src="header-link.js" defer></script>
 		<link rel="stylesheet" href="action-page.css">
 		<title>Take Action | TBFighters</title>
 	</head>
@@ -77,6 +80,7 @@ <h1 class="break-anywhere">Take <span class="red">Action</span></h1>
 						<div class="action">
 							<h3 class="wrap-centered" id="petition">
 								Sign the <strong class="highlight">Petition</strong>
+								<div class="header-copy"><noscript><a href="#posts"></a></noscript></div>
 							</h3>
 							<p>
 								We call on <span class="highlight">Danaher</span> to drop the price of their GeneXpert medical tests supplied to low- and middle-income countries to <span class="highlight">US$5</span> each for all diseases so that millions more people around the world can be properly diagnosed and receive the treatment they need to stay alive and healthy.
@@ -174,7 +178,9 @@ <h3 class="wrap-centered" id="petition">
 					<button class="button button-subtle" onclick="toggleExpand()"><img src="img/chevron.svg" class="expand-actions-arrow" alt="expand-arrow"> <span id="expand-button-txt">More actions</span></button>
 				</div>
 				<div class="wrapper-full" style="transition: ease 0.5s all;">
-					<h2 id="posts">Graphics and Templates</h2>
+					<h2 id="posts">Graphics and Templates
+						<div class="header-copy"><noscript><a href="#posts"></a></noscript></div>
+					</h2>
 
 					<h4>Some ready-made posts:</h4>
 					<noscript>
@@ -218,7 +224,9 @@ <h4>Some ready-made posts:</h4>
 				</div>
 				<br>
 				<div class="wrapper-full">
-					<h4 id="graphics">And some of our most popular <a href="https://tbfighters.notion.site/7fb225aa690e4c5b8384c085ada11960?v=203b5b2bbe6f4ba9a9fc3385a6944f9e&pvs=4" target="_blank">social media graphics</a>:</h4>
+					<h4 id="graphics">And some of our most popular <a href="https://tbfighters.notion.site/7fb225aa690e4c5b8384c085ada11960?v=203b5b2bbe6f4ba9a9fc3385a6944f9e&pvs=4" target="_blank">social media graphics</a>:
+						<div class="header-copy"><noscript><a href="#graphics"></a></noscript></div>
+					</h4>
 
 				</div>
 				<div class="wrapper-page">
@@ -250,7 +258,9 @@ <h4 id="graphics">And some of our most popular <a href="https://tbfighters.notio
 					</div>
 				</div>
 				<div class="wrapper-full">
-					<h2 id="list">Join Our <span class="red">Mailing List</span></h2>
+					<h2 id="list">Join Our <span class="red">Mailing List</span>
+						<div class="header-copy"><noscript><a href="#list"></a></noscript></div>
+					</h2>
 					<p>
                         Be informed of new calls to action, campaign press releases, and other TBFighters campaign updates. Emails may be authored by TBFighters, John Green, and partner organizations, such as MSF Access and PIH.
 					</p>

diff --git a/actions.js b/actions.js
@@ -1,15 +1,34 @@
+function addToast(data) {
+    if (data.time == null) {
+        data.time == 3000
+    }
+    var toast = Toastify({
+        text: data.message,
+        duration: data.time,
+        position: "center",
+        style: {
+            background: "#BC1C1A",
+            color: "#F5F5F5",
+        },
+        onClick: function () {
+          toast.hideToast();
+        },
+    });
+    toast.showToast();
+}
+
 // REMEMBER to add a noscript
 function addCopyButton(button, text) {
     button.onclick = function() {
         navigator.clipboard.writeText(text.trim())
-        alert("Copied!")
+        addToast({message: "Copied!", time: 1200})
     }
 }
 
 function addCopyButtonCallback(button, text) {
     button.onclick = function() {
         navigator.clipboard.writeText(text().trim())
-        alert("Copied!")
+        addToast({message: "Copied!", time: 1200})
     }
 }
 

diff --git a/activism-guide.html b/activism-guide.html
@@ -20,9 +20,11 @@
 	<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"
 		rel="stylesheet" />
 	<link rel="stylesheet" href="style.css" />
+	<link rel="stylesheet" href="libs/toastify/toastify.css">
 	<link rel="icon" type="image/x-icon" href="img/favicon.ico">
 	<script src="jquery-3.7.1.min.js"></script>
 	<script src="menu.js"></script>
+	<script src="libs/toastify/toastify.js"></script>
 	<!-- Variable Tags -->
 	<!--Open Graph Tags-->
 	<meta property="og:title" content="Activism Guide | TBFighters" />
@@ -31,6 +33,7 @@
 	<link rel="stylesheet" href="actions.css">
 	<link rel="stylesheet" href="docs.css">
 	<script src="actions.js"></script>
+	<script src="./header-link.js" defer></script>
 	<title>Activism Guide | TBFighters</title>
 	<style>
 		#center {
@@ -77,9 +80,9 @@ <h2 id="nerdfighteria-guidelines-for-activism">TBFighters Guidelines for Activis
 			<br>
 			<br>
 			<h3 id="standards-for-community-conduct">
+				Standards for Community Conduct:
 				<div class="header-copy"><noscript><a
 							href="#standards-for-community-conduct"></a></noscript></div>
-				Standards for Community Conduct:
 			</h3>
 			<p>
 				Threats, intimidation, degradation, and humiliation are never acceptable within
@@ -90,9 +93,9 @@ <h3 id="standards-for-community-conduct">
 			</p>
 			<br>
 			<h3 id="respectful-outreach-and-engagement">
+				Standards Respectful Outreach and Engagement:
 				<div class="header-copy"><noscript><a
 							href="#respectful-outreach-and-engagement"></a></noscript></div>
-				Standards Respectful Outreach and Engagement:
 			</h3>
 			<p>
 				When engaging with the public or contacting organizations, keep in mind that the
@@ -103,9 +106,9 @@ <h3 id="respectful-outreach-and-engagement">
 			</p>
 			<br>
 			<h3 id="using-privilege-responsibly">
+				Using Privilege Responsibly:
 				<div class="header-copy"><noscript><a
 							href="#using-privilege-responsibly"></a></noscript></div>
-				Using Privilege Responsibly:
 			</h3>
 			<p>
 				Utilize your power and privilege for positive impact, contributing to the reduction of
@@ -115,9 +118,9 @@ <h3 id="using-privilege-responsibly">
 			</p>
 			<br>
 			<h3 id="collective-action-and-unity">
+				Collective Action and Unity:
 				<div class="header-copy"><noscript><a
 							href="#collective-action-and-unity"></a></noscript></div>
-				Collective Action and Unity:
 			</h3>
 			<p>
 				To achieve our goals effectively, remember that collective action relies on unity—avoid
@@ -127,9 +130,9 @@ <h3 id="collective-action-and-unity">
 			</p>
 			<br>
 			<h3 id="collabrative-partnerships">
+				Collaborative Partnerships:
 				<div class="header-copy"><noscript><a href="#collabrative-partnerships"></a></noscript>
 				</div>
-				Collaborative Partnerships:
 			</h3>
 			<p>
 				Proactively cultivate robust collaborative partnerships. Recognize and appreciate our
@@ -138,10 +141,10 @@ <h3 id="collabrative-partnerships">
 			</p>
 			<br>
 			<h3 id="knowledge-empowers-action">
-				<div class="header-copy"><noscript><a href="#knowledge-empowers-action"></a></noscript>
-				</div>
 				Knowledge Empowers
 				Action:
+				<div class="header-copy"><noscript><a href="#knowledge-empowers-action"></a></noscript>
+				</div>
 			</h3>
 			<p>
 				Invest time in gaining a deep understanding of the causes we champion, and actively seek
@@ -150,9 +153,9 @@ <h3 id="knowledge-empowers-action">
 			</p>
 			<br>
 			<h3 id="unified-direction-and-leadership">
+				Unified Direction and Leadership:
 				<div class="header-copy"><noscript><a
 							href="#unified-direction-and-leadership"></a></noscript></div>
-				Unified Direction and Leadership:
 			</h3>
 			<p>
 				Stay focused and follow the guidance of those already engaged in the work, as well as
@@ -161,9 +164,9 @@ <h3 id="unified-direction-and-leadership">
 			</p>
 			<br>
 			<h3 id="inclusive-and-self-care">
+				Inclusivity and Self-Care:
 				<div class="header-copy"><noscript><a href="#inclusive-and-self-care"></a></noscript>
 				</div>
-				Inclusivity and Self-Care:
 			</h3>
 			<p>
 				Nerdfighteria is an unequivocally inclusive community that wholeheartedly embraces
@@ -189,14 +192,6 @@ <h4>Special Thanks To:</h4>
 			<br>
 			<br>
 		</div>
-		<script>
-			let elements = document.getElementsByClassName("header-copy");
-			for (let i = 0; i < elements.length; i++) {
-				let element = elements[i];
-				let parentId = element.parentElement.id;
-				addCopyButton(element, window.location.href + "#" + parentId)
-			}
-		</script>
 	</main>
 	<footer class="site-foot">
 		<p>

diff --git a/danaher-rif.html b/danaher-rif.html
@@ -19,9 +19,11 @@
 		<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"
 			rel="stylesheet" />
 		<link rel="stylesheet" href="style.css" />
+		<link rel="stylesheet" href="libs/toastify/toastify.css">
 		<link rel="icon" type="image/x-icon" href="img/favicon.ico">
 		<script src="jquery-3.7.1.min.js"></script>
 		<script src="menu.js"></script>
+		<script src="libs/toastify/toastify.js"></script>
 		<!-- Variable Tags -->
 		<meta property="og:title" content="Danaher/Cepheid Agree to Provide Standard Tuberculosis Tests at Cost | TBFighters" />
 		<meta property="og:site_name" content="TBFighters: Danaher, it's Time for $5" />

diff --git a/docs.css b/docs.css
@@ -71,33 +71,3 @@ img.letter {
 		margin: 0.125em 0.125em;
 	}
 }
-
-/* header links */
-.header-copy {
-	height: 0.8em;
-	width: 1em;
-	position: absolute;
-	transform: translate(-1.5em, 0);
-	opacity: 0;
-}
-
-.header-copy::after {
-	content: url("./img/link.svg");
-}
-
-h3:hover>.header-copy {
-	opacity: 1;
-}
-
-.header-copy:hover::after {
-	content: url("./img/link-hover.svg");
-	opacity: 1;
-	cursor: pointer;
-}
-
-.header-copy noscript a {
-	width: 100%;
-	height: 100%;
-	display:block;
-	position: absolute;
-}
diff --git a/header-link.js b/header-link.js
@@ -0,0 +1,6 @@
+let elements = document.getElementsByClassName("header-copy");
+for (let i = 0; i < elements.length; i++) {
+    let element = elements[i];
+    let parentId = element.parentElement.id;
+    addCopyButton(element, location.protocol + '//' + location.host + location.pathname + "#" + parentId)
+}
diff --git a/img/link.svg b/img/link.svg
diff --git a/index.html b/index.html
@@ -19,12 +19,15 @@
 		<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"
 			rel="stylesheet" />
 		<link rel="stylesheet" href="style.css" />
+		<link rel="stylesheet" href="libs/toastify/toastify.css">
 		<link rel="icon" type="image/x-icon" href="img/favicon.ico">
 		<script src="jquery-3.7.1.min.js"></script>
 		<script src="menu.js"></script>
+		<script src="libs/toastify/toastify.js"></script>
 		<!-- Variable Tags -->
 		<meta property="og:title" content="TBFighters: Putting People Over Profits" />
 		<meta property="og:description" content="Fighting for accessible tuberculosis testing and treatment to save over a million lives a year. Take action with us now." />
+		<script src="./actions.js"></script>
 		<title>TBFighters | Putting People Over Profits</title>
 	</head>
 	<body class="homepage">
@@ -132,7 +135,12 @@ <h2><span class="red">Profits</span> Over People.</h2>
 			</section>
 			<section id="join" class="container">
 				<div class="wrapper">
-					<h2 class="action-head">Take <span class="red">Action</span>:</h2>
+					<h2 class="action-head" id="take-action">Take <span class="red">Action</span>:
+						<div class="header-copy" id="take-action-header-copy"><noscript><a href="#join"></a></noscript></div>
+					</h2>
+					<script>
+						addCopyButton(document.getElementById("take-action-header-copy"), location.protocol + '//' + location.host + location.pathname + "#join")
+					</script>
 					<div class="wrapper">
 						<div class="wrapper-columns">
 							<div class="join-left">

diff --git a/johnson-secondary-patents.html b/johnson-secondary-patents.html
@@ -19,9 +19,11 @@
 		<link href="https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap"
 			rel="stylesheet" />
 		<link rel="stylesheet" href="style.css" />
+		<link rel="stylesheet" href="libs/toastify/toastify.css">
 		<link rel="icon" type="image/x-icon" href="img/favicon.ico">
 		<script src="jquery-3.7.1.min.js"></script>
 		<script src="menu.js"></script>
+		<script src="libs/toastify/toastify.js"></script>
 		<!-- Variable Tags -->
 		<meta name="robots" content="noindex">
 		<meta property="og:title" content="Johnson & Johnson Commit to Non-Enforcement of Secondary Patents | TBFighters" />