diff --git a/assets/less/profile/header.less b/assets/less/profile/header.less index 3939ae11..4e610f49 100644 --- a/assets/less/profile/header.less +++ b/assets/less/profile/header.less @@ -200,11 +200,6 @@ &--link { cursor: pointer; - - &:hover, - &:focus { - border-bottom: 2px solid var(--accent-colour); - } } @media (max-width: @site-mobile-width) { @@ -212,6 +207,13 @@ text-align: right; } } + + &--link:hover, + &--link:focus, + &--link:active, + &--active { + border-bottom: 2px solid var(--accent-colour); + } } &__username { diff --git a/templates/profile/_layout/header.twig b/templates/profile/_layout/header.twig index 9457594a..406c4415 100644 --- a/templates/profile/_layout/header.twig +++ b/templates/profile/_layout/header.twig @@ -88,11 +88,12 @@ {% if stat.value|default(false) %} {% set is_date = stat.is_date|default(false) %} {% set is_url = stat.url is defined %} + {% set active_class = stat.active|default(false) ? ' profile__header__stat--active' : '' %} {% if is_url %} - + {% else %} -
+
{% endif %}
{{ stat.title }} diff --git a/templates/profile/master.twig b/templates/profile/master.twig index 2fe8461b..ec5fb59c 100644 --- a/templates/profile/master.twig +++ b/templates/profile/master.twig @@ -17,21 +17,25 @@ 'title': 'Following', 'value': profile.following_count, 'url': url('user-profile-following', {'user': profile.user_id}), + 'active': profile_mode == 'following', }, { 'title': 'Followers', 'value': profile.followers_count, 'url': url('user-profile-followers', {'user': profile.user_id}), + 'active': profile_mode == 'followers', }, { 'title': 'Topics', 'value': profile.forum_topic_count, 'url': url('user-profile-forum-topics', {'user': profile.user_id}), + 'active': profile_mode == 'forum-topics', }, { 'title': 'Posts', 'value': profile.forum_post_count, 'url': url('user-profile-forum-posts', {'user': profile.user_id}), + 'active': profile_mode == 'forum-posts', }, { 'title': 'Comments',