From 31a8bf6f00a941a3d64d9ab6128374f02f94ccdb Mon Sep 17 00:00:00 2001 From: Karina Kwiatek Date: Sat, 7 Aug 2021 19:18:01 +0200 Subject: [PATCH] Add mobile user menu --- app/assets/stylesheets/components/_mobile-nav.scss | 12 ++++++++++-- app/views/navigation/_mobile.haml | 10 ++++------ app/views/navigation/mobile/_profile.haml | 2 +- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss index 807ec3e9..f39b33d3 100644 --- a/app/assets/stylesheets/components/_mobile-nav.scss +++ b/app/assets/stylesheets/components/_mobile-nav.scss @@ -1,7 +1,7 @@ #rs-mobile-nav { padding-bottom: unquote('calc(env(safe-area-inset-bottom) + 4px)'); - .navbar-nav { + .navbar-icon-row { flex-direction: row; justify-content: space-between; width: 100%; @@ -15,4 +15,12 @@ } } } -} \ No newline at end of file +} + +#rs-mobile-nav-profile { + position: fixed; + bottom: unquote("calc(env(safe-area-inset-bottom) + #{$navbar-height + 2px})"); + right: unquote("calc(env(safe-area-inset-right) + 15px)"); + left: unset; + top: unset; +} diff --git a/app/views/navigation/_mobile.haml b/app/views/navigation/_mobile.haml index 4cae1e57..59d8b7fd 100644 --- a/app/views/navigation/_mobile.haml +++ b/app/views/navigation/_mobile.haml @@ -1,14 +1,12 @@ += render 'navigation/mobile/profile' %nav.navbar.navbar-themed.bg-primary.fixed-bottom.d-lg-none.d-block#rs-mobile-nav{ role: :navigation } .container{ class: ios_web_app? ? 'ios-web-app' : '' } - %ul.nav.navbar-nav.mr-auto - .collapse.navbar-collapse#j2-mobile-navbar-collapse - %ul.nav.navbar-nav - = render 'navigation/mobile/profile' + %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 - 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'), '#', icon: 'bell-o', icon_only: true %li.nav-item.profile--image-dropdown - %a{ data: { target: '#j2-mobile-navbar-collapse', toggle: :collapse } } - %img.avatar-md.d-inline{ src: current_user.profile_picture.url(:small) } \ No newline at end of file + %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) } diff --git a/app/views/navigation/mobile/_profile.haml b/app/views/navigation/mobile/_profile.haml index 094a3d07..f4177cde 100644 --- a/app/views/navigation/mobile/_profile.haml +++ b/app/views/navigation/mobile/_profile.haml @@ -1,4 +1,4 @@ -.dropdown-menu +.dropdown-menu#rs-mobile-nav-profile %h6.dropdown-header.d-none.d-sm-block= current_user.screen_name %a.dropdown-item{ href: show_user_profile_path(current_user.screen_name) } %i.fa.fa-fw.fa-user