Skip to content

Commit

Permalink
Merge pull request #14415 from opf/bug/51370-in-mobile-view-the-prime…
Browse files Browse the repository at this point in the history
…r-banner-does-not-take-the-full-width

[51370] In mobile view, the primer banner does not take the full width
  • Loading branch information
oliverguenther authored Dec 14, 2023
2 parents 8c3196d + 9d3b73d commit ab98356
Show file tree
Hide file tree
Showing 11 changed files with 48 additions and 107 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
.op-back-button
padding: 0
line-height: 32px
margin: 0 1rem 0 0
margin: 0
width: 75px
height: 34px

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@

.op-wp-breadcrumb
@include global-breadcrumb-styles
margin: 0
height: initial

&--ellipsed
Expand All @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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']"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/global_styles/layout/_base.sass
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
@include default-transition
@include styled-scroll-bar
margin: 0 0 0 0
padding: 0px
padding: 0
// Needed for Safari
height: calc(100vh - var(--header-height))
overflow-y: auto
Expand Down
6 changes: 1 addition & 5 deletions frontend/src/global_styles/layout/_base_mobile.sass
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,8 @@
min-height: calc(100vh - var(--header-height))
// ------------------- END CHANGED SCROLL BEHAVIOR
#content-wrapper
padding: 15px

#content
padding: 0
padding: 10px 15px

#main
grid-template-columns: auto
Expand All @@ -87,4 +84,3 @@
@media screen and (max-width: $breakpoint-lg) and (min-width: $breakpoint-sm)
.hidden-for-tablet-and-small-laptops
display: none !important

6 changes: 4 additions & 2 deletions frontend/src/global_styles/layout/_toolbar.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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
Expand Down
2 changes: 0 additions & 2 deletions frontend/src/global_styles/layout/_toolbar_mobile.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
55 changes: 2 additions & 53 deletions frontend/src/global_styles/layout/work_packages/_full_view.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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
Expand All @@ -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
22 changes: 6 additions & 16 deletions frontend/src/global_styles/layout/work_packages/_mobile.sass
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,11 @@

#main
#content-wrapper
padding: 15px
&.nomenus
top: 0
padding: 0
width: 100%
margin-left: 0


.work-packages--show-view
ul#toolbar-items li .wp-create-button .dropdown
left: 0 !important
Expand Down Expand Up @@ -102,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
Expand All @@ -129,9 +120,8 @@

.router--work-packages-partitioned-split-view
// Ensure the WP cards can span the complete width on mobile
#content-wrapper
#content
padding: 15px 0 !important

.toolbar-container
margin-left: 15px
padding-left: 0px !important
3 changes: 0 additions & 3 deletions frontend/src/global_styles/layout/work_packages/_print.sass
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit ab98356

Please sign in to comment.