Visual tweaks

[maoo]

• The filters and sorting areas at the top of the page could do with some space-optimisation - they're taking up a lot space right now
• Some of the project cards' contents have alignment issues (e.g. the "Integration Bridge" card)
• Filters should have a "button" aspect, not show up as a link
• Add SSF favicon

[maoo]

changes on #6

[maoo]

@pmonks wdyt? http://rawgit.com/symphonyoss/symphonyoss.github.io/filtering/index.html

[pmonks]

Looks good!

Some minor LaF comments:

1. The hover / mouseover colour for a button should never be the same as the colour of the selected state of that button (this is visually confusing). Instead, there either shouldn't be a hover / mouseover colour at all, or it should be a very subtle shading of the current colour of the button (i.e. unselected or selected).
2. The gradient within the buttons is super retro looking - can we please catch up to the late 2000s and embrace flat design?? 😉
3. Ditto rounded corners - nobody's used rectangular buttons since the 1990s!! 😉 Take a close look at how GitHub buttons function visually to get a good idea on how this and the previous two points should work together.
4. What (if anything) do the blue triangles within each "project card" represent? Can we actually use that colour to indicate something useful (and include a key / mouseover popup to explain what the colour means)?
5. Can we include the lifecycle state badge on each project card somewhere?
6. The difference in the text on each card for a single-repo project vs a multi-repo project is still arbitrary and confusing. Either we should pull the short description for at least one of the repos in a multi-repo project, or we should drop the short description from single repo projects and just show hyperlinked repo names. Doing two completely different things in each of these cases is really weird.
7. Can we make each project card smaller, vertically? There's a lot of wasted whitespace on this page.
8. Alternatively, can we use that whitespace for useful information (at a minimum, the metadata that's filterable at the top of the page)?
9. Why is the favicon a piece of nigiri sushi?? 🤔

[maoo]

@Kabrakssis , please ignore items 4 and 6, as they rely on data normalisation that needs to be addressed in another issue. Thanks!

[maoo]

@Kabrakssis - please checkout the code locally (filtering branch) and have a look, since the amount of languages have drastically increased after changing JSON structure.

[maoo]

Completed migration to bootstrap 3, which brings a completely new approach to UI.

@Kabrakssis , please checkout the bootstrap branch and improve styling, following the guidelines that Peter listed above.

[nikoganev]

General enhancements:

• Number of project shown should appear on top of project grid
• Copy url should be aligned to the right side of the banner
• Move "Project Catalogue - Symphony Software Foundation" to the top left (in the banner)
• Move dropdowns in a horizontal div below the banner( 1 line for each dropdown)
• Move the logo to the top left side of the banner before the title "Project Catalogue - Symphony Software Foundation"
• Change the "Project Catalogue - Symphony Software Foundation" to "Welcome !"

Regarding projects:

• Center github stats and improve styling in general
• Improve language logo(make them equal size) margin styling
• Improve repository list styling by separating them visually (https://v4-alpha.getbootstrap.com/components/card/#kitchen-sink)
• add alt="" for the logos of languages and github stats.

[maoo]

More issues to fix coming from @pmonks:

• bring the badge down below the name
• what's up with the "C-plus+" language icon?
• the Java icon looks squashed; would be ideal if all icons were the same height, but maintained their original aspect ratio ("pin" the heights of all of the icons to be the same, then let the width "float" based on the aspect ratio) - see https://jsfiddle.net/sot2qgj6/3/
• having a filter for project "type" (bot vs integration vs app vs ...)?
• "languages" (needs a capital "L") - labels on the left side
• "projectState" (should be "Project State") - labels on the left side

[maoo]

All fixed except:

• the Java icon looks squashed; would be ideal if all icons were the same height, but maintained their original aspect ratio ("pin" the heights of all of the icons to be the same, then let the width "float" based on the aspect ratio) - see https://jsfiddle.net/sot2qgj6/3/
• having a filter for project "type" (bot vs integration vs app vs ...)?

[maoo]

Also the Java icon stretching should be addressed; give time to rawgit to update, then hit http://rawgit.com/symphonyoss/symphonyoss.github.io/bootstrap/index.html

Considering that we'll have to update ssf-metadata in order to add a project "type", I'd suggest to move the issue there and close this issue (assuming you're happy with the results), wdyt @pmonks ?