New reddit-like UI

[swiftSwathSee]

TL;DR A reddit-like UI, wider popup, and minor code cleanup.
Screenshot:

---

DETAILS

reddit-like UI

• Mimics reddit's text: font families, colors, sizes, styles, and positioning.
• Mimics reddit's element layout and colors.
• Adapted to the extension's current HTML/CSS structure, thus no major restructuring is needed.

Wider popup

• Width increased by 300px.
• Item title character length increased by 20.
• Item body character length doubled to 256.

Control bar additions

• New Inbox icon which links to reddit inbox.
• Tooltips for each icon.

Code changes

• Various elements changed to div and span.
• New CSS class names and IDs for easier selecting for future features. These mostly match reddit's own naming scheme (ex. the title line h4 is now called "tagline").
• CSS cleanup: uniform tab spacing.
• Updated Font Awesome.

[bgrawi]

I appreciate the work you put in to this, but right now I don't want to merge this as it completely changes the UI for the extension. I would rather see a theme-switching capability and list this "reddit-style" one as an option. Thanks!

[swiftSwathSee]

Fair enough, although this particular UI won't be possible to achieve with just a simple theme switcher (i.e. one that merely loads another stylesheet) because it requires modification of the HTML and script-related stuff like the character lengths. I have several ideas for a more complex theme switcher that would allow themes to customize every aspect and would make all the individual elements modular and easily-positioned, but I don't plan on implementing those any time soon due to how long it will take me.

Now that I know you prefer the current UI, for my next merge request I plan to do some "backend" stuff that would be preparation for a simple theme-switcher. This work would not change current UI at all, rather it would only restructure the some of the HTML/CSS and some of the scripts so that it's slightly easier to theme everything in the future. It would be basically most of what I listed in the Code changes section of this request. Should I go ahead with this plan or will it be a waste of my time?

And just out of curiosity, what specifically do you dislike about the reddit UI? Is it the colors, the overall layout, the styling, or all of the above? To me, the reddit UI is much more organized and easier to read that the current one, but I'm interested about your take on it and why you feel the current UI is better. Using this info I might be able to propose a middle ground between the two UIs.

[bgrawi]

I do think that this could be achieved with out too much hassle. The structure of the HTML did not appear to change too much, other than adding in those spans and such. I think if you checkout the old version of the css file and copy it, rename and then make small adjustments to it. I think it could easily be adapted. So yes, I do think it would be worthwhile doing the code changes and backend stuff.

Also, with regards to the reddit UI, I feel like its starting to cross the line between a simple notification popup and reading the actual reddit inbox. If we keep adding features to that view, it will almost literally turn into the main reddit inbox view (the whole logic could be replaced with an iframe 😉) and loose the value of being a quick notification center. Regardless, if some people (such as yourself) find it more useful, then I don't see a reason against it being at least an option.

In terms of a theme switcher, I did build a very simple one that could be modified and put into this project. You can find it here: https://github.com/ComputerScienceHouse/CSH-Login/blob/master/assets/script.js

Thanks for all the contributions!