You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@sling.apache.org by ro...@apache.org on 2024/10/11 15:13:09 UTC
(sling-samples) 02/02: feat(oauth): animate display of repository count
This is an automated email from the ASF dual-hosted git repository.
rombert pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/sling-samples.git
commit d3c6e514ba3b4b6d97d2d69a0d2b67788110adb5
Author: Robert Munteanu <ro...@apache.org>
AuthorDate: Fri Oct 11 17:12:27 2024 +0200
feat(oauth): animate display of repository count
---
.../oauth-demo/components/github-repos/github-repos.html | 16 +++++++++++++++-
.../jcr_root/content/oauth-demo/static/css/output.css | 14 +++++++++-----
2 files changed, 24 insertions(+), 6 deletions(-)
diff --git a/oauth/ui.apps/src/main/content/jcr_root/apps/oauth-demo/components/github-repos/github-repos.html b/oauth/ui.apps/src/main/content/jcr_root/apps/oauth-demo/components/github-repos/github-repos.html
index f66c28f..b6d6eac 100644
--- a/oauth/ui.apps/src/main/content/jcr_root/apps/oauth-demo/components/github-repos/github-repos.html
+++ b/oauth/ui.apps/src/main/content/jcr_root/apps/oauth-demo/components/github-repos/github-repos.html
@@ -15,7 +15,7 @@
</form>
</header>
<div data-sly-test="${github.searchResponse}">
- <p>Repository count: ${github.searchResponse.totalCount}</p>
+ <p class="text-4xl text-center">Repository count: <span id="github-repo-count" data-repo-count="${github.searchResponse.totalCount}">0</span></p>
<div data-sly-list.item="${github.searchResponse.items}"
class="flex flex-row flex-wrap">
<div class="basis-1/3">
@@ -27,6 +27,20 @@
</div>
</div>
</div>
+ <script>
+ window.onload = function() {
+ var countElement = document.getElementById('github-repo-count');
+ var finalCount = parseInt(countElement.dataset.repoCount);
+ var currentCount = 0;
+ var interval = setInterval(function() {
+ currentCount++;
+ countElement.textContent = currentCount;
+ if (currentCount >= finalCount) {
+ clearInterval(interval);
+ }
+ }, 10);
+ };
+ </script>
</div>
<div data-sly-test="${github.needsLogin}">
<p>Please <a class="underline" href="${github.githubLoginUrl}">connect your account to github</a> to view the repositories.</p>
diff --git a/oauth/ui.apps/src/main/content/jcr_root/content/oauth-demo/static/css/output.css b/oauth/ui.apps/src/main/content/jcr_root/content/oauth-demo/static/css/output.css
index e65455f..8ed5df2 100644
--- a/oauth/ui.apps/src/main/content/jcr_root/content/oauth-demo/static/css/output.css
+++ b/oauth/ui.apps/src/main/content/jcr_root/content/oauth-demo/static/css/output.css
@@ -859,11 +859,6 @@ p {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
-.px-2 {
- padding-left: 0.5rem;
- padding-right: 0.5rem;
-}
-
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
@@ -874,6 +869,15 @@ p {
padding-bottom: 0.5rem;
}
+.text-center {
+ text-align: center;
+}
+
+.text-4xl {
+ font-size: 2.25rem;
+ line-height: 2.5rem;
+}
+
.font-bold {
font-weight: 700;
}