Bug 22399 - Improve responsive behavior of the basic marc editor
Summary: Improve responsive behavior of the basic marc editor
Status: Pushed to master
Alias: None
Product: Koha
Classification: Unclassified
Component: Cataloging (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Katrin Fischer
URL:
Keywords:
: 22582 (view as bug list)
Depends on: 22045 22768 23159 23183
Blocks: 27124
  Show dependency treegraph
 
Reported: 2019-02-22 17:25 UTC by Owen Leonard
Modified: 2020-12-01 09:33 UTC (History)
10 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Text to go in the release notes:
RMNOTE Delete from 19.05 release notes, has been reverted!
Version(s) released in:
20.11.00


Attachments
Animated gif showing the proposed style update (373.58 KB, image/gif)
2019-02-22 17:25 UTC, Owen Leonard
Details
Bug 22399: Improve responsive behavior of the basic marc editor (9.12 KB, patch)
2019-02-22 17:36 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22399: Improve responsive behavior of the basic marc editor (9.37 KB, patch)
2019-02-22 18:55 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22399: Improve responsive behavior of the basic marc editor (9.44 KB, patch)
2019-02-25 14:00 UTC, Josef Moravec
Details | Diff | Splinter Review
Bug 22399: Improve responsive behavior of the basic marc editor (9.49 KB, patch)
2019-02-25 18:50 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 22399: Improve responsive behavior of the basic marc editor (29.05 KB, patch)
2020-07-14 18:20 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22399: Improve responsive behavior of the basic marc editor (26.72 KB, patch)
2020-07-14 18:52 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22399: Improve responsive behavior of the basic marc editor (27.42 KB, patch)
2020-09-10 17:50 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22399: Improve responsive behavior of the basic marc editor (40.21 KB, patch)
2020-10-20 15:14 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22399: Improve responsive behavior of the basic marc editor (40.26 KB, patch)
2020-10-24 18:23 UTC, David Nind
Details | Diff | Splinter Review
Bug 22399: Improve responsive behavior of the basic marc editor (40.37 KB, patch)
2020-10-25 01:40 UTC, Katrin Fischer
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2019-02-22 17:25:46 UTC Comment hidden (obsolete)
Comment 1 Owen Leonard 2019-02-22 17:36:43 UTC Comment hidden (obsolete)
Comment 2 Owen Leonard 2019-02-22 18:55:21 UTC Comment hidden (obsolete)
Comment 3 Josef Moravec 2019-02-25 14:00:15 UTC Comment hidden (obsolete)
Comment 4 Katrin Fischer 2019-02-25 18:50:29 UTC Comment hidden (obsolete)
Comment 5 Nick Clemens 2019-03-15 20:02:00 UTC Comment hidden (obsolete)
Comment 6 Martin Renvoize 2019-03-19 11:00:26 UTC Comment hidden (obsolete)
Comment 7 Dobrica Pavlinusic 2019-03-27 14:21:22 UTC Comment hidden (obsolete)
Comment 8 Nick Clemens 2019-03-28 13:31:46 UTC Comment hidden (obsolete)
Comment 9 Nick Clemens 2019-03-28 13:32:16 UTC Comment hidden (obsolete)
Comment 10 Martin Renvoize 2019-06-17 08:19:41 UTC
One to bring back to life for this new cycle Owen?
Comment 11 Owen Leonard 2020-07-14 18:20:21 UTC Comment hidden (obsolete)
Comment 12 Owen Leonard 2020-07-14 18:52:01 UTC
Created attachment 106878 [details] [review]
Bug 22399: Improve responsive behavior of the basic marc editor

This patch makes markup and style changes to the basic MARC editor in
order to improve the page's handling of smaller browser widths. It adds
flexbox styling to elements of the form to help accomplish this.

To test, apply the patch and load a record for editing in the basic MARC
editor.

- Adjust your browser width and confirm that the form adjusts well
  to various widths.
- Test that the markup changes haven't broken the JavaScript-driven
  features in the editor:
  - Clone tags
  - Delete tags
  - Expand and collapse tags
  - Clone subfields
  - Delete subfields
  - Re-order subfields
  - Cataloging plugins:
    - Focus-driven plugins like on tag 000
    - Popup plugins like 008 or authority-linked tags
    - Select2-styled dropdowns (e.g. 942$c Item type).
- Test the add/edit items form to confirm that it is still styled as it
  was before.
Comment 13 Owen Leonard 2020-09-10 17:50:46 UTC
Created attachment 109855 [details] [review]
Bug 22399: Improve responsive behavior of the basic marc editor

This patch makes markup and style changes to the basic MARC editor in
order to improve the page's handling of smaller browser widths. It adds
flexbox styling to elements of the form to help accomplish this.

To test, apply the patch and load a record for editing in the basic MARC
editor.

- Adjust your browser width and confirm that the form adjusts well
  to various widths.
- Test that the markup changes haven't broken the JavaScript-driven
  features in the editor:
  - Clone tags
  - Delete tags
  - Expand and collapse tags
  - Clone subfields
  - Delete subfields
  - Re-order subfields
  - Cataloging plugins:
    - Focus-driven plugins like on tag 000
    - Popup plugins like 008 or authority-linked tags
    - Select2-styled dropdowns (e.g. 942$c Item type).
- Test the add/edit items form to confirm that it is still styled as it
  was before.
Comment 14 David Nind 2020-09-29 16:38:46 UTC
Hi Owen.

Although I'm not a cataloguer, I like the enhancement. 

Particularly the subfield names being to the left of the input field, rather than above - seemed easier to scan and read to me.

Some things I noted:

- The authority lookup pop up window: when I click on this, then search, then select something there is another pop up window - this just "spins" saying "Loading", so seems to have been broken (example in KTD: biblionumber 16 (Four metaphysical poets), 650a > Select authority control, click search in the pop up window, choose a term).

- Related to above: can get an error trace message if you choose a result that has no value (example in KTD: biblionumber 16 (Four metaphysical poets), 100$a > Select authority control, click search in the pop up window, choose the first term (which is Personal names: [without a value])

Can't call method "subfields" on an undefined value at /kohadevbox/koha/authorities/blinddetail-biblio-search.pl line 89
in (eval) at /kohadevbox/koha/authorities/blinddetail-biblio-search.pl line 89
   86: 
   87:     # Get all values for each distinct subfield and add to subfield loop
   88:     my %done_subfields;
   89:     for ( $field->subfields ) {
   90:         next if $_->[0] eq '9'; # $9 will be set with authid value
   91:         my $letter = $_->[0];
   92:         $letter ||= '@';

- Does this change affect the authority editor as well? When you first load, say for the 0 tab it display like it used to - clicking on the MARC field name displays the updated way, required fields are at the start rather than the end as for the MARC editor. Field names are aligned at the bottom of the input field rather than the top when screen size is narrow. Clone and elete buttons are vitical rather than horizontal as in the MARC editor. (Not sure if this makes sense, can add some screenshots if it will help).

As I'm not a cataloguer, it would be nice to get some input from someone who uses it all the time as I've probably missed something.

David
Comment 15 David Nind 2020-09-29 17:49:35 UTC
A couple of other things I noticed:

- Drop down list, such as 942$2 and 942$c: when screen is narrow, the drop down list is very wide and is not aligned to the right with other fields

- Fields highlighted with a gray background: in Firefox there is no right hand side and bottom dark border. All the borders are darker when you are click in the field. In chromium/Google chrome when you click in the fields the border is thicker.
Comment 16 Owen Leonard 2020-10-20 15:14:01 UTC
Created attachment 112045 [details] [review]
Bug 22399: Improve responsive behavior of the basic marc editor

This patch makes markup and style changes to the basic MARC editor in
order to improve the page's handling of smaller browser widths. It adds
flexbox styling to elements of the form to help accomplish this.

To test, apply the patch and load a record for editing in the basic MARC
editor.

- Adjust your browser width and confirm that the form adjusts well
  to various widths.
- Test that the markup changes haven't broken the JavaScript-driven
  features in the editor:
  - Clone tags
  - Delete tags
  - Expand and collapse tags
  - Clone subfields
  - Delete subfields
  - Re-order subfields
  - Cataloging plugins:
    - Focus-driven plugins like on tag 000
    - Popup plugins like 008 or authority-linked tags
    - Select2-styled dropdowns (e.g. 942$c Item type).
- Test the add/edit items form to confirm that it is still styled as it
  was before.

Edit: The Select2 plugin JavaScript file now accepts a variable to set
the "width" configuration option. It still defaults to "element."
Comment 17 Owen Leonard 2020-10-20 15:15:56 UTC
(In reply to David Nind from comment #14)
> - The authority lookup pop up window: when I click on this, then search,
> then select something there is another pop up window - this just "spins"

This should be fixed now.

> - Related to above: can get an error trace message if you choose a result
> that has no value

I believe this is also fixed.

> - Does this change affect the authority editor as well?


It doesn't.


(In reply to David Nind from comment #15)
> - Drop down list, such as 942$2 and 942$c: when screen is narrow, the drop
> down list is very wide and is not aligned to the right with other fields

This should be fixed.
 
> - Fields highlighted with a gray background: in Firefox there is no right
> hand side and bottom dark border.

I don't think this style has changed at all. I think it's the same as before.
Comment 18 David Nind 2020-10-24 18:23:52 UTC
Created attachment 112390 [details] [review]
Bug 22399: Improve responsive behavior of the basic marc editor

This patch makes markup and style changes to the basic MARC editor in
order to improve the page's handling of smaller browser widths. It adds
flexbox styling to elements of the form to help accomplish this.

To test, apply the patch and load a record for editing in the basic MARC
editor.

- Adjust your browser width and confirm that the form adjusts well
  to various widths.
- Test that the markup changes haven't broken the JavaScript-driven
  features in the editor:
  - Clone tags
  - Delete tags
  - Expand and collapse tags
  - Clone subfields
  - Delete subfields
  - Re-order subfields
  - Cataloging plugins:
    - Focus-driven plugins like on tag 000
    - Popup plugins like 008 or authority-linked tags
    - Select2-styled dropdowns (e.g. 942$c Item type).
- Test the add/edit items form to confirm that it is still styled as it
  was before.

Edit: The Select2 plugin JavaScript file now accepts a variable to set
the "width" configuration option. It still defaults to "element."

Signed-off-by: David Nind <david@davidnind.com>
Comment 19 David Nind 2020-10-24 18:26:00 UTC
Thanks Owen for the updated patch!

Just confirming that the field highlighting behaviour in Firefox is the same before and after the patch is applied.

David
Comment 20 Katrin Fischer 2020-10-25 01:40:12 UTC
Created attachment 112446 [details] [review]
Bug 22399: Improve responsive behavior of the basic marc editor

This patch makes markup and style changes to the basic MARC editor in
order to improve the page's handling of smaller browser widths. It adds
flexbox styling to elements of the form to help accomplish this.

To test, apply the patch and load a record for editing in the basic MARC
editor.

- Adjust your browser width and confirm that the form adjusts well
  to various widths.
- Test that the markup changes haven't broken the JavaScript-driven
  features in the editor:
  - Clone tags
  - Delete tags
  - Expand and collapse tags
  - Clone subfields
  - Delete subfields
  - Re-order subfields
  - Cataloging plugins:
    - Focus-driven plugins like on tag 000
    - Popup plugins like 008 or authority-linked tags
    - Select2-styled dropdowns (e.g. 942$c Item type).
- Test the add/edit items form to confirm that it is still styled as it
  was before.

Edit: The Select2 plugin JavaScript file now accepts a variable to set
the "width" configuration option. It still defaults to "element."

Signed-off-by: David Nind <david@davidnind.com>

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

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 21 Jonathan Druart 2020-11-04 12:02:57 UTC
Pushed to master for 20.11, thanks to everybody involved!
Comment 22 Lucas Gass 2020-11-16 21:13:18 UTC
enhancement will not be backported to 20.05.x
Comment 23 Jonathan Druart 2020-12-01 09:31:55 UTC
There is a JS error if a select2.js is used outside of addbiblio.tt:
  ReferenceError: select2Width is not defined

Edit items view for instance.
Comment 24 Jonathan Druart 2020-12-01 09:33:31 UTC
(In reply to Jonathan Druart from comment #23)
> There is a JS error if a select2.js is used outside of addbiblio.tt:
>   ReferenceError: select2Width is not defined
> 
> Edit items view for instance.

See bug 27124. Owen can you deal with it please?