Sexy-looking repositories

We have some exciting news to share with you. Two weeks ago we started a project we’ve wanted to do for some time: Upgrading the Gitorious UI.

The goal is to simplify interaction, tone down some less useful features, improve code-browsing, and lose some technical debt on the front-end side of our code base. In short, we’re hoping to make Gitorious more useful and easier to work with.

Since we’re a small team of core committers with no professional designer on-board, we decided to base the new UI on Twitter Bootstrap to get a good visual baseline right off the bat. This provides us with a functional design that is easy to work with. Working with a component-based UI framework like this allows us to revise the UI fairly quickly, and will also improve our ability to iterate on and tweak the UI going forward.

What’s changing?

We started working with the repository pages, partly because that’s where most people spend most of their time on Gitorious, and because code-browsing is one of the most important features Gitorious provides. Code-browsing is also one the areas where we feel Gitorious can benefit the most from a UI upgrade. Eventually we hope to redesign the entire UI, but that is a big undertaking so we’re shooting for finishing slices of functionality. For a transitional period, we will live with the old and the new UI side-by-side.

How will this affect gitorious.org?

When the new repository pages are completed, we will deploy gitorious.org from the new branch (not yet available). In other words, you can expect to see the revamped repository live on gitorious.org in a few weeks. We will post an update when we have a better of idea of exactly when this happens.

How this will affect local installs?

We will cut at least one minor version, probably several, of the mainline repo before we start merging the new UI into the master branch.

Local installs are generally advised to stay with tagged versions. If you follow that advice, you will get the new UI when 3.0 is out.

Custom frontend theming and other kinds of skinning will likely break. We’re not making efforts to keep these backwards-compatible, but we will document the main changes.

How will this affect local installs commercially supported by Gitorious AS?

We will work with our customers to find the best way to upgrade the UI, after the 3.0 version has landed and been proven stable in the wild.

Suggestions? Ideas?

We’re sure many of our users – be it on gitorious.org, or some local install – have some thoughts on what they want from the web UI. We invite you to give us your feedback: pain points, suggestions for new/improved features or any other ideas you might have. Please leave a comment here, or email us at support@gitorious.org.

Status of the project

Currently, we’re developing a static prototype in order to quickly get enough pages up and running to make some observations on the overall coherence of the new UI. Next step is to start implementing the design in the actual application. The repository tree browser is a hot candidate to start with, as we will likely develop that as a separate library/application. You can expect to see commits on gitorious.org/gitorious before the end of August. In the meantime, you’ll have to do with the following screenshots:

We want to work with you on this upgrade, so please let us know what you think/want/don’t want!

18 Comments

Wow, this is great!
I was asking for a better syntax highlighting (for an example of what I mean, look at https://gitorious.org/ingvpy/ingvpy/blobs/master/ingv.py a little project of mine), but I see that this is already taken care of (thanks to pygments), so I commented only to thank you for the great work!

The problem I had with Twitter Bootstrap is the inability to use padding in the spanX containers as it breaks the layout. Also, I needed to draw a vertical border in the middle of the page and this wasn’t possible using TB.

I’m actually considering replacing Twitter Bootstrap in this page I’m working by Foundation which doesn’t have does shortcomings.

Rodrigo: Well, my understanding is that you don’t tweak padding etc on the “span” boxes – instead you use them to divide the page horizontally, then fill those boxes with other elements that can have as much or little padding as you desire.

As for the vertical border – add your own CSS for it.

We’ve rebuilt all the repository pages (including the admin pages) using Bootstrap, and I’ve not had any deal-breakers so far. In fact, I haven’t even been mildly annoyed by it, which is very unusual ;)

Something I would like to see is an improved Projects’ page. If looking at the current gitorious.org it is 1416 pages of projects in a seemingly random order. Not much use in browsing through those 1416 pages to look for something…

What I would like is the possibility to have different views of the Projects’ page, e.g., by using tabs. One view could by all means be the current version, another view could be the projects ordered alphabetically (of course with the possibility to start browsing from any letter).

Another view that I know some of our developers have requested is a simple one with one line per project (without paging) similar to what, e.g., gitweb shows.

I would also love for these views to be flexible so that we could easily add another view for our local server. Since in our case all project names are organized by a pseudo directory hierarchy, using a select few prefixes like apps, libs, tools, etc an alphabetical view is not too useful. However, a view that organized the projects according to the pseudo directory hierarchy would be really useful, as one could then easily browse them just like with a normal file browser.

Thanks Saur, that’s useful input. We’re focusing on repositories now, but projects are next on my want-list. I agree that some of the project views are not really useful at this point, and the listing in particular is something we could be creative with. I’ll ping for feedback when we get to this area specifically.

Bah, this is more easily said than done :) Believe me, I tried for several minutes before giving up, but you’re probably better on CSS than me. Since I suck in CSS, specially targetting IE, I decided for using something like Twitter Bootstrap, but then it was in my way and not helping much. Specially because I need to teach non-technical people how to maintain that site and I can’t teach them something that is not trivial to me because they wouldn’t understand. For my use case, Foundation seems to be exactly what I need. But anyway, this was just a suggestion. I’m happy that you’re happy with Twitter Bootstrap :)

Dates are hard… We’re past “end of August”, but today I started pushing to http://gitorious.org/gitorious/moron, which is the implementation of the new code browser (blobs, trees, blame). It’s early stage, but should already be usable for blobs.