From 1313ef6753879d685ae4af628cdab2ca9a48e9ad Mon Sep 17 00:00:00 2001
From: Agami4 <agami4@3061011.no-reply.drupal.org>
Date: Tue, 15 Nov 2022 12:47:14 +0000
Subject: [PATCH] Issue #3302397 by agami4: Improve ajax throbber position on
the follow button
---
assets/css/cards--sky.css | 13 +++++++++++++
assets/css/teaser.css | 14 ++++++++++++++
components/02-atoms/cards/cards--sky.scss | 11 +++++++++++
components/03-molecules/teaser/teaser.scss | 15 +++++++++++++++
4 files changed, 53 insertions(+)
diff --git a/assets/css/cards--sky.css b/assets/css/cards--sky.css
index 4c1fa332..3c6ac1da 100644
--- a/assets/css/cards--sky.css
+++ b/assets/css/cards--sky.css
@@ -226,10 +226,23 @@
.socialblue--sky .block-profile-statistic-block .follow-user-wrapper .flag-follow-user,
.socialblue--sky .block-group-statistic-block .follow-user-wrapper .flag-follow-user {
+ position: relative;
padding: 6px 12px;
font-weight: 400;
}
+.socialblue--sky .block-profile-statistic-block .follow-user-wrapper .flag-follow-user .js-flag-message,
+.socialblue--sky .block-group-statistic-block .follow-user-wrapper .flag-follow-user .js-flag-message {
+ display: none;
+}
+
+.socialblue--sky .block-profile-statistic-block .follow-user-wrapper .flag-follow-user .ajax-throbber,
+.socialblue--sky .block-group-statistic-block .follow-user-wrapper .flag-follow-user .ajax-throbber {
+ position: absolute;
+ top: 4px;
+ right: 10px;
+}
+
.socialblue--sky .block-profile-statistic-block .follow-user-wrapper .hero-footer__cta,
.socialblue--sky .block-group-statistic-block .follow-user-wrapper .hero-footer__cta {
padding-bottom: 0;
diff --git a/assets/css/teaser.css b/assets/css/teaser.css
index bc7cdfd1..55f49cfe 100644
--- a/assets/css/teaser.css
+++ b/assets/css/teaser.css
@@ -24,6 +24,20 @@
color: #343434;
}
+.teaser .flag-follow-user {
+ position: relative;
+}
+
+.teaser .flag-follow-user .js-flag-message {
+ display: none;
+}
+
+.teaser .flag-follow-user .ajax-throbber {
+ position: absolute;
+ top: 4px;
+ right: 10px;
+}
+
@media (min-width: 600px) {
.teaser__image {
border-top-left-radius: inherit;
diff --git a/components/02-atoms/cards/cards--sky.scss b/components/02-atoms/cards/cards--sky.scss
index 4f5f1cd6..4e6126a1 100644
--- a/components/02-atoms/cards/cards--sky.scss
+++ b/components/02-atoms/cards/cards--sky.scss
@@ -282,9 +282,20 @@
}
.flag-follow-user {
+ position: relative;
padding: 6px 12px;
font-weight: 400;
+ .js-flag-message {
+ display: none;
+ }
+
+ .ajax-throbber {
+ position: absolute;
+ top: 4px;
+ right: 10px;
+ }
+
@include for-phone-only {
margin-bottom: .5rem;
}
diff --git a/components/03-molecules/teaser/teaser.scss b/components/03-molecules/teaser/teaser.scss
index e6802f50..03be67d3 100644
--- a/components/03-molecules/teaser/teaser.scss
+++ b/components/03-molecules/teaser/teaser.scss
@@ -60,4 +60,19 @@
.badge__label {
color: $default-color;
}
+
+ // Follow user button.
+ .flag-follow-user {
+ position: relative;
+
+ .js-flag-message {
+ display: none;
+ }
+
+ .ajax-throbber {
+ position: absolute;
+ top: 4px;
+ right: 10px;
+ }
+ }
}
--
GitLab