openproject/app/views/layouts/base.html.erb

<%#-- copyright
OpenProject is an open source project management software.
Copyright (C) 2012-2021 the OpenProject GmbH

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License version 3.

OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
Copyright (C) 2006-2013 Jean-Philippe Lang
Copyright (C) 2010-2013 the ChiliProject Team

This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.

See COPYRIGHT and LICENSE files for more details.

++#%><!DOCTYPE html>
<% show_decoration = params["layout"].nil? %>
<html xmlns="http://www.w3.org/1999/xhtml"
      lang="<%= I18n.locale.to_s %>"
      xml:lang="<%= I18n.locale.to_s %>"
      class="<%= 'in_modal' unless show_decoration %>">
<head>
  <%= render partial: 'layouts/common_head' %>
  <!-- project specific tags -->
  <%= call_hook :view_layouts_base_html_head %>
  <!-- page specific tags -->
  <%= content_for(:header_tags) if content_for?(:header_tags) %>
  <meta name="current_menu_item" content="<%= current_menu_item %>"/>
</head>
<body class="<%= body_css_classes %> __overflowing_element_container __overflowing_body" data-relative_url_root="<%= root_path %>" data-overflowing-identifier=".__overflowing_body">
<%= render partial: 'warning_bar/warning_bar' %>
<noscript>
  <div class="top-shelf">
    <p>
      <span>
        <%= op_icon 'icon3 icon-warning' %>
        <strong><%= t(:noscript_heading) %></strong>
      </span>
      <%= t(:noscript_description) %>
      <a href="http://www.enable-javascript.com/" target="_blank"><%= t(:noscript_learn_more) %></a>
    </p>
  </div>
</noscript>
<notifications-container></notifications-container>
<% main_menu = render_main_menu(local_assigns.fetch(:menu_name, nil), @project) %>
<% side_displayed = content_for?(:sidebar) || content_for?(:main_menu) || !main_menu.blank? %>
<% initial_classes = initial_menu_classes(side_displayed, show_decoration) %>
<div id="wrapper" style="<%= initial_menu_styles %>" class="<%= initial_classes %>">
  <% if show_decoration %>
    <header class="op-app-header">
      <div class="op-app-header--start">
        <h1 class="hidden-for-sighted">
          <%= t(:label_top_menu) %>
        </h1>
        <main-menu-toggle></main-menu-toggle>
        <a href="" class="hidden-for-sighted skip-navigation-link"
           aria-label="<%= I18n.t('js.work_packages.jump_marks.label_content') %>">
          <%= I18n.t('js.work_packages.jump_marks.content') %>
        </a>
        <%= render_top_menu_left %>
      </div>
      <div class="op-app-header--center op-logo">
        <%= link_to(I18n.t('label_home'), fixed_home_url, class: 'op-logo--link') %>
      </div>
      <%= call_hook :view_layouts_base_top_menu %>
      <div class="op-app-header--end">
        <%= render partial: 'search/mini_form' %>
        <%= render_top_menu_right %>
      </div>
    </header>
  <% end %>
  <div id="main"
       class="<%= initial_classes %>">
    <% if (side_displayed && show_decoration) %>
      <div id="main-menu" class="main-menu">
        <h1 class="hidden-for-sighted"><%= t(:label_main_menu) %></h1>
        <main-menu-resizer></main-menu-resizer>
        <div id="menu-sidebar">
          <%= main_menu %>
          <%= content_for :main_menu %>
          <%= call_hook :view_layouts_base_main_menu %>
          <!-- Sidebar -->
          <div id="sidebar">
            <%= content_for :sidebar %>
            <%= call_hook :view_layouts_base_sidebar %>
          </div>
        </div>
      </div>
    <% end %>
    <div class="content-overlay"></div>
    <main id="content-wrapper" class="<%= initial_classes %>">
      <% if show_decoration %>
        <div id="breadcrumb" class="<%= initial_classes %><%= show_breadcrumb ? ' -show' : '' %>">
          <%= you_are_here_info %>
          <%= full_breadcrumb %>
          <%= call_hook :view_layouts_base_breadcrumb %>
        </div>
      <% end %>
      <%= render_flash_messages %>
      <% if show_onboarding_modal? %>
        <section data-augmented-model-wrapper
                 data-modal-initialize-now="true"
                 data-modal-class-name="onboarding-modal op-modal_autoheight -highlight">
          <%= render partial: '/onboarding/configuration_modal' %>
        </section>
      <% end %>
      <div id="content" class="<%= initial_classes %>">
        <h1 class="hidden-for-sighted"><%= t(:label_content) %></h1>
        <%= content_for :content_body %>
        <% unless local_assigns[:no_action_menu] %>
          <%= yield %>
        <% end %>
        <%= call_hook :view_layouts_base_content %>
      </div>
    </main>
  </div>
  <div id="ajax-indicator" style="display:none;"><span><%= t(:label_loading) %></span></div>
</div>
<%# Properly decides main menu expanded state and width before its drawn. Fixes flickering side menu
        where menu is first expanded, then being collapsed in angular. %>
<%= nonced_javascript_tag do %>
  // execute these lines to prevent flickering when page loads:

  (function($) {
    var wrapper = $('#wrapper');
    var savedMainMenuWidth = window.OpenProject.guardedLocalStorage("openProject-mainMenuWidth");
    var mainMenuCollapsed =  window.OpenProject.guardedLocalStorage("openProject-mainMenuCollapsed");

    if (window.innerWidth < 680) {
      // force hide on load for mobile
      $('.can-hide-navigation').addClass('hidden-navigation');
    }

    if (mainMenuCollapsed === 'true') {
      savedMainMenuWidth = 0;
    }

    if (savedMainMenuWidth || savedMainMenuWidth === 0) {
      document.documentElement.style.setProperty("--main-menu-width", savedMainMenuWidth + 'px');
    }

    wrapper.show();

    // Wrapper for page-specific JS from deprecated inline functions
    // no longer available with CSP.
    <%= content_for :additional_js_dom_ready %>
  }(jQuery));
<% end %>
<%= call_hook :view_layouts_base_body_bottom %>
</body>
</html>