Merge pull request #15849 from opf/implementation/55640-provide-rails…

…-based-100%-layout-with-optional-split-view

[55640] Provide rails-based 100% layout with optional split view

app/components/projects/table_component.rb

@@ -52,7 +52,7 @@ def table_id
     end
 
     def container_class
-      "generic-table--container_visible-overflow"
+      "generic-table--container_visible-overflow generic-table--container_height-100"
     end
 
     ##

app/views/layouts/base.html.erb

@@ -119,15 +119,6 @@ See COPYRIGHT and LICENSE files for more details.
     <main id="content-wrapper" class="<%= initial_classes %>">
       <%= render_primer_banner_message %>
       <%= render_streameable_primer_banner_message %>
-      <% if show_decoration %>
-        <div id="breadcrumb" class="<%= initial_classes %><%= show_breadcrumb ? ' -show' : '' %>">
-          <%= you_are_here_info %>
-          <div id="full_breadcrumbs">
-            <%= full_breadcrumbs %>
-          </div>
-          <%= call_hook :view_layouts_base_breadcrumb %>
-        </div>
-      <% end %>
       <%= render_flash_messages %>
       <% if show_onboarding_modal? %>
         <section data-augmented-model-wrapper
@@ -138,14 +129,35 @@ See COPYRIGHT and LICENSE files for more details.
       <% end %>
       <%= content_tag :div,
                       id: 'content',
-                      class: initial_classes,
+                      class: "#{initial_classes} #{'content--split' if content_for?(:content_body_right)}",
                       data: stimulus_content_data do %>
-        <h1 class="hidden-for-sighted"><%= t(:label_content) %></h1>
-        <%= content_for :content_body %>
-        <% unless local_assigns[:no_layout_yield] %>
-          <%= yield %>
+        <h1 class="hidden-for-sighted accessibility-helper"><%= t(:label_content) %></h1>
+        <% if content_for?(:content_header) %>
+          <div id="content-header">
+            <%= content_for :content_header %>
+          </div>
+        <% end %>
+
+        <div id="content-body">
+          <% if show_decoration %>
+            <div id="breadcrumb" class="<%= show_breadcrumb ? ' -show' : '' %>">
+              <%= you_are_here_info %>
+              <div id="full_breadcrumbs">
+                <%= full_breadcrumbs %>
+              </div>
+              <%= call_hook :view_layouts_base_breadcrumb %>
+            </div>
+          <% end %>
+          <%= content_for :content_body %>
+          <% unless local_assigns[:no_layout_yield] %>
+            <%= yield %>
+          <% end %>
+        </div>
+        <% if content_for?(:content_body_right) %>
+          <div id="content-bodyRight">
+            <%= content_for :content_body_right %>
+          </div>
         <% end %>
-        <%= call_hook :view_layouts_base_content %>
       <% end %>
     </main>
   </div>

app/views/members/index.html.erb

@@ -28,9 +28,9 @@ See COPYRIGHT and LICENSE files for more details.
 ++#%>
 <% html_title t(:label_member_plural) -%>
 
-<div data-controller="members-form"
-     data-application-target="dynamic">
+<% content_controller "members-form", dynamic: true %>
 
+<% content_for :content_header do %>
   <%= render ::Members::IndexPageHeaderComponent.new(project: @project) %>
   <%= render ::Members::IndexSubHeaderComponent.new(project: @project, filter_options: @members_filter_options) %>
 
@@ -47,8 +47,8 @@ See COPYRIGHT and LICENSE files for more details.
       <%= link_to I18n.t('button_back'), :back, class: 'button' %>
     <% end %>
   </div>
+<% end %>
 
-  <div>
-    <%= render ::Members::TableComponent.new(rows: @members, **@members_table_options) %>
-  </div>
+<div>
+  <%= render ::Members::TableComponent.new(rows: @members, **@members_table_options) %>
 </div>

frontend/src/app/features/bim/ifc_models/pages/viewer/styles/generic.sass

@@ -12,21 +12,20 @@
 @import "tooltips"
 @import "pivot_point"
 
-// The IFC viewer shall fill the viewport to the bottom.
-// This is different to how we style #content else where.
 .controller-bim\/ifc_models\/ifc_viewer
   overflow: hidden
 
-  &.action-show
-    #content
-      height: 100%
+  // Do not remove this, without checking the BCF module.
+  // The container of the xeokit viewer needs a fixed height. Otherwise it will grow without end.
+  #content-body
+    height: calc(100vh - #{var(--header-height)})
 
-  // Override default behavior to let the viewer span the whole height
+  // Override default behavior to let the viewer be at the top of the table/cards
   @media only screen and (max-width: $breakpoint-sm)
     @include extended-content--right
     @include extended-content--left
     #content-wrapper
-      height: calc(100vh - 55px)
+      height: calc(100vh - #{var(--header-height)})
 
     .work-packages-partitioned-page--content-container
       flex-direction: column

frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass

@@ -2,7 +2,6 @@
 
 .op-wp-breadcrumb
   @include global-breadcrumb-styles
-  margin: 0
   height: initial
 
   &--ellipsed

frontend/src/assets/sass/backlogs/_master_backlog.sass

@@ -57,16 +57,6 @@
     margin: 0 0 10px 0
     width: 100%
 
-/*
- *this adds space at the bottom of the main content div to leave enough space
- *for the menu without cutting it even if the bottom backlog does not contain
- *any elements
- */
-
-.controller-rb_master_backlogs
-  .action-index #content
-    padding-bottom: 180px
-
 #rb
   #backlogs_container .backlog .header
     background-color: var(--bgColor-muted)
@@ -330,17 +320,5 @@
       float: right
       width: 10%
 
-/* In-place Story Editor */
-
-.controller-rb_master_backlogs.action-show
-  #main, #content, #rb #backlogs_container .backlog .stories
-    overflow: visible
-  div.calendar
-    z-index: 10000
-
 .backlog
   font-size: 0.9rem
-
-/* Hide the button text in the ui-dialog */
-.ui-dialog-titlebar-close
-  overflow: hidden

frontend/src/assets/sass/backlogs/_taskboard.sass

@@ -48,10 +48,6 @@
   white-space: nowrap
   text-overflow: ellipsis
 
-
-.controller-rb_taskboards.action-show #main
-  overflow: visible
-
 #rb .task
   color: #484848
   line-height: inherit
@@ -225,9 +221,6 @@
     background-color: none
     border: none
 
-.ui-dialog-titlebar-close
-  overflow: hidden
-
 .dark
   #task_editor label, .subject, .assigned_to_id, div
     color: #FFFFFF

frontend/src/global_styles/content/_grid.sass

@@ -9,7 +9,6 @@ $grid--widget-padding: 20px 20px 20px 20px
   display: grid
 
 body.widget-grid-layout
-  #content-wrapper,
   #content
     background-color: var(--grid-background-color)
 

frontend/src/global_styles/content/_journal.sass

@@ -26,9 +26,6 @@
 // See COPYRIGHT and LICENSE files for more details.
 //++
 
-#content #history
-  padding-bottom: 11px
-
 #history
   width: 700px
   margin:

frontend/src/global_styles/content/_table.sass

@@ -41,7 +41,7 @@ $input-elements: input, 'input.form--text-field', select, 'select.form--select',
 
 .generic-table--container
   position:     relative
-  height:       100%
+  height:       initial
   width:        100%
   overflow:
     x: hidden
@@ -53,6 +53,9 @@ $input-elements: input, 'input.form--text-field', select, 'select.form--select',
   &_visible-overflow
     overflow: visible
 
+  &_height-100
+    height: 100%
+
 .generic-table--results-container
   height:       100%
   overflow:

frontend/src/global_styles/content/modules/_boards.sass

@@ -2,6 +2,3 @@
 .router--boards-full-view
   @media only screen and (min-width: 680px)
     @include extended-content--left
-
-  #content
-    height: 100%

frontend/src/global_styles/content/modules/_index.sass

@@ -4,7 +4,6 @@
 @import 'avatars'
 @import 'bim'
 @import 'boards'
-@import 'calendar'
 @import 'costs'
 @import 'documents'
 @import '2fa'

frontend/src/global_styles/content/modules/_team_planner.sass

@@ -3,9 +3,6 @@
 $view-select-dropdown-width: 8rem
 
 .router--team-planner
-  #content
-    height: 100%
-
   &.router--work-packages-partitioned-split-view-details,
   &.router--work-packages-partitioned-split-view-new
     full-calendar.op-team-planner--calendar .fc-header-toolbar

frontend/src/global_styles/layout/_base.sass

@@ -38,7 +38,6 @@
   overflow: auto
 
   &.nomenus
-    padding-bottom: 0
     overflow: hidden
 
   &.nosidebar
@@ -56,29 +55,82 @@
   background-color: var(--body-background)
   position: relative
 
-  &.nosidebar
-    margin-left: 0
 
-  &.nomenus
-    margin:     0
-    padding:    0
+// ----------- BEGIN Content definition --------------
+
+// The content is structured as grid and should ideally look like this
+// --------------------------------------------------------
+// |                    content-header                   |
+// --------------------------------------------------------
+// |                                      |               |
+// |                                      |               |
+// |                                      |               |
+// |             content-body            |   content-     |
+// |                                      |   bodyRight   |
+// |                                      |               |
+// |                                      |               |
+// |                                      |               |
+// --------------------------------------------------------
+
+// This layout is designed to show the WP split screen on any rails page.
+// Because of that, there are three things to keep in mind
+//    1. The content-bodyRight is optional. If it is not shown, the content-body should fill the available space.
+//    2. The WP split screen requires a 100% layout, meaning that the content-bodyRight needs to be
+//       "glued" to the right side and the bottom of the screen without any additional paddings or margins.
+//    3. Not all pages already follow that desired structure. Older pages render all their content inside content-body.
+//       The design most cover that case in which the content-body needs to span the whole available height and width.
+
+// Because of those requirements, the #content element cannot take care of the paddings.
+// Instead the children elements have to do that themselves depending on which elements are present
+
+$top-space: 10px
+$right-space: 20px
+$bottom-space: 10px
+$left-space: 20px
 
 #content
-  padding: 10px 20px
+  display: grid
+  grid-template-columns: 1fr auto
+  grid-template-rows: auto 1fr
+  grid-template-areas: "header header" "body bodyRight"
+  padding: 0
   margin: 0
   width: 100%
+  height: 100%
+  overflow: auto
+  @include styled-scroll-bar
   z-index: 10
   background-color: var(--body-background)
 
-  &.api-docs
-    height: 100%
-    padding: 0
+  &.content--split
+    overflow: hidden
+
+#content-header
+  grid-area: header
+  padding-right: $right-space
+  padding-top: $top-space
+  padding-left: $left-space
+
+#content-body
+  grid-area: body
+  padding-bottom: $bottom-space
+  padding-left: $left-space
 
-.content-overlay
-  display: none
+  // Special rules for pages that still follow the old layout and render everything inside the content-body
+  .accessibility-helper ~ &
+    padding-top: $top-space
+  &:last-child
+    padding-right: $right-space
 
-.-draggable
-  cursor: grab
+  .content--split &
+    overflow: auto
+    @include styled-scroll-bar
+
+#content-bodyRight
+  grid-area: bodyRight
+  padding: 0
+  width: 580px
+  overflow: auto
+  @include styled-scroll-bar
 
-a
-  text-decoration: var(--link-text-decoration)
+// ----------- END Content definition --------------

frontend/src/global_styles/layout/_base_mobile.sass

@@ -44,7 +44,8 @@
 
   #wrapper,
   #content-wrapper,
-  #content
+  #content-body,
+  #content-bodyRight
     overflow: hidden
 
   #main
@@ -60,8 +61,13 @@
     min-height: calc(100vh - var(--header-height))
   // ------------------- END CHANGED SCROLL BEHAVIOR
 
-  #content
-    padding: 10px 15px
+  #content-body,
+  #content-header
+    padding-left: 15px
+    padding-right: 15px
+
+  #content-bodyRight
+    display: none
 
   #main
     grid-template-columns: auto

frontend/src/global_styles/layout/_breadcrumb.sass

@@ -29,8 +29,7 @@
 #breadcrumb
   @include global-breadcrumb-styles
   min-height: var(--breadcrumb-height)
-  padding: 10px 20px
-  padding-bottom: 0
+  padding: 0
 
   li
     white-space: nowrap

frontend/src/global_styles/layout/_main_menu.sass

@@ -400,3 +400,6 @@ $badge_offset: 4px
 #main-menu-toggle
   .icon-close
     display: none
+
+.content-overlay
+  display: none