fix: Add iOS compatibility

Rapsssito · Sep 17, 2020 · 424ca02 · 424ca02
1 parent 4fa6eea
commit 424ca02
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,19 +1,6 @@
 # [1.1.0](https://github.com/Rapsssito/github-profile-badge/compare/v1.0.0...v1.1.0) (2020-07-31)
 
 
-### Bug Fixes
-
-* Fix logo offset size ([07f448d](https://github.com/Rapsssito/github-profile-badge/commit/07f448d1c7fd1583da0e79532f9bed020f19dfbf))
-
-
-### Features
-
-* Add background customization ([aaf4661](https://github.com/Rapsssito/github-profile-badge/commit/aaf466164062acb77a979f37eb75776d62650941))
-* Add CSS customization options ([37fc850](https://github.com/Rapsssito/github-profile-badge/commit/37fc85087903b83228f911d12dd668524b85bb55))
-
-# [1.1.0](https://github.com/Rapsssito/github-profile-badge/compare/v1.0.0...v1.1.0) (2020-07-31)
-
-
 ### Features
 
 * Add CSS customization options ([37fc850](https://github.com/Rapsssito/github-profile-badge/commit/37fc85087903b83228f911d12dd668524b85bb55))

diff --git a/example.html b/example.html
@@ -87,6 +87,7 @@ <h1>GitHub profile badge examples</h1>
         <div class="example-badge">
             <h3>Default:</h3>
             <div class="github-profile-badge" data-user="rapsssito"></div>
+            <div class="github-profile-badge" data-user="rapsssito"></div>
         </div>
         <div class="example-badge">
             <h3>Custom background:</h3>
@@ -100,7 +101,8 @@ <h3>Custom background:</h3>
                     font-weight: bold;
                 }
             </style>
-            <div class="github-profile-badge custom-background" data-user="rapsssito"></div>
+            <div class="github-profile-badge custom-background" data-user="pablotix"></div>
+            <div class="github-profile-badge custom-background" data-user="pablotix"></div>
         </div>
     </main>
     <footer>

diff --git a/src/widget.js b/src/widget.js
@@ -38,12 +38,13 @@
             overflow: hidden;
             background: transparent;
             align-self: stretch;
-            padding-left: ${BASE_SIZE/2}px;
-            margin-left: -${BASE_SIZE/2}px;
-            border-top-right-radius: ${BASE_SIZE/2}px;
-            border-bottom-right-radius: ${BASE_SIZE/2}px;
+            padding-left: ${BASE_SIZE / 2}px;
+            margin-left: -${BASE_SIZE / 2}px;
+            border-top-right-radius: ${BASE_SIZE / 2}px;
+            border-bottom-right-radius: ${BASE_SIZE / 2}px;
             width: 0;
-            transition: width 0.5s ease;
+            max-width: 0;
+            transition: all 0.5s ease;
         }
 
         .github-profile-badge-name {
@@ -125,14 +126,16 @@
         wrapper.appendChild(nameDiv);
         wrapper.onpointerenter = (ev) => {
             const nameTextStyle = window.getComputedStyle(nameText);
-            nameDiv.style.width =
-                nameText.offsetWidth +
+            const newWidth = nameText.offsetWidth +
                 parseFloat(nameTextStyle.marginLeft) +
                 parseFloat(nameTextStyle.marginRight) +
                 'px';
+            nameDiv.style.width = newWidth;
+            nameDiv.style.maxWidth = newWidth;
         };
         wrapper.onpointerleave = (ev) => {
             nameDiv.style.width = 0;
+            nameDiv.style.maxWidth = 0;
         };
 
         widget.appendChild(wrapper);