Custom JSS UX/UI improvement experiment

owen_hael
New Contributor III

Decided to post this finally, it's a simple Tampermonkey script that makes changes to the JSS that are meant to improve the appearance and save time. Have at it, tear apart the code, let me know what you think. Not a JS dev as the code will make clear.

https://github.com/opragel/customJSS

d301ae9e2a3b497aa5ce33a483e76d49
f9024a507b9b45eca31a0ed05261190d
0ab2d4a32e2f4d7c879022d4184ca9fb
fe7bbd432fc74ff1b531eee15017d923

22 REPLIES 22

dderusha
Contributor

Nice!

slapaglia
New Contributor

+1!

russeller
Contributor III

Worked like a champ. Feels like I'm in the future. Good work.

owen_hael
New Contributor III

Have plenty of other improvements in mind - will be listed in the GitHub project at some point soon.

Aziz
Valued Contributor

Awesome!

hcodfrie
Contributor

nice!!

matthewbodaly
New Contributor

good work.

jesseshipley
Contributor

Do more

andrewseago
Contributor

Gotta say it looks clean and refined! JSS X?

lfink
New Contributor

This is awesome. More please

savvynets
New Contributor

Excellent!

alisha_kimberle
New Contributor

I work at JAMF Software on the UX Team, Owen. I am very interested in what you have done here. Would love to talk to you sometime and any others like you. Ultimately, we want the product to work how you need it to. Your insights can assist in making that happen. Feel free to reach out to me if you would like. Thank you for your post. - Alisha Kimberley, UX (alisha.kimberley@jamfsoftware.com)

emily
Valued Contributor III
Valued Contributor III

I made a few tweaks for my org's customization of the JSS but yeah, this is super awesome.

alisha_kimberle
New Contributor

"A few tweaks" are good for us to know too, Emily. Feel free to email me if you'd like. - Alisha Kimberley, UX (alisha.kimberley@jamfsoftware.com)

emily
Valued Contributor III
Valued Contributor III

It looks like to get the policy and computer pages to use the Roboto font in addition to the rest of the JSS the div.contentScrollbox needs to have it's font adjusted too, since it's set to inherit the font. I don't really know JS well enough to figure out how to get that in there but I'll poke at it a bit.

ETA:

You can add this to the script to change the font on policy and computer pages:

// Changes font on policy and computer pages
$('#form-wrapper').css('font', '13px/1.3 Roboto');

emily
Valued Contributor III
Valued Contributor III

@alisha.kimberley I already put in custom imagery for my org in place of the JSS logos, so I just changed the JSS icon URL to be my custom one. Nothing too major. I may make some color adjustments on the login page, though.

alisha_kimberle
New Contributor

Thanks, Emily! And here I come to learn you presented at our JNUC last year. Awesome!

Emmert
Valued Contributor

This appears to work in Greasemonkey for Firefox as well.

owen_hael
New Contributor III

Fixed a couple obvious bugs, including one of the most annoying ones, sidebar disappearing when clicked instead of minimizing as intended. Works now. To update folks just have to repaste the new JS from Github into Tampermonkey right now - know there is a better update solution but haven't looked into it yet.

https://raw.githubusercontent.com/opragel/customJSS/master/customJSS.js

cab38130ac0d44a1a1cebf88c1709db8
de5a2f3dca5f4f46abea65010f3a7607

emily
Valued Contributor III
Valued Contributor III

I noticed the logo in the header is scrolling. Pretty sure I have the updated .js and css. I think the position:fixed needs to be position:relative to fix it, though I haven't tested if that impacts other elements.

2672bfb927e9488ea0a5ed5e79f9cfd5

#logo-dash, #sidebar-nav, .expandButton {
  position: relative; /* rather than fixed */
}

I should probably track this stuff on Github but I'm not all that Github savvy tbh.

davidhiggs
Contributor III

good stuff!

owen_hael
New Contributor III

Updated the (particularly old) logo to match the current one.

632d1e7e556d461d98953755c20148ff