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.

Some concrete improvements you can expect to see:

  • Better syntax highlighting
  • Support for vast amounts of new languages (through Pygments)
  • Better repository tree browsing
  • More mobile friendly pages
  • Readme-rendering
  • Better visual separation between private and public repositories
  • Less, yet more consistent navigation

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:

New Gitorious UI sketch

New Gitorious UI sketch - syntax highlighting

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

18 Comments

  1. Posted August 21, 2012 at 12:04 pm | Permalink

    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!

  2. Posted August 21, 2012 at 12:08 pm | Permalink

    This looks like a big step forward UX-wise. Keep us posted!

  3. Christian Johansen
    Posted August 21, 2012 at 12:17 pm | Permalink

    4d43: Here’s how it may look when we’re done: https://dl.dropbox.com/u/3378230/python.png

    • Posted August 23, 2012 at 3:55 pm | Permalink

      Wow! Really really cool!

  4. leif81
    Posted August 21, 2012 at 6:00 pm | Permalink

    Beautiful. This might be the tipping point to switch from gitweb + gitosis/gitolite.

  5. Posted August 23, 2012 at 12:12 pm | Permalink

    If you have asked me before, I’d suggest you to use Foundation instead of Twitter Bootstrap:

    https://github.com/zurb/foundation

    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.

  6. Posted August 23, 2012 at 12:16 pm | Permalink

    But keep in mind that Foundation is only IE8+, so in case Gitorious is targetting IE <= 7, it couldn't be used…

  7. Christian Johansen
    Posted August 23, 2012 at 1:29 pm | Permalink

    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 ;)

  8. saur2000
    Posted August 23, 2012 at 2:06 pm | Permalink

    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.

  9. Posted August 23, 2012 at 4:45 pm | Permalink

    Hi Christian, it helps showing an example about what I’m talking about. Good luck trying to replicate this with Twitter Bootstrap:

    http://jsfiddle.net/rosenfeld/XwvCX/

    The actual site I was requested to help building was this one:

    http://instituto-ser.herokuapp.com/

    There should be a vertical line separating “Próximos Cursos” from “O Eneagrama” and it should be exactly in the middle. I couldn’t do that using Twitter Bootstrap.

  10. Christian Johansen
    Posted August 23, 2012 at 5:06 pm | Permalink

    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.

  11. mvdan
    Posted August 23, 2012 at 6:42 pm | Permalink

    I am so looking forward to this :) Thank you guys for your hard work!

  12. Christian Johansen
    Posted August 23, 2012 at 7:55 pm | Permalink

    Rodrigo: I haven’t tried, and I don’t need it, but Bootstrap is not stopping you from doing any custom CSS. That border could be placed there using the good ol’ faux columns technique for instance.

    • Posted August 23, 2012 at 8:01 pm | Permalink

      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 :)

  13. robinst
    Posted August 24, 2012 at 8:57 am | Permalink

    Wow, looks very good, especially looking forward to the README support!

    +1 for a better project overview (start by sorting them by name instead of by creation date).

    Also, it would be really nice if the feed (Atom) would become useful again, i.e. listing the commit messages and IDs instead of just “pushed N commits”.

  14. Posted August 25, 2012 at 12:57 am | Permalink

    Oh my god, this is gonna be awsome :D

    I am definitely looking forward to this, a great UI is something Gitorious missed to be better than Github and all the others :)

  15. Christian
    Posted September 10, 2012 at 5:05 pm | Permalink

    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.

  16. Posted August 20, 2013 at 9:00 pm | Permalink

    I think it will be grateful to have many alternatives for good working.

    Alberto Andrade G.


3 Trackbacks

  1. By Autumn cleaning « The Gitorious Blog on August 23, 2012 at 7:53 pm

    […] The Gitorious Blog Skip to content « Sexy-looking repositories […]

  2. […] referenced in Christian’s recent update, we’re revamping the Gitorious web frontend. This will make Gitorious even nicer to use for […]

  3. […] people are anxiously awaiting the UI upgrades we announced in August, so I thought I’d give you guys a quick […]

Follow

Get every new post delivered to your Inbox.

Join 846 other followers

%d bloggers like this: