Instead of using an absolute positioning for the backButton on mobile…

…, a grid is applied which defines separate rules for mobile. Thus, (in combination with the padding behavior being unified in commit a00a77a) we can get rid of a lot of special rules for mobile.
opf · Dec 13, 2023 · 9d3b73d · 9d3b73d
1 parent a00a77a
commit 9d3b73d
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 96 deletions.
diff --git a/frontend/src/app/features/work-packages/components/back-routing/back-button.component.sass b/frontend/src/app/features/work-packages/components/back-routing/back-button.component.sass
@@ -3,7 +3,7 @@
 .op-back-button
   padding: 0
   line-height: 32px
-  margin: 0 1rem 0 0
+  margin: 0
   width: 75px
   height: 34px
 

diff --git a/frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass b/frontend/src/app/features/work-packages/components/wp-breadcrumb/wp-breadcrumb.sass
@@ -2,6 +2,7 @@
 
 .op-wp-breadcrumb
   @include global-breadcrumb-styles
+  margin: 0
   height: initial
 
   &--ellipsed
@@ -11,9 +12,6 @@
   &--active-parent-select
     width: 500px
 
-  @media screen and (max-width: $breakpoint-xl)
-    margin-top: 0
-
   ul.op-breadcrumb li wp-breadcrumb-parent
     white-space: initial
 

diff --git a/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.html b/frontend/src/app/features/work-packages/routing/wp-full-view/wp-full-view.html
@@ -2,23 +2,24 @@
      [resource]="workPackage"
      *ngIf="workPackage"
      class="work-packages--show-view">
-
-  <wp-breadcrumb [workPackage]="workPackage"></wp-breadcrumb>
-
   <div class="toolbar-container">
-    <div id="toolbar">
-      <div class="wp-show--header-container">
+    <div id="toolbar" class="wp-show--header-container">
+      <wp-breadcrumb
+        class="wp-show--header-container--breadcrumb"
+        [workPackage]="workPackage"
+      ></wp-breadcrumb>
 
-        <op-back-button
-          linkClass="work-packages-back-button op-back-button_mobile-limited-width"
-        >
-        </op-back-button>
+      <op-back-button
+        class="wp-show--header-container--back-button"
+        linkClass="work-packages-back-button op-back-button_mobile-limited-width"
+      >
+      </op-back-button>
 
-        <div class="subject-header">
-          <wp-subject></wp-subject>
-        </div>
+      <div class="subject-header wp-show--header-container--subject">
+        <wp-subject></wp-subject>
       </div>
-      <ul id="toolbar-items" class="toolbar-items hide-when-print">
+
+      <ul id="toolbar-items" class="toolbar-items hide-when-print wp-show--header-container--toolbar-items">
         <li class="toolbar-item hidden-for-tablet">
           <wp-create-button
             [allowed]="['work_package.addChild', 'work_package.copy']"

diff --git a/frontend/src/global_styles/content/work_packages/single_view/_single_view.sass b/frontend/src/global_styles/content/work_packages/single_view/_single_view.sass
@@ -35,16 +35,26 @@
 
 // -------------------- Header row --------------------
 .wp-show--header-container
-  display: flex
+  display: grid
+  grid-template-columns: auto 1fr auto
+  grid-template-rows: minmax(30px, auto) 1fr
+  grid-template-areas: "breadcrumb breadcrumb breadcrumb" "backButton subject toolbar"
+  align-items: center
+  grid-column-gap: 5px
+
+  &--breadcrumb
+    grid-area: breadcrumb
+    align-self: baseline
+
+  &--back-button
+    grid-area: backButton
 
-  .subject-header
-    flex-grow: 1
+  &--subject
+    grid-area: subject
 
-    .inline-edit--display-field
-      white-space: normal
-      overflow-wrap: anywhere
-      word-break: normal
-      line-height: normal
+  &--toolbar-items
+    grid-area: toolbar
+    margin-bottom: 0
 
 // Subject field
 .wp-new--subject-wrapper

diff --git a/frontend/src/global_styles/layout/_toolbar.sass b/frontend/src/global_styles/layout/_toolbar.sass
@@ -85,7 +85,7 @@ $nm-color-success-background: #d8fdd1
 .toolbar-items
   display: flex
   flex-wrap: wrap
-  margin: 0 -10px 0 0
+  margin: 0
   padding: 0
   justify-content: space-between
 
@@ -94,7 +94,9 @@ $nm-color-success-background: #d8fdd1
 
   .toolbar-item
     margin-right: 10px
-    margin-bottom: 5px
+
+    &:last-of-type
+      margin-right: 0
 
     // hide right margin for e.g., conditional buttons
     &.-no-spacing

diff --git a/frontend/src/global_styles/layout/_toolbar_mobile.sass b/frontend/src/global_styles/layout/_toolbar_mobile.sass
@@ -29,8 +29,6 @@
 @media screen and (max-width: $breakpoint-md)
   #content
     .toolbar-container
-      margin-top: 5px
-
       .title-container:not(editable-toolbar-title)
         margin-right: 10px
 

diff --git a/frontend/src/global_styles/layout/work_packages/_full_view.sass b/frontend/src/global_styles/layout/work_packages/_full_view.sass
@@ -29,41 +29,13 @@
 .router--work-packages-full-view:not(.router--work-packages-full-create)
   @include extended-content--bottom
   @include extended-content--right
-  @include extended-content--top
 
 .work-packages--show-view
   display: flex
   flex-direction: column
   height: inherit
 
-  #toolbar
-    display: flex
-    flex-wrap: wrap-reverse
-    justify-content: flex-end
-    @include clearfix
-
-  .toolbar-container
-    @include clearfix
-
-  ul#toolbar-items
-    margin-left: 10px
-    @include clearfix
-
-    li
-      .dropdown
-        top: 100% !important
-        right: 0px !important
-        left: auto !important
-
-        ul li
-          float: none
-
-  .subject-header
-    button
-      margin-right: 0
-
 .work-packages-full-view
-
   &--split-container
     display: flex
     flex-shrink: 8
@@ -158,34 +130,16 @@
     #toolbar-items
       margin-left: 0
 
-    .work-packages-back-button
-      // Move button in the current reverse order to front
-      position: absolute
-      top: 0
-      left: 0
-      z-index: 1
-
 #work-packages-index
   .op-uc-link_permalink
     display: none
 
 .work-packages--show-view
-  .wp-show--header-container
-    @media only screen and (max-width: $breakpoint-sm)
-      width: 100%
-    @include breakpoint(sm)
-      flex: 1 1 auto
-
   .subject-header
     .work-packages--subject-element,
     .work-packages--details--subject .inline-edit--field
       font-size: 20px
       font-weight: var(--base-text-weight-bold)
-      line-height: 34px
-
-    .work-packages--details--subject
-      .inline-edit--field
-        height: 34px
 
       // Style edit field to look like the display field.
       // Thus we avoid a visual jump when editing the subject.
@@ -195,9 +149,6 @@
         padding: 5px 0 5px 5px
         font-size: 20px
 
-  > .toolbar-container
-    margin: 10px 0 5px 0
-
 .work-packages--subject-type-row
   display: flex
   position: relative
@@ -206,11 +157,9 @@
 .work-packages--type-selector:not(.wp-new-top-row--element)
   .inline-edit--display-field
     padding-right: 5px !important
-
-  // Remove left padding from type
-  .inline-edit--display-field
+    // Remove left padding from type
     padding-left: 0 !important
 
-  @media only screen and (min-width: 679px)
+  @media only screen and (min-width: $breakpoint-sm)
     .inline-edit--container.-active
       width: 130px
diff --git a/frontend/src/global_styles/layout/work_packages/_mobile.sass b/frontend/src/global_styles/layout/work_packages/_mobile.sass
@@ -99,22 +99,16 @@
       padding: 8px 0 !important
       font-size: 1rem
 
-
 @media screen and (max-width: $breakpoint-sm)
   .router--work-packages-full-view
     #content
       position: relative
-    .work-packages--show-view
-      padding: 40px 0 0 0
-
-    #toolbar-items
-      position: absolute
-      top: 0
-      right: 0
-      justify-content: flex-end
 
-      .toolbar-item
-        flex-grow: 0
+    .wp-show--header-container
+      grid-template-columns: auto 1fr
+      grid-template-rows: auto auto 1fr
+      grid-template-areas: "backButton toolbar" "breadcrumb breadcrumb" "subject subject"
+      grid-row-gap: 0.5rem
 
     .work-packages-full-view--split-container
       border-top: none

diff --git a/frontend/src/global_styles/layout/work_packages/_print.sass b/frontend/src/global_styles/layout/work_packages/_print.sass
@@ -97,9 +97,6 @@
 
   // ------------------Only WP full screen view ------------------
   .router--work-packages-full-view
-    // Since there is no toolbar and WP-back button the header can span 100%
-    .wp-show--header-container
-      flex-basis: 100%
     .work-packages-full-view--split-right
       overflow: visible
       flex-basis: initial !important