csouriss 77afe3d5d0 Some CSS style enhancements
* Move the "dynamicEdit" span at the beginning of the "value" div to let
  it appear at the top left corner of the field to edit.
  Otherwise, the edition block may appear outside the page, e.g. if we
  want to edit the title of an issue and if this title ends at the
  extreme right of the page.
* Display the pencil icon on a field only when this field is hovered
  (not simply if the mouse hovers any part of the "content" div).
* Vertically align validate and cancel buttons of the edition block with
  the edition field nearby.
* Auto resize the issue title edition input field based on the window
  size (to leave as much space as possible to rewrite the title).
2020-04-05 10:40:40 +02:00

128 lines
3.0 KiB
CSS

/* prefix selector with body.controller-issues.action-show to avoid unwanted style on other page ? */
body.controller-issues.action-show div.issue.details .value, body.controller-issues.action-show div.issue.details .splitcontent {
overflow: visible;
position: relative;
}
body.controller-issues.action-show div.issue .attribute .value .percent {
display: inline-block;
}
/* Progress bar fix */
body.controller-issues.action-show table.progress {
margin-right: 10px;
}
body.controller-issues.action-show .attribute .error {
color: #e74c3c;
margin-left: 3px;
}
body.controller-issues.action-show .fa-pencil {
opacity: 0;
}
body.controller-issues.action-show .issue.details .showValue {
cursor: pointer;
}
body.controller-issues.action-show .issue.details .value:hover .fa-pencil {
opacity: 1;
cursor: pointer;
}
body.controller-issues.action-show .dynamicEdit {
display: inline-block;
position:absolute;
opacity: 0;
/* left:0; correct position on top of icon */
bottom: 100%;
margin-bottom: 5px;
box-sizing: border-box;
padding: 10px;
border-radius: 3px;
background: white;
pointer-events: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
width: max-content;
}
body.controller-issues.action-show #TitleInput.dynamicEdit {
font-size: 0.57em;
}
body.controller-issues.action-show .dynamicEdit.version {
max-width: 100%;
}
body.controller-issues.action-show .edited .dynamicEdit {
pointer-events: auto;
}
body.controller-issues.action-show div.issue.details .value.edited .dynamicEdit {
opacity: 1;
z-index: 999;
}
body.controller-issues.action-show div.issue.details .btn-primary {
color: white !important;
border-radius: 3px;
padding: 3px;
vertical-align: middle;
}
body.controller-issues.action-show div.issue.details .btn-primary.close {
background: #c0392b;
}
body.controller-issues.action-show div.issue.details .btn-primary.validate {
background: #27ae60;
}
body.controller-issues.action-show .dynamicEdit select {
border:none;
background-image:none;
background-color:transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-size: inherit;
font-family: inherit;
border: 1px solid #ccc;
border-radius: 3px;
}
body.controller-issues.action-show .dynamicEdit select option[disabled="disabled"]
{
display:none;
}
body.controller-issues.action-show div.issue.details .attributes {
display: table;
width: 100%;
}
body.controller-issues.action-show div.issue.details .splitcontent {
display: table-row;
}
div.issue div.subject h3 {
position:relative;
display: inline-block;
}
body.controller-issues.action-show .dynamicEdit input[type="text"] {
width: auto !important;
}
body.controller-issues.action-show .dynamicEdit input,
body.controller-issues.action-show .dynamicEdit select {
vertical-align: middle;
}
body.controller-issues.action-show .dynamicEdit .check_box_group {
border: 0px !important;
margin-bottom: 10px;
}