Bug 22638 - Self checkin CSS update
Summary: Self checkin CSS update
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: OPAC (show other bugs)
Version: unspecified
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Claire Gravely
QA Contact: Josef Moravec
URL:
Keywords:
Depends on:
Blocks: 22274 22772
  Show dependency treegraph
 
Reported: 2019-04-04 07:19 UTC by Claire Gravely
Modified: 2019-05-08 14:01 UTC (History)
5 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Medium patch
Who signed the patch off:
Text to go in the release notes:
Version(s) released in:
19.05.00


Attachments
modified: koha-tmpl/opac-tmpl/bootstrap/css/sci.css modified: koha-tmpl/opac-tmpl/bootstrap/en/modules/sci/sci-main.tt (6.10 KB, text/plain)
2019-04-10 13:05 UTC, Claire Gravely
Details
Bug 22638: Self checkin CSS update (5.97 KB, patch)
2019-04-10 13:11 UTC, Claire Gravely
Details | Diff | Splinter Review
Bug 22638: (follow-up) Convert SCI CSS to SCSS (22.06 KB, patch)
2019-04-11 14:16 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22638: Self checkin CSS update (6.02 KB, patch)
2019-04-11 14:19 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22638: (follow-up) Convert SCI CSS to SCSS (22.06 KB, patch)
2019-04-11 14:19 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22638: (follow-up) Convert SCI CSS to SCSS (22.35 KB, patch)
2019-04-16 16:05 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 22638: Self checkin CSS update (6.08 KB, patch)
2019-04-16 16:23 UTC, Liz Rea
Details | Diff | Splinter Review
Bug 22638: (follow-up) Convert SCI CSS to SCSS (22.43 KB, patch)
2019-04-16 16:23 UTC, Liz Rea
Details | Diff | Splinter Review
Bug 22638: Self checkin CSS update (6.12 KB, patch)
2019-04-16 19:36 UTC, Josef Moravec
Details | Diff | Splinter Review
Bug 22638: (follow-up) Convert SCI CSS to SCSS (22.45 KB, patch)
2019-04-16 19:36 UTC, Josef Moravec
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Claire Gravely 2019-04-04 07:19:28 UTC
The self-checkin page was missed in the opac css update. 

See bug 22274 for self-checkout.
Comment 1 Claire Gravely 2019-04-10 13:05:45 UTC Comment hidden (obsolete)
Comment 2 Claire Gravely 2019-04-10 13:11:36 UTC Comment hidden (obsolete)
Comment 3 Owen Leonard 2019-04-11 14:16:01 UTC Comment hidden (obsolete)
Comment 4 Owen Leonard 2019-04-11 14:19:08 UTC
Created attachment 87769 [details] [review]
Bug 22638: Self checkin CSS update

This patch updates the Self-Checkin CSS to match tne new OPAC design.

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Comment 5 Owen Leonard 2019-04-11 14:19:11 UTC Comment hidden (obsolete)
Comment 6 Oliver Behnke 2019-04-16 09:12:29 UTC
Hi Owen, I tried to test the patches on our local test system and a number of hunks didn't apply. What's the baseline version for the patches? I'm on 18.11.04.

Cheers
Comment 7 Katrin Fischer 2019-04-16 11:14:47 UTC
Hi Oliver, 
patches are always created and have to be applied against the most recent master branch (http://git.koha-community.org/gitweb/?p=koha.git;a=shortlog;h=refs/heads/master) as it will be applied there and then backported into older versions if it's a bugfix or minor enhancement.
Comment 8 Claire Gravely 2019-04-16 11:23:02 UTC
I did a first test:

I forgot the CSS language bar at the bottom and the Font needs to be added in.
Comment 9 Oliver Behnke 2019-04-16 11:49:41 UTC
Apart from the missing language menu (see Claire's previous comment) everything looks fine to me (tested on ByWater sandbox as most others didn't work for me).
Comment 10 Claire Gravely 2019-04-16 12:16:31 UTC
(In reply to Claire Gravely from comment #8)
> I did a first test:
> 
> I forgot the CSS language bar at the bottom and the Font needs to be added
> in.

Nope, it is all looking good, font and style is there! Sorry!
Comment 11 Oliver Behnke 2019-04-16 12:37:47 UTC
Ok, so I don't know how to "Enable multiple translations" in a sandbox (the I18N admin prefs don't allow adding languages), so I'd trust Claire's assessment.

What I noticed in Firefox is:
1) The "Powered by Koha" footer string is left-adjusted, instead of right-adjusted like the OPAC
2) The font size and style for the SCI top menu is different from the OPAC, which shows if you switch between the two. The SCI header uses a smaller font and has a (ugly) drop-shadow, compared to the OPAC's header (preferred!).

HTH
Comment 12 Owen Leonard 2019-04-16 13:42:41 UTC
(In reply to Oliver Behnke from comment #11)
> 1) The "Powered by Koha" footer string is left-adjusted, instead of
> right-adjusted like the OPAC

Confirmed.

> 2) The font size and style for the SCI top menu is different from the OPAC,
> which shows if you switch between the two.

I don't find this to be the case. Did you clear your browser cache after rebuilding the CSS?
Comment 13 Oliver Behnke 2019-04-16 13:45:10 UTC
Hm, good point. How do I rebuild the CSS (from SCSS I suppose) in a sandbox?
Comment 14 Owen Leonard 2019-04-16 14:20:13 UTC
(In reply to Oliver Behnke from comment #13)
> Hm, good point. How do I rebuild the CSS (from SCSS I suppose) in a sandbox?

Sorry I didn't think about the sandbox testing process... I don't think you can use a sandbox to test a patch which requires rebuilding CSS.
Comment 15 Oliver Behnke 2019-04-16 14:34:08 UTC
Makes sense. So that leaves Claire to sign-off if she can't reproduce the front style/size issue I mentioned. Maybe after you moved the string to the right :-)

Cheers
Comment 16 Owen Leonard 2019-04-16 16:05:51 UTC
Created attachment 88086 [details] [review]
Bug 22638: (follow-up) Convert SCI CSS to SCSS

This patch makes a number of follow-up changes, including:

 - Covert remaining icons to Font Awesome
 - Convert CSS to SCSS
 - Move SCSS which is common to both the OPAC and SCI into separate
   files to be including in each during compilation.
 - Make minor correction to opac.scss to fix SCSS build warning

To test, apply the patch and rebuild the OPAC CSS. Clear your browser
cache if necessary.

- Enable the self checkin module using using the SelfCheckInModule
  system preference.
- Open the self checkin interface and test the checkin process.
  Everything should look correct.
  - After submitting barcodes for checkin, the "Finish" button should
    show a Font Awesome icon instead of an image icon.
- Enable multiple translations and set the OpacLangSelectorMode
  preference to show the language menu in the footer.
- Confirm that the language menu looks correct.
- View the regular OPAC to make sure the changes to opac.scss didn't
  result in unintended changes to the interface.
Comment 17 Liz Rea 2019-04-16 16:23:47 UTC
Created attachment 88087 [details] [review]
Bug 22638: Self checkin CSS update

This patch updates the Self-Checkin CSS to match tne new OPAC design.

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

Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Comment 18 Liz Rea 2019-04-16 16:23:57 UTC
Created attachment 88088 [details] [review]
Bug 22638: (follow-up) Convert SCI CSS to SCSS

This patch makes a number of follow-up changes, including:

 - Covert remaining icons to Font Awesome
 - Convert CSS to SCSS
 - Move SCSS which is common to both the OPAC and SCI into separate
   files to be including in each during compilation.
 - Make minor correction to opac.scss to fix SCSS build warning

To test, apply the patch and rebuild the OPAC CSS. Clear your browser
cache if necessary.

- Enable the self checkin module using using the SelfCheckInModule
  system preference.
- Open the self checkin interface and test the checkin process.
  Everything should look correct.
  - After submitting barcodes for checkin, the "Finish" button should
    show a Font Awesome icon instead of an image icon.
- Enable multiple translations and set the OpacLangSelectorMode
  preference to show the language menu in the footer.
- Confirm that the language menu looks correct.
- View the regular OPAC to make sure the changes to opac.scss didn't
  result in unintended changes to the interface.

Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Comment 19 Josef Moravec 2019-04-16 19:36:10 UTC
Created attachment 88110 [details] [review]
Bug 22638: Self checkin CSS update

This patch updates the Self-Checkin CSS to match tne new OPAC design.

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

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Comment 20 Josef Moravec 2019-04-16 19:36:14 UTC
Created attachment 88111 [details] [review]
Bug 22638: (follow-up) Convert SCI CSS to SCSS

This patch makes a number of follow-up changes, including:

 - Covert remaining icons to Font Awesome
 - Convert CSS to SCSS
 - Move SCSS which is common to both the OPAC and SCI into separate
   files to be including in each during compilation.
 - Make minor correction to opac.scss to fix SCSS build warning

To test, apply the patch and rebuild the OPAC CSS. Clear your browser
cache if necessary.

- Enable the self checkin module using using the SelfCheckInModule
  system preference.
- Open the self checkin interface and test the checkin process.
  Everything should look correct.
  - After submitting barcodes for checkin, the "Finish" button should
    show a Font Awesome icon instead of an image icon.
- Enable multiple translations and set the OpacLangSelectorMode
  preference to show the language menu in the footer.
- Confirm that the language menu looks correct.
- View the regular OPAC to make sure the changes to opac.scss didn't
  result in unintended changes to the interface.

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Josef Moravec <josef.moravec@gmail.com>
Comment 21 Oliver Behnke 2019-04-17 08:27:45 UTC
Thanks everyone for getting this done. Hopefully future OPAC CSS changes will include tests of the SCI/SCO modules as well :-)

Cheers!
Comment 22 Nick Clemens 2019-04-17 12:29:49 UTC
Awesome work all!

Pushed to master for 19.05
Comment 23 Martin Renvoize 2019-04-26 11:58:15 UTC
Enhancement will not be backported to 18.11.x series.