Fixes to default theme

[nodiscc]

Work by @mrjovanovic

• Resolves the issue of menus being all wonky on window resize.
• Styles the tags and thumbnails to match the style of input boxes and buttons. This also makes tags easier to read.
• Improves padding on links, making private and public links visually consistent
• Improves spacing on search/tagfilter when on mobile, making them distinguishable.
• Fixes pixelated private links image and styles it to match other icons.
• Removes the box shadow around the "edit/delete links" sidebar and makes it more visually consistent.

Tested on Firefox and Chromium on GNU/Linux.

[nodiscc]

@mrjovanovic I'd also decrease all border-radius for buttons and tags to 3px instead of 5 to make thinks loog a bit "squarer". What do you think?

[nodiscc]

Merging on Sunday 15, March 2015. Please comment if you think we should not merge.

Edit: you can test this branch using git clone -b DefaultThemeRedesign https://github.com/nodiscc/Shaarli or by unpacking https://github.com/nodiscc/Shaarli/archive/DefaultThemeRedesign.zip

[mrjovanovic]

@nodiscc
Well, the border radius for the menu buttons is 5px, and they should match each other. It looked odd with tags at 3px and menu buttons at 5px. I agree that 3px looks nicer, but I didn't want to change so much in the theme, since it's my first contribution.

Would it be ok to do 3px for everything?

[nodiscc]

Would it be ok to do 3px for everything?

Yes that's what I meant. I'll do this.

[mrjovanovic]

Sure, sounds good.

Speaking of changes, then - suggested color palette that maintains the spirit of the current default theme:

Further small changes I'd enjoy implementing in this branch:

• Inline buttons for search/tagfilter, like the ones currently in mobile mode
• Changing "Links per page" to dropdown with possibility to input custom number
• Restyling the "Tools" section, so it's not all buttons.
• Adding padding between forms in "Add Link" section

Potentially (more radical):

• Switch from input type=submit to button type=submit throughout (allows better styling, but lose support for IE6/7)
• Restyle "Daily" without images (leave that for themes)

Too much?

[nodiscc]

I think you can propose these changes in another Pull Request when this one is merged, starting with the less visible ones (inline buttons, linksperpage dopdown, tools and editlink restyling) and allow some time for people to test and get feedback.

Then you could submit another PR for the color scheme change, same process.

Then submit a PR for Daily restyling, same process. Can you give some details about "without images (leave that for themes)"? Something to do with templates? Note that there are changes planned to make third party themes templates support easier (#163)

Then submit a PR for button type=submit and see how it goes. What do you mean by "lose support"? Would that mean Shaarli becomes unusable on IE6/7?

Thanks again for your contributions, you're very helpful!

[mrjovanovic]

Awesome. Thanks for the words of encouragement. Will follow according to your suggestions. :)

[nodiscc]

@mrjovanovic Another thing you may want to look at: the paging buttons/links (< Older page 1/92 Newer >). From my experience people simply don't notice them/realize there are more pages. You may want to try something to make this look more evident. Bold somehow works.

[mrjovanovic]

I also think the positioning of those buttons/links is a bit problematic. I'm trying out several different options, but I feel that the entire paging system is unfortunately designed.

On top of that, it's difficult to implement things while not breaking compatibility with <IE9. :( When I have something, I'll put it up here for people to look at.

[nodiscc]

breaking compatibility with <IE9

Frankly I don't mind if things are a bit broken on IE <9. People/orgs should update their browsers or use standard compliant ones. So at longs as the core functionality remains usable (adding links and browsing) I'm fine with it.

[nodiscc]

@mrjovanovic If you want to reimplement a proper responsive grid system, go ahead. It would be nice if it keeps the current look and feel overall.

There are grid systems without browser-specific hacks out there. I had good results with this one https://github.com/ThisIsDallas/Simple-Grid on other projects, just an example. Doesn't mean it would do a great job on Shaarli.

[mrjovanovic]

This looks cool! I will try it out in the future. Right now, I'm just playing with a few small things around, hoping not to break existing themes or change things too much.

Thanks!