Normalize Input Styling across the app


(Sam Saffron) #1

This has always driven me nuts, but we should fix it with the new composer here.

We have 4 different styles going:

Topic title uses, inset:

image

Topic body uses, nothing, and no rounded corners:

image

Topic category uses nothing and rounded corners:

image

Topic tags uses, border and square corners

image

We got to do something about this.

image


Help us test a new composer style
Help us test the restyled composer
(Kris) #2

I agree with this, but I think it’s a good opportunity to make all inputs consistent across Discourse; otherwise I’m just adding overrides at the composer level.

I don’t think it would be very difficult. I’d suggest removing shadows and rounded corners, and adding a border and background color everywhere. That would ensure all inputs are always visible because of either the border or the background color, and then shadows and rounded corners are theme-level additions.


(Sam Saffron) #3

Agree, this makes sense, minimizing the amount of styling going on the default theme makes it way easier to theme Discourse.

Perhaps have a look at this once you are done with the composer.


(Joshua Rosenfeld) #4

This is the advanced search with the new consistent style:

This is how it used to look:

Not sure why, but I don’t like the new look - perhaps it’s the darker border lines.

Side note @joffreyjaffeux, the datepicker is not aligned.


(Jeff Atwood) #5

I think the new consistency looks great, personally!


(Dave McClure) #6

I think the darker outlines make it more obvious that the layout of other fields could be made more pleasing. For instance, it’s more clear now that the category dropdown sticks out on the right.

Maybe there is an opportunity here to improve this page at some point?


(Sam Saffron) #7

@awesomerobot @joffreyjaffeux just noticed a 1px diff here: (reply is one px shorter than reply controls on mobile)

Its not enough to yell OH NO disasta pasta, but, you know, I have problems so I am just spreading my OCD around.


(Kris) #8

aghhh where is this 1px coming from


(Joshua Rosenfeld) #9

Noticed another inconsistency - editing a topic title, category, and tags.

Category chooser is shorter than title and tags field, category chooser is closer to tags than to the title, and tags has what looks to be two borders.

Edit: wait a sec…looks like tags is still using select2 not the new select-kit. Is that intentional @joffreyjaffeux?

Edit 2: Nevermind then @awesomerobot - I’ll check this again once Joffrey is finished.


(Joffrey Jaffeux) #10

yes it’s not done yet, I’m working on {{tag-chooser}} but it’s quite a challenging one, the tag/group chooser are the last before I can remove select2.


(Sam Saffron) #11

This regressed due to the new styles


(Kris) #12

This was bothering me so I didn’t wait for the tag input update; just pushed an update that should make the layout for editing titles match the new composer

Also pushed a fix for the horizontal scrollbar on the category modal