Lay out work package view using CSS flexible boxes

This resolves various issues with scrolling, creating 2-3 main
scrollable areas: the main menu, work packages list and, when open,
the details pane.

User Story # 14811

Signed-off-by: Alex Coles <alex@alexbcoles.com>
pull/1768/head
Alex Coles 10 years ago
parent eced1ed97d
commit 58219b1e4c
  1. 41
      app/assets/stylesheets/content/_work_packages.sass
  2. 9
      app/assets/stylesheets/layout/_base.sass
  3. 12
      app/assets/stylesheets/layout/_split_view.sass
  4. 2
      public/templates/work_packages.html
  5. 2
      public/templates/work_packages.list.html

@ -29,21 +29,48 @@
@import content/forms
@import layout/split_view
// HACK: workaround to ensure correct height applied to child elements
#content > div[ui-view],
#work-packages-index
height: 100%
.work-packages--page-container
+display(flex)
+flex-direction(column)
height: 100%
> .toolbar-container
// not flex-item
> .work-packages--filters-optional-container
// not flex-item
height: auto
> .work-packages--split-view
+flex-shrink(2)
+flex-basis(100%)
.work-packages--split-view
@extend .split-view
+display(flex)
width: 100%
.work-packages--list
@extend %panel
.work-packages--list-scroll-area
+flex-basis(100%)
overflow: auto
position: relative
height: 1000px
.work-packages--details
@extend %panel
padding: 0 1em 1em
border-left: 4px solid #eee
overflow: auto
@media only screen and (max-width: 1280px)
display: none
// li[feature-flag=detailsView]
// display: none
@media only screen and (min-width: 1281px)
width: 480px
@media only screen and (min-width: 1440px)
width: 580px
div
.report-category-actions

@ -88,8 +88,13 @@ h4, .wiki h3
overflow: hidden
#content
position: absolute
height: 100%
position: absolute
box-sizing: border-box
width: calc(100% - #{$main_menu_width})
height: calc(100% - 40px)
&.hidden-navigation
width: calc(100% - #{$main_menu_folded_width})
#content
@include default-transition

@ -299,15 +299,3 @@ i
textarea
width: 100%
resize: none
@media only screen and (max-width: 1280px)
.split-view .work-packages--details, .work-packages--split-view .work-packages--details
display: none
li[feature-flag=detailsView]
display: none
@media only screen and (min-width: 1281px)
.split-view .work-packages--details, .work-packages--split-view .work-packages--details
width: 480px
@media only screen and (min-width: 1440px)
.split-view .work-packages--details, .work-packages--split-view .work-packages--details
width: 580px

@ -1,5 +1,5 @@
<div id="work-packages-index">
<div ui-view></div>
<div ui-view class="work-packages--page-container"></div>
</div>

@ -86,7 +86,7 @@
</ul>
</div>
<div ng-show="showFiltersOptions">
<div class="work-packages--filters-optional-container" ng-show="showFiltersOptions">
<div query-form id="query_form_content" class="hide-when-print">
<query-filters></query-filters>
</div>

Loading…
Cancel
Save