Cleaner UI for explore page

[pgaskin]

Does anyone else like my cleaner design? If so, I will submit a PR.

Screenshots on try.gitea.io

Old	New

[pgaskin]

How I did it:

1. Move content and menu out of grid
2. Menu css: justify-content: center;margin-bottom: 10px;
3. Menu classes: ui secondary pointing tabular top attached borderless menu navbar
4. Remove explore: header from menu

To make it look like this so you can try it, use the following js (yes, I know it does not do the exact changes above, but it essentially does the same thing):

$(".explore>.ui.container>.ui.grid").removeClass("grid");
$(".four.wide.column>.menu").attr("style", "justify-content: center;margin-bottom: 10px;").attr("class", "ui secondary pointing tabular top attached borderless menu navbar");
$(".ui.menu .header.item").remove();

[pgaskin]

This modification will also make the ui look better on smaller screens.

[tboerger]

Basically it looks better, but the horizontal nav can be done better

[pgaskin]

@tboerger What should I change?

[tboerger]

Maybe a different background on the full width for this top navigation

[pgaskin]

@tboerger Like this:

After moving it above the .ui.container, I added the css:

justify-content: center;
padding-top: 15px;
margin-top: -15px;
margin-bottom: 15px;
background-color: #FAFAFA;
border-width: 1px;

UPDATED: according to the next comment

[tboerger]

Yes, and maybe more space around the search

[tboerger]

I can't remember the html structure, but is it easily possible to list two columns on large displays?

[pgaskin]

@tboerger Done, see new screenshot

[pgaskin]

@tboerger not easily

[pgaskin]

@tboerger Should I submit a PR now?

[tboerger]

From my side: yes.

[pgaskin]

#1255