Have left/right tab for workflows.

[GHLasse]

Some workflows have steps that really belong together. Like the online jobs with "Pending Jobs" and "Prints" which happen at the same time while the other steps are one after the other. Another example are active and inactive cost codes from #73.

I created a style suggestion which allows the tab-left and tab-right class to be assigned to the <li> elements containing the double step.

This is the code that needs to be added to your main css to add/ overwrite current definitions:

<style>
.nav-pills>li.tab-left>a, .nav-pills>li.tab-left>a:focus, .nav-pills>li.tab-left>a:hover {
    border-radius: 4px 0px 0px 4px;
    margin-right: 1px;
}
.nav-pills>li.tab-right>a, .nav-pills>li.tab-right>a:focus, .nav-pills>li.tab-right>a:hover {
    border-radius: 0px 4px 4px 0px;
    margin-left: 1px;
}
.nav-pills>li>a {
    color: #fff;
    background-color: #005C85;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
    color: #fff;
    background-color: #006E9F;
}

.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color: #006E9F;
}
.nav>li>a {
    margin: 0px 10px;
}
</style>

or the bare minimum being

<style>
.nav-pills>li.tab-left>a, .nav-pills>li.tab-left>a:focus, .nav-pills>li.tab-left>a:hover {
    border-radius: 4px 0px 0px 4px;
    margin-right: 1px;
}
.nav-pills>li.tab-right>a, .nav-pills>li.tab-right>a:focus, .nav-pills>li.tab-right>a:hover {
    border-radius: 0px 4px 4px 0px;
    margin-left: 1px;
}
</style>

one then can change the sub-menu like this:

<div class="container text-center m-b-md">
    <ul class="nav nav-pills nav-justified">
        <li><a href="/OnlineJobs/index">Requests</a></li>
        <li class="active"><a href="/OnlineJobs/approved">Approved Jobs</a><li>
        <li class="tab-left"><a href="/OnlineJobs/pending">Pending Jobs</a><li>
        <li class="tab-right"><a href="/OnlineJobs/prints">Prints</a></li>
        <li><a href="/OnlineJobs/finished">Completed Jobs</a></li>
    </ul>
</div>

This is a suggestion more than a request, so let me know what you think! :-)

[whimsial]

We need to have a detailed conversation with @IlyaKhromov on this matter. I think we will try to come up with some solutions after the weekend.

[GHLasse]

Note to self: checked the interface and the code:

• Connected steps now have a gray background if the other connected step is active.
• Also all the buttons have been moved closer together.
• Changing the rounded edges to square ones on the side where two related steps meet has not been taken from the suggestion.