diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index c9879935..ae985778 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -81,6 +81,7 @@ "components/inbox-entry", "components/jumbotron", "components/locales", +"components/mobile-nav", "components/notifications", "components/profile", "components/question", diff --git a/app/assets/stylesheets/components/_buttons.scss b/app/assets/stylesheets/components/_buttons.scss index 142b73fb..e025e64b 100644 --- a/app/assets/stylesheets/components/_buttons.scss +++ b/app/assets/stylesheets/components/_buttons.scss @@ -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; diff --git a/app/assets/stylesheets/components/_mobile-nav.scss b/app/assets/stylesheets/components/_mobile-nav.scss new file mode 100644 index 00000000..422a8c75 --- /dev/null +++ b/app/assets/stylesheets/components/_mobile-nav.scss @@ -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%; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/elements/_body.scss b/app/assets/stylesheets/elements/_body.scss index 92aa0578..8e4cfadb 100644 --- a/app/assets/stylesheets/elements/_body.scss +++ b/app/assets/stylesheets/elements/_body.scss @@ -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; + } } \ No newline at end of file diff --git a/app/views/navigation/_desktop.haml b/app/views/navigation/_desktop.haml new file mode 100644 index 00000000..731a94e3 --- /dev/null +++ b/app/views/navigation/_desktop.haml @@ -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' \ No newline at end of file diff --git a/app/views/navigation/_main.haml b/app/views/navigation/_main.haml index c08b1df9..3d6398fd 100644 --- a/app/views/navigation/_main.haml +++ b/app/views/navigation/_main.haml @@ -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' } diff --git a/app/views/navigation/_mobile.haml b/app/views/navigation/_mobile.haml new file mode 100644 index 00000000..4cae1e57 --- /dev/null +++ b/app/views/navigation/_mobile.haml @@ -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) } \ No newline at end of file diff --git a/app/views/navigation/mobile/_profile.haml b/app/views/navigation/mobile/_profile.haml new file mode 100644 index 00000000..094a3d07 --- /dev/null +++ b/app/views/navigation/mobile/_profile.haml @@ -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'