From 31b330208be52d77cdf0d72d03c7d1fbcec2c2e7 Mon Sep 17 00:00:00 2001
From: Mario Ranftl <code@mranftl.com>
Date: Sun, 8 Oct 2023 16:37:40 +0200
Subject: [PATCH] fix a multi items, add sponsor tooltip

---
 client/app/fonts/fonts.controller.js |  6 +++-
 client/app/fonts/fonts.html          | 42 ++++++++++------------------
 client/index.html                    |  1 +
 3 files changed, 20 insertions(+), 29 deletions(-)

diff --git a/client/app/fonts/fonts.controller.js b/client/app/fonts/fonts.controller.js
index 457364f..68a7e31 100644
--- a/client/app/fonts/fonts.controller.js
+++ b/client/app/fonts/fonts.controller.js
@@ -44,7 +44,11 @@ angular.module('googleWebfontsHelperApp')
     $scope.sponsorsPromise = $http.get('https://sponsors.mranftl.com/json')
       .success(function (data) {
         $scope.sponsors = data.sponsors;
-        $scope.busy = false;
+
+        setTimeout(function () {
+          $('[data-toggle="tooltip"]').tooltip();
+        }, 0);
+
       }) // err is not handled, because it is not critical
 
     $scope.scrollListTop = function() {
diff --git a/client/app/fonts/fonts.html b/client/app/fonts/fonts.html
index 9bab4eb..cde8a84 100644
--- a/client/app/fonts/fonts.html
+++ b/client/app/fonts/fonts.html
@@ -50,46 +50,32 @@
         <!-- App name -->
         <h4 class="page-header"><a href="/" ng-click="selectedItemID=''">google-webfonts-helper</a><br /><small>Get eot,
             ttf, svg, woff and woff2 + CSS</small></h4>
-        <!-- GH Sponsor -->
-        <!-- <iframe id="githubSponsor" src="https://ghbtns.com/github-btn.html?user=majodev&type=sponsor&count=true&size=large"
-          allowtransparency="true" frameborder="0" scrolling="0" width="200px" height="30px"></iframe> -->
-        <!-- <div id="githubSponsor">
-          <a href="https://github.com/sponsors/majodev" target="_blank">
-            <img alt="GitHub Sponsors"
-              src="https://img.shields.io/github/sponsors/majodev?style=social&logo=github%20sponsors&label=sponsor"
-              height="30px">
-          </a>
-        </div> -->
 
         <div class="nav-push-right">
           <a class="btn btn-default actSponsorButton actSponsorButton{{ sponsor.type }}"
-            href="https://github.com/{{ sponsor.login }}" ng-repeat="sponsor in sponsors" role="button" target="_blank">
-            <img class="sponsor-img" src="{{ sponsor.url }}" alt="{{ sponsor.login }}" />
-            <div class="sponsor-img-overlay" />
+            href="https://github.com/{{ sponsor.login }}" ng-repeat="sponsor in sponsors" role="button" target="_blank"
+            data-toggle="tooltip" data-placement="bottom" title="{{ sponsor.login }}">
+            <span>
+              <img class="sponsor-img" src="{{ sponsor.url }}" alt="{{ sponsor.login }}" />
+              <span class="sponsor-img-overlay" />
+            </span>
           </a>
 
           <a href="https://github.com/sponsors/majodev" target="_blank" role="button" type="button"
-            class="btn btn-default actNavButton">
-            <i class="fa fa-heart-o sponsorheart"></i>&nbsp;<strong>Sponsor</strong>&nbsp;<span
-              ng-if="sponsors.length > 0" class="badge">{{sponsors.length}}</span>
+            class="btn btn-default actNavButton" data-toggle="tooltip" data-placement="bottom"
+            title="Join {{ sponsors.length }} lovely sponsors!">
+            <span>
+              <i class="fa fa-heart-o sponsorheart"></i>&nbsp;<strong>Sponsor</strong>
+            </span>
           </a>
           <a href="https://github.com/majodev/google-webfonts-helper" target="_blank" role="button" type="button"
             class="btn btn-default actNavButton">
-            <i class="fa fa-star-o"></i>&nbsp;<strong>Star</strong>
+            <span>
+              <i class="fa fa-star-o"></i>&nbsp;<strong>Star</strong>
+            </span>
           </a>
         </div>
 
-        <!-- GH Stars -->
-        <!-- <iframe id="githubCount" src="https://ghbtns.com/github-btn.html?user=majodev&repo=google-webfonts-helper&type=watch&count=true&size=large"
-          allowtransparency="true" frameborder="0" scrolling="0" width="170px" height="30px"></iframe> -->
-        <!-- <div id="githubCount">
-          <a href="https://github.com/majodev/google-webfonts-helper" target="_blank">
-            <img alt="GitHub Repo stars"
-              src="https://img.shields.io/github/stars/majodev/google-webfonts-helper?style=social&logo=github&label=star"
-              height="30px">
-          </a>
-        </div> -->
-
       </div>
     </div>
 
diff --git a/client/index.html b/client/index.html
index a79f40c..1de67aa 100644
--- a/client/index.html
+++ b/client/index.html
@@ -44,6 +44,7 @@
     <!-- build:js({client,node_modules}) app/vendor.js -->
       <!-- bower:js -->
       <script src="bower_components/jquery/dist/jquery.js"></script>
+      <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
       <script src="bower_components/angular/angular.js"></script>
       <script src="bower_components/angular-animate/angular-animate.js"></script>
       <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>