Created attachment 85570 [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 Bootstrap grid markup to 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. Created attachment 85572 [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 Bootstrap grid markup to 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. Created attachment 85621 [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 Bootstrap grid markup to 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. Signed-off-by: Josef Moravec <josef.moravec@gmail.com> Created attachment 85666 [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 Bootstrap grid markup to 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. Signed-off-by: Josef Moravec <josef.moravec@gmail.com> Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de> Awesome work all! Pushed to master for 19.05 Enhancement will not be backported to 18.11.x series. It seems that this patch broke javascript functionality to move subfileds up (implemented in upSubfield inside js/cataloging.js). Seems that <div id="row"> is special to this code, and this patch changes how it's used in semantic markup, this breaking editor. This had unintended consequences that broke other features. Reverted from master a993bd3843fdfcf3a7f2df916299b32d4601b879 *** Bug 22582 has been marked as a duplicate of this bug. *** One to bring back to life for this new cycle Owen? Created attachment 106877 [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). 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. 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. 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
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. 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." (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. 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> 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 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> Pushed to master for 20.11, thanks to everybody involved! enhancement will not be backported to 20.05.x 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. (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? *** Bug 28738 has been marked as a duplicate of this bug. *** |
Created attachment 85569 [details] Animated gif showing the proposed style update I propose to make some markup and style changes to the MARC editor to improve its handling of smaller browser widths.