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 <[email protected]> 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; }
