Fix flickering hover tooltip for tutorial resources links

Signed-off-by: sharon-wang <[email protected]>
esse-dev · Jan 31, 2021 · 81877a9 · 81877a9
1 parent 5e1d52b
commit 81877a9
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 24 deletions.
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
 	"name":"Akita",
-	"version":"1.0.0",
+	"version":"1.0.1",
 	"manifest_version": 2,
 	"description":"Insight into your engagement with Web Monetization",
 	"icons": {

diff --git a/src/popup/popup.html b/src/popup/popup.html
@@ -32,10 +32,14 @@ <h1 class="tooltip">These monetized sites could use ♥️</h1>
 		</div>
 		<div id="resources-container">
 			<h1>Resources</h1>
-			<a id="goto-intro" style="cursor: pointer;"><object type="image/svg+xml"
-				data="../../assets/icons/icon.svg"
-				style="height:18px; vertical-align: middle; margin-right: 5px;">
-			</object>Akita Tutorial</a> · 
+			<a id="goto-intro" style="cursor: pointer;">
+				<object
+					type="image/svg+xml"
+					data="../../assets/icons/icon.svg"
+					style="height:18px; vertical-align: middle; margin-right: 5px;">
+				</object>Akita Tutorial
+			</a>
+			· 
 			<a href="https://coil.com/explore">Discover some monetized sites!</a>
 		</div>
 	</section>
@@ -50,7 +54,8 @@ <h1>Resources</h1>
 	<section id="intro-carousel">
 		<div id="carousel">
 			<div class="carousel-slide">
-				<object type="image/svg+xml"
+				<object
+					type="image/svg+xml"
 					data="../../assets/icons/icon.svg"
 					style="height:170px;filter: drop-shadow(5px 5px 0px black);">
 				</object>
@@ -59,15 +64,18 @@ <h2>Welcome to Akita!</h2>
 				<p>Our goal with Akita is to increase Web Monetization understanding and awareness. Thank you! ~<a href="https://dev.to/esse-dev">esse-dev</a></p>
 			</div>
 			<div class="carousel-slide">
-				<object type="image/svg+xml"
+				<object
+					type="image/svg+xml"
 					data="../../assets/tutorial/free_dog.svg"
 					class="ad-popup-free-dog">
 				</object>
-				<object type="image/svg+xml"
+				<object
+					type="image/svg+xml"
 					data="../../assets/tutorial/new_rat.svg"
 					class="ad-popup-new-rat">
 				</object>
-				<object type="image/svg+xml"
+				<object
+					type="image/svg+xml"
 					class="ad-popup-disappointed-toaster"
 					data="../../assets/tutorial/disappointed_toaster.svg">
 				</object>
@@ -82,20 +90,25 @@ <h2 style="margin-top: 25px;">Tired of Ads?</h2>
 				</ul>
 			</div>
 			<div class="carousel-slide">
-				<object type="image/svg+xml" data="../../assets/external/webmonetization/wm-icon-animated.svg"
+				<object
+					type="image/svg+xml"
+					data="../../assets/external/webmonetization/wm-icon-animated.svg"
 					alt="Web Monetization Icon"
-					style="height:170px;"></object>
+					style="height:170px;">
+				</object>
 				<h2>What is <strong>Web Monetization?</strong></h2>
 				<p>Web Monetization allows you to stream micropayments (send tiny payments over time) directly to websites. Websites can detect these payments and turn off ads, as well as further enhance your website experience.</p>
 			</div>
 			<div class="carousel-slide">
 				<h2>What is a Web Monetization Provider?</h2>
 				<p>If you want to start supporting websites using Web Monetization, sign up with a provider. Once you've signed up and installed the provider, you can easily stream micropayments. Currently, there are only two providers—but more will come soon!</p>
 				<ul class="tutorial-list-ul">
-					<li><a href="https://www.coil.com/"><strong>Coil</strong></a>
+					<li>
+						<a href="https://www.coil.com/"><strong>Coil</strong></a>
 						<p style="display: inline;">- Start using Web Monetization for $5/month.</p>
 					</li>
-					<li><a href="https://www.pumabrowser.com/"><strong>Puma Browser</strong></a>
+					<li>
+						<a href="https://www.pumabrowser.com/"><strong>Puma Browser</strong></a>
 						<p style="display: inline;">- A mobile browser with Web Monetization built in!</p>
 					</li>
 				</ul>
@@ -105,30 +118,32 @@ <h2>Learn more & get involved</h2>
 				<p>Web Monetization is part of building a healthier internet. To learn more visit:</p>
 				<div class="link-grid">
 					<a href="https://www.grantfortheweb.org/" class="tooltip" style="background: #F96060;">Grant for the Web</a>
-					<div class="tooltip-bubble-left" style="top: 250px;">$100M Fund For a Better Internet</div>
+					<div class="tooltip-bubble-left" style="top: 280px;">$100M Fund For a Better Internet</div>
 					<a href="https://webmonetization.org/" class="tooltip" style="background: #92DEFF;">Web Monetization Website</a>
-					<div class="tooltip-bubble-right" style="top: 250px;">Web Monetization JavaScript API</div>
+					<div class="tooltip-bubble-right" style="top: 280px;">Web Monetization JavaScript API</div>
 
 					<a href="https://www.w3.org/blog/2019/09/w3c-interview-coil-on-interledger-protocol-and-web-monetization/" class="tooltip" style="background: #FFB763;">Interview with Coil CEO Stefan Thomas</a>
-					<div class="tooltip-bubble-left" style="top: 336px;">The thinking behind Interledger, Coil,<br>Web Monetization</div>
-					<a href="https://webmonetization.guide/" class="tooltip" style="background: #42D2B8;">Web Monetization Guide</a>
-					<div class="tooltip-bubble-right" style="top: 336px;">Guide for developers and creators</div>
+					<div class="tooltip-bubble-left" style="top: 367px;">The thinking behind Interledger, Coil,<br>Web Monetization</div>
+					<a href="https://developers.coil.com/resources" class="tooltip" style="background: #42D2B8;">Coil Developers Web Monetization Resources</a>
+					<div class="tooltip-bubble-right" style="top: 367px;">Guide for developers and creators</div>
 
 					<a href="https://coil.com/creator/how-to-monetize" class="tooltip" style="background: #9F88FC;">Monetize your own website or creative content with Coil</a>
-					<div class="tooltip-bubble-left" style="top: 448px;">Monetize your work</div>
+					<div class="tooltip-bubble-left" style="top: 479px;">Monetize your work</div>
 					<a href="https://dev.to/esse-dev/how-can-you-support-websites-without-having-to-deal-with-annoying-ads-3lmb" class="tooltip" style="background: #FFF27B;">How can you support websites without having to deal with annoying ads?</a>
-					<div class="tooltip-bubble-right" style="top: 448px;">Why does Web Monetization matter?</div>
+					<div class="tooltip-bubble-right" style="top: 479px;">Why does Web Monetization matter?</div>
 				</div>
 			</div>
 			<div class="carousel-slide">
 				<h2>The Akita Icon</h2>
 				<p>If a website you visit has Web Monetization enabled, the Akita browser extension icon will look like:</p>
-				<object type="image/svg+xml"
+				<object
+					type="image/svg+xml"
 					data="../../assets/tutorial/demo_mon.svg"
 					style="height: 100px;">
 				</object>
 				<p>Otherwise it will look like:</p>
-				<object type="image/svg+xml"
+				<object
+					type="image/svg+xml"
 					data="../../assets/tutorial/demo_unmon.svg"
 					style="height: 100px;">
 				</object>
@@ -150,7 +165,7 @@ <h2>About Your Data</h2>
 			</div>
 		</div>
 		<div id="intro-exit">skip</div>
-		<img src="../../assets/tutorial/next_button.svg" id="left-button"></object>
+		<img src="../../assets/tutorial/next_button.svg" id="left-button">
 		<div id="carousel-dot-container">
 			<div class="carousel-dot"></div>
 			<div class="carousel-dot"></div>
@@ -160,7 +175,7 @@ <h2>About Your Data</h2>
 			<div class="carousel-dot"></div>
 			<div class="carousel-dot"></div>
 		</div>
-		<img src="../../assets/tutorial/next_button.svg" id="right-button"></object>
+		<img src="../../assets/tutorial/next_button.svg" id="right-button">
 	</section>
 
 	<script src="../data/WebMonetizationAsset.js"></script>