Bug 20322 - Circulation page layout and design update
Summary: Circulation page layout and design update
Status: Pushed to Master
Alias: None
Product: Koha
Classification: Unclassified
Component: Circulation (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Liz Rea
QA Contact: Tomás Cohen Arazi
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-03-02 02:37 UTC by Liz Rea
Modified: 2018-05-16 18:33 UTC (History)
9 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Bot Control: ---
When did the bot last check this:
Who signed the patch off:
Text to go in the release notes:
These patches give a facelift to the circulation homepage. All functionality remains the same, however, things have been moved to make the interface little friendlier and more responsive on different screens.


Attachments
Bug 20322: design refresh for circulation page (8.00 KB, patch)
2018-03-02 02:48 UTC, Liz Rea
Details | Diff | Splinter Review
Screenshot (51.40 KB, image/png)
2018-03-06 07:18 UTC, Josef Moravec
Details
Bug 20322 (follow-up) Circulation page layout and design update (14.36 KB, patch)
2018-03-06 17:21 UTC, Owen Leonard
Details | Diff | Splinter Review
Screenshot showing follow-up changes (33.93 KB, image/png)
2018-03-06 17:23 UTC, Owen Leonard
Details
Bug 20322: (follow up) design refresh for circulation page (5.08 KB, patch)
2018-03-20 23:08 UTC, Liz Rea
Details | Diff | Splinter Review
Screenshot of 3rd proposed changes (65.56 KB, image/png)
2018-03-20 23:10 UTC, Liz Rea
Details
Bug 20322: design refresh for circulation page (8.06 KB, patch)
2018-03-25 22:13 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 20322: (follow-up) Circulation page layout and design update (14.42 KB, patch)
2018-03-25 22:13 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 20322: (follow up) design refresh for circulation page (5.14 KB, patch)
2018-03-25 22:13 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 20322: Follow-up with tooltips (2.06 KB, patch)
2018-03-27 01:36 UTC, M. Tompsett
Details | Diff | Splinter Review
Bug 20322: Follow up on validator.w3.org extra /div (835 bytes, patch)
2018-03-27 01:36 UTC, M. Tompsett
Details | Diff | Splinter Review
Bug 20322: design refresh for circulation page (8.11 KB, patch)
2018-03-27 01:38 UTC, M. Tompsett
Details | Diff | Splinter Review
Bug 20322: (follow-up) Circulation page layout and design update (14.47 KB, patch)
2018-03-27 01:38 UTC, M. Tompsett
Details | Diff | Splinter Review
Bug 20322: (follow up) design refresh for circulation page (5.19 KB, patch)
2018-03-27 01:38 UTC, M. Tompsett
Details | Diff | Splinter Review
Bug 20322: Follow-up with tooltips (2.11 KB, patch)
2018-03-27 01:38 UTC, M. Tompsett
Details | Diff | Splinter Review
Bug 20322: Follow up on validator.w3.org extra /div (888 bytes, patch)
2018-03-27 01:38 UTC, M. Tompsett
Details | Diff | Splinter Review
Bug 20322: Follow-up with tooltips (2.16 KB, patch)
2018-03-27 14:08 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20322: Follow up on validator.w3.org extra /div (939 bytes, patch)
2018-03-27 14:08 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 20322: design refresh for circulation page (8.17 KB, patch)
2018-04-12 13:45 UTC, Nick Clemens
Details | Diff | Splinter Review
Bug 20322: (follow-up) Circulation page layout and design update (14.53 KB, patch)
2018-04-12 13:45 UTC, Nick Clemens
Details | Diff | Splinter Review
Bug 20322: (follow up) design refresh for circulation page (5.25 KB, patch)
2018-04-12 13:45 UTC, Nick Clemens
Details | Diff | Splinter Review
Bug 20322: (follow-up) use tooltips for warning (2.23 KB, patch)
2018-04-12 13:45 UTC, Nick Clemens
Details | Diff | Splinter Review
Bug 20322: (follow-up) fix validator.w3.org complaints - extra /div (1013 bytes, patch)
2018-04-12 13:45 UTC, Nick Clemens
Details | Diff | Splinter Review
Bug 20322: design refresh for circulation page (8.22 KB, patch)
2018-04-19 15:23 UTC, Tomás Cohen Arazi
Details | Diff | Splinter Review
Bug 20322: (follow-up) Circulation page layout and design update (14.57 KB, patch)
2018-04-19 15:23 UTC, Tomás Cohen Arazi
Details | Diff | Splinter Review
Bug 20322: (follow up) design refresh for circulation page (5.30 KB, patch)
2018-04-19 15:23 UTC, Tomás Cohen Arazi
Details | Diff | Splinter Review
Bug 20322: (follow-up) use tooltips for warning (2.28 KB, patch)
2018-04-19 15:23 UTC, Tomás Cohen Arazi
Details | Diff | Splinter Review
Bug 20322: (follow-up) fix validator.w3.org complaints - extra /div (1.05 KB, patch)
2018-04-19 15:23 UTC, Tomás Cohen Arazi
Details | Diff | Splinter Review
Bug 20322: (QA follow-up) Use Font Awesome icons (4.49 KB, patch)
2018-04-19 15:23 UTC, Tomás Cohen Arazi
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Liz Rea 2018-03-02 02:37:56 UTC
I think maybe it's time we refreshed and improved the circulation home page, don't you?

:)
Comment 1 Liz Rea 2018-03-02 02:48:22 UTC
Created attachment 72342 [details] [review]
Bug 20322: design refresh for circulation page

do note, I don't actually mind if these aren't the changes eventually accepted. I just know it needs doing and starting it will hopefully get some gears turning.

To test:
Click all the links and check they work.
Do you like the styling? it's different. :)
Comment 2 Josef Moravec 2018-03-06 07:18:35 UTC
Created attachment 72466 [details]
Screenshot
Comment 3 Josef Moravec 2018-03-06 07:19:22 UTC
I just added a screenshot for easy review ;)
Comment 4 Katrin Fischer 2018-03-06 08:16:32 UTC
Comment on attachment 72466 [details]
Screenshot

I think this looks like a really good start! Really glad you took this on Liz!

Some things I notice:

- Maybe offline circulation would look a little nicer as some kind of box on the right?
- Some icons could be added: Set library and Pending on-site checkouts. Maybe something like a house or building to indicate on-site?
- Do we need the note for overdues with fines? Or could we move it to the page itself?
Comment 5 Josef Moravec 2018-03-06 12:45:22 UTC
And I would stick with col-sm-4 to have 3 columns on small and larger displays
Comment 6 Owen Leonard 2018-03-06 17:21:47 UTC
Created attachment 72484 [details] [review]
Bug 20322 (follow-up) Circulation page layout and design update

This follow-up makes some suggestions about how to push this further:

- Put content in four columns which reduces to two on smaller screens
- Adjust font size of large links
- Move Offline Circulation links into its own column
- Add image icons to the Firefox extension and Windows application
  download links
- Improve indentation in template
Comment 7 Owen Leonard 2018-03-06 17:23:43 UTC
Created attachment 72490 [details]
Screenshot showing follow-up changes
Comment 8 Josef Moravec 2018-03-07 14:57:33 UTC
Great job Liz and Owen!

I would add only one think - more left margin to links to desktop offline application and firefox add-on. It would better show that these links belong to offline circulation section IMO. What do you think?
Comment 9 Liz Rea 2018-03-20 22:08:48 UTC
I'm not keen on giving the offline circulation links that much importance for the amount they are used. 

I do like the icons on the download links though, that's neat. Maybe I'll revise your revision. ;)

Cheers,
Liz
Comment 10 Katrin Fischer 2018-03-20 22:11:37 UTC
(In reply to Liz Rea from comment #9)
> I'm not keen on giving the offline circulation links that much importance
> for the amount they are used. 
> 
> I do like the icons on the download links though, that's neat. Maybe I'll
> revise your revision. ;)
> 
> Cheers,
> Liz

+1

Also there is a lot of text on the buttons which will probably not translate well. Something a little smaller might also work better for verbose languages like German :)
Comment 11 Liz Rea 2018-03-20 23:08:20 UTC
Created attachment 73113 [details] [review]
Bug 20322: (follow up) design refresh for circulation page

Further revisions, compromise.

- 4 columns to three
- offline circulation demoted to below the intranet homepage preference,
    and no buttons, due to its relative lack of everyday use.
Comment 12 Liz Rea 2018-03-20 23:10:02 UTC
Created attachment 73114 [details]
Screenshot of 3rd proposed changes
Comment 13 Katrin Fischer 2018-03-25 22:13:07 UTC
Created attachment 73271 [details] [review]
Bug 20322: design refresh for circulation page

do note, I don't actually mind if these aren't the changes eventually accepted. I just know it needs doing and starting it will hopefully get some gears turning.

To test:
Click all the links and check they work.
Do you like the styling? it's different. :)

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 14 Katrin Fischer 2018-03-25 22:13:12 UTC
Created attachment 73272 [details] [review]
Bug 20322: (follow-up) Circulation page layout and design update

This follow-up makes some suggestions about how to push this further:

- Put content in four columns which reduces to two on smaller screens
- Adjust font size of large links
- Move Offline Circulation links into its own column
- Add image icons to the Firefox extension and Windows application
  download links
- Improve indentation in template

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 15 Katrin Fischer 2018-03-25 22:13:16 UTC
Created attachment 73273 [details] [review]
Bug 20322: (follow up) design refresh for circulation page

Further revisions, compromise.

- 4 columns to three
- offline circulation demoted to below the intranet homepage preference,
    and no buttons, due to its relative lack of everyday use.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 16 Katrin Fischer 2018-03-25 22:14:29 UTC
I really like it, giving it a first sign-off. :)
Comment 17 M. Tompsett 2018-03-27 01:18:26 UTC
This looks good. The links are all there. I only have one simple suggestion: tooltips.

The overdues had blurby text beside them. title="blah blah blah" them, so the essence of the former text is still there.
Comment 18 M. Tompsett 2018-03-27 01:36:00 UTC
Created attachment 73300 [details] [review]
Bug 20322: Follow-up with tooltips

This puts similar old text into tool tips for the overdues.
Hover over the overdues, and the tool tips should appear and
be similar to what the text was before.
Comment 19 M. Tompsett 2018-03-27 01:36:04 UTC
Created attachment 73301 [details] [review]
Bug 20322: Follow up on validator.w3.org extra /div

The intranet-bottom.inc has the closing div, just deleted
the last one.
Comment 20 M. Tompsett 2018-03-27 01:38:30 UTC
Created attachment 73302 [details] [review]
Bug 20322: design refresh for circulation page

do note, I don't actually mind if these aren't the changes eventually accepted. I just know it needs doing and starting it will hopefully get some gears turning.

To test:
Click all the links and check they work.
Do you like the styling? it's different. :)

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>
Comment 21 M. Tompsett 2018-03-27 01:38:33 UTC
Created attachment 73303 [details] [review]
Bug 20322: (follow-up) Circulation page layout and design update

This follow-up makes some suggestions about how to push this further:

- Put content in four columns which reduces to two on smaller screens
- Adjust font size of large links
- Move Offline Circulation links into its own column
- Add image icons to the Firefox extension and Windows application
  download links
- Improve indentation in template

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>
Comment 22 M. Tompsett 2018-03-27 01:38:36 UTC
Created attachment 73304 [details] [review]
Bug 20322: (follow up) design refresh for circulation page

Further revisions, compromise.

- 4 columns to three
- offline circulation demoted to below the intranet homepage preference,
    and no buttons, due to its relative lack of everyday use.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>
Comment 23 M. Tompsett 2018-03-27 01:38:39 UTC
Created attachment 73305 [details] [review]
Bug 20322: Follow-up with tooltips

This puts similar old text into tool tips for the overdues.
Hover over the overdues, and the tool tips should appear and
be similar to what the text was before.

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>
Comment 24 M. Tompsett 2018-03-27 01:38:42 UTC
Created attachment 73306 [details] [review]
Bug 20322: Follow up on validator.w3.org extra /div

The intranet-bottom.inc has the closing div, just deleted
the last one.

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>
Comment 25 Owen Leonard 2018-03-27 14:08:49 UTC
Created attachment 73313 [details] [review]
Bug 20322: Follow-up with tooltips

This puts similar old text into tool tips for the overdues.
Hover over the overdues, and the tool tips should appear and
be similar to what the text was before.

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 26 Owen Leonard 2018-03-27 14:08:53 UTC
Created attachment 73314 [details] [review]
Bug 20322: Follow up on validator.w3.org extra /div

The intranet-bottom.inc has the closing div, just deleted
the last one.

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 27 Nick Clemens 2018-04-12 13:45:10 UTC
Created attachment 74097 [details] [review]
Bug 20322: design refresh for circulation page

do note, I don't actually mind if these aren't the changes eventually accepted. I just know it needs doing and starting it will hopefully get some gears turning.

To test:
Click all the links and check they work.
Do you like the styling? it's different. :)

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Comment 28 Nick Clemens 2018-04-12 13:45:13 UTC
Created attachment 74098 [details] [review]
Bug 20322: (follow-up) Circulation page layout and design update

This follow-up makes some suggestions about how to push this further:

- Put content in four columns which reduces to two on smaller screens
- Adjust font size of large links
- Move Offline Circulation links into its own column
- Add image icons to the Firefox extension and Windows application
  download links
- Improve indentation in template

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Comment 29 Nick Clemens 2018-04-12 13:45:17 UTC
Created attachment 74099 [details] [review]
Bug 20322: (follow up) design refresh for circulation page

Further revisions, compromise.

- 4 columns to three
- offline circulation demoted to below the intranet homepage preference,
    and no buttons, due to its relative lack of everyday use.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Comment 30 Nick Clemens 2018-04-12 13:45:20 UTC
Created attachment 74100 [details] [review]
Bug 20322: (follow-up) use tooltips for warning

This puts similar old text into tool tips for the overdues.
Hover over the overdues, and the tool tips should appear and
be similar to what the text was before.

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Comment 31 Nick Clemens 2018-04-12 13:45:23 UTC
Created attachment 74101 [details] [review]
Bug 20322: (follow-up) fix validator.w3.org complaints - extra /div

The intranet-bottom.inc has the closing div, just deleted
the last one.

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Comment 32 Jonathan Druart 2018-04-12 14:55:50 UTC
I'd prefer another icon for the "get desktop application" link.
The KOC app is written in Qt and could be compiled for different OS.

I think we should choose an icon representing a generic desktop app.
Comment 34 M. Tompsett 2018-04-16 01:18:02 UTC
(In reply to Katrin Fischer from comment #33)
> Maybe something like this?
> https://thenounproject.com/search/?q=application&i=1490070
> https://thenounproject.com/search/?q=windows&i=1088956
> https://thenounproject.com/search/?q=windows&i=375632

All these download at 700x700, when we need 16x16. And something about a black icon makes it an ugly contrast to the colorful firefox icon.
Comment 35 M. Tompsett 2018-04-16 01:19:35 UTC
(In reply to Jonathan Druart from comment #32)
> I'd prefer another icon for the "get desktop application" link.
> The KOC app is written in Qt and could be compiled for different OS.
> 
> I think we should choose an icon representing a generic desktop app.

How about we push this, because the rest is a significant improvement, and then discuss this one icon issue on a separate bug? Because I'd hate to see these get stuck in discussion forever, because of one annoying icon.
Comment 36 Liz Rea 2018-04-16 02:26:39 UTC
I feel like, as and when we have a desktop application that is actually compiled and readily available for other platforms, it doesn't make sense to change it.
Comment 37 Katrin Fischer 2018-04-16 05:51:26 UTC
(In reply to M. Tompsett from comment #34)
> (In reply to Katrin Fischer from comment #33)
> > Maybe something like this?
> > https://thenounproject.com/search/?q=application&i=1490070
> > https://thenounproject.com/search/?q=windows&i=1088956
> > https://thenounproject.com/search/?q=windows&i=375632
> 
> All these download at 700x700, when we need 16x16. And something about a
> black icon makes it an ugly contrast to the colorful firefox icon.

Hi Marc, those are available as SVG vector graphics that can be resized to any size and colored any way you want. You can even download different colores. I also checked all are licensed under CC.
Comment 38 Owen Leonard 2018-04-16 12:16:56 UTC
(In reply to Liz Rea from comment #36)
> I feel like, as and when we have a desktop application that is actually
> compiled and readily available for other platforms, it doesn't make sense to
> change it.

+1
Comment 39 Tomás Cohen Arazi 2018-04-19 15:23:00 UTC
Created attachment 74577 [details] [review]
Bug 20322: design refresh for circulation page

do note, I don't actually mind if these aren't the changes eventually accepted. I just know it needs doing and starting it will hopefully get some gears turning.

To test:
Click all the links and check they work.
Do you like the styling? it's different. :)

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Comment 40 Tomás Cohen Arazi 2018-04-19 15:23:08 UTC
Created attachment 74578 [details] [review]
Bug 20322: (follow-up) Circulation page layout and design update

This follow-up makes some suggestions about how to push this further:

- Put content in four columns which reduces to two on smaller screens
- Adjust font size of large links
- Move Offline Circulation links into its own column
- Add image icons to the Firefox extension and Windows application
  download links
- Improve indentation in template

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Comment 41 Tomás Cohen Arazi 2018-04-19 15:23:17 UTC
Created attachment 74579 [details] [review]
Bug 20322: (follow up) design refresh for circulation page

Further revisions, compromise.

- 4 columns to three
- offline circulation demoted to below the intranet homepage preference,
    and no buttons, due to its relative lack of everyday use.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Comment 42 Tomás Cohen Arazi 2018-04-19 15:23:33 UTC
Created attachment 74580 [details] [review]
Bug 20322: (follow-up) use tooltips for warning

This puts similar old text into tool tips for the overdues.
Hover over the overdues, and the tool tips should appear and
be similar to what the text was before.

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Comment 43 Tomás Cohen Arazi 2018-04-19 15:23:42 UTC
Created attachment 74581 [details] [review]
Bug 20322: (follow-up) fix validator.w3.org complaints - extra /div

The intranet-bottom.inc has the closing div, just deleted
the last one.

Signed-off-by: Mark Tompsett <mtompset@hotmail.com>

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Comment 44 Tomás Cohen Arazi 2018-04-19 15:23:49 UTC
Created attachment 74582 [details] [review]
Bug 20322: (QA follow-up) Use Font Awesome icons

Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
Comment 45 Tomás Cohen Arazi 2018-04-19 16:04:53 UTC
The follow-up is my two cents to get this pushed. The link is really pointing to both Windows and macOS downloads so I thought is was worth changing it like this, and using the icons we already have with Font Awesome.

If there is disagreement, this can be put back in 'In discussion' status. I realize dropping my follow-up here and saying we are ready to go can feel rude, that's not my intention!
Comment 46 Owen Leonard 2018-04-19 16:12:43 UTC
(In reply to Tomás Cohen Arazi from comment #45)
> I realize dropping my follow-up here and saying we are ready to go
> can feel rude, that's not my intention!

Also I told him he should do it!
Comment 47 Nick Clemens 2018-04-19 16:17:23 UTC
+1
Comment 48 Jonathan Druart 2018-04-19 19:45:45 UTC
Pushed to master for 18.05, thanks to everybody involved!
Comment 49 Liz Rea 2018-04-19 21:20:57 UTC
It's all good, thanks everybody!
Comment 50 Jonathan Druart 2018-05-16 16:29:20 UTC
Anyone is willing to add a quick release note?