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

Merge pull request #4320 from BrokenEagle/note-dimension-percentages

Browse Source 
Convert notes to use percentages instead of exact coordinates
This commit is contained in:
evazion
2020-03-20 16:26:02 -05:00
committed by GitHub
parent 31424ce545 20bad0ec53
commit 2bc99a813c
8 changed files with 174 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/javascript/src/styles/base/040_colors.css
View File

@@ -112,11 +112,10 @@
--note-body-background: #FFE;
--note-body-text-color: var(--text-color);
--note-body-border: 1px solid black;
--note-box-border: 1px solid white;
--note-box-background: transparent;
--note-box-inner-border: 1px solid black;
--unsaved-note-box-inner-border: 1px solid red;
--movable-note-box-inner-border: 1px solid green;
--note-box-border: 1px solid black;
--note-box-shadow: 0 0 0 1px white;
--unsaved-note-box-border: 1px solid red;
--movable-note-box-border: 1px solid green;
--note-preview-border: 1px solid red;
--note-preview-background: white;
--note-highlight-color: blue;

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

@@ -1,6 +1,5 @@
div#note-container {
position: absolute;
z-index: 50;
div.note-body {
position: absolute;
@@ -17,7 +16,7 @@ div#note-container {
}
div.note-body, div.note-box.embedded div.note-box-inner-border {
h1, h2, h3, h4, h5, h6, a, span, div, blockquote, br, p, ul, li, ol, em, strong, small, big, b, i, font, u, s, code, center {
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;
}
@@ -71,6 +70,10 @@ div#note-container {
}
div.note-box {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
position: absolute;
border: var(--note-box-border);
min-width: 5px;
@@ -78,24 +81,17 @@ div#note-container {
width: 100px;
height: 100px;
cursor: move;
background: var(--note-box-background);
background: var(--note-body-background);
line-height: 1.25;
opacity: 0.5;
z-index: 100;
div.note-box-inner-border {
border: var(--note-box-inner-border);
background: var(--note-body-background);
}
div.note-box-inner-border.unsaved {
border: var(--unsaved-note-box-inner-border);
&.unsaved {
border: var(--unsaved-note-box-border);
}
&.movable {
div.note-box-inner-border,
div.note-box-inner-border.unsaved {
border: var(--movable-note-box-inner-border);
}
border: var(--movable-note-box-border);
}
&.embedded {
@@ -105,6 +101,7 @@ div#note-container {
&.hovering {
border: var(--note-box-border);
box-shadow: var(--note-box-shadow);
&.editing,
&.movable {
@@ -114,10 +111,6 @@ div#note-container {
div.ui-resizable-handle {
display: block;
}
div.note-box-inner-border {
border: var(--note-box-inner-border);
}
}
&.editing,
@@ -125,29 +118,18 @@ div#note-container {
opacity: 0.4;
}
&.unsaved,
&.out-of-bounds {
border: var(--unsaved-note-box-border);
}
&.movable {
div.note-box-inner-border,
div.note-box-inner-border.unsaved,
div.note-box-inner-border.out-of-bounds {
border: var(--movable-note-box-inner-border);
}
border: var(--movable-note-box-border);
}
div.ui-resizable-handle {
display: none;
}
div.note-box-inner-border {
text-align: center;
display: table-cell;
vertical-align: middle;
border: 1px solid transparent;
}
div.note-box-inner-border.unsaved,
div.note-box-inner-border.out-of-bounds {
border: var(--unsaved-note-box-inner-border);
}
}
&.note-box-highlighted {
@@ -162,6 +144,7 @@ div#note-preview {
opacity: 0.6;
display: none;
background: var(--note-preview-background);
z-index: 100;
}
div.note-edit-dialog {

6
app/javascript/src/styles/specific/posts.scss
View File

@@ -341,6 +341,12 @@ div#c-posts {
margin: 1em 0 0.5em;
}
/* This ensures the image appears above the note container, but beneath any notes. */
#image {
position: relative;
z-index: 50;
}
.pool-name, .search-name {
word-wrap: break-word;
}

5
app/javascript/src/styles/specific/z_responsive.scss
View File

@@ -92,6 +92,11 @@
}
}
img#image {
max-width: 100%;
height: auto;
}
.user-disable-cropped-false {
article.post-preview {
width: 33.3%;