[Gargoyle UI/UX] Requesting upgrade from dark ages

[StopSpazzing]

So what it looks like on access.sh page, mouse over on disabled area's shows the icon you currently see:

http://i.imgur.com/vF7JWHB.jpg

Currently this page is using full length forms, which is different from the text left setting right. Just one way of displaying it.

I've recently modified both common.js and tables.js, to fix a few things (inside common for bootstrap support) and add table headers so tables look cleaner:

https://i.imgur.com/16wrgwC.jpg

PROTIP: Don't edit common.js unless you like your router rebooting on file save ...and wiping your settings.


Backup.sh:

https://i.imgur.com/JEfrXp9.jpg

[ispyisail]

Thank you

[StopSpazzing]

Shrunk size of files I included to ~74KB. The difference between before and after the changes is extremely small.

Reworked the code again, too much junk, needed to be clean. Currently only 2 new files in theme folder: bootstrap.min.css, and theme.css. I removed jquery dependencies and that shrunk everything.

What the overview looks like:
http://i.imgur.com/mvfqJT2.png

Login (red area will be the "alert" for being logged out or incorrect password):
http://i.imgur.com/tdci205.png

Backup/Restore:
https://i.imgur.com/dyzEYev.png

Finishing up with the rest of pages, then will verify everything works, then do a massive github pull where people can test the code and suggest changes. Need to finish before Game of Thrones starts...

[Lantis]

Will plugins need modification for this new system?
I did some bodgycss manipulation in one if my plugins.

[StopSpazzing]

Will plugins need modification for this new system?
I did some bodgycss manipulation in one if my plugins.

Nope, literally drop in and works. All .sh pages get surrounded in row, then a 12 column div, will force the content to be responsive. Tested it with your adblock plugin without modifications:

https://i.imgur.com/8Z1PtoF.png

I would suggest breaking it up into rows and columns to make it better on mobile, however.

How it currently looks on mobile:
https://i.imgur.com/QH65PXN.png


How the custom code in overview.sh looks as an example (only html):
https://gist.github.com/stopspazzing/ba ... 2bbb33ea2a

How overview.sh looks on mobile(scrolled down to show more):
https://i.imgur.com/2bM2sRt.png
compared to its desktop version:
http://i.imgur.com/mvfqJT2.png

Pretty simple and self explanatory, wouldn't you agree?

Check out the bootstrap grid for more examples:
https://getbootstrap.com/css/#grid

All css for bootstrap is included. So anything on that page will work!
Components were selected based on need, and anything javascript was excluded.
To see my current "build" of bootstrap: https://getbootstrap.com/customize/?id= ... 2f36caabda

[Lantis]

My other plugin spectrum analyser is the one I was worried about. It's alright it will be a quick fix I contained all the css in a module.

[StopSpazzing]

Here we go: https://github.com/ericpaulbishop/gargoyle/pull/515

[tapper]

Hi nice work. (highfive)

I cant build my self but as soon there is a build to test i will be on it lol. I will test with FF48 IE11 edge. and NVDA and jaws screen readers.

[MucuCat]

sweet mother goose this looks amazing!!

[StopSpazzing]

Hi nice work. (highfive)

I cant build my self but as soon there is a build to test i will be on it lol. I will test with FF48 IE11 edge. and NVDA and jaws screen readers.

I look forward to extensive testing. Would love feedback.

sweet mother goose this looks amazing!!

Thank you! Still a work in progress.