Bug 7979 - New design for staff interface
Summary: New design for staff interface
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Adrien SAURAT
QA Contact: Ian Walls
Depends on:
Reported: 2012-04-18 15:08 UTC by Adrien SAURAT
Modified: 2013-12-05 19:53 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: ---
Text to go in the release notes:
Version(s) released in:

Proposed patch #1 (78.73 KB, patch)
2012-04-18 15:17 UTC, Adrien SAURAT
Details | Diff | Splinter Review
Proposed patch #2 (78.48 KB, patch)
2012-04-19 13:27 UTC, Adrien SAURAT
Details | Diff | Splinter Review
Proposed patch #3 (78.56 KB, patch)
2012-04-19 14:26 UTC, Adrien SAURAT
Details | Diff | Splinter Review
Follow-up converting structure to flexible YUI grid (7.96 KB, patch)
2012-04-19 20:10 UTC, Owen Leonard
Details | Diff | Splinter Review
Follow-up for permissions on pending links (2.43 KB, patch)
2012-04-20 12:41 UTC, Adrien SAURAT
Details | Diff | Splinter Review
[PATCH] Bug 7979 [FOLLOW-UP] New design for staff interface, rights fix (2.48 KB, patch)
2012-04-23 09:06 UTC, Paul Poulain
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Adrien SAURAT 2012-04-18 15:08:29 UTC
New design for staff interface, based on ideas from the last hackfest (more info in comments once patch sent).
Comment 1 Adrien SAURAT 2012-04-18 15:17:38 UTC Comment hidden (obsolete)
Comment 2 Gaetan Boisson 2012-04-18 16:12:53 UTC
a few words about the ideas that lead here :

- the quick search fields are replaced by the header search which is more consistent with the rest of the interface (and functionnalities are still the same number of clicks away)
- the koha logo on the left of the buttons is meant as a placeholder for when there are no news
- authorities is now presented as a separate module (consistently with how the interface is organized and the more menu)
- the information about pending comments and suggestion is in a separate block. the rationale behind this is that it's a different logic than the buttons : here we are bringing up information about what is happening inside Koha on the homepage, and saying the librarians "you need to take action here". So it's kind of a proto-dashboard area. We can think of other information that would show up there too.
- intranetmainuserblock should be used for all quick links libraries might need on their homepage
Comment 3 Fred P 2012-04-18 18:09:53 UTC
A semi-transparent drop shadow would pop the buttons out nicely, and allow the underlying Koha logo to show through:

a.icon_general {
    background-color: #F4F8F9;
    background-repeat: no-repeat;
    border: 2px solid #E6F0F2;
    border-radius: 6px 6px 6px 6px;
        -moz-box-shadow: -5px 5px 3px rgba(90,90,90,0.5);
	-webkit-box-shadow: -5px 5px 3px rgba(90,90,90,0.5);
	box-shadow: -5px 5px 3px rgba(90,90,90,0.5);
    color: #000000;
    display: block;
    float: left;
    font-family: verdana,arial;
    font-size: large;
    font-weight: bold;
    height: 46px;
    margin-bottom: 14px;
    padding-left: 53px;
    padding-top: 5px;
    text-decoration: none;
    width: 295px;
Comment 4 Fred P 2012-04-18 18:22:10 UTC
I realize there aren't any other shadows in the interface, so I would suggest that button shadows be subtle, maybe a 3 pixel offset, 3 pixel blur, and 50% opacity on a 75% black value:

   -moz-box-shadow: -3px 3px 3px rgba(90,90,90,0.5);
   -webkit-box-shadow: -3px 3px 5px rgba(90,90,90,0.5);
   box-shadow: -3px 3px 3px rgba(90,90,90,0.5);

A small shadow makes it easier for touch-screen users.
Comment 5 Fred P 2012-04-18 18:26:55 UTC
The more I look at your interface, the more I love it! Great job.
Comment 6 Alexandre Lengereau 2012-04-19 07:26:10 UTC
Great,great work.
Good for commercial.
Simple question that i'm asking.
Isn't better to remove the green logo koha in background .
I think it's more pure, and more clean.
Like this :

Simple suggestion.

Comment 7 Katrin Fischer 2012-04-19 07:40:44 UTC
Hi Gaetan and Adrien - I think I agree with Alexandre about the logo.
Comment 8 Magnus Enger 2012-04-19 07:53:54 UTC
This looks great! But I agree about the green logo in the background, either remove it or make it almost invisible.
Comment 9 Alexandre Lengereau 2012-04-19 08:13:19 UTC
another suggestion i didn't like so much the green color in the CSS
I think another color for the roolover will be more attractive.
I think this green look so old.

And i found a bug in the french interface that the Plus button is not is the same line that Circulation Adhérents Rechercher Panier
But in the English interface this bug seem to doesn't appear.

Snapshot :
Comment 10 Katrin Fischer 2012-04-19 08:17:40 UTC
Changing the width of toplevelnav should fix it - I had to do that in one of our installations after adding a link using the IntranetNav system preference. What I used there is:
#toplevelnav {
    width: 40em;
Comment 11 Adrien SAURAT 2012-04-19 12:53:16 UTC
Indeed ! Didn't notice that, but the width in #toplevelnav is too small. With 40px that's better, but when I remove it totally, it's good too ! Less is best, is there any reason to keep this "width" information ?
Comment 12 Katrin Fischer 2012-04-19 12:56:47 UTC
Adrien - no idea :)
Comment 13 Adrien SAURAT 2012-04-19 13:00:23 UTC
Ok, well, I'll keep this in mind (staff-global.css has to be cleaned anyway, there will be a patch for this later I guess), but right now I'll just put 40em.
Comment 14 Adrien SAURAT 2012-04-19 13:27:17 UTC Comment hidden (obsolete)
Comment 15 Adrien SAURAT 2012-04-19 13:37:19 UTC
Also : the gradient is now made with CSS.
Comment 16 Fred P 2012-04-19 14:08:06 UTC
Great use of CSS!  Libraries can always customize to their color scheme using the IntranetUserCSS in System Preferences > Staff Client.

[Use Chrome's Inspect Element, or Firefox's Firebug plug-in to identify the CSS class in question, copy and edit it with the proper hex color, then override the default CSS with new CSS by pasting it into the IntranetUserCSS preference.]

It is also easy to swap to your own choice of logo - just replace or edit the image at [kohadirectory]/intranet-tmpl/prog/img/background_koha_logo.png

No color or logo will satisfy everyone, but in open-source you have choices, thanks to the great Koha team. Personally, I love the rollovers, whatever the color - that's a big improvement.
Comment 17 Fred P 2012-04-19 14:17:08 UTC
At SMFPL, we add custom buttons to the top level menu including inter-library loans, spine labels, and Z3950 (next to the current circ, patrons, and search options). I always allow a lot of room for the buttons, so they don't spill over to the next line. With wider monitors becoming popular, we have more horizontal space to work with.
Comment 18 Adrien SAURAT 2012-04-19 14:26:01 UTC
Created attachment 9256 [details] [review]
Proposed patch #3

Very small update : juste moved the mainpage.css call to allow override by the "intranetusercss" system preference.
Comment 19 Fred P 2012-04-19 19:50:54 UTC
Some of our librarians require larger text, so they magnify the screen using Ctrl+. That breaks your layout, by wrapping the button menus under the news container. You are currently using CSS display:block; applied to biglinks-list. Would display:inline; correct that? An alternative would be to create fixed-position containers, but I think tweaking the display setting would solve it.
Comment 20 Owen Leonard 2012-04-19 19:51:38 UTC
The conditional display of suggestions/tags/comments moderation links needs to be fixed. Right now it doesn't respect each individual permission. The template checks only for CAN_user_tools_moderate_comments, only one of the three permissions which should be checked.
Comment 21 Owen Leonard 2012-04-19 20:10:52 UTC
Created attachment 9263 [details] [review]
Follow-up converting structure to flexible YUI grid

To be applied on top of attachment 9256 [details] [review]:

    This follow-up changes the structure of the page
    so that it uses a standard YUI grid structure. This
    helps keep the page flexible while preventing the
    buttons from wrapping below the news block. The buttons
    have been given a percentage width and a max-width value.
    The benefit to flexibility is countered by the less-
    strict spacing of the buttons. The columns of buttons
    don't form a strict grid at higher screen widths.
    There is probably a middle ground between this and
    the previous design but I think we need to make it a
    priority for the design not to break at 1024x768.
    Another minor change: A tweak to the position and
    padding of the icons.
Comment 22 Adrien SAURAT 2012-04-20 12:41:58 UTC Comment hidden (obsolete)
Comment 23 Fred P 2012-04-20 13:41:37 UTC
Thanks! The YUI grid conversion should solve the wrap problem.
Comment 24 Paul Poulain 2012-04-23 09:06:53 UTC
Created attachment 9272 [details] [review]
[PATCH] Bug 7979 [FOLLOW-UP] New design for staff interface, rights fix

Fixes display of pending links (with necessary permissions being

(patch made by Adrien Saurat, does not apply on my computer for an unknown reason)
Comment 25 Paul Poulain 2012-04-23 09:14:12 UTC
Many people have checked, and even if no-one has set the signed-off status, I consider it's signed-off, will include this patch for 3.8