Give proper classes to buttons

[danielo515]

So I can style them without editing the core.
Currently many buttons suitable of customization just have generic classes like tc-btn-invisible. The plus sign is a good example. I want to make that button bigger on mobile with CSS media queries, but I can not because it does not have any class that I can refer.

[roma0104]

I think that is a good idea, or perhaps a better button symbol even? The addition symbol was a quick selection based upon its non-intrusive presence. I attempted a couple symbols but didn't like the result.

Page styling has not be a focus for me yet. I wanted to round-out the core abilities first and get some stability. If you have a solution to propose, please request the pull.

[roma0104]

Added classes to the "+" for new actions in the Project lists and made the plus glyph larger by default. I find the larger glyph personally not too difficult to touch on a iPhone 4S, but that is the only touch, mobile device I have easy access to.

Other widgets found in the bluebox now have classes for future CSS improvements but currently just have references and no customised CSS.

[danielo515]

Hello,

I think it will be more useful if you give the class to the button instead of the span inside the button. That way people can style the button itself, and if they want they can style its children. This way you open a door for theme creation.

[roma0104]

Hey Danielo,

I found your issue with how it was done. It had a vestigial macro from when I was first hacking this thing together; I removed the class macro and added the more appropriate classes. You should see the commit in a few hours.

For the other widgets with classes on paragraph or span tags:
I classed the paragraph for a particular reason, whether it is correct to do so, I don't know. I added the class to the span so a person can style the text that may not structurally be inside the widget. Then the author can use CSS selectors like: .gsd-bluebox-droplist button { ... } to actually style the button itself.

[danielo515]

Hello @roma0104

Currently it is like this

 <$button> <span> text</span></$button>

So if the class is on the span, there is no way to access the button with the notation you have posted

.class button {
}

If the class is on the button, instead, you can use the method you described.

[roma0104]

I think this corrected the concern you were having with button classes.
fd74e46
If this did not please tell me which part of the code specifically. Additionally, if you find some more buttons that need some classes please tell me. I did a quick search for buttons needing classes.

[danielo515]

Yes, commit fd74e46 is exactly what I was asking for. If I find more buttons or UI elements that claims for a class I will let you know with a new issue.

Thanks!