Sickchill: Responsive UI

[beschoenen]

Pass one: (Initial responsiveness)

• done

Pass two:

• [ ] Login
• [x] Api builder
• [ ] Home
• [ ] Show
• [ ] Show edit
• [ ] Show rename
• [ ] Add show
• [ ] Add new show (needs rewrite)
• [ ] Add new show Trakt
• [ ] Add new show IMBD
• [ ] Add existing show
• [ ] Manual post-process
• [ ] Schedule
• [ ] History
• [ ] Mass update table
• [ ] Mass update
• [ ] Backlog overview
• [ ] Manage searches
• [ ] Episode Status Management
• [ ] Manage torrents
• [ ] Failed downloads
• [ ] Help & Info
• [ ] Config general
• [ ] Config backup/restore
• [ ] Config search
• [ ] Config providers
• [ ] Config subtitles
• [ ] Config post processing
• [ ] Config notifications
• [ ] Config anime
• [ ] News
• [ ] IRC
• [ ] Changelog
• [ ] Error log
• [ ] Log
• [ ] Server status
• [ ] 404 error
• [ ] 500 error
• [ ] Anime Subgroup picker
• [ ] Quality picker
• [ ] Show options
• [ ] Root directory selector
• [ ] uniform config look (position checkboxes etc.)

To be edited:

• Mass update should use POST instead of GET
• Give the subtitle providers page the same look as search providers

[ward0]

Thanks for the hard work, keep it up.

[miigotu]

Hey, saw you made some commits tonight, round one going to be ready to merge in soon it seems?

[beschoenen]

Yep, it's almost done, tho the last 2 config pages will take a bit more time, they're kind of a pain to do.

[miigotu]

Yeah some of those pages are way bigger than a template should ever be, glad your almost done though. This is a highly anticipated feature

[beschoenen]

@miigotu could you change the sql_results variable in the displayShow page?
I'd like to loop through the seasons and then the episodes.
like:

Season 1
     |- episode 1
     |- episode 2
Season 2
     |- episode 1

So, a double for loop.
This will result in much cleaner html, I'm kinda hacking it atm, like in the testRename page.

[miigotu]

I can, but it might degrade performance. That is the result of an SQL query.

You will need to change a lot in the template also, the method I have here can return sql_results[season][episode]['name'] if that's exactly what you are looking for.

[beschoenen]

if your [episode] is the same as one result is now, then yes.

[beschoenen]

Well, i rewrote it the hacky way

[al3azp]

Is it possible to add Right-to-Left Languages Support with this UI enhancements.

[miigotu]

That is beyond the scope of this feature

[beschoenen]

@miigotu The JS in the addShow page is preventing me from making it responsive.

[miigotu]

How? What do you need from me? Im not a js expert but I can try to help.

[beschoenen]

There's a script that's giving the <fieldset>s a fixed width and offset, i don't know which one.

Well, that's actually not the problem, the problem is that the addShow in it's current state (with the animations and stuff) can't be made responsive.
I'd have to remake it.

[miigotu]

Sorry, I dont know how to help, but maybe you can keep the existing one intact and create one alongside it until it is done (if you want to rewrite it).

[beschoenen]

Yea, I'll rewrite it, just not right now.

So you can merge it, if you want.

[beschoenen]

Or do you want me to merge develop into it first?

[miigotu]

How much conflicts are there?

[beschoenen]

Not sure, can't be a lot, i merged a few times already.

[miigotu]

Yeah if you can merge develop into yours first that would be best, Conflicts in:
500.mako
config_search.mako
config_subtitles.mako
displayShow.mako

Then i will review it and merge it into develop for testing

[beschoenen]

I'll make a PR then, that'll probably be easier for you.

[neoatomic]

Let me first thank @beschoenen for his hard work on this PR/UI. :+1:

I noted a few things that we need to look at.

First the navigation buttons (General, etc.) are sorting from the back to the front now.
As you can see in the bellow screen the "Anime" button start first instead of the "General" (algemeen) button.

Same sorting issue of the Shows buttons.
Also there is a big space next to the poster now. Thats asking to be filled. maybe @wimpyrbx has some ideas. ? :)

[beschoenen]

@neoatomic The buttons got swapped with the float: right; i guess, how should they be sorted? Alphabetically?

And the whitespace, that's a problem with the bootstrap grid system, I'll write a custom thing for that soon™

[miigotu]

That big space is because the poster is not as large as it used to be, but the container for it still is. Removed the poster scaling from the css?

[beschoenen]

Removed the poster scaling from the css?

That's the bootstrap grid system :P

[miigotu]

Yeah I understand the grid, but the poster image itself is cached at a smaller size than it is supposed to be displayed, thats why we had it scaled up via css

[beschoenen]

This is the problem, the bootstrap container is too wide, but it has to be this wide, because it'll get smaller when your resolution is too.

[miigotu]

With col-lg-2 col-md-2 col-sm-2 its a little better

[beschoenen]

@neoatomic The whitespace between the poster is fixed.

Should I just reverse the menu items? Or should they be in any particular order?

[miigotu]

Looks like it is just reverse
Here is the original order (some are shown conditionally):

[neoatomic]

Seems it now has a white space at the top.?

[beschoenen]

:/ damn, I'll have a look at it probably Thursday. Kinda swamped atm.

Edit: Did you try refreshing without cache? because I don't have this issue, http://puu.sh/oDX9A/44378d947a.png

[neoatomic]

Strange, Edge also has the issue. :

[miigotu]

@beschoenen maybe you didnt build the css, it is also handled by bower =P

Ill push it now.

[miigotu]

@neoatomic I wasnt able to reproduce that error either, likely your browser is caching the css.

[beschoenen]

@miigotu I get the error as well, in Safari.

[neoatomic]

What if we move the poster into the (gray) box/field, just left of all the other info like "quality", show time etc is.? (Seems to me the poster does about fit the box seize.)

[beschoenen]

I'll try to fix it first, it's probably just a small CSS thing.

[beschoenen]

@neoatomic I tested it on Safari, Chrome & Firefox.

[neoatomic]

@beschoenen Just tested, and its working fine now. Thanks. :)

[a10kiloham]

Thanks for the work on this guys. Progress looks nice!

[neoatomic]

Poster issue is back.?

Branch: develop
Commit: 25abc831357c19ca7dbbdfc53cbbd3c72d91e851

[beschoenen]

@neoatomic I hate Firefox.

Edit: should be fixed in the new responsive-ui branch

[neoatomic]

@beschoenen Great work on the "round 2" PR.! It improves a lot of things. :+1:

Only small thing i found till now is the outlining of check boxes and text behind it. :

[beschoenen]

@neoatomic Fixed ;)

[neoatomic]

@beschoenen For some reason i have an extra checkbox at the end of the options under MassUpdate. But i cant figure out why.

https://github.com/SickRage/SickRage/blob/4c0e8df15641b900e19aa4532074d344727f7662/gui/slick/views/manage.mako#L59

And this one, probbebly copy/pasted and forgot to change the description. ? :)
https://github.com/SickRage/SickRage/issues/1874

https://github.com/SickRage/SickRage/blob/c0b3435730360d17850e8cad8e1e96f864b88821/gui/slick/views/config_search.mako#L248

[miigotu]

Plot in schedule is wrong width again:

[beschoenen]

@neoatomic The line of code you're mentioning is not the same thing, that's the table header:

Those dropdown menu are generated somewhere else, I haven't touched those.

[beschoenen]

@miigotu How is it the wrong width? Again?

[miigotu]

The plot belongs to the right of the poster, under the quality, and the text is supposed to fill the width of that container

[beschoenen]

Closing, please tag me in any UI related issues.