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

Convert notes to use percentages instead of exact coordinates

app/javascript/src/styles/specific/notes.scss

@@ -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 {

app/javascript/src/styles/specific/posts.scss

@@ -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;
     }

app/javascript/src/styles/specific/z_responsive.scss

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