keeweb
/
keeweb
mirror of https://github.com/keeweb/keeweb.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Adjust some overflow behavior in the details panel 

Adding max-width, white-space, overflow and text-overflow to "a" children
of .details_field-value elements corrects an anomaly with long Website
values. Previously they displayed wider than other values, and the space
in which one could click to edit the field without triggering the link
was very thin. This establishes what was presumably the intended behavior.

Removing white-space from .details__attachment-preview-download-text
allows the text to wrap when the details pane is too narrow to show it all
on one line.

Replacing margin-right with max-width in .details__history fixes
issue #945 and makes fields in the history wrap as they do
in the ordinary details pane.

Adding flex to .details_history-top prevents the history details from
overlapping the navigation controls when the window height is too small
to show everything without scrolling.

Adding padding-right and margin-right to .details__history-top and
.details__history-buttons keeps those elements from overlapping
the scroll bar and aligns their right edges with the right edges
of the widest .details_field-value elements.
This commit is contained in:
Coises 2018-09-03 12:48:40 -07:00
parent c8995ad65f
commit 2e54d30b9d
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
app/styles/areas/_details.scss
View File

@ -264,6 +264,12 @@
font-weight: normal;
@include user-select(none);
}
>a {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.details__body-aside & {
@include th { color: th(muted-color); }
a { @include th { color: th(muted-color); } }
@ -402,7 +408,6 @@
position: absolute;
bottom: $base-padding-v;
right: $base-padding-h;
white-space: nowrap;
opacity: .15;
display: none;
@include nomobile { display: block; }
@ -461,12 +466,15 @@
align-items: stretch;
flex-direction: column;
justify-content: flex-start;
margin-right: $base-padding-h;
max-width: 100%;
&-top {
flex: 0 0 auto;
display: flex;
align-items: stretch;
flex-direction: row;
justify-content: flex-start;
padding-right: $base-padding-h;
margin-right: 20px;
}
&-desc {
@include user-select(none);
@ -529,6 +537,8 @@
@include user-select(none);
align-self: flex-end;
margin-bottom: $base-padding-v;
padding-right: $base-padding-h;
margin-right: 20px;
}
}