diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss index 436bcb07..e95b65c3 100644 --- a/app/assets/stylesheets/components/_mobile-nav.scss +++ b/app/assets/stylesheets/components/_mobile-nav.scss @@ -19,7 +19,9 @@ } .badge { - float: right; + position: absolute; + top: 4px; + transform: translateX(16px); } } } diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 1e530e2e..1405f6af 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -23,11 +23,10 @@ module ApplicationHelper end end unless options[:badge].nil? - # TODO: make this prettier? - body << " #{ - content_tag(:span, options[:badge], class: ("badge#{ - " badge-#{options[:badge_color]}" unless options[:badge_color].nil? - }"))}" + badge_class = "badge" + badge_class << " badge-#{options[:badge_color]}" unless options[:badge_color].nil? + badge_class << " badge-pill" if options[:badge_pill] + body << " #{content_tag(:span, options[:badge], class: badge_class)}" end content_tag(:li, link_to(body.html_safe, path, class: "nav-link"), class: classes) diff --git a/app/views/navigation/_mobile.haml b/app/views/navigation/_mobile.haml index 5f36417d..5dd42539 100644 --- a/app/views/navigation/_mobile.haml +++ b/app/views/navigation/_mobile.haml @@ -4,11 +4,13 @@ .container{ class: ios_web_app? ? 'ios-web-app' : '' } %ul.nav.navbar-nav.navbar-icon-row = nav_entry t('views.navigation.timeline'), root_path, icon: 'home', icon_only: true - = nav_entry t('views.navigation.inbox'), '/inbox', badge: inbox_count, icon: 'inbox', icon_only: true + = nav_entry t('views.navigation.inbox'), '/inbox', + badge: inbox_count, badge_color: 'primary', badge_pill: true, + icon: 'inbox', icon_only: true - if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod? = nav_entry t('views.navigation.discover'), discover_path, icon: 'compass', icon_only: true = nav_entry t('views.navigation.notifications'), '/notifications', - badge: notification_count, badge_color: 'light', badge_pill: true, + badge: notification_count, badge_color: 'primary', badge_pill: true, icon: notifications_icon, icon_only: true %li.nav-item.profile--image-dropdown %a.nav-link{ href: '#', data: { toggle: 'dropdown', target: '#rs-mobile-nav-profile' }, aria: { controls: 'rs-mobile-nav-profile', expanded: 'false' } }