posts: add back "resize to window" link.

* Add back "Resize to window" link.
* Add Z shortcut for resize to window link (mnemonic: Z for zoom image).
* Resize images to screen width by default on both desktop and mobile.
* Make it so that notes are nested directly inside the .image-container
  element with the image, instead of inside a separate .note-container
  element. This means .image-container and .note-container are now the
  same element. This is so that the size of the .note-container is
  driven by the size of the image, which ensures that notes are
  automatically resized as the image is resized.

app/javascript/src/javascripts/notes.js

@@ -414,8 +414,6 @@ let Note = {
         return;
       }
       let $image = $("#image");
-      $container.height($image.height());
-      $container.width($image.width());
       if (Note.embed) {
         let large_width = parseFloat($image.data('large-width'));
         let ratio = $image.width() / large_width;
@@ -843,15 +841,13 @@ let Note = {
     },
 
     create_note: function(e, x, y, w, h) {
-      var offset = $("#image").offset();
-
       if (w > 9 || h > 9) { /* minimum note size: 10px */
         if (w <= 9) {
           w = 10;
         } else if (h <= 9) {
           h = 10;
         }
-        Note.create(x - offset.left, y - offset.top, w, h);
+        Note.create(x, y, w, h);
       }
 
       $(".note-container").css('visibility', 'visible');
@@ -907,18 +903,18 @@ let Note = {
         }
         if (Note.TranslationMode.Drag.dragging) {
           if (Note.TranslationMode.Drag.dragDistanceX >= 0) {
-            Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX;
+            Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX - offset.left;
             Note.TranslationMode.Drag.w = Note.TranslationMode.Drag.dragDistanceX;
           } else {
-            Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX + Note.TranslationMode.Drag.dragDistanceX;
+            Note.TranslationMode.Drag.x = Note.TranslationMode.Drag.dragStartX - offset.left + Note.TranslationMode.Drag.dragDistanceX;
             Note.TranslationMode.Drag.w = -Note.TranslationMode.Drag.dragDistanceX;
           }
 
           if (Note.TranslationMode.Drag.dragDistanceY >= 0) {
-            Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY;
+            Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY - offset.top;
             Note.TranslationMode.Drag.h = Note.TranslationMode.Drag.dragDistanceY;
           } else {
-            Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY + Note.TranslationMode.Drag.dragDistanceY;
+            Note.TranslationMode.Drag.y = Note.TranslationMode.Drag.dragStartY - offset.top + Note.TranslationMode.Drag.dragDistanceY;
             Note.TranslationMode.Drag.h = -Note.TranslationMode.Drag.dragDistanceY;
           }
 

app/javascript/src/javascripts/posts.js.erb

@@ -300,7 +300,7 @@ Post.initialize_favlist = function() {
   });
 }
 
-Post.expand_image = function(e) {
+Post.view_original = function(e) {
   if (Utility.test_max_width(660)) {
     // Do the default behavior (navigate to image)
     return;
@@ -347,9 +347,17 @@ Post.view_large = function(e) {
   e.preventDefault();
 }
 
+Post.toggle_fit_window = function(e) {
+  $("#image").toggleClass("fit-width");
+  Note.Box.scale_all();
+  Post.resize_ugoira_controls();
+  e.preventDefault();
+};
+
 Post.initialize_post_image_resize_links = function() {
-  $("#image-resize-link").on("click.danbooru", Post.expand_image);
+  $("#image-resize-link").on("click.danbooru", Post.view_original);
   $("#image-view-large-link").on("click.danbooru", Post.view_large);
+  $(document).on("click.danbooru", ".image-resize-to-window-link", Post.toggle_fit_window);
 
   if ($("#image-resize-notice").length) {
     Utility.keydown("v", "resize", function(e) {

app/javascript/src/styles/base/020_base.scss

@@ -151,6 +151,16 @@ ul.list-inline {
   }
 }
 
+.fit-width {
+  max-width: 100%;
+  height: auto !important;
+}
+
+.fit-height {
+  max-height: 90vh;
+  height: auto !important;
+}
+
 .mobile-only {
   display: none;
   @media (max-width: 660px) { display: initial; }

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

@@ -1,5 +1,6 @@
 .note-container {
-  position: absolute;
+  display: inline-block;
+  position: relative;
 
   div.note-body {
     position: absolute;

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

@@ -341,12 +341,6 @@ 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,11 +92,6 @@
     }
   }
 
-  img#image {
-    max-width: 100%;
-    height: auto;
-  }
-
   .user-disable-cropped-false {
     article.post-preview {
       width: 33.3%;