Bug 3840 - Gaps in gallery view on Pocket IE - handheld skin
: Gaps in gallery view on Pocket IE - handheld skin
Status: RESOLVED FIXED
Product: Logitech Media Server
Classification: Unclassified
Component: Web Interface
: 6.5b1
: Other Windows XP
: P2 normal (vote)
: ---
Assigned To: Chris Owens
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2006-07-29 14:56 UTC by Philip Meyer
Modified: 2006-08-17 13:49 UTC (History)
1 user (show)

See Also:
Category: ---


Attachments
New Music in Gallery view mode on Dell Axim - Handheld skin (85.59 KB, image/jpeg)
2006-08-13 15:26 UTC, Philip Meyer
Details
Screenshot of view button in IE6/Firefox (84.65 KB, image/jpeg)
2006-08-14 01:29 UTC, Philip Meyer
Details
screenshot of View button layout in Pocket IE (103.83 KB, image/jpeg)
2006-08-14 01:30 UTC, Philip Meyer
Details
the tables are back... (3.73 KB, application/zip)
2006-08-14 02:16 UTC, Michael Herger
Details
make a floating DIV instead of the TABLE (6.15 KB, application/octet-stream)
2006-08-14 13:54 UTC, Michael Herger
Details
Improved header, smaller icons, possible fix for the gap (6.33 KB, application/zip)
2006-08-14 14:23 UTC, Michael Herger
Details
Browse albums in Pocket IE (124.06 KB, image/jpeg)
2006-08-15 01:32 UTC, Philip Meyer
Details
Screenshot of album artwork in gallery view mode (65.04 KB, image/jpeg)
2006-08-17 00:36 UTC, Philip Meyer
Details

Note You need to log in before you can comment on or make changes to this bug.
Description Philip Meyer 2006-07-29 14:56:57 UTC
Using the handheld skin on my PDA (Dell Axim X50), thumbnails in gallery view
are inconsistent in size.

The problem doesn't occur in IE6 or Firefox on my desktop PC; only Pocket IE.

If I go to New Music in Gallery view mode, I get two thumbnails to a row with
Play/Add buttons underneath.

However, some of the thumbnails appear to be one or two pixels too large in height,
and thus no thumbnail is displayed underneath that. The Play/Add buttons for the
larger image don't line up with the Play/Add buttons for the adjacent album.

I notice that for artwork that is wider than the height, the artwork is scaled
such that the width aligns with other images, but as a result the Play/Add
buttons are immediately under the image (the image isn't centred in the space).
On desktop PC, the Play/Add buttons are horizontally aligned no matter how tall the
thumnails are.
Comment 1 Chris Owens 2006-08-08 10:35:01 UTC
This is still on my list, but my Axim is being borrowed.  I need to retrieve it.
Comment 2 Michael Herger 2006-08-13 14:11:03 UTC
Philip, could you please add a screenshot of this. I still don't have a PocketPC ("only" a Zaurus running Opera ;-)).
Comment 3 Philip Meyer 2006-08-13 15:26:12 UTC
Created attachment 1420 [details]
New Music in Gallery view mode on Dell Axim - Handheld skin
Comment 4 Philip Meyer 2006-08-13 15:34:51 UTC
I also notice now that the List/Gallery view icon is positioned a bit clumsily.

  /New Music
  <icon>
  Pages 1 2 | Items 1 to 50 of 100".

I don't recall it looking like this last time I used it.
I think the icon used to be aligned to the right of the screen.

I just checked what it looks like on desktop PC via Firefox - it
is indeed aligned to the right, but takes up horizontal space across the line.  eg:

  /New Music
                                      <icon...
                                       ...icon>
  Pages 1 2 | Items 1 to 50 of 100".

It would be nicer if it is possible to lay it out like:

  /New Music                          <icon...
  Pages 1 2 | Items 1 to 50 of 100".  ...icon>

Or alternatively (if easier):

  <icon...  /New Music
  ...icon>  Pages 1 2 | Items 1 to 50 of 100"

Comment 5 Michael Herger 2006-08-14 00:30:20 UTC
I think we're exploring PocketIE's limitations in CSS capabilities... I haven't found out yet what causes the empty spaces. The same page (using the Handheld skin) does look ok in FF and IE6?

> I also notice now that the List/Gallery view icon is positioned a bit clumsily.

I wouldn't call it clumsy in all cases, but it can be :-). What revision are you on? I recently changed the layout a bit. It was something like:

/ New Music               <icon>
Pages 1 2 | [sort order selector]
Items 1 to 
50 of 100

I wanted it to be:

/ New Music      [sort order selector] <icon>
Pages 1 2 3 4 | Items 1 to 50 of 100

To be wrapped if needed:
/ New Music
[sort order selector] <icon>
Pages 1 2 3 4 | Items 1 to 50 of 100

This is imho working find in desktop browsers and Opera on my Zaurus. I don't have PocketIE to test with (screenshots are always welcome :-)).

>   /New Music
>   <icon>
>   Pages 1 2 | Items 1 to 50 of 100".

> I don't recall it looking like this last time I used it.
> I think the icon used to be aligned to the right of the screen.

Hmm... does PIE support the CSS 'float'? Before that change I used a table to do the layout. But this made the page bar wrap in a much too small column at the left (see first of my drawings). I therefore tried to have it laid out without using tables, using CSS. But this is asking for trouble :-(.

Could you try changing the following style in Handheld/slimserver.css:

.viewSelect
{
	white-space: nowrap;
	float: right;
}

Remove the "nowrap" thingy:

.viewSelect
{
	float: right;
}

Does this improve the layout? 

> It would be nicer if it is possible to lay it out like:
> 
>   /New Music                          <icon...
>   Pages 1 2 | Items 1 to 50 of 100".  ...icon>

You're asking too much of PocketIE, really. It's not up to date concerning CSS. Maybe we'll have to use a different icon for Handheld as it's simply too big for the small screens. "float"ing it doesn't seem to be working: either in the wrong place or generating additional empty space (interestingly I don't seem either of these problems in Opera...).

I'll have to come up with another idea :-/ Is gallery mode feasible on a handheld? Let's remove it ;-)
Comment 6 Philip Meyer 2006-08-14 01:29:04 UTC
Yes, there are no gaps in album artwork in Firefox/IE6 - handheld skin looks fine on these browsers.

In IE6 and Firefox, the view mode icon is right-aligned, but still leaves a gap on the left. This
is not so bad, as obviously the desktop resolution is better - there's more screen to play with.

In Pocket IE, view mode icon is left-aligned.  I will attach screenshots.

I am currently on SVN 8951.


I tried changing the css file to remove the "whitespace: no-wrap" but it made no difference to
pocket IE.

I think a smaller icon is a good idea.

Alternatively perhaps stick the icon as an in-line image on the left and allow two lines
of text to wrap around it.
Comment 7 Philip Meyer 2006-08-14 01:29:54 UTC
Created attachment 1422 [details]
Screenshot of view button in IE6/Firefox
Comment 8 Philip Meyer 2006-08-14 01:30:42 UTC
Created attachment 1423 [details]
screenshot of View button layout in Pocket IE
Comment 9 Michael Herger 2006-08-14 02:16:17 UTC
Created attachment 1424 [details]
the tables are back...

I put the tables back in place, but have the second row span across the two columns. Is this working better for you?
Comment 10 Philip Meyer 2006-08-14 12:15:13 UTC
Still got the gaps in the artwork.

The icon is now on the right, but there's still wasted space between "/New Music" and "Pages: 1 2".

It's Better though ;)
Comment 11 Michael Herger 2006-08-14 13:01:10 UTC
> Still got the gaps in the artwork.

Oh, I didn't care about them, yet... I'm still trying to get rid of the messy header.

> The icon is now on the right, but there's still wasted space between "/New
> Music" and "Pages: 1 2".

Is the icon higher than the sort selector when you browse by album?
Comment 12 Michael Herger 2006-08-14 13:38:32 UTC
> Still got the gaps in the artwork.

Are the albums in the gap actually missing or did they just move to the right or something?
Comment 13 Michael Herger 2006-08-14 13:54:02 UTC
Created attachment 1425 [details]
make a floating DIV instead of the TABLE

Phil,

a first try at fixing the gap issue. Any better?
Comment 14 Michael Herger 2006-08-14 13:54:57 UTC
Comment on attachment 1425 [details]
make a floating DIV instead of the TABLE

Please save as cmdwrappers_Handheld
Comment 15 Michael Herger 2006-08-14 14:23:19 UTC
Created attachment 1426 [details]
Improved header, smaller icons, possible fix for the gap

This archive contains the following potential fixes/enhancements:

- smaller icon
- removed "sort by"
- cleaner header in eg. browse by album
- wrap the table in a div

The archive's content goes into HTML as it contains a change to EN/galleryselect.html, too. Please give it a try.
Comment 16 Philip Meyer 2006-08-14 15:11:57 UTC
Okay, just tried your latest patch.

The smaller icon works much better, reducing the space between the two lines of text.
In browse Albums, the drop-down sort order is aligned to the right of the icon, so this is good too.
The drop-down itself is a little bigger, causing a little bit more space, but that probably can't be helped.

In gallery view, all albums are displayed, but the artwork is now appearing all in one column, left-aligned.

I am seeing quite a bit of vertical spacing between parts of the screen:
1. Above the Squeezebox logo main heading.
2. Above Home/Status/Playlist/Search.
3. Above "/ Albums"
4. Before the list of albums.

I'll try to upload some pictures tomorrow morning - no time now (I should find some software for the PDA to take screenshots, rather than get the camera out!).
Comment 17 Philip Meyer 2006-08-15 01:32:39 UTC
Created attachment 1427 [details]
Browse albums in Pocket IE
Comment 18 Michael Herger 2006-08-15 03:25:36 UTC
Phil, I'll have a look at what's wrong with that white space. Shouldn't be there.

Concerning the missing artwork: is it really missing or are the albums just moved one place?
Comment 19 Michael Herger 2006-08-15 03:41:57 UTC
Phil, one more question: the blank spaces you're seeing in the header. Didn't you have them with 6.3 or other earlier releases? That part's structure hasn't been changed for far more than a year?!? The only thing I can imagine is CSS. Could you rename Handheld/slimserver.css and refresh the page: do you see better results in the pageheader part?
Comment 20 Philip Meyer 2006-08-15 11:40:40 UTC
I can't remember for sure about the white space, whether it was present on Pocket IE
in previous releases.  I don't think so, as I probably would be commented on it before.

The white space problem is only an issue with Pocket IE.  IE6 and Firefox look fine.

All album artwork is present (no albums are missing), it's just not layed out correctly.
Currently all in one left-aligned column.
Comment 21 Michael Herger 2006-08-15 13:58:10 UTC
> The white space problem is only an issue with Pocket IE.  IE6 and Firefox look
> fine.

With a little luck I'll get my hands on a PocketPC very soon. This will considerably ease testing. I'll let you know if I find something better.

> All album artwork is present (no albums are missing), it's just not layed out
> correctly.
> Currently all in one left-aligned column.

"currently" is with my patch? Just replace the cmdwrappers_Handheld with its original to get back the intermittent gaps...
Comment 22 Michael Herger 2006-08-16 11:55:50 UTC
Got a PocketPC to test today - turned out to be _extremely_ helpful debugging (working around) the issues described here. I just checked in a few changes (revision 8988) which address the gap and the excessive white space issues. 

Phil, you might want to have a look at Microsoft's simple "Remote Display Control" to remotely control your PPC and take screenshots:

http://www.microsoft.com/technet/prodtechnol/wce/downloads/ppctoys.mspx#ELD

Comment 23 Philip Meyer 2006-08-17 00:35:11 UTC
Thanks for the tip on Microsoft's "Remote Display Control".
The link you posted was for Windows CE, but I found a version for Windows Mobile 2003SE.

The album gap problem is fixed.  The whitespace issue is fixed too, except perhaps in gallery
view mode.  I can see extra whitespace above/below the album artwork.  I expect the play/add
buttons should be tucked up right under the album.

I have found some other handheld skin problems, but not related to this bug.  Would it be
easier to mail you direct about them, or whack all other things I've spotted onto a new bug?
Comment 24 Philip Meyer 2006-08-17 00:36:10 UTC
Created attachment 1433 [details]
Screenshot of album artwork in gallery view mode

Excessive spacing around artwork?
Comment 25 KDF 2006-08-17 00:48:13 UTC
bug 3782?
space, no space, how much space?
pick one and lets please call a dead issue, dead.
Comment 26 Michael Herger 2006-08-17 00:55:46 UTC
> The album gap problem is fixed.  The whitespace issue is fixed too, except
> perhaps in gallery
> view mode.  I can see extra whitespace above/below the album artwork.  I expect
> the play/add buttons should be tucked up right under the album.

So do I. But I haven't found a way to do it. Compared to how it was before we lose about the add/play buttons' height per page. With 240x320px we can still see four art covers, but the second row lacking the buttons. I thought this was an acceptable compromise (concentrating on removing the gaps).

> I have found some other handheld skin problems, but not related to this bug. 
> Would it be
> easier to mail you direct about them, or whack all other things I've spotted
> onto a new bug?

It's a good moment for me to work on this. Feel free to send stuff to me directly. Thanks!

And please close this bug (I can't)
Comment 27 Philip Meyer 2006-08-17 00:57:08 UTC
Bug 3782 was different.  There was no spacing then, and images weren't centred.

The current gallery view is better, but seems to have a lot more spacing
top/bottom than left/right.  There were other spacing issues reported on this bug, so I
wondered if this one had been missed.

If you look at the latest screenshot, the space between the window edge and the
left edge of the leftmost thumbnail, is what I would expect around all sides of the
thumbnails.  [Perhaps a little bit more between play/add buttons and the next thumbnail
to keep the buttons grouped with the right artwork].
Comment 28 Dan Sully 2006-08-17 13:49:26 UTC
Marking fixed per Michael Herger