FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show mobile nav bar badges as pills

This commit is contained in:
Karina Kwiatek 2021-08-12 13:29:50 +02:00
parent da70238667
commit ec2332818c
4 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/stylesheets/application.scss
View File

@ -39,6 +39,7 @@
@import @import
"overrides/alerts", "overrides/alerts",
"overrides/badges",
"overrides/bootstrap-datetimepicker", "overrides/bootstrap-datetimepicker",
"overrides/buttons", "overrides/buttons",
"overrides/colors", "overrides/colors",

4
app/assets/stylesheets/components/_mobile-nav.scss
View File

@ -13,6 +13,10 @@
padding-top: 8px; padding-top: 8px;
font-size: 20px; font-size: 20px;
} }
.badge {
float: right;
}
} }
} }
} }

6
app/assets/stylesheets/overrides/_badges.scss Normal file
View File

@ -0,0 +1,6 @@
@each $color in $color-names {
.badge-#{$color} {
color: var(--#{$color});
background-color: RGB(var(--#{$color}-text));
}
}

4
app/views/navigation/_mobile.haml
View File

@ -7,7 +7,9 @@
= 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, icon: 'inbox', icon_only: true
- if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod? - 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.discover'), discover_path, icon: 'compass', icon_only: true
= nav_entry t('views.navigation.notifications'), '/notifications', badge: notification_count, icon: notifications_icon, icon_only: true = nav_entry t('views.navigation.notifications'), '/notifications',
badge: notification_count, badge_color: 'light', badge_pill: true,
icon: notifications_icon, icon_only: true
%li.nav-item.profile--image-dropdown %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' } } %a.nav-link{ href: '#', data: { toggle: 'dropdown', target: '#rs-mobile-nav-profile' }, aria: { controls: 'rs-mobile-nav-profile', expanded: 'false' } }
%img.avatar-md.d-inline{ src: current_user.profile_picture.url(:small) } %img.avatar-md.d-inline{ src: current_user.profile_picture.url(:small) }