Summary: | New design for staff interface | ||
---|---|---|---|
Product: | Koha | Reporter: | Adrien SAURAT <adrien.saurat> |
Component: | Templates | Assignee: | Adrien SAURAT <adrien.saurat> |
Status: | CLOSED FIXED | QA Contact: | Ian Walls <koha.sekjal> |
Severity: | enhancement | ||
Priority: | P5 - low | CC: | alexandre.lengereau, fred.pierre, gaetan.boisson, magnus, paul.poulain |
Version: | Main | ||
Hardware: | All | ||
OS: | All | ||
Change sponsored?: | --- | Patch complexity: | --- |
Documentation contact: | Documentation submission: | ||
Text to go in the release notes: | Version(s) released in: | ||
Circulation function: | |||
Attachments: |
Proposed patch #1
Proposed patch #2 Proposed patch #3 Follow-up converting structure to flexible YUI grid Follow-up for permissions on pending links [PATCH] Bug 7979 [FOLLOW-UP] New design for staff interface, rights fix |
Description
Adrien SAURAT
2012-04-18 15:08:29 UTC
Created attachment 9245 [details] [review] Proposed patch #1 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 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; } 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. The more I look at your interface, the more I love it! Great job. 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 : http://img259.imageshack.us/img259/4307/prokoha.png Simple suggestion. Alexander Hi Gaetan and Adrien - I think I agree with Alexandre about the logo. This looks great! But I agree about the green logo in the background, either remove it or make it almost invisible. another suggestion i didn't like so much the green color in the CSS #85CA11 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 : http://imageshack.us/photo/my-images/651/plusbug.png/ 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; } 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 ? Adrien - no idea :) 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. Created attachment 9255 [details] [review] Proposed patch #2 New version with darker green (and darker blue around the link boxes too). Some tweaks here and there (focus and selection colors). For the koha logo, without it the green hover effects and such seem to pop up from nowhere, if we want to remove we would still have to find a way to balance colors. Also : the gradient is now made with CSS. 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. 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. 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. 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. 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. 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. Created attachment 9268 [details] [review] Follow-up for permissions on pending links Fixes the issue raised by Owen about pending links display. Thanks! The YUI grid conversion should solve the wrap problem. 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 enforced). (patch made by Adrien Saurat, does not apply on my computer for an unknown reason) 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 |