openproject/app/assets/stylesheets/layout/_work_package.sass

//-- copyright
// OpenProject is a project management system.
// Copyright (C) 2012-2017 the OpenProject Foundation (OPF)
//
// 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-2017 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 doc/COPYRIGHT.rdoc for more details.
//++

.controller-work_packages.action-index,
.controller-work_packages.action-show,
.controller-work_packages.full-create
  @extend %absolute-layout-mode

  .in_modal &
    #main
      top: 12px

#content
  // HACK: workaround to ensure correct height applied to child elements.
  // The dom looks like this:
  // flash (generated from rails - if it was generated when rendering the page)
  // div[ui-view] (main content we want to adjust the height for)
  // div style="clear:both;" (is pushed to overflow - of no relevance)
  //
  // This makes use of more specific rules overwriting less specific ones.
  // Per default, the height is always 100%
  & > div[ui-view]
    height: 100%

  //This can be deleted once the legcy WP view is gone
  #history
    border-bottom-color: rgb(221, 221, 221)
    border-bottom-style: solid
    border-bottom-width: 1px

  tr.work-package
    &.idnt-1 td.subject
      padding-left: 0.5em
    &.idnt-2 td.subject
      padding-left: 2em
    &.idnt-3 td.subject
      padding-left: 3.5em
    &.idnt-4 td.subject
      padding-left: 5em
    &.idnt-5 td.subject
      padding-left: 6.5em
    &.idnt-6 td.subject
      padding-left: 8em
    &.idnt-7 td.subject
      padding-left: 9.5em
    &.idnt-8 td.subject
      padding-left: 11em
    &.idnt-9 td.subject
      padding-left: 12.5em

// HACK: workaround to ensure correct height applied to child elements
#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
    min-height: 100px

  .work-packages--filters-optional-container
    flex-shrink: 0

.work-packages--split-view
  +display(flex)
  width: 100%
  height: 100%

.work-packages--list
  +flex(2)
  overflow-x: auto

.work-packages--list-table-area
  position: relative // required for loading indicator
  height: calc(100% - 55px)

  table
    tr
      &.work-package
        white-space: nowrap
        &.sum
          font-weight: bold
        td.subject
          white-space: normal
          text-align: left
        td.done_ratio table.progress
          margin-left: auto
          margin-right: auto
        &.idnt td.subject.icon-context
          display: inherit
        &.issue td.category
          white-space: normal

.work-packages--list-pagination-area
  width:    100%
  height:   55px
  padding:  3px 10px 0 0
  border-top: 1px solid #eee

.work-package--details-container
  position: relative
  padding:  0

// This rule is necessary to show the border only
// when its needed. Otherwise the border would be visible
// in the list view too.
.action-details .work-package--details-container,
.action-create .work-package--details-container,
  border-left: 4px solid #eee
  border-top: 4px solid #eee

.work-packages--details

  @media only screen and (max-width: 1280px)
    // display: none
    width: 480px

    @at-root
      .detailsViewMenuItem
        display: none
  @media only screen and (min-width: 1281px)
    width: 480px

  @media only screen and (min-width: 1440px)
    width: 580px

.work-packages--details-content
  position:   absolute
  top:        45px
  bottom:     55px
  width:      100%
  +allow-vertical-scrolling
  padding:    0 20px 0 20px
  &.-create-mode
    top: 0
    h2
      margin-top: 0.375em

.work-packages--create--title
  margin-bottom: 1em

.work-packages--details-toolbar
  position:   absolute
  bottom:     0
  height:     55px
  width:      100%
  background: #F8F8F8
  border:     1px solid #eeeeee
  padding:    0 1rem .5rem

  .button
    margin: .5rem .5rem 0 0

.work-packages--split-view
  .work-packages--details
    .work-packages--attachments
      margin-bottom: 25px

.work-package--new-state
  margin-bottom: 55px

  .work-packages--attachments
    margin-bottom: 25px

.work-packages--edit-actions
  @extend .work-packages--details-toolbar
  -webkit-transform: translate3d(0,0,0)

  .work-packages--left-panel &
    position: absolute
    width: calc(60% + 7px)
    left: -20px
    padding: 0 20px .5rem

  .in_modal &
    width: 100%

.edit-all-mode .work-packages--left-panel
  padding-bottom: 50px

.work-package--attachments--files
  margin-bottom: 1rem

  > h4
    margin-top: 5px

  .inplace-edit--read-value
    padding: 0.375rem 0.6rem

    i
      display: inline-block
      &:before
        vertical-align: middle
        padding-top: 0

  .work-package--attachments--filename
    display: inline-block
    line-height: 1.4
    // FF & IE
    word-break: break-all
    // Chrome & Safari
    word-break: break-word
    width: 90%
    vertical-align: middle

.work-package--attachments--drop-box
  border: 2px dashed $light-gray
  border-radius: 2px
  text-align: center
  padding: 20px
  cursor: pointer

.work-package--attachments--label
  color: $light-gray
  text-align: center

  i, p
    display: inline-block
    vertical-align: middle

  .icon-attachment:before
    color: $light-gray
    font-size: 3rem

  p
    color: $gray-dark
    font-size: 0.9rem
    font-weight: bold
    line-height: 1.4
    margin: 0 0 0 10px
    text-align: left

.work-package--attachments--hint
  font-size: 85%

.controller-work_packages
  #work-packages-query-selection
    .select2-container
      margin-left: 5px

  .icon-button, .sort-header, .action-icon
    cursor: pointer

  select, input
    &.to-validate.ng-dirty.ng-valid
      border: 1px solid Green
    &.to-validate.ng-dirty.ng-valid ~ span.ok
      color: green
      display: inline
    &.to-validate.ng-dirty.ng-invalid
      border: 1px solid Red
    &.to-validate.ng-dirty.ng-invalid ~ span.ok
      color: red
      display: inline

  .work_package
    tr
      line-height: $user-avatar-mini-width
  .avatar-mini
    float: left

  #attributes
    .form--field-container
      max-width: 400px

%flex-grow-shrink-zero
  flex-grow: 0
  flex-shrink: 0

//an workaround for ie10
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
  //IE10+ specific styles go here
  .work-package--attachments--filename
    width: rem-calc(354)
    display: inline-block

// Implement two column layout for WP full screen view
@media screen and (min-width: 90rem)
  .action-show .attributes-group,
  .full-create .attributes-group
    .-columns-2
      column-count: 2
      column-gap: 4rem

      .attributes-key-value
        -webkit-column-break-inside: avoid
        page-break-inside: avoid
        break-inside: avoid