jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

notes: fix note sizing issues.

Browse Source 
Fix issues with note sizing caused by the switch to `box-sizing: border-box`
in 19aea560. Note boxes have a 1px black border, which is counted as
part of the note box width when using border-box. This threw off sizing
and position calculations.

Also go back to 1px borders instead of 2px borders for unsaved and
selected notes. This also messed up note sizing.
This commit is contained in:
evazion
2021-02-23 04:35:14 -06:00
parent 7966dcb3c9
commit de44f6c8e4
1 changed files with 11 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/src/styles/specific/notes.scss
View File

@@ -1,6 +1,7 @@
.note-container {
display: inline-block;
position: relative;
box-sizing: content-box;
&.hide-notes .note-box {
visibility: hidden;
@@ -26,6 +27,8 @@
}
div.note-body, div.note-box.embedded div.note-box-inner-border {
box-sizing: content-box;
h1, h2, h3, h4, h5, h6, a, span, div, blockquote, p, ul, li, ol, em, strong, small, big, b, i, font, u, s, code, center {
line-height: 1.25;
}
@@ -100,6 +103,7 @@
line-height: 1.25;
opacity: 0.5;
z-index: 100;
box-sizing: content-box;
/* Raise notes on hover so overlapping embedded notes are readable. */
&:hover {
@@ -107,11 +111,11 @@
}
&.unsaved {
border: 2px solid var(--unsaved-note-box-border-color);
border: 1px solid var(--unsaved-note-box-border-color);
}
&.movable {
border: 2px solid var(--movable-note-box-border-color);
border: 1px solid var(--movable-note-box-border-color);
}
&.embedded {
@@ -137,11 +141,11 @@
&.unsaved,
&.out-of-bounds {
border: var(--unsaved-note-box-border);
border: 1px solid var(--unsaved-note-box-border-color);
}
&.movable {
border: var(--movable-note-box-border);
border: 1px solid var(--movable-note-box-border-color);
}
&:not(:hover) div.ui-resizable-handle {
@@ -150,7 +154,7 @@
}
&.note-box-highlighted {
outline: 2px solid var(--note-highlight-color);
outline: 1px solid var(--note-highlight-color);
}
div.ui-resizable-handle {
@@ -163,12 +167,13 @@
div#note-preview {
position: absolute;
cursor: crosshair;
border: 2px solid var(--note-preview-border-color);
border: 1px solid var(--note-preview-border-color);
opacity: 0.6;
display: none;
background: var(--note-preview-background);
box-shadow: var(--shadow-lg);
z-index: 250;
box-sizing: content-box;
}
div.note-edit-dialog {