Bug 31014 - Minor UI problems in QOTD editor tool
Summary: Minor UI problems in QOTD editor tool
Status: CLOSED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: Main
Hardware: All All
: P5 - low minor
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on: 30903
Blocks: 31063
  Show dependency treegraph
 
Reported: 2022-06-22 13:21 UTC by Caroline Cyr La Rose
Modified: 2024-07-04 20:38 UTC (History)
2 users (show)

See Also:
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:


Attachments
Quote uploader tool (step 3) (32.62 KB, image/png)
2022-06-22 13:23 UTC, Caroline Cyr La Rose
Details
Editable quotes table (step 4) (61.19 KB, image/png)
2022-06-22 13:25 UTC, Caroline Cyr La Rose
Details
Bug 31014: Minor UI problems in QOTD editor tool (12.85 KB, patch)
2023-06-29 17:19 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 31014: Minor UI problems in QOTD editor tool (12.89 KB, patch)
2023-06-29 18:24 UTC, Sam Lau
Details | Diff | Splinter Review
Bug 31014: Minor UI problems in QOTD editor tool (12.97 KB, patch)
2023-09-01 12:35 UTC, Jonathan Druart
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
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