Drift

A few days ago, I posted about how Redmine was the solution for our agency. I mentioned a few downsides, but neglected to mention this. Over the past few weeks, I have been working on a new Redmine theme as a way to improve my skill as front end development. While I am generally very pleased with how Redmine works, I have to admit that the markup is an absolute mess. My complaints stem, mostly, from the complete lack of containers around sections in the UI – unrelated items are often under the same parent which makes it incredibly difficult to work with.

This is how pagination is handled in Redmine:

<p class="pagination">
    <span class="current page">1</span>
    <a href="/projects/redmine/issues?page=2" class="page">2</a>
    <a href="/projects/redmine/issues?page=3" class="page">3</a>
    <span class="spacer">...</span>
    <a href="/projects/redmine/issues?page=181" class="page">181</a>
    <a href="/projects/redmine/issues?page=2" class="next">Next »</a>
    <span class="items">(1-25/4504)</span>
    <span class="per-page">Per page:
        <span>25</span>,
        <a href="/projects/redmine/issues?per_page=50">50</a>,
        <a href="/projects/redmine/issues?per_page=100">100</a>
    </span>
</p>

Three distinct elements all in the same container with no clear designation of what item is what. The sidebar has the same problem:

<div id="sidebar">
    <h3>Issues</h3>
    <ul>
        <li>
            <a href="/projects/redmine/issues?set_filter=1">View all issues</a>
        </li>
        <li>
            <a href="/projects/redmine/issues/report">Summary</a>
        </li>
    </ul>
    <h3>Custom queries</h3>
    <ul class="queries">
        <li>
            <a href="/projects/redmine/issues?query_id=84" class="query">Documentation issues</a>
        </li>
        <li>
            <a href="/projects/redmine/issues?query_id=1" class="query">Open defects</a>
        </li>
        <li>
            <a href="/projects/redmine/issues?query_id=2" class="query">Open features</a>
        </li>
        <li>
            <a href="/projects/redmine/issues?query_id=931" class="query">Patch queue</a>
        </li>
        <li>
            <a href="/projects/redmine/issues?query_id=42" class="query">Plugin issues</a>
        </li>
        <li>
            <a href="/projects/redmine/issues?query_id=7" class="query">Translation patches</a>
        </li>
    </ul>
</div>

Those are just two sections in a sidebar. If you add other sections through plugins, it just adds more items to that container in the same manner, although at least here there are lists half-separating content.

All-in-all, Redmine is a very tough thing to theme and, often, to fix it you have to rework the structure through Javascript to make it doable, which is a terrible habit to get into.