diff --git a/core/static/core/style.scss b/core/static/core/style.scss index 3ba0f569..b08be5fb 100644 --- a/core/static/core/style.scss +++ b/core/static/core/style.scss @@ -93,6 +93,32 @@ a:not(.button) { } } +[aria-busy] { + --loading-size: 50px; + --loading-stroke: 5px; + --loading-duration: 1s; + position: relative; +} + +[aria-busy]:after { + content: ''; + position: absolute; + top: 50%; + left: 50%; + width: var(--loading-size); + height: var(--loading-size); + margin-top: calc(var(--loading-size) / 2 * -1); + margin-left: calc(var(--loading-size) / 2 * -1); + border: var(--loading-stroke) solid rgba(0, 0, 0, .15); + border-radius: 50%; + border-top-color: rgba(0, 0, 0, 0.5); + animation: rotate calc(var(--loading-duration)) linear infinite; +} + +@keyframes rotate { + 100% { transform: rotate(360deg); } +} + .ib { display: inline-block; padding: 1px; diff --git a/core/static/sas/album.scss b/core/static/sas/album.scss index 635821e3..e3c3527a 100644 --- a/core/static/sas/album.scss +++ b/core/static/sas/album.scss @@ -102,20 +102,10 @@ main { border-radius: 10px; } -.paginator { - display: flex; - justify-content: center; - gap: 10px; - width: -moz-fit-content; - width: fit-content; - background-color: rgba(0,0,0,.1); - border-radius: 10px; - padding: 10px; - margin: 10px 0 10px auto; -} - .photos, .albums { + margin: 20px; + min-height: 50px; // To contain the aria-busy loading wheel, even if empty box-sizing: border-box; display: flex; flex-direction: row; diff --git a/pedagogy/templates/pedagogy/guide.jinja b/pedagogy/templates/pedagogy/guide.jinja index a9941562..1aa713e4 100644 --- a/pedagogy/templates/pedagogy/guide.jinja +++ b/pedagogy/templates/pedagogy/guide.jinja @@ -96,7 +96,7 @@ {% endif %} - +