Wed Jan 18, 2012 8:47 pm
Re: Web UI in Restful Ajax
Thanks kairoh. Now that I've spent some time styling it many of the small things you have changed make perfect sense (button placements, etc.). It's really well made - great work!
Here's how I'm getting on with trying to make it look like the Synology UI. There's a lot of content to squeeze into a small window so I don't want quite as much whitespace as Synology use, and I can't use the same javascript library for the UI widgets that they use without editing your code, so I've made it look as similar as I can using plain colours. I'm pleased with the result, but I want to find some way of incorporating the busy spinner animation without it taking up too much space.
I can confirm that the newer 0.6.2-a version's wrapper script does work with Java 6 and Java 7.
I have a few things to feed back/suggest if possible:
. Can you put the "Serviio Console" text in <h1> in a class so it can be hidden by the CSS, leaving the spinner visible? As you can see above, I don't really need the title because the window is already titled.
. Contrary to my earlier post, the UI does change language ok, but you have to click refresh. That wasn't obvious - I thought that Save would do it. Is there a reason to keep that as a separate button? All languages seem to work except the ones with country codes longer than 2 characters (pt_PT, pt_BR, zh_CN, zh_HK), so that's probably a simple fix. For these languages, the only text that is correctly changed is the Online Metadata Sources dropdown, so that should hopefully lead you to the problem.
. There are just a few superfluous <br> tags in there that need removing (I can adjust the spacing between elements using CSS, but these few inconsistent extra breaks are a problem). There is one on just above the Serviio Server Status, one below the text on the Trancoding tab, and one on the Console Settings lab above the language selection.
. Library Refresh probably ought to be a fieldset within the Shared Folders tab since it only relates to that (not to Online Sources which are parsed at a different interval). That's how it's done in Zip's UI.
. In Online Sources some feed URLs like gametrailers.com for instance can be very long - would it be possible to truncate them with "..." when they are longer than say 55 chars so they don't make a mess of the table? Perhaps something similar for long Shared Folder paths (but display "..." + the last 55 chars - which are more important than the first for a folder name).
. Online sources still have a selector check box even though they can be selected by being clicked (like Renderers and Shared Folders), so presumably that whole table column can be removed?
. In the Presentation tab could the table contents be split into classes depending on whether it's a heading (audio, video) or normal items, so they can be styled differently (indented)?
. I'm finding it hard to style this text on the Metadata tab. "Serviio includes various ways to retrieve descriptive metadata of your video files. Please pick one or select 'No descriptive metadata' from the drop-down box.". Should this perhaps be in <i> tags like the rest of the larger text fields? I need the linespacing to be narrower for that text in particular. In fact, those <i> items probably should be in their own class (to keep the styling completely separate from the HTML).
. If I use n-thchild to style every odd table row white (even rows slightly grey so the the rows are easier to see on screen without table borders) then it breaks the row select behaviour for those rows that have been styled differently. Do you know why this might be? I'm guessing it's connected to how you implemented that in javascript. To make it absolutely clear that they are selectable it would be great to have a "hover" class for these too, like with the tabs.
Now I'm going to work on the dialog boxes...
I'm going to be away for a few days, so the Synology package will need to wait just a little while longer. It'll be worth the wait though!
Here's how I'm getting on with trying to make it look like the Synology UI. There's a lot of content to squeeze into a small window so I don't want quite as much whitespace as Synology use, and I can't use the same javascript library for the UI widgets that they use without editing your code, so I've made it look as similar as I can using plain colours. I'm pleased with the result, but I want to find some way of incorporating the busy spinner animation without it taking up too much space.
I can confirm that the newer 0.6.2-a version's wrapper script does work with Java 6 and Java 7.
I have a few things to feed back/suggest if possible:
. Can you put the "Serviio Console" text in <h1> in a class so it can be hidden by the CSS, leaving the spinner visible? As you can see above, I don't really need the title because the window is already titled.
. Contrary to my earlier post, the UI does change language ok, but you have to click refresh. That wasn't obvious - I thought that Save would do it. Is there a reason to keep that as a separate button? All languages seem to work except the ones with country codes longer than 2 characters (pt_PT, pt_BR, zh_CN, zh_HK), so that's probably a simple fix. For these languages, the only text that is correctly changed is the Online Metadata Sources dropdown, so that should hopefully lead you to the problem.
. There are just a few superfluous <br> tags in there that need removing (I can adjust the spacing between elements using CSS, but these few inconsistent extra breaks are a problem). There is one on just above the Serviio Server Status, one below the text on the Trancoding tab, and one on the Console Settings lab above the language selection.
. Library Refresh probably ought to be a fieldset within the Shared Folders tab since it only relates to that (not to Online Sources which are parsed at a different interval). That's how it's done in Zip's UI.
. In Online Sources some feed URLs like gametrailers.com for instance can be very long - would it be possible to truncate them with "..." when they are longer than say 55 chars so they don't make a mess of the table? Perhaps something similar for long Shared Folder paths (but display "..." + the last 55 chars - which are more important than the first for a folder name).
. Online sources still have a selector check box even though they can be selected by being clicked (like Renderers and Shared Folders), so presumably that whole table column can be removed?
. In the Presentation tab could the table contents be split into classes depending on whether it's a heading (audio, video) or normal items, so they can be styled differently (indented)?
. I'm finding it hard to style this text on the Metadata tab. "Serviio includes various ways to retrieve descriptive metadata of your video files. Please pick one or select 'No descriptive metadata' from the drop-down box.". Should this perhaps be in <i> tags like the rest of the larger text fields? I need the linespacing to be narrower for that text in particular. In fact, those <i> items probably should be in their own class (to keep the styling completely separate from the HTML).
. If I use n-thchild to style every odd table row white (even rows slightly grey so the the rows are easier to see on screen without table borders) then it breaks the row select behaviour for those rows that have been styled differently. Do you know why this might be? I'm guessing it's connected to how you implemented that in javascript. To make it absolutely clear that they are selectable it would be great to have a "hover" class for these too, like with the tabs.
Now I'm going to work on the dialog boxes...
I'm going to be away for a few days, so the Synology package will need to wait just a little while longer. It'll be worth the wait though!
LG OLED55B8PLA | PS4 Pro | Xbox One S | Synology DS214play
Serviio 2.1 package for Synology NAS - with limited hardware transcoding support!
Serviio 2.1 package for Synology NAS - with limited hardware transcoding support!
