#26 Change size/shape of image viewer

[Kate Needham]

Is there any way to make it longer, to extend further down the page? It's currently a square and ends a little over halfway down the page of a normal page of quarto text. Folio text will be even worse.

A square will always be a bad shape for displaying images of rectangular pages, and scrolling too much of the page to compare transcription text to image is rather annoying.

Or leaving the current shape and getting it to float with you while you scroll would work too.

[Craig Berry]

For me it's a rectangle, not a square, but the default view truncates a little bit of the top and bottom of the page. I tried the following, which did improve the initial fit of most pages into the viewport, but also for some reason squished the top menu into an unusable state. So this needs more study.

$ git diff
diff --git a/resources/css/style.less b/resources/css/style.less
index b03a508..56675f0 100644
--- a/resources/css/style.less
+++ b/resources/css/style.less
@@ -533,7 +533,7 @@ footer .poweredby img { width: 120px; }
   top: 128px;
   left: 50%;
   */
-  height: 79vh;
+  height: 89vh;
   background: transparent;
     margin-top:90px;
 }

[Kate Needham]

Oh I see now why it looked square to me. I had my browse window stretched pretty wide, the viewer gets more rectangular if I shrink it a bit.

Is this in the current version of the site? Because the fit looks loads better now on a couple plays w/ images I've looked at, but I don't notice any problems with the menu.

[Craig Berry]

For some reason replying via mail lost the content: the div containing the image is set to 79% of the vertical height of the "viewport," i.e. what's considered the maximum viewable area of the whole page. So it makes sense that on a large monitor it could expand to the right until it became square but was not allowed to expand vertically. There are various things we can experiment with, such as setting the width instead of the height.

No this is not on the site, I have not made changes in production for this since my first experiment caused other problems.

[Craig Berry]

Resolved by:

commit fd67a53388c95e03fbd62a3131d2782ed3d033ff
Author: Craig A. Berry <[e-mail]>
Date:   Fri Mar 10 12:10:23 2017 -0600

    Limit width as well as height of facsimile area.

    On a very large monitor, it might actually be possible to see the
    entire image and the annotation panel at the same time.  On a more
    typical monitor, it is at least going to allow more of the image
    to be seen.

    This will certainly not be perfect for every image on every
    monitor, but it seems to avoid truncating the top and bottom lines
    from most of the images we currently have and make the annotation
    panel feel a little bit less like a space ship landing in your
    living room