From 2b39888679aad4456724a275de4c79e9c8eafe19 Mon Sep 17 00:00:00 2001 From: Andreas Nedbal Date: Sun, 19 Apr 2020 23:03:34 +0200 Subject: [PATCH] Adjust base navigations Bootstrap 4 --- app/helpers/application_helper.rb | 2 +- app/views/layouts/_header.html.haml | 37 ++++++------------- .../moderation/_moderation_nav.html.haml | 13 +++---- app/views/static/_mobile_nav.html.haml | 13 +++---- 4 files changed, 23 insertions(+), 42 deletions(-) diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index dd1c7651..4997da15 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -18,7 +18,7 @@ module ApplicationHelper }"))}" end - content_tag(:li, link_to(body.html_safe, path), class: ("#{'active ' if current_page? path}#{options[:class]}")) + content_tag(:li, link_to(body.html_safe, path, class: "nav-link"), class: ("#{'nav-item active ' if current_page? path}#{options[:class]}")) end def list_group_item(body, path, options = {}) diff --git a/app/views/layouts/_header.html.haml b/app/views/layouts/_header.html.haml index fc88d814..bbd1d14d 100644 --- a/app/views/layouts/_header.html.haml +++ b/app/views/layouts/_header.html.haml @@ -1,38 +1,25 @@ -%nav.navbar.navbar-inverse.navbar-fixed-top{role: "navigation"} +%nav.navbar.navbar-light.navbar-expand-lg.bg-primary.fixed-top{role: "navigation"} .container{class: ios_web_app? ? "ios-web-app" : ''} - .navbar-header - %button.navbar-toggle{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"} - %span.sr-only Toggle navigation - - if user_signed_in? - - unless inbox_count.nil? or notification_count.nil? - %span.icon-bar.navbar--inbox-animation - %span.icon-bar.navbar--inbox-animation - %span.icon-bar.navbar--inbox-animation - - else - %span.icon-bar - %span.icon-bar - %span.icon-bar - - else - %span.icon-bar - %span.icon-bar - %span.icon-bar - %a.navbar-brand{href: "/"}= APP_CONFIG['site_name'] + %a.navbar-brand{href: "/"}= APP_CONFIG['site_name'] + %button.navbar-toggler{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"} + %span.sr-only Toggle navigation + %span.navbar-toggler-icon #j2-main-navbar-collapse.collapse.navbar-collapse - if user_signed_in? - %ul.nav.navbar-nav + %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.navbar-right + %ul.nav.navbar-nav - unless @user.nil? - unless @user == current_user - %li.hidden-xs{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.group')} - %a{href: '#', data: { target: "#modal-group-memberships", toggle: :modal }} + %li.nav-item.hidden-xs{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.group')} + %a.nav-link{href: '#', data: { target: "#modal-group-memberships", toggle: :modal }} %i.fa.fa-users.hidden-xs - %span.visible-xs= t('views.actions.group') + %span.d-none.d-sm-inline.d-md-none= t('views.actions.group') = render "layouts/notifications" - %li.hidden-xs{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.ask_question')} + %li.nav-item.hidden-xs{"data-toggle" => "tooltip", "data-placement" => "bottom", title: t('views.actions.ask_question')} .btn.btn-link.navbar-btn{name: "toggle-all-ask", "data-target" => "#modal-ask-followers", "data-toggle" => "modal", :type => "button"} %i.fa.fa-pencil-square-o = render "layouts/profile" @@ -43,5 +30,5 @@ - if user_signed_in? = render 'shared/modal_ask_followers' - %button.btn.btn-primary.btn-fab.visible-xs{"data-target" => "#modal-ask-followers", "data-toggle" => "modal", :type => "button"} + %button.btn.btn-primary.btn-fab.d-block.d-sm-none{"data-target" => "#modal-ask-followers", "data-toggle" => "modal", :type => "button"} %i.fa.fa-pencil-square-o diff --git a/app/views/moderation/_moderation_nav.html.haml b/app/views/moderation/_moderation_nav.html.haml index 434c725a..d214c66a 100644 --- a/app/views/moderation/_moderation_nav.html.haml +++ b/app/views/moderation/_moderation_nav.html.haml @@ -1,12 +1,9 @@ -%nav.navbar.navbar-default.navbar-static-top.j2-navbar.visible-xs{role: "navigation"} +%nav.navbar.navbar-default.navbar-static-top.j2-navbar.d-flex.d-sm-none{role: "navigation"} .container - .navbar-header - %button.navbar-toggle{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"} - %span.sr-only Toggle navigation - %span.icon-bar - %span.icon-bar - %span.icon-bar - %a.navbar-brand{href: moderation_path} Moderation + %a.navbar-brand{href: moderation_path} Moderation + %button.navbar-toggler{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"} + %span.sr-only Toggle navigation + %span.navbar-toggler-icon #j2-tl-navbar-collapse.collapse.navbar-collapse %ul.nav.navbar-nav = nav_entry t('views.moderation.tabs.all'), moderation_path diff --git a/app/views/static/_mobile_nav.html.haml b/app/views/static/_mobile_nav.html.haml index 24304d95..379ca143 100644 --- a/app/views/static/_mobile_nav.html.haml +++ b/app/views/static/_mobile_nav.html.haml @@ -1,12 +1,9 @@ -%nav.navbar.navbar-default.navbar-static-top.j2-navbar.visible-xs{role: "navigation"} +%nav.navbar.navbar-light.navbar-static-top.j2-navbar.d-flex.d-sm-none.bg-default{role: "navigation"} .container - .navbar-header - %button.navbar-toggle{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"} - %span.sr-only Toggle navigation - %span.icon-bar - %span.icon-bar - %span.icon-bar - %a.navbar-brand{href: "/"} Timelines + %a.navbar-brand{href: "/"} Timelines + %button.navbar-toggler{"data-target" => "#j2-tl-navbar-collapse", "data-toggle" => "collapse", type: "button"} + %span.sr-only Toggle navigation + %span.navbar-toggler-icon #j2-tl-navbar-collapse.collapse.navbar-collapse %ul.nav.navbar-nav = nav_entry "Public", public_timeline_path