Oliver Günther
8 years ago
parent
bd4c8c440d
commit
ec17d9e9e6
@ -1,308 +0,0 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 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-2013 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. |
||||
//++ |
||||
|
||||
body.controller-work_packages.action-show { |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
body.controller-work_packages { |
||||
#content { |
||||
padding-left: 15px; |
||||
padding-right: 15px; |
||||
} |
||||
} |
||||
|
||||
|
||||
.work-packages--show-view { |
||||
display: flex; |
||||
flex-direction: column; |
||||
height: inherit; |
||||
|
||||
#toolbar { |
||||
display: flex; |
||||
justify-content: flex-end; |
||||
flex-wrap: wrap-reverse; |
||||
@include clearfix; |
||||
} |
||||
|
||||
.toolbar-container { |
||||
@include clearfix; |
||||
margin-bottom: 10px; |
||||
} |
||||
|
||||
|
||||
ul#toolbar-items { |
||||
@include clearfix; |
||||
order: 2; |
||||
margin: 0 0 1rem 2rem; |
||||
|
||||
button { |
||||
margin-bottom: 0; |
||||
} |
||||
|
||||
li { |
||||
float: left; |
||||
position: relative; |
||||
|
||||
&.toolbar-item:first-of-type { |
||||
margin-left: 0; |
||||
} |
||||
|
||||
.dropdown { |
||||
top: 100% !important; |
||||
right: 0px !important; |
||||
left: auto !important; |
||||
margin-top: 0; |
||||
|
||||
ul li { |
||||
float: none; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.work-packages--split-view { |
||||
flex-shrink: 8; |
||||
border-top: 1px solid #ccc; |
||||
overflow: visible; |
||||
height: 100%; |
||||
// Important for Firefox to let 'flex-shrink' work correctly. |
||||
min-height: 0; |
||||
} |
||||
|
||||
.work-packages--left-panel { |
||||
border-right: 1px solid #ccc; |
||||
overflow-y: auto; |
||||
overflow-x: auto; |
||||
|
||||
// Don't cut border-left from editable description |
||||
width: calc(60% + 0.375rem); |
||||
margin-left: -0.375rem; |
||||
padding-left: 0.375rem; |
||||
|
||||
.work-packages--panel-inner { |
||||
padding: 5px 15px 20px 0px; |
||||
|
||||
// These styles were taken over from the details tab styling. |
||||
// Thus the header and the details tab can be aligned on the same line. |
||||
.attributes-group:first-of-type { |
||||
margin-top: 0px; |
||||
|
||||
.attributes-group--header-container { |
||||
padding-bottom: 2px; |
||||
|
||||
h3.attributes-group--header-text { |
||||
line-height: $work-package-details--tab-height - 10px; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
&.edit-all-mode { |
||||
.work-packages--left-panel { |
||||
height: calc(100% - 55px); |
||||
} |
||||
} |
||||
|
||||
.work-packages--right-panel { |
||||
min-width: 420px; |
||||
overflow-y: auto; |
||||
overflow-x: auto; |
||||
width: 40%; |
||||
|
||||
.work-packages--panel-inner { |
||||
padding: 2px 0 20px 15px; |
||||
} |
||||
} |
||||
|
||||
ul { |
||||
list-style-type: none; |
||||
margin: 0; |
||||
padding: 0; |
||||
|
||||
li { |
||||
margin: 0; |
||||
padding: 0; |
||||
|
||||
&.toolbar-item { |
||||
margin: 0 5px; |
||||
|
||||
&:last-child { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
button { |
||||
margin-right: 0; |
||||
} |
||||
} |
||||
|
||||
.work-package-details-activities-activity-contents { |
||||
ul { padding-left: 2em; } |
||||
} |
||||
|
||||
.activity-comment { |
||||
margin-top: 15px; |
||||
} |
||||
|
||||
.button.icon-edit.ng-hide { |
||||
display: block !important; |
||||
visibility: hidden; |
||||
} |
||||
} |
||||
|
||||
.nosidebar { |
||||
ul.subject-header { |
||||
width: 67%; |
||||
|
||||
li { |
||||
&.inline-edit { |
||||
width: 75%; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media only screen and (max-width: 1280px) { |
||||
.work-packages--details { |
||||
@at-root { |
||||
.detailsViewMenuItem { |
||||
display: block; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
@media only screen and (max-width: 78rem) { |
||||
.work-packages--show-view { |
||||
// Important for Safari |
||||
height: initial; |
||||
} |
||||
} |
||||
|
||||
@media only screen and (max-width: 679px) { |
||||
#toolbar { |
||||
#toolbar-items { |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
} |
||||
|
||||
#work-packages-index { |
||||
.wiki-anchor { |
||||
display: none; |
||||
} |
||||
} |
||||
|
||||
.work-packages--show-view { |
||||
.subject-header { |
||||
margin: 0; |
||||
padding: 0; |
||||
min-height: 50px; |
||||
width: initial; |
||||
align-self: center; |
||||
flex-grow: 1; |
||||
/* Leave space for the back button */ |
||||
max-width: calc(100% - 100px); |
||||
|
||||
|
||||
.wp-table--cell-span { |
||||
white-space: normal; |
||||
} |
||||
|
||||
li .inline-edit { width: 100%; } |
||||
|
||||
.inplace-edit--read-value { |
||||
margin: 0; |
||||
padding-top: 0; |
||||
padding-bottom: 0; |
||||
} |
||||
|
||||
.work-packages--subject-element, |
||||
.work-packages--details--subject .wp-inline-edit--field { |
||||
font-size: 1.5rem; |
||||
font-weight: bold; |
||||
line-height: 34px; |
||||
} |
||||
|
||||
.work-packages--subject-element .wp-inline-edit--field { |
||||
height: 1.75rem; |
||||
margin-top: 11px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.work-packages--split-view { |
||||
.work-packages--subject-element, |
||||
.work-packages--details--subject .wp-inline-edit--field { |
||||
font-size: 1.125rem; |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.work-packages--subject-element { |
||||
line-height: 24px; |
||||
|
||||
.wp-inline-edit--field { |
||||
height: 38px; |
||||
line-height: 36px; |
||||
padding: 0 0.375rem; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.work-packages--subject-type-row { |
||||
display: flex; |
||||
} |
||||
|
||||
.work-packages--type-selector { |
||||
.wp-table--cell-span { |
||||
padding-right: 5px !important; |
||||
} |
||||
|
||||
.wp-edit-field.-active { |
||||
margin-right: 80px !important; |
||||
width: 95% |
||||
} |
||||
.inplace-edit--read-value--value-span { |
||||
white-space: nowrap; |
||||
} |
||||
.inplace-edit--read-value--value-span:after { |
||||
content: ':'; |
||||
} |
||||
} |
||||
|
||||
.edit-all-mode { |
||||
.subject-header .work-packages--details--subject .inplace-edit--text-field { |
||||
padding-left: 0.375rem; |
||||
} |
||||
.work-packages--details--title, .work-packages--details--description { |
||||
margin-left: 0; |
||||
} |
||||
} |
||||
@ -1,358 +0,0 @@ |
||||
//-- 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 |
||||
col:last-of-type |
||||
width: 40px |
||||
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 |
||||
|
||||
// Workaround to make the toolbar menu accessible even on very small screens |
||||
@media screen and (max-height: 25em) |
||||
.controller-work_packages.action-show, |
||||
.controller-work_packages.action-details, |
||||
.controller-work_packages.action-index |
||||
#main |
||||
overflow: overlay |
||||
#content |
||||
overflow-y: auto |
||||
|
||||
// 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 |
||||
|
||||
// Print styles for WP table |
||||
@media print |
||||
.controller-work_packages.action-index, |
||||
.controller-work_packages.action-show, |
||||
.controller-work_packages.full-create |
||||
.wp-timeline--slider-wrapper |
||||
display: none !important |
||||
#content |
||||
margin: 0 |
||||
width: 100% |
||||
height: 100% |
||||
padding: 10px |
||||
#main |
||||
top: 0 |
||||
padding: 0 |
||||
border: none |
||||
.work-packages--list-table-area |
||||
height: 100% |
||||
.work-package-table--container, |
||||
.generic-table--results-container |
||||
overflow: hidden |
||||
.wp-timeline--scroll-wrapper |
||||
border-left-width: 3px |
||||
@ -0,0 +1,223 @@ |
||||
//-- 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 |
||||
|
||||
#content |
||||
padding: 0 |
||||
|
||||
.in_modal & |
||||
#main |
||||
top: 12px |
||||
|
||||
// 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% |
||||
.work-packages-page--ui-view |
||||
height: 100% |
||||
|
||||
.work-packages-list-view--container |
||||
// Set minor padding on left side |
||||
padding-left: 5px |
||||
// Flexbox for the toolbar, filters and work package table |
||||
display: flex |
||||
flex-direction: column |
||||
height: 100% |
||||
|
||||
> .toolbar-container |
||||
// not flex-item |
||||
padding-right: 5px |
||||
|
||||
.work-packages--filters-optional-container |
||||
// not flex-item |
||||
height: auto |
||||
flex-shrink: 0 |
||||
// Filters are hidden when not expanded |
||||
// When expanded, add some padding to the table |
||||
padding-bottom: 20px |
||||
|
||||
// Flex container for (table+timeline)|splitview |
||||
.work-packages-split-view--flex-container |
||||
flex: 1 1 auto |
||||
display: flex |
||||
|
||||
// Left part of the split view |
||||
// == Flex container for (table|timeline) |
||||
.work-packages-split-view--left |
||||
flex: 2 |
||||
display: flex |
||||
overflow: hidden |
||||
|
||||
// TABLE half |
||||
.work-packages-split-view--left-table |
||||
// Same flex as timeline |
||||
flex: 1 1 |
||||
// Show scrollbars for inner content |
||||
overflow: auto |
||||
// relative for loading indicator |
||||
position: relative |
||||
|
||||
// TIMELINE half |
||||
.work-packages-split-view--left-timeline |
||||
flex: 1 1 |
||||
overflow: auto |
||||
// Hidden by default |
||||
display: none |
||||
|
||||
.work-packages--edit-actions |
||||
.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 |
||||
|
||||
// Workaround to make the toolbar menu accessible even on very small screens |
||||
@media screen and (max-height: 25em) |
||||
.controller-work_packages.action-show, |
||||
.controller-work_packages.action-details, |
||||
.controller-work_packages.action-index |
||||
#main |
||||
overflow: overlay |
||||
#content |
||||
overflow-y: auto |
||||
|
||||
// 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 |
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,112 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 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-2013 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. |
||||
//++ |
||||
|
||||
// Right part of the split view |
||||
// Visible only in the details ui-view |
||||
body.action-details, |
||||
body.action-create |
||||
|
||||
.work-packages-split-view--right |
||||
overflow-x: hidden |
||||
overflow-y: auto |
||||
position: relative |
||||
border-left: 4px solid #eee |
||||
border-top: 4px solid #eee |
||||
padding: 0 10px |
||||
|
||||
.work-packages--details |
||||
height: 100% |
||||
position: relative |
||||
|
||||
@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--create--title |
||||
margin-bottom: 1em |
||||
|
||||
.work-packages--details-toolbar-container |
||||
position: absolute |
||||
bottom: 0 |
||||
height: 55px |
||||
width: 100% |
||||
background: #F8F8F8 |
||||
border: 1px solid #eeeeee |
||||
margin-left: -10px |
||||
padding: 0 1rem 10px |
||||
|
||||
.button |
||||
margin: .5rem .5rem 0 0 |
||||
|
||||
.work-packages--details-content |
||||
position: absolute |
||||
top: 80px |
||||
bottom: 55px |
||||
width: 100% |
||||
+allow-vertical-scrolling |
||||
padding: 0 |
||||
&.-create-mode |
||||
top: 0 |
||||
h2 |
||||
margin-top: 0.375em |
||||
|
||||
.work-packages--details |
||||
|
||||
// Fix height of subject row |
||||
.work-packages--subject-element, |
||||
.work-packages--details--subject .wp-inline-edit--field |
||||
font-size: 1.125rem |
||||
font-weight: bold |
||||
|
||||
.work-packages--subject-element |
||||
line-height: 24px |
||||
|
||||
.wp-inline-edit--field |
||||
height: 38px |
||||
line-height: 36px |
||||
padding: 0 0.375rem |
||||
|
||||
|
||||
.work-packages--details |
||||
.work-packages--attachments |
||||
margin-bottom: 25px |
||||
|
||||
.work-package--new-state |
||||
margin-bottom: 55px |
||||
|
||||
.work-packages--attachments |
||||
margin-bottom: 25px |
||||
@ -0,0 +1,225 @@ |
||||
//-- copyright |
||||
// OpenProject is a project management system. |
||||
// Copyright (C) 2012-2015 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-2013 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. |
||||
//++ |
||||
|
||||
body.controller-work_packages.action-show |
||||
overflow-x: auto |
||||
|
||||
.work-packages--show-view |
||||
display: flex |
||||
flex-direction: column |
||||
height: inherit |
||||
|
||||
#toolbar |
||||
display: flex |
||||
justify-content: flex-end |
||||
flex-wrap: wrap-reverse |
||||
@include clearfix |
||||
|
||||
.toolbar-container |
||||
@include clearfix |
||||
|
||||
ul#toolbar-items |
||||
@include clearfix |
||||
order: 2 |
||||
margin: 0 0 1rem 2rem |
||||
|
||||
button |
||||
margin-bottom: 0 |
||||
|
||||
|
||||
li |
||||
float: left |
||||
position: relative |
||||
|
||||
&.toolbar-item:first-of-type |
||||
margin-left: 0 |
||||
|
||||
|
||||
.dropdown |
||||
top: 100% !important |
||||
right: 0px !important |
||||
left: auto !important |
||||
margin-top: 0 |
||||
|
||||
ul li |
||||
float: none |
||||
.work-packages--split-view |
||||
flex-shrink: 8 |
||||
border-top: 1px solid #ccc |
||||
overflow: visible |
||||
height: 100% |
||||
// Important for Firefox to let 'flex-shrink' work correctly. |
||||
min-height: 0 |
||||
|
||||
.work-packages--left-panel |
||||
border-right: 1px solid #ccc |
||||
overflow-y: auto |
||||
overflow-x: auto |
||||
|
||||
// Don't cut border-left from editable description |
||||
width: calc(60% + 0.375rem) |
||||
margin-left: -0.375rem |
||||
padding-left: 0.375rem |
||||
|
||||
.work-packages--panel-inner |
||||
padding: 5px 15px 20px 0px |
||||
|
||||
// These styles were taken over from the details tab styling. |
||||
// Thus the header and the details tab can be aligned on the same line. |
||||
.attributes-group:first-of-type |
||||
margin-top: 0px |
||||
|
||||
.attributes-group--header-container |
||||
padding-bottom: 2px |
||||
|
||||
h3.attributes-group--header-text |
||||
line-height: $work-package-details--tab-height - 10px |
||||
&.edit-all-mode |
||||
.work-packages--left-panel |
||||
height: calc(100% - 55px) |
||||
|
||||
.work-packages--right-panel |
||||
min-width: 420px |
||||
overflow-y: auto |
||||
overflow-x: auto |
||||
width: 40% |
||||
|
||||
.work-packages--panel-inner |
||||
padding: 20px 0px 0px 15px |
||||
|
||||
ul |
||||
list-style-type: none |
||||
padding: 0 |
||||
|
||||
li |
||||
margin: 0 |
||||
padding: 0 |
||||
|
||||
&.toolbar-item |
||||
margin: 0 5px |
||||
|
||||
&:last-child |
||||
margin-right: 0 |
||||
button |
||||
margin-right: 0 |
||||
|
||||
.work-package-details-activities-activity-contents ul |
||||
padding-left: 2em |
||||
|
||||
.activity-comment |
||||
margin-top: 15px |
||||
|
||||
.button.icon-edit.ng-hide |
||||
display: block !important |
||||
visibility: hidden |
||||
|
||||
.nosidebar |
||||
ul.subject-header |
||||
width: 67% |
||||
|
||||
li |
||||
&.inline-edit |
||||
width: 75% |
||||
|
||||
@media only screen and (max-width: 1280px) |
||||
.work-packages--details |
||||
@at-root |
||||
.detailsViewMenuItem |
||||
display: block |
||||
|
||||
@media only screen and (max-width: 78rem) |
||||
.work-packages--show-view |
||||
// Important for Safari |
||||
height: initial |
||||
|
||||
@media only screen and (max-width: 679px) |
||||
#toolbar |
||||
#toolbar-items |
||||
margin-left: 0 |
||||
|
||||
#work-packages-index |
||||
.wiki-anchor |
||||
display: none |
||||
|
||||
.work-packages--show-view |
||||
.subject-header |
||||
margin: 0 |
||||
padding: 0 |
||||
min-height: 50px |
||||
width: initial |
||||
align-self: center |
||||
flex-grow: 1 |
||||
/* Leave space for the back button */ |
||||
max-width: calc(100% - 100px) |
||||
|
||||
.wp-table--cell-span |
||||
white-space: normal |
||||
|
||||
li.inline-edit |
||||
width: 100% |
||||
|
||||
.inplace-edit--read-value |
||||
margin: 0 |
||||
padding-top: 0 |
||||
padding-bottom: 0 |
||||
|
||||
.work-packages--subject-element, |
||||
.work-packages--details--subject .wp-inline-edit--field |
||||
font-size: 20px |
||||
font-weight: bold |
||||
line-height: 34px |
||||
|
||||
.work-packages--subject-element .wp-inline-edit--field |
||||
height: 1.75rem |
||||
margin-top: 11px |
||||
|
||||
.work-packages--subject-type-row |
||||
display: flex |
||||
|
||||
.work-packages--type-selector |
||||
.wp-table--cell-span |
||||
padding-right: 5px !important |
||||
|
||||
.wp-edit-field.-active |
||||
margin-right: 80px !important |
||||
width: 95% |
||||
|
||||
.inplace-edit--read-value--value-span |
||||
white-space: nowrap |
||||
|
||||
.inplace-edit--read-value--value-span:after |
||||
content: ':' |
||||
|
||||
.edit-all-mode |
||||
.subject-header .work-packages--details--subject .inplace-edit--text-field |
||||
padding-left: 0.375rem |
||||
|
||||
.work-packages--details--title, .work-packages--details--description |
||||
margin-left: 0 |
||||
@ -1,8 +1,7 @@ |
||||
# OpenProject supported browsers |
||||
# https://www.openproject.org/systemrequirements/ |
||||
# |
||||
> 5% |
||||
last 2 Chrome versions |
||||
last 2 Safari versions |
||||
Firefox >= 31 |
||||
IE >= 10 |
||||
last 2 Edge versions |
||||
Firefox >= 45 |
||||
|
||||
@ -1,3 +1 @@ |
||||
<div id="work-packages-index"> |
||||
<div ui-view wp-timeline-container class="work-packages--page-container"></div> |
||||
</div> |
||||
<div ui-view wp-timeline-container class="work-packages-page--ui-view"></div> |
||||
|
||||
@ -1,96 +1,75 @@ |
||||
<div class="generic-table--container work-package-table--container" |
||||
ng-class="{ '-with-footer': displaySums }"> |
||||
<div class="generic-table--results-container" detect-dimension-changes> |
||||
<table class="keyboard-accessible-list generic-table work-package-table"> |
||||
<colgroup> |
||||
<col highlight-col /> |
||||
<col highlight-col ng-repeat="column in columns track by column.href" /> |
||||
</colgroup> |
||||
<caption class="hidden-for-sighted"> |
||||
<span ng-bind="::text.tableSummary"></span> |
||||
<span id="wp-table-sort-summary"></span> |
||||
<span ng-bind="::text.tableSummaryHints"></span> |
||||
</caption> |
||||
<thead class="-sticky"> |
||||
<tr> |
||||
<th sort-header ng-repeat="column in columns track by column.href" |
||||
has-dropdown-menu |
||||
class="wp-table--table-header" |
||||
collision-container=".work-packages--list" |
||||
target="columnContextMenu" |
||||
locals="columns, column" |
||||
locale="column.custom_field && columns.custom_field.name_locale || locale" |
||||
header-column="column"> |
||||
</th> |
||||
<th class="wp-table--details-column -short hide-when-print"> |
||||
<div class="generic-table--sort-header-outer"> |
||||
<accessible-by-keyboard |
||||
execute="openColumnsModal()" |
||||
link-class="wp-table--columns-selection" |
||||
link-title="{{ ::text.addColumns }}" |
||||
link-aria-label="{{ ::text.addColumns }}"> |
||||
<op-icon icon-classes="icon-button icon-small icon-add"></op-icon> |
||||
</accessible-by-keyboard> |
||||
</div> |
||||
</th> |
||||
|
||||
<th class="wp-timeline--th" ng-show="timelineVisible"> |
||||
<div class="wp-timeline--slider-wrapper"> |
||||
<div class="wp-timeline--slider"></div> |
||||
</div> |
||||
<div class="wp-timeline-header-controls generic-table--sort-header-outer"> |
||||
<timeline-control></timeline-control> |
||||
</div> |
||||
<div class="wp-timeline-header-container generic-table--sort-header-outer"> |
||||
<div class="wp-timeline--scroll-wrapper"> |
||||
<span class="generic-table--sort-header wp-timeline-header"> |
||||
</span> |
||||
</div> |
||||
</div> |
||||
</th> |
||||
|
||||
</tr> |
||||
</thead> |
||||
<tbody class="work-package--empty-tbody" ng-if="query.hasError || rowcount === 0"> |
||||
<tr id="empty-row-notification"> |
||||
<td colspan="{{ columns.length + 1 }}"> |
||||
<span ng-if="!query.hasError"> |
||||
<op-icon icon-classes="icon-info1 icon-context"></op-icon> |
||||
<strong ng-bind="text.noResults.title"></strong> |
||||
<span ng-bind="text.noResults.description"></span> |
||||
</span> |
||||
<span ng-if="query.hasError"> |
||||
<op-icon icon-classes="wp-table--faulty-query-icon icon-warning icon-context"></op-icon> |
||||
<strong ng-bind="text.faultyQuery.title"></strong> |
||||
<span ng-bind="text.faultyQuery.description"></span> |
||||
</span> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
<tbody class="results-tbody work-package--results-tbody"> |
||||
</tbody> |
||||
<tbody wp-inline-create |
||||
project-identifier="projectIdentifier" |
||||
table="table"> |
||||
</tbody> |
||||
<tfoot> |
||||
<tr ng-if="sumsLoaded()" |
||||
class="sum group all issue work_package"> |
||||
<td ng-repeat="column in columns track by column.href"> |
||||
<div class="generic-table--footer-outer"> |
||||
<span ng-if="$first">{{ text.sumFor }} {{ text.allWorkPackages }}</span> |
||||
<wp-display-attr |
||||
attribute="column.id" |
||||
custom-schema="resource.sumsSchema" |
||||
work-package="resource.totalSums"> |
||||
</wp-display-attr> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div class="generic-table--footer-outer"></div> |
||||
</td> |
||||
</tr> |
||||
</tfoot> |
||||
</table> |
||||
</div> |
||||
</div> |
||||
<table class="keyboard-accessible-list generic-table work-package-table"> |
||||
<colgroup> |
||||
<col highlight-col /> |
||||
<col highlight-col ng-repeat="column in columns track by column.href" /> |
||||
</colgroup> |
||||
<caption class="hidden-for-sighted"> |
||||
<span ng-bind="::text.tableSummary"></span> |
||||
<span id="wp-table-sort-summary"></span> |
||||
<span ng-bind="::text.tableSummaryHints"></span> |
||||
</caption> |
||||
<thead class="-sticky"> |
||||
<tr> |
||||
<th sort-header ng-repeat="column in columns track by column.href" |
||||
has-dropdown-menu |
||||
class="wp-table--table-header" |
||||
collision-container=".work-packages--list" |
||||
target="columnContextMenu" |
||||
locals="columns, column" |
||||
locale="column.custom_field && columns.custom_field.name_locale || locale" |
||||
header-column="column"> |
||||
</th> |
||||
<th class="wp-table--details-column -short hide-when-print"> |
||||
<div class="generic-table--sort-header-outer"> |
||||
<accessible-by-keyboard |
||||
execute="openColumnsModal()" |
||||
link-class="wp-table--columns-selection" |
||||
link-title="{{ ::text.addColumns }}" |
||||
link-aria-label="{{ ::text.addColumns }}"> |
||||
<op-icon icon-classes="icon-button icon-small icon-add"></op-icon> |
||||
</accessible-by-keyboard> |
||||
</div> |
||||
</th> |
||||
</tr> |
||||
</thead> |
||||
<tbody class="work-package--empty-tbody" ng-if="query.hasError || rowcount === 0"> |
||||
<tr id="empty-row-notification"> |
||||
<td colspan="{{ columns.length + 1 }}"> |
||||
<span ng-if="!query.hasError"> |
||||
<op-icon icon-classes="icon-info1 icon-context"></op-icon> |
||||
<strong ng-bind="text.noResults.title"></strong> |
||||
<span ng-bind="text.noResults.description"></span> |
||||
</span> |
||||
<span ng-if="query.hasError"> |
||||
<op-icon icon-classes="wp-table--faulty-query-icon icon-warning icon-context"></op-icon> |
||||
<strong ng-bind="text.faultyQuery.title"></strong> |
||||
<span ng-bind="text.faultyQuery.description"></span> |
||||
</span> |
||||
</td> |
||||
</tr> |
||||
</tbody> |
||||
<tbody class="results-tbody work-package--results-tbody"> |
||||
</tbody> |
||||
<tbody wp-inline-create |
||||
project-identifier="projectIdentifier" |
||||
table="table"> |
||||
</tbody> |
||||
<tfoot> |
||||
<tr ng-if="sumsLoaded()" |
||||
class="sum group all issue work_package"> |
||||
<td ng-repeat="column in columns track by column.href"> |
||||
<div class="generic-table--footer-outer"> |
||||
<span ng-if="$first">{{ text.sumFor }} {{ text.allWorkPackages }}</span> |
||||
<wp-display-attr |
||||
attribute="column.id" |
||||
custom-schema="resource.sumsSchema" |
||||
work-package="resource.totalSums"> |
||||
</wp-display-attr> |
||||
</div> |
||||
</td> |
||||
<td> |
||||
<div class="generic-table--footer-outer"></div> |
||||
</td> |
||||
</tr> |
||||
</tfoot> |
||||
</table> |
||||
|
||||
Loading…
Reference in new issue