Bug 31014

Summary:	Minor UI problems in QOTD editor tool
Product:	Koha	Reporter:	Caroline Cyr La Rose <caroline.cyr-la-rose>
Component:	Templates	Assignee:	Owen Leonard <oleonard>
Status:	CLOSED FIXED	QA Contact:	Testopia <testopia>
Severity:	minor
Priority:	P5 - low	CC:	fridolin.somers, martin.renvoize
Version:	Main
Hardware:	All
OS:	All
Change sponsored?:	---	Patch complexity:	Small patch
Documentation contact:		Documentation submission:
Text to go in the release notes:		Version(s) released in:	23.11.00
Circulation function:
Bug Depends on:	30903
Bug Blocks:	31063
Attachments:	Quote uploader tool (step 3) Editable quotes table (step 4) Bug 31014: Minor UI problems in QOTD editor tool Bug 31014: Minor UI problems in QOTD editor tool Bug 31014: Minor UI problems in QOTD editor tool

Description Caroline Cyr La Rose 2022-06-22 13:21:06 UTC

These problems were reported in Bug 30903 but were deemed too minor to be in that bug, so I was told to make a new report for these.

Original test plan from Bug 30903

1- Download the attached csv or create a comma-separated csv with two columns, one for source and one for text (no headers)
2- Go to Tools > Edit quotes for QOTD feature
3- Click on Import quotes
--> Note that the layout of the page is a bit strange... there is a big space between the title of the page and the first content box, and there is no space above the browse button
4- Click browse and choose the CSV file
--> The quotes should be imported in an editable table, you can click on either the source or text of a quote to change it (on my browser the editable field is really small, I wonder if it's the page or my browser (Firefox) or my OS (Ubuntu))
5- Click Save quotes

Points to correct
- At step 3, the browse button is still weirdly placed, at the top of the box
- At step 4, the editable fields are very small (like there is no padding around the text?)

Comment 1 Caroline Cyr La Rose 2022-06-22 13:23:05 UTC

Created attachment 136413 [details]
Quote uploader tool (step 3)

Screenshot for what I see on step 3 currently (with patch for 30903).

The Browse button is at the top of the box.

I'm using Firefox on Ubuntu 20.04 if that helps.

Comment 2 Caroline Cyr La Rose 2022-06-22 13:25:39 UTC

Created attachment 136416 [details]
Editable quotes table (step 4)

Screenshot for what I see on step 4 currently (with patch for 30903).

The editable fields are very small.

Compare to what is was before https://koha-community.org/manual/20.11/en/html/_images/editquote.png

I'm using Firefox on Ubuntu 20.04 if that helps. I'm pretty sure I'm the one who took the manual screenshot. It was also on Firefox, but probably Ubuntu 18.04 at the time.

Comment 3 Owen Leonard 2023-06-29 17:19:10 UTC

Created attachment 152874 [details] [review]
Bug 31014: Minor UI problems in QOTD editor tool

This patch makes some cosmetic and functional updates to Quote of the
Day template, including simplifying some JavaScript, adding consisten
styles to buttons and page sections, and adding visible buttons to
jEditable text inputs.

The patch also improves the Quotes page breadcrumbs to add context
on the single quote entry page.

The patch removes quotes.css which is obsolete.

To test, apply the page and go to Tools -> Quote editor.

- The breadcrumbs should read "Tools -> Quote editor."
- Click the "New quote" button. The breadcrumbs should read "Tools ->
  Quote editor -> Add quote"
- Go back and click the "Import quotes" button.
- Confirm that the layout of the page looks good and that the upload
  instructions are shown.
- Upload a CSV file of quotes
  - The instructions should now show information about editing and
    saving quotes.
  - The "Save quotes" button should be styled consistently with other
    submit buttons.
  - Confirm that you can click in the "Source" and "Quote" table cells
    to trigger the display of a textarea where you can edit the text.
    Confirm that both the "Save" and "Cancel" buttons work.
  - Click the "Save quotes" button. A message should appear which shows
    how many quotes were imported.*
  - Confirm that your quotes are saved correctly, including any changes
    you made.

* This process could be improved: When the quotes are done importing the
toolbar doesn't change, and there isn't an indication that the import is
complete.

Comment 4 Sam Lau 2023-06-29 18:24:09 UTC

Created attachment 152876 [details] [review]
Bug 31014: Minor UI problems in QOTD editor tool

This patch makes some cosmetic and functional updates to Quote of the
Day template, including simplifying some JavaScript, adding consisten
styles to buttons and page sections, and adding visible buttons to
jEditable text inputs.

The patch also improves the Quotes page breadcrumbs to add context
on the single quote entry page.

The patch removes quotes.css which is obsolete.

To test, apply the page and go to Tools -> Quote editor.

- The breadcrumbs should read "Tools -> Quote editor."
- Click the "New quote" button. The breadcrumbs should read "Tools ->
  Quote editor -> Add quote"
- Go back and click the "Import quotes" button.
- Confirm that the layout of the page looks good and that the upload
  instructions are shown.
- Upload a CSV file of quotes
  - The instructions should now show information about editing and
    saving quotes.
  - The "Save quotes" button should be styled consistently with other
    submit buttons.
  - Confirm that you can click in the "Source" and "Quote" table cells
    to trigger the display of a textarea where you can edit the text.
    Confirm that both the "Save" and "Cancel" buttons work.
  - Click the "Save quotes" button. A message should appear which shows
    how many quotes were imported.*
  - Confirm that your quotes are saved correctly, including any changes
    you made.

* This process could be improved: When the quotes are done importing the
toolbar doesn't change, and there isn't an indication that the import is
complete.

Signed-off-by: Sam Lau <samalau@gmail.com>

Comment 5 Jonathan Druart 2023-09-01 12:35:08 UTC

Created attachment 155112 [details] [review]
Bug 31014: Minor UI problems in QOTD editor tool

This patch makes some cosmetic and functional updates to Quote of the
Day template, including simplifying some JavaScript, adding consisten
styles to buttons and page sections, and adding visible buttons to
jEditable text inputs.

The patch also improves the Quotes page breadcrumbs to add context
on the single quote entry page.

The patch removes quotes.css which is obsolete.

To test, apply the page and go to Tools -> Quote editor.

- The breadcrumbs should read "Tools -> Quote editor."
- Click the "New quote" button. The breadcrumbs should read "Tools ->
  Quote editor -> Add quote"
- Go back and click the "Import quotes" button.
- Confirm that the layout of the page looks good and that the upload
  instructions are shown.
- Upload a CSV file of quotes
  - The instructions should now show information about editing and
    saving quotes.
  - The "Save quotes" button should be styled consistently with other
    submit buttons.
  - Confirm that you can click in the "Source" and "Quote" table cells
    to trigger the display of a textarea where you can edit the text.
    Confirm that both the "Save" and "Cancel" buttons work.
  - Click the "Save quotes" button. A message should appear which shows
    how many quotes were imported.*
  - Confirm that your quotes are saved correctly, including any changes
    you made.

* This process could be improved: When the quotes are done importing the
toolbar doesn't change, and there isn't an indication that the import is
complete.

Signed-off-by: Sam Lau <samalau@gmail.com>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

Comment 6 Tomás Cohen Arazi (tcohen) 2023-09-01 14:24:17 UTC

Pushed to master for 23.11.

Nice work everyone, thanks!

Comment 7 Fridolin Somers 2023-09-08 05:50:27 UTC

Not backported to 23.05.x