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

Add mobile navigation bar

This commit is contained in:
Karina Kwiatek 2021-08-06 00:36:02 +02:00
parent be1afe01e9
commit e213041d47
8 changed files with 85 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -81,6 +81,7 @@
"components/inbox-entry",
"components/jumbotron",
"components/locales",
"components/mobile-nav",
"components/notifications",
"components/profile",
"components/question",

2
app/assets/stylesheets/components/_buttons.scss
View File

@ -11,7 +11,7 @@
text-transform: uppercase;
text-decoration: none;
position: fixed;
bottom: 0px;
bottom: calc(#{$navbar-height} + env(safe-area-inset-bottom));
right: 0px;
margin-right: 7px;
margin-bottom: 7px;

9
app/assets/stylesheets/components/_mobile-nav.scss Normal file
View File

@ -0,0 +1,9 @@
#rs-mobile-nav {
padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
.navbar-nav {
flex-direction: row;
justify-content: space-between;
width: 100%;
}
}

7
app/assets/stylesheets/elements/_body.scss
View File

@ -3,5 +3,10 @@ body {
word-wrap: break-word;
color: RGB(var(--body-text));
background-color: var(--background);
padding-top: $navbar-height;
@include media-breakpoint-up('lg') {
padding-top: $navbar-height;
}
@include media-breakpoint-down('md') {
padding-bottom: $navbar-height;
}
}

21
app/views/navigation/_desktop.haml Normal file
View File

@ -0,0 +1,21 @@
%nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top.d-lg-block.d-none{ role: :navigation }
.container{ class: ios_web_app? ? 'ios-web-app' : '' }
%a.navbar-brand{ href: '/' }
%i.fa.fa-comments
= APP_CONFIG['site_name']
%ul.nav.navbar-nav.mr-auto
= nav_entry t('views.navigation.timeline'), root_path, icon: 'home'
= nav_entry t('views.navigation.inbox'), '/inbox', icon: 'inbox', badge: inbox_count
- if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
= nav_entry t('views.navigation.discover'), discover_path, icon: 'compass'
%ul.nav.navbar-nav
- if @user.present? && @user != current_user
%li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.list') }
%a.nav-link{ href: '#', data: { target: '#modal-list-memberships', toggle: :modal } }
%i.fa.fa-list.hidden-xs
%span.d-none.d-sm-inline.d-md-none= t('views.actions.list')
= render 'navigation/main/notifications'
%li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.ask_question') }
%a.nav-link{ href: '#', name: 'toggle-all-ask', data: { target: '#modal-ask-followers', toggle: :modal } }
%i.fa.fa-pencil-square-o
= render 'navigation/main/profile'

25
app/views/navigation/_main.haml
View File

@ -1,26 +1,5 @@
%nav.navbar.navbar-themed.navbar-expand-lg.bg-primary.fixed-top{ role: :navigation }
.container{ class: ios_web_app? ? 'ios-web-app' : '' }
%a.navbar-brand{ href: '/' }= APP_CONFIG['site_name']
%button.navbar-toggler{ data: { target: '#j2-main-navbar-collapse', toggle: :collapse }, type: :button }
%span.sr-only Toggle navigation
%span.navbar-toggler-icon
.collapse.navbar-collapse#j2-main-navbar-collapse
%ul.nav.navbar-nav.mr-auto
= nav_entry t('views.navigation.timeline'), root_path
= nav_entry t('views.navigation.inbox'), '/inbox', badge: inbox_count
- if APP_CONFIG.dig(:features, :discover, :enabled) || current_user.mod?
= nav_entry t('views.navigation.discover'), discover_path
%ul.nav.navbar-nav
- if @user.present? && @user != current_user
%li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.list') }
%a.nav-link{ href: '#', data: { target: '#modal-list-memberships', toggle: :modal } }
%i.fa.fa-list.hidden-xs
%span.d-none.d-sm-inline.d-md-none= t('views.actions.list')
= render 'navigation/main/notifications'
%li.nav-item.d-none.d-sm-block{ data: { toggle: 'tooltip', placement: 'bottom' }, title: t('views.actions.ask_question') }
%a.nav-link{ href: '#', name: 'toggle-all-ask', data: { target: '#modal-ask-followers', toggle: :modal } }
%i.fa.fa-pencil-square-o
= render 'navigation/main/profile'
= render 'navigation/desktop'
= render 'navigation/mobile'
= render 'modal/ask'
%button.btn.btn-primary.btn-fab.d-block.d-sm-none{ data: { target: '#modal-ask-followers', toggle: :modal }, type: 'button' }

14
app/views/navigation/_mobile.haml Normal file
View File

@ -0,0 +1,14 @@
%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'
= 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) }

31
app/views/navigation/mobile/_profile.haml Normal file
View File

@ -0,0 +1,31 @@
.dropdown-menu
%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
= t('views.navigation.show')
%a.dropdown-item{ href: edit_user_registration_path }
%i.fa.fa-fw.fa-cog
= t('views.navigation.settings')
.dropdown-divider
- if current_user.has_role?(:administrator)
%a.dropdown-item{ href: rails_admin_path }
%i.fa.fa-fw.fa-cogs
= t('views.navigation.admin')
%a.dropdown-item{ href: sidekiq_web_path }
%i.fa.fa-fw.fa-bar-chart
= t('views.navigation.sidekiq')
%a.dropdown-item{ href: pghero_path }
%i.fa.fa-fw.fa-database
Database Monitor
%a.dropdown-item{ href: announcement_index_path }
%i.fa.fa-fw.fa-info
Announcements
.dropdown-divider
- if current_user.mod?
%a.dropdown-item{ href: moderation_path }
%i.fa.fa-fw.fa-gavel
= t('views.navigation.moderation')
.dropdown-divider
%a.dropdown-item{ href: destroy_user_session_path, data: { method: :delete } }
%i.fa.fa-fw.fa-sign-out
= t 'views.sessions.destroy'