Bug 7998

Summary: 3.8 UI cleanup, tweaks to new styles
Product: Koha Reporter: Liz Rea <wizzyrea>
Component: Staff interfaceAssignee: Liz Rea <wizzyrea>
Status: CLOSED FIXED QA Contact: Ian Walls <koha.sekjal>
Severity: critical    
Priority: P5 - low CC: chris, cnighswonger, gaetan.boisson, gmcharlt, nengard, paul.poulain, wizzyrea
Version: 3.8   
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: ---
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Bug Depends on:    
Bug Blocks: 7977    
Attachments: Bug 7998 - CSS fixes for new interface adds slight transparency for news so logo shows through on mainpage.. Fixes purple header gradient in Chrome-based browsers. remove list from returns.tt options so checkboxes do not have bullets. fix missing gradient
Bug 7998 - UI tweaks for 3.8
Bug 7998 - CSS fixes for new interface
Bug 7998 - Followup - round corners of search input box
[SIGNED-OFF] Bug 7998 - CSS fixes for new interface
[SIGNED-OFF] Bug 7998 - Followup - round corners of search input box
Bug 7998 - followup - make facets header background blue
[SIGNED_OFF] Bug 7998 - CSS fixes for new interface
Bug 7998 - followup - make facets header background blue
Bug 7998 - CSS fixes for new interface
Screenshot showing the toolbar colors added by this patch.
Screenshot showing the toolbar colors before this patch.
Screenshot showing the toolbar with different colors.
Bug 7998 - Change toolbar to be lighter, with barely discernible border
Bug 7998 - CSS fixes for new interface
Bug 7998 - CSS fixes for new interface
Bug 7998 - CSS fixes for new interface
Bug 7998 - CSS fixes for new interface
Bug 7998: Don't make the news all bold

Description Liz Rea 2012-04-23 20:11:31 UTC
There are a few inconsistencies in the new CSS for 3.8 - namely:

- missing gradient class on returns.tt
- div.action had a white background instead of blue
- gradient in header had incorrect color choice (purple) for chrome browsers

And a few small improvements:
- adds slight transparency for news so logo shows through on mainpage..
- reverse colors of menu div - blue for inactive, grey for active.

And probably more that I haven't found yet.
Comment 1 Liz Rea 2012-04-23 20:15:20 UTC Comment hidden (obsolete)
Comment 2 Chris Nighswonger 2012-04-24 14:39:01 UTC
An additional problem has occurred with the top nav bar. Here is part of the discussion from irc:

chris_n> but things do bounce around a bit when I click log out
<oleonard> ?
<chris_n> the cart count shows up as (0) for a moment after the link is clicked
<chris_n> in chrome I should add
<oleonard> That's the automatic carty-emptying routine
<chris_n> so probably a css fix?
<oleonard> When you say bounce around you mean the toolbar gets wider for a moment?
<chris_n> yes, vertically
<oleonard> The bigger problems is that it happens whenever there's anything in the cart
<oleonard> The new design removed the explicit width on the div which contains that menu
<oleonard> When the cart updates the container, for whatever reason, doesn't expand when the text changes
<oleonard> #toplevelnav { width: 40%; } might be a fix
<chris_n> fwiw, that fixes it here
<oleonard> One concern is longer-character words in translations
<chris_n> so the problem would show up when I had items in my cart?
<oleonard> Yes
<chris_n> ouch... so it is a bigger problem
Comment 3 Liz Rea 2012-04-24 21:50:32 UTC Comment hidden (obsolete)
Comment 4 Liz Rea 2012-04-24 21:51:21 UTC
also 2nd patch is on top of the first.
Comment 5 Liz Rea 2012-04-25 19:53:53 UTC Comment hidden (obsolete)
Comment 6 Liz Rea 2012-04-25 20:09:14 UTC Comment hidden (obsolete)
Comment 7 Chris Nighswonger 2012-04-25 20:15:10 UTC Comment hidden (obsolete)
Comment 8 Chris Nighswonger 2012-04-25 20:15:33 UTC Comment hidden (obsolete)
Comment 9 Chris Nighswonger 2012-04-25 20:16:40 UTC
This corrects the 'Cart' button issue mentioned and makes other desirable cosmetic changes as well. Nice work!
Comment 10 Liz Rea 2012-04-25 20:20:18 UTC Comment hidden (obsolete)
Comment 11 Chris Nighswonger 2012-04-25 20:25:11 UTC Comment hidden (obsolete)
Comment 12 Ian Walls 2012-04-27 19:22:45 UTC
Template and CSS only changes.  Template change involves replacing a <ul> and <li> elements with corresponding <p>; done safely and in an XHTML compatible way.  I trust that the layout and coloration changes look good in testing, so marking as Passed QA.
Comment 13 Liz Rea 2012-04-30 15:00:50 UTC Comment hidden (obsolete)
Comment 14 Liz Rea 2012-04-30 20:39:32 UTC
2nd patch here is a followp, will set back to needs signoff when/if this is into master.
Comment 15 Liz Rea 2012-05-04 15:47:49 UTC
*** Bug 8047 has been marked as a duplicate of this bug. ***
Comment 16 Nicole C. Engard 2012-05-07 15:48:30 UTC
I don't know if this page is included in all of this but on cgi-bin/koha/admin/fieldmapping.pl at the bottom there is a white bar where the submit button is when it should be blue.
Comment 17 Nicole C. Engard 2012-05-07 17:10:44 UTC
another one: /cgi-bin/koha/labels/spinelabel-home.pl
Comment 18 Chris Nighswonger 2012-05-07 17:15:47 UTC
I'm not seeing a problem with either of the pages mentioned above. Both pages display the submit, etc. button properly afaict.


Kohaversion: 3.08.00.000
Comment 19 Paul Poulain 2012-05-07 20:49:18 UTC
I'm OK to push this patch, but also adding Gaetan to this bug, for having him checking i'm not missing something.

If I have a question, it could be = why adding round corners to search toolbar and not to every input field in the interface ?

Gaetan, I'll push once you've confirmed there is nothing wrong & hidden with those patches.
Comment 20 Liz Rea 2012-05-07 21:28:32 UTC
Nicole - those issues are addressed in the first patch.
Comment 21 Chris Nighswonger 2012-05-07 21:43:19 UTC
(In reply to comment #20)
> Nicole - those issues are addressed in the first patch.

That explains why I did not see them. :-)
Comment 22 Owen Leonard 2012-05-08 13:06:40 UTC
Is attachment 9371 [details] [review] a follow-up to the signed-off patch? There are problems I see with the signed-off patch which I would like to see resolved. I'm wondering if the second does it but it doesn't apply for me.

Applying: Bug 7998 - followup - make facets header background blue
fatal: sha1 information is lacking or useless (koha-tmpl/intranet-tmpl/prog/en/css/staff-global.css).
Repository lacks necessary blobs to fall back on 3-way merge.
Cannot fall back to three-way merge.
Comment 23 Liz Rea 2012-05-08 15:00:45 UTC Comment hidden (obsolete)
Comment 24 Owen Leonard 2012-05-08 15:30:40 UTC
Created attachment 9459 [details]
Screenshot showing the toolbar colors added by this patch.

I disagree with the change which adds a border-radius to the header search input fields. That change does not work well in all browsers. In Firefox, for instance, the bottom and right borders disappear completely.

I would like to get more opinions about the toolbar background and border colors. To me this change gives the toolbar a little too much weight. I'd rather let the buttons be the focus.
Comment 25 Owen Leonard 2012-05-08 15:31:35 UTC
Created attachment 9460 [details]
Screenshot showing the toolbar colors before this patch.

This is how it would look if no changes were made to the toolbar.
Comment 26 Owen Leonard 2012-05-08 15:32:45 UTC
Created attachment 9461 [details]
Screenshot showing the toolbar with different colors.

I lean towards something like this: No border and a lighter background. I would love to hear others' opinions.
Comment 27 Katrin Fischer 2012-05-08 16:06:58 UTC
Comment on attachment 9461 [details]
Screenshot showing the toolbar with different colors.

I like the lighter background without border best of the 3 screenshots.
Comment 28 Chris Nighswonger 2012-05-08 16:08:58 UTC
I like the first screenshot. I think it defines the toolbar better as a separate entity on the page as well as breaking up the page a bit.
Comment 29 Liz Rea 2012-05-08 16:19:08 UTC
I can get behind the lighter color on the toolbar (I was just grabbing existent colors in Gaetan's scheme), however I like the border and the corners (and I'm willing to fix it so that it looks nice in as many browsers as we can make it look nice in).
Comment 30 Liz Rea 2012-05-08 16:24:40 UTC
dear friends, 

how about this? 

http://screencast.com/t/5ijg46J9aC

Lighter color, barely discernible border.
Comment 31 Gaetan Boisson 2012-05-08 16:43:13 UTC
I really like all this and certainly don't oppose anything :).

Actually there is a number of other pages where i noticed the gradient is missing, all in the admin : admin/preferences.pl, admin/categorie.pl, admin/cities.pl, admin/roadtype.pl, admin/currency.pl, admin/aqbudgetperiods.pl, /admin/aqbudgets.pl, admin/z3950servers.pl. Maybe i missed other ones

Also there are some pages on which the header search doesn't show at all. I think this should be standardised so that it shows everywhere. 
authorities/authorities.pl
cataloguing/additem.pl
cataloguing/addbiblio.pl
search.pl (having the header search for check out and check in here would still make sense)
Comment 32 Owen Leonard 2012-05-08 16:56:53 UTC
(In reply to comment #31)
> Also there are some pages on which the header search doesn't show at all. I
> think this should be standardised so that it shows everywhere. 
> authorities/authorities.pl
> cataloguing/additem.pl
> cataloguing/addbiblio.pl

The header search was left off these pages deliberately because of the specialized nature of the interfaces. The assumption is that these pages are part of a process which must be completed, so extra focus is given to the page.

> search.pl (having the header search for check out and check in here would
> still make sense)

The default header search was left off this page to eliminate ambiguity with regard to catalog search boxes, but adding a search with just check out and check in makes sense to me.
Comment 33 Liz Rea 2012-05-08 18:34:37 UTC Comment hidden (obsolete)
Comment 34 Liz Rea 2012-05-08 18:36:14 UTC
(In reply to comment #31)
> I really like all this and certainly don't oppose anything :).
> 
> Actually there is a number of other pages where i noticed the gradient is
> missing, all in the admin : admin/preferences.pl, admin/categorie.pl,
> admin/cities.pl, admin/roadtype.pl, admin/currency.pl,
> admin/aqbudgetperiods.pl, /admin/aqbudgets.pl, admin/z3950servers.pl. Maybe
> i missed other ones

I'm happy to look after getting these done where it makes sense to do so. :)
Comment 35 Liz Rea 2012-05-08 18:56:15 UTC Comment hidden (obsolete)
Comment 36 Chris Nighswonger 2012-05-08 18:56:59 UTC
Any chance we can get what's been done pushed on up to fix the broken-ness?
Comment 37 Liz Rea 2012-05-08 18:57:18 UTC Comment hidden (obsolete)
Comment 38 Liz Rea 2012-05-08 18:57:57 UTC
bother I forgot to take off the rounded corners per Owen's request.
Comment 39 Liz Rea 2012-05-08 19:48:18 UTC Comment hidden (obsolete)
Comment 40 Jared Camins-Esakov 2012-05-12 13:55:49 UTC
Created attachment 9532 [details] [review]
Bug 7998 - CSS fixes for new interface

Omnibus of changes thus far:

adds slight transparency for news so logo shows through on mainpage..
Fixes purple header gradient in Chrome-based browsers.
remove list from returns.tt options so checkboxes do not have bullets.
fix missing gradient class on returns.tt.
reverse colors of menu div - blue for inactive, grey for active.

turns searchheader blue, rounds corners, improves spacing for sort form.

Adds padding, rounded corners, and a 1px border to the now-blue toolbar.

increase width of intranet nav div to width 40%

add a bit of padding to #searchheader

fieldset.action changes - removed background, added a little padding to make it look better in all of the uses I could find of it.

Bug 7998 - followup - make facets header background blue

bug 7998 - followup - fixing headers on search.pl to be blue, rounded.

bug 7998 - followup - consistency tweaks

match menu borders to the search header tabs (green border)
hover menus a very light grey instead of #eee.
make fieldset.brief have a consistent border with the rest of the fieldsets.

bug 7998 - followup - more tabs/borders updating to fit in new look

boraccount.pl

bug 7998 - followup - add gradient div to prefs-admin-search.inc

Bug 7998 - Change toolbar to be lighter, with barely discernible border

Will need to be applied after the other patch.

Bug 7998 - add gradient to roadtype admin panel

Bug 7998 - adds gradient to patrons-admin-search.tt

Bug 7998 - add gradient to budgets-admin-search.inc

bug 7998 - add gradient to z3950-admin-search.inc

Bug 7998 - add gradient to cities-admin-search.inc

bug 7998 - active tab on checkout table now has green border like side menu

Signed-off-by: Jared Camins-Esakov <jcamins@cpbibliography.com>
Comment 41 Jared Camins-Esakov 2012-05-13 15:07:07 UTC
Created attachment 9537 [details] [review]
Bug 7998: Don't make the news all bold
Comment 42 Gaetan Boisson 2012-05-13 15:18:54 UTC
Looks great and takes care of a lot of thing that needed to be fixed. Signed off and approved!
Comment 43 Paul Poulain 2012-05-14 14:07:16 UTC
QA comment : mostly CSS changes, passed QA
Comment 44 Paul Poulain 2012-05-14 14:08:56 UTC
patch pushed, don't forget to fully reload your browser if you want to test, the old CSS is in cache !
Comment 45 Chris Cormack 2012-05-14 21:07:15 UTC
This fix will be in 3.8.1