Each spectral image pane should have three buttons at the top:
1) Button for "Select spectral image type" (already there).
2) Button for "Download archival packet [size]" (not always there)
3) Button for "Processing details" that will link to "/spectral-imaging/notes-processed-spectral-images" (relative link).
Please put a little space between the buttons and center them in the pane. The shortening of the spectral image names should create more room for the other two to all fit on one line.
Button 1 can be shortened to "Select spectral image" if necessary and button 3 can be shortened to "Download packet [size]" if necessary.
Button for "Download archival packet [size]" (not always there)
It currently only shows up when the image is displayed in full to save space in when viewing item details / transcription / compare. I can add it back in those cases but it does look a bit cramped.
Button for "Processing details" that will link to "/spectral-imaging/notes-processed-spectral-images" (relative link).
I'm not sure what you mean by relative link. Should it use the identifier for the document or page? Something like "/spectral-imaging/notes-processed-spectral-images/liv_000097_0001", or just that the link should always go to "/spectral-imaging/notes-processed-spectral-images". If it's the later case, perhaps we should add the link to the item details page since it doesn't change dynamically with the content and takes up valuable screen real estate?
From my perspective, if we're going to have buttons hoovering over the image, then one, two or three doesn't matter, particularly if they'll all be on one line and centered (from left and right) in the pane.
so the second part of the URL stays the same, even if the version of the site changes. This link should open in a new tab and is necessary for users to understand what the spectral image names mean so I would like to keep it with the other two buttons that will hover over the image. Hopefully we can shorten up the text on the buttons so they don't look too crammed together.
From my perspective, if we're going to have buttons hoovering over the image, then one, two or three doesn't matter, particularly if they'll all be on one line and centered (from left and right) in the pane.
Doesn't seem like there is enough room for all three on the same line for mobile and smaller resolutions.
<img width="565" alt="screen shot 2016-11-03 at 10 20 33" src="https://cloud.githubusercontent.com/assets/487373/19962386/3fea5df8-a1af-11e6-8c96-201466cbe7b5.png">
<img width="358" alt="screen shot 2016-11-03 at 10 20 49" src="https://cloud.githubusercontent.com/assets/487373/19962387/3fec5b44-a1af-11e6-865a-8340ebf1771f.png">
I see. For smaller devices, I don't think we need the download button so we could hide that. Also, "processing details" could be changed to "processing info" which is slightly shorter. As a last resort, we could change the download button to simply have the down arrow on it (do this first) and the processing button to have a ? mark on it (only do as a last resort). Does that help?
Order should be: images, "Processing Details", download
Please change the download button to a down arrow and show the size with only one decimal place, so 17.0 MB rather than 17.04 MB (Note: changing to arrow will give you more space so that you can you use the "Processing Details" text [notice second word and that it is capitalized.]).
The download and processing buttons are slightly higher than the images button. All should be at the same levels.
Is the font in all these buttons the same font, size, and color as the buttons at the top of the screen? If not, I would like everything to match the text in the buttons at the top of the screen.
The text in the download and processing buttons is not centered vertically.
Once you change "Download" to an arrow, you may not need to hide it at smaller resolutions.
The corners of the buttons look somewhat straight. This may be a trick of them being on a black field, but is there any way to make the corners more rounded?
The "Processing Details" button should open a new tab.
It looks like you took care of most of the issues, so thank you. However I still see a few things:
1) Sizing on the site has gone off somehow.
a) When I open the random level 2 page, everything thing is slightly too small. It's like I hit command+minus once (although I didn't)
b) Conversely, when I open the manuscript viewer it's slightly too big, as if I hit command+plus once (I didn't). For instance, look at the page header:
c) When I do hit command+minus, then everything goes the right size:
2) The fonts in the buttons are still not worked out right. The size and kind of fonts in the buttons on the viewer should all match the button fonts on, for instance, the Multi-XSLT viewer. Right now the spectral image dropdown font looks like it's too big and the fonts in the other buttons looks too dark when compared to the Multi-XSLT viewer.
3) If I select a page and open the transcription, it goes to the right place. However, if in the image I use the left or right arrow buttons to change pages, the transcription does not automatically go to the right place when the image changes.
4) The font in the spectral image type tooltip doesn't have too be that small. It can be just small enough so that the tooltip is the same width as the dropdown.
5) As I go to mobile, there is a point where the buttons go to two lines. This should not happen. See screen shot:
When I open this page, it's sized too big. See screen shot below. When I hit command+minus it gets smaller and goes to the right size. There wasn't this issue before:
One additional question, the viewer (both in spectral mode and not) has a lot of buttons. Could we put titles on these so that a tooltip poped up when someone mouseover them. The buttons would be:
(left to right, top row):
menu
home
email
facebook
twitter
pintrest
zoom in
slider
zoom out
rotate
page no.
item details
transcription
compare spectral images
search
(left to right, second row)
spectral image type
processing details
download
1) Sizing on the site has gone off somehow.
a) When I open the random level 2 page, everything thing is slightly too small. It's like I hit command+minus once (although I didn't)
There hasn't been any changes to the css that governs level 2 pages, try using zoom reset in your browser:
<img width="1438" alt="screen shot 2016-11-13 at 13 13 34" src="https://cloud.githubusercontent.com/assets/487373/20245904/155ef566-a9a3-11e6-87a7-ea3fd6db5e46.png">
b) Conversely, when I open the manuscript viewer it's slightly too big, as if I hit command+plus once (I didn't). For instance, look at the page header:
I can't reproduce this either with the default zoom settings, can you try resetting the zoom to it's default as shown above.
2) The fonts in the buttons are still not worked out right. The size and kind of fonts in the buttons on the viewer should all match the button fonts on, for instance, the Multi-XSLT viewer. Right now the spectral image dropdown font looks like it's too big and the fonts in the other buttons looks too dark when compared to the Multi-XSLT viewer.
Now set to the same size and color as the Multi-XSLT viewer (0.9em and #333)
3) If I select a page and open the transcription, it goes to the right place. However, if in the image I use the left or right arrow buttons to change pages, the transcription does not automatically go to the right place when the image changes.
This appears to be working in that changing the image will cause the transcription to move, but I think the confusion is from changing from one image to the next, which is not necessarily the same as change to the next page.
In some objects an image will be represented by multiple pages so by switching images we can jump over a number of pages. I can change this so that it jumps by a page at a time (rather than by an image at a time), but this will result in times when the user clicks on next in the image but nothing visibly happens in the image panel. If they are only looking at the image which would be confusing I think.
4) The font in the spectral image type tooltip doesn't have too be that small. It can be just small enough so that the tooltip is the same width as the dropdown.
If I make it larger then it won't be the same width. I'm not sure what your asking for?
<img width="491" alt="screen shot 2016-11-13 at 13 29 24" src="https://cloud.githubusercontent.com/assets/487373/20246002/4ccf7e74-a9a5-11e6-8ff8-321f288cf0f7.png">
5) As I go to mobile, there is a point where the buttons go to two lines. This should not happen. See screen shot:
Should be sorted now.
When I open this page, it's sized too big. See screen shot below. When I hit command+minus it gets smaller and goes to the right size. There wasn't this issue before.
Just reset it to the defaults, and you shouldn't have an issue.
One additional question, the viewer (both in spectral mode and not) has a lot of buttons. Could we put titles on these so that a tooltip poped up when someone mouseover them.
There hasn't been any changes to the css that governs level 2 pages, try using zoom reset in your browser:
I can't reproduce this either with the default zoom settings, can you try resetting the zoom to it's default as shown above.
Just reset it to the defaults, and you shouldn't have an issue.
Level 2 pages are OK now. I I tried resetting as you suggest, that but it didn't work for the view. See screen shot.
set to the same size and color as the Multi-XSLT viewer (0.9em and #333)
Everything looks good except two things: 1) I'm not sure the text in the search bar is the right size or, at least, has the right spacing between characters. The font size in the spectral image dropdown is still too big.
If I make it larger then it won't be the same width. I'm not sure what your asking for?
Well, once you reduce the font on the spectral image dropdown it may narrow a bit. Let's do that first. In the image you posted, the dropdown and popup appear to be the same width which is what I'd like to have.
This appears to be working in that changing the image will cause the transcription to move, but I think the confusion is from changing from one image to the next, which is not necessarily the same as change to the next page.
In some objects an image will be represented by multiple pages so by switching images we can jump over a number of pages. I can change this so that it jumps by a page at a time (rather than by an image at a time), but this will result in times when the user clicks on next in the image but nothing visibly happens in the image panel. If they are only looking at the image which would be confusing I think.
In terms of this comment, what I meant is that I was changing pages, not spectral images. So open it where an image is at left, then a transcription is at right. Inside the image box, click on the right or left arrow. The image changes to a new page, but the transcription stays in the same place whereas it should go to the new page.
5) As I go to mobile, there is a point where the buttons go to two lines. This should not happen. See screen shot:
Should be sorted now.
There's still some odd ghost text that appears. See screen shot.
Level 2 pages are OK now. I I tried resetting as you suggest, that but it didn't work for the view. See screen shot.
You'll have to reset it on this page as well, as the browse remembers the zoom settings on a page by page basis.
Everything looks good except two things: 1) I'm not sure the text in the search bar is the right size or, at least, has the right spacing between characters.
I've changed it back.
The font size in the spectral image dropdown is still too big.
It's the same size as the Multi-XSLT page which you requested for all the text/icons? Are you certain you wish for me to decrease the size, and if that's the case do mean to do so for all icons everywhere or just this single instance?
Well, once you reduce the font on the spectral image dropdown it may narrow a bit. Let's do that first. In the image you posted, the dropdown and popup appear to be the same width which is what I'd like to have.
First we must decided if we want different sizes or the same for buttons and select fields?
In terms of this comment, what I meant is that I was changing pages, not spectral images. So open it where an image is at left, then a transcription is at right. Inside the image box, click on the right or left arrow. The image changes to a new page, but the transcription stays in the same place whereas it should go to the new page.
If it's not changing at all? I can't seem to reproduce this behavior then on firefox or chrome. Can you send me the identifier of the manuscript you're looking at and the pages your moving between? It might be something with the individual manuscript.
There's still some odd ghost text that appears. See screen shot.
Each spectral image pane should have three buttons at the top:
1) Button for "Select spectral image type" (already there). 2) Button for "Download archival packet [size]" (not always there) 3) Button for "Processing details" that will link to "/spectral-imaging/notes-processed-spectral-images" (relative link).
Please put a little space between the buttons and center them in the pane. The shortening of the spectral image names should create more room for the other two to all fit on one line.
Button 1 can be shortened to "Select spectral image" if necessary and button 3 can be shortened to "Download packet [size]" if necessary.
It currently only shows up when the image is displayed in full to save space in when viewing item details / transcription / compare. I can add it back in those cases but it does look a bit cramped.
I'm not sure what you mean by relative link. Should it use the identifier for the document or page? Something like "/spectral-imaging/notes-processed-spectral-images/liv_000097_0001", or just that the link should always go to "/spectral-imaging/notes-processed-spectral-images". If it's the later case, perhaps we should add the link to the item details page since it doesn't change dynamically with the content and takes up valuable screen real estate?
From my perspective, if we're going to have buttons hoovering over the image, then one, two or three doesn't matter, particularly if they'll all be on one line and centered (from left and right) in the pane.
In terms of the relative link, what I meant is:
http://livingstonestage.lib.umd.edu/spectral-imaging/notes-processed-spectral-images http://livingstoneonline.org/spectral-imaging/notes-processed-spectral-images
so the second part of the URL stays the same, even if the version of the site changes. This link should open in a new tab and is necessary for users to understand what the spectral image names mean so I would like to keep it with the other two buttons that will hover over the image. Hopefully we can shorten up the text on the buttons so they don't look too crammed together.
Doesn't seem like there is enough room for all three on the same line for mobile and smaller resolutions.
<img width="565" alt="screen shot 2016-11-03 at 10 20 33" src="https://cloud.githubusercontent.com/assets/487373/19962386/3fea5df8-a1af-11e6-8c96-201466cbe7b5.png"> <img width="358" alt="screen shot 2016-11-03 at 10 20 49" src="https://cloud.githubusercontent.com/assets/487373/19962387/3fec5b44-a1af-11e6-865a-8340ebf1771f.png">
I see. For smaller devices, I don't think we need the download button so we could hide that. Also, "processing details" could be changed to "processing info" which is slightly shorter. As a last resort, we could change the download button to simply have the down arrow on it (do this first) and the processing button to have a ? mark on it (only do as a last resort). Does that help?
I hide download on smaller screens, let me know if it's acceptable. It's on stage for review.
Please adjust the buttons as follows.
Ready for review on stage.
It looks like you took care of most of the issues, so thank you. However I still see a few things: 1) Sizing on the site has gone off somehow. a) When I open the random level 2 page, everything thing is slightly too small. It's like I hit command+minus once (although I didn't)
b) Conversely, when I open the manuscript viewer it's slightly too big, as if I hit command+plus once (I didn't). For instance, look at the page header:
c) When I do hit command+minus, then everything goes the right size:

2) The fonts in the buttons are still not worked out right. The size and kind of fonts in the buttons on the viewer should all match the button fonts on, for instance, the Multi-XSLT viewer. Right now the spectral image dropdown font looks like it's too big and the fonts in the other buttons looks too dark when compared to the Multi-XSLT viewer.
3) If I select a page and open the transcription, it goes to the right place. However, if in the image I use the left or right arrow buttons to change pages, the transcription does not automatically go to the right place when the image changes.
4) The font in the spectral image type tooltip doesn't have too be that small. It can be just small enough so that the tooltip is the same width as the dropdown.
5) As I go to mobile, there is a point where the buttons go to two lines. This should not happen. See screen shot:
When I open this page, it's sized too big. See screen shot below. When I hit command+minus it gets smaller and goes to the right size. There wasn't this issue before:
One additional question, the viewer (both in spectral mode and not) has a lot of buttons. Could we put titles on these so that a tooltip poped up when someone mouseover them. The buttons would be:
(left to right, top row): menu home email facebook twitter pintrest zoom in slider zoom out rotate page no. item details transcription compare spectral images search
(left to right, second row) spectral image type processing details download
There hasn't been any changes to the css that governs level 2 pages, try using zoom reset in your browser:
<img width="1438" alt="screen shot 2016-11-13 at 13 13 34" src="https://cloud.githubusercontent.com/assets/487373/20245904/155ef566-a9a3-11e6-87a7-ea3fd6db5e46.png">
I can't reproduce this either with the default zoom settings, can you try resetting the zoom to it's default as shown above.
Now set to the same size and color as the Multi-XSLT viewer (0.9em and #333)
This appears to be working in that changing the image will cause the transcription to move, but I think the confusion is from changing from one image to the next, which is not necessarily the same as change to the next page.
In some objects an image will be represented by multiple pages so by switching images we can jump over a number of pages. I can change this so that it jumps by a page at a time (rather than by an image at a time), but this will result in times when the user clicks on next in the image but nothing visibly happens in the image panel. If they are only looking at the image which would be confusing I think.
If I make it larger then it won't be the same width. I'm not sure what your asking for?
<img width="491" alt="screen shot 2016-11-13 at 13 29 24" src="https://cloud.githubusercontent.com/assets/487373/20246002/4ccf7e74-a9a5-11e6-8ff8-321f288cf0f7.png">
Should be sorted now.
Just reset it to the defaults, and you shouldn't have an issue.
Sure but lets make that into a separate ticket.
Level 2 pages are OK now. I I tried resetting as you suggest, that but it didn't work for the view. See screen shot.
Everything looks good except two things: 1) I'm not sure the text in the search bar is the right size or, at least, has the right spacing between characters. The font size in the spectral image dropdown is still too big.
Well, once you reduce the font on the spectral image dropdown it may narrow a bit. Let's do that first. In the image you posted, the dropdown and popup appear to be the same width which is what I'd like to have.
This appears to be working in that changing the image will cause the transcription to move, but I think the confusion is from changing from one image to the next, which is not necessarily the same as change to the next page.
In terms of this comment, what I meant is that I was changing pages, not spectral images. So open it where an image is at left, then a transcription is at right. Inside the image box, click on the right or left arrow. The image changes to a new page, but the transcription stays in the same place whereas it should go to the new page.
There's still some odd ghost text that appears. See screen shot.
You'll have to reset it on this page as well, as the browse remembers the zoom settings on a page by page basis.
I've changed it back.
It's the same size as the Multi-XSLT page which you requested for all the text/icons? Are you certain you wish for me to decrease the size, and if that's the case do mean to do so for all icons everywhere or just this single instance?
First we must decided if we want different sizes or the same for buttons and select fields?
If it's not changing at all? I can't seem to reproduce this behavior then on firefox or chrome. Can you send me the identifier of the manuscript you're looking at and the pages your moving between? It might be something with the individual manuscript.
Should be sorted.
See screen shot and let me know if this clarifies the sizing/breakpoint issues?
In terms of the page change issue, go to this page (although the problem is not limited to this page), then do the following:
Try this page: http://livingstonestage.lib.umd.edu/islandora/search?access=view_spectral&view_pid=liv%3A000206&view_page=0 but again it's not limited to any one page.
Looks good. Thank you!