Wishlist - OPAC Redesign

[Christopher Burton]

After the Evergreen conference, it seemed like everyone was under the same impression that the out of box OPAC needed some love. I had planned to do work on my OPAC after the conference, but in the sake of community I have been accomplishing this by keeping most defaults in place and moving/rediesigning items on the OPAC.

This was the second most requested change by the community, so I wanted to contribute back this possible alternative.

See the progress at https://test.nflibrary.ca/eg/opac
User - testUser
Password - demo123

And the commits listed here: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/cburton/LP1778972_OPAC_REDESIGN

For validity, the use of the W3 Validator was used - https://validator.w3.org/
To assist with accessibility checking, pages are scrutinized using WAVE - Web Accessibility Evaluation Tool https://wave.webaim.org/help

[Terran McCanna (tmccanna)]

Very clean and bright!

Please keep in mind that there are some other current development projects which which will likely affect the OPAC interface as well, some of which include:

https://bugs.launchpad.net/evergreen/+bug/1721575

https://bugs.launchpad.net/evergreen/+bug/1772680

[Jane Sandberg (sandbergja)]

This looks like a very nice design! Thanks, Christopher.

I wonder if this could also be an opportunity to address this bug: https://bugs.launchpad.net/evergreen/+bug/1467645 -- it seems like you've already made some progress by introducing a mix of bootstrap grids and tables, rather than the tables-within-tables-within-tables approach.

[Christopher Burton (cburton)]

The grid and table responsiveness is a special blend of CSS I have been using to increase accessibility when it comes to tables. Although, I haven't tested it on screen readers yet.

Thanks for mentioning the user case. I will include screen readers to my testing.

[Christopher Burton (cburton)]

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=commitdiff;h=1abd0ccaa4cc070cbe0852795327fd83eccf8c7f

[Christopher Burton (cburton)]

Change opac to opac-old and opac-new to opac in the templates folder to use.
It was suggested to sideload as an opt in for a version before flipping the OPAC over fully.

This change utilizes Bootstrap 4 for style and responsiveness as well as some custom style changes and updates to the html:

Many buttons were changed to be contextual ( Green = YES, Red = NO ). The option has been added in colors.tt2 for each of the contextual buttons with comments on what they affect. They currently use Bootstrap 4 styling.

Created more granularity for colors by adding and modifying some color classes so that one color is less blanketing and more control can be had

Login opens in modal window instead of redirect.

Search filters in advanced search modified to follow bootstrap .col and fall in line properly on mobile

Alert on OPAC changed to bootstrap dismissable alert. The color of the alert is also added as a config option where the message is set in config.tt2. Uses standard bootstrap4

Created minified versions for all tables to display properly on mobile

Tables now highlight rows on hover and check a row's box on a row click

Tooltips updated

Results
Facets changed to it's own settable colors in colors.tt2

Facets 'more/less' buttons will now snap back to facets after load and scrolls instead of pushing full list to page

Navigation set in button group

Summary
Extra information (Not always needed) hidden and shown by button (+more) with no need for reload (bootstrap collapse)

"Back To Results" button returns you to the specific record in the results and not to top of list

All options for item contained into a button group

'Awards' extra would just have text "Loading...", this has been enlarged to "'Loading Recommendations' with a loading bar

My Account
Pay selected charges displays a dynamic amount in the button totalling the selected payments

Added front end support for redirecting to Paypal for payment. Functionality pending back end implementation of IPNs

Language choice added to 'Personal Information' menu

Modified pending addresses to display INSTEAD of current address if a change is requested for that particular address

Navbar user item counts and charges now contextual. Has 'zero_count' and 'non_zero_count' color options for when the number is zero and when it is not zero. (Not present on E-Items)

[John Amundson (jamundson)]

Thanks for sharing this work, Chris. I haven't spent much time with the redesign, yet, but I like the direction!

I found one small thing that's driving me a little crazy, though...

When you pull up a bib record, for example, https://test.nflibrary.ca/eg/opac/record/146737, you can click on the button for "More Details", which changes to "Less Details". Can this be updated to "More Details/Fewer Details" or "More Detail/Less Detail"?

[Christopher Burton (cburton)]

Thanks for the feedback. I have updated the wording there.

[Ken Cox (kenstir)]

The design looks clean and pleasant. For me, it appears to be a significant reduction in utility because of the wasted vertical space. After a search for "Harry Potter", I see one single result (!) on my FHD screen; when I scroll, I can see at most 3 results at the same time.

https://test.nflibrary.ca/eg/opac/results?query=harry%20potter;qtype=keyword;locg=101;detail_record_view=1

Contrast this with say CW MARS, where after the same search, I see 4 results; when I scroll, I can see 6 results at the same time.

https://bark.cwmars.org/eg/opac/results?query=harry+potter&qtype=keyword&fi%3Asearch_format=&locg=1&detail_record_view=0&sort=poprel

[Jessica Woolford (jwoolford)]

Overall, I really like the look of this design. I have a few suggestions for improvements:

1) I agree with comment #8. There is a lot of white space between results.
2) I would like to see the filtering/sorting options spread out on laptop/desktop viewports as they are with the current catalog to maximize screen real estate. On my laptop, I had to scroll down to see even the first result in my search.
3) I would like to see the facets to appear on the side of the results in laptop/desktop as they do with the current catalog. I don't think the majority of patrons will think to scroll down to look for the facets.

[Jennifer Bruch (jbruch)]

Hi, thank you so much for working on this. I am not a coder but a Librarian that works directly with the public showing them how to use the OPAC. I know that they will be pleased with many of the changes so far.
I have a few questions, and I apologize if I am just unaware of underlying factors or reasons for the things I point out here. Screenshots are in the attached document.

Link Hover Effects
Links at the bottom of the OPAC don’t seem to have a hover effect at all. Some link effects are blue, and some are shade changes. I was wondering if they could all be a single color effect to make customizing to a color scheme simpler. (You discuss “one color is less blanketing” efforts, so perhaps this was intentional? If so, that is OK, options are good too;)

When viewing Items Checked Out
Can the order of the fields be adjusted to Title, Author, Call Number, Barcode, Renewals Left, Due Date
The Call Number being last makes it feel like an afterthought because it is not grouped with similar information like Title and Author. More importantly, some of my older patrons struggle to identify the Due Date because it is in the middle of the line.

Selecting items from search results
When viewing a search result list, it shows the checkbox to select 1-10, and then there is a 0 hanging out seemingly for no good reason until you select an item. Can that be set to say “0 of 10 Selected” or not visible if equal to zero?

Account Preferences page
The “Change” button for the Language option shows up underneath the drop-down rather than next to it.

Checkboxes
Do they have to be so small? ;) Sometimes, it does not matter because, in the case of the search results page, you can click on the wording part of the option such as “Limit to Available Items,” and that will select it. Though most staff and patrons discover that by accident.
However, in many places (like Account Preferences), this behavior is not consistently replicated. Instead, you can click in the vast white space next to it. Patrons and Staff alike struggle with the fine mousing skills necessary to hit that tiny target because it is not very obvious to most that you can click the white space.

[Jennifer Bruch (jbruch)]

Are the new Carousels compatible with this test site? If so, can you put one up?
Thanks

[Christopher Burton (cburton)]

I have an update!

I took all the suggestions into consideration and started working right away to modify the code to satisfy the concerns.

White space has been significantly minimized. The OPAC was also set by default to 'Show More' on the results page causing larger results to appear. This has been set back to the default

The filter/sort options are much smaller. There are quite a few so I mused on an accordian style hide&show but the current layout should be sufficient.

The facets have been placed back on the right hand side. When I first dealt with the OPAC, I put them under the search results as I interpereted this as a "Can't find what you are looking fior? Try these!" and less of a filtering option. On mobile, they will still be below the search results as that just makes sense with the limited screen space.

Link/Hover effects on mobile have been changed to be more consistent with the rest of the navigation with hovering indication. This was just a 'bug' in the code.

Items Checked Out - The Call Number position has been moved as, yes, it is a large part of the search

Selecting Items from search results- I question the necessity of this bar with my iteration as the basket will show on every page. I have fixed this to show the # selected.

Account Preferences - Language - Another bug in the code that has been fixed and the items fall in line now

Checkboxes - Most tables can be clicked to select the row. Account preferences shows the selected row on hover now but there is no rows to actually select. Also, on the search results page, the 'Add to basket' large button can be used to select the title. If there are any with just a checkbox as the only option I can surely look into those as it is helpful, as noted, to have a larger clicking surface for a selection.

As for the carousels, I have not got one up yet. I will attempt to over the next couple days.

[Christopher Burton (cburton)]

The update is view able on the test site. I will wait to push the changes until after I test the carousels

[Christopher Burton (cburton)]

A carousel has been added for perusal

[Jane Sandberg (sandbergja)]

A piece of feedback from one of our partner libraries:

"I'd like for the buttons to have graphic images instead of or in addition to text whenever possible. For example, arrows on the "prev" and "next" buttons and an eyeglass on the search button. Helps with our non-English speaking populations."

[Christopher Burton (cburton)]

Given our discussion on Accessibility, I would like to release this ASAP, maybe sometime this week. I still have to make the final GIT push before a pull can be made but it can be looked at on the URL above.

I wanted to be sure I got all the feedback in.
The iconography for buttons and such may be a future update, but I think I have addressed all of the other concerns with the OPAC.

[Christopher Burton (cburton)]

Also, this isn't an immediate replacement for the OPAC but rather an OPT IN option. The current OPAC would still exist until such time as the community decides to replace the current OPAC with the Responsive/Accessible alternitive here.

This exists under the Open-ILS/src/templates/opac-new directory that would need to be changed to opac (and opac to opac-old) to make the switch. This is the easiest way I found to have both available unless someone has a better suggestion

[Galen Charlton (gmc)]

Hey Chris, is there an updated branch available?

[Christopher Burton (cburton)]

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=commit;h=324cc66ad01b971208b1d1e57b49e612cdc68cfc

Ready for signoff

[Christopher Burton (cburton)]

It may not be perfect but I think it is a huge improvement in readability and usability. As well as having some responsiveness/accessibility enhancements

[Rogan Hamby (rogan-hamby)]

I've spent the last half hour testing this. Thoughts in no particular order:

1) the package-lock json file and node tar file threw up issues for me, I removed the ones I had to pull those in, maybe a non-issue (I don't know).

2) the circular logo falls under our policy and should be the original green or a grayscale version unless there is an exemption granted.

3) overall I like it though I think I'm ready to see that harsh dark green go away (personal taste I know).

5) overall the huge amounts of white space are jarring to me but that probably falls under a "get used to it" category, it's certainly more the prevalent style these days and will probably be a boon to those with small displays. Still on my display, I'm getting a lot of whitespace under the front page logo that makes me scroll to see the bottom bar and its links, which seems odd to me.

6) I really like the mobile display, the display on my phone is a huge improvement.

[Galen Charlton (gmc)]

package-lock.json and the node tar file are indeed not relevant; I've taken the liberty of pushing out a collab branch that removes the extraneous files from the base commit:

working/collab/gmcharlt/lp1778972_opac_redesign /
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/collab/gmcharlt/lp1778972_opac_redesign

[Galen Charlton (gmc)]

topnav_cannedsearch.tt2 appears to be specific to NFPL; any reason not to remove it?

[Christopher Burton (cburton)]

Yeah you can remove topnav_cannedsearch.tt2 for now. I had planned to make that universal but apparently forgot about it.
Was there files I should have put in .gitignore For the lock files?

I tried to reduce alot of the whitespace, there is probably more work to do there. I kept it the same colour scheme as to not confuse and I wasn't sure if those were 'official' colors. I thought I would use a different logo to differentiate too but if it violates anything we can put the currently used one back too.

As for the footer, that was my attempt to make the footer stick to the bottom and not have whitespace below it or having an extra large footer like the current OPAC. It could probably use some tweaking but I didn't want to sit on this anymore

[Rogan Hamby (rogan-hamby)]

Most Evergreen installs will replace the logo so I'd just make it greyscale (personal opinion). However, there are quite a few, especially self-hosted minimal resources, that keep the default color scheme and layout so I have no objection to modernizing colors as well. Just my .02 dinars.

[Christopher Burton (cburton)]

Color scheme is probably a future patch lol.
The logo just has 0.5 opacity as CSS. That can be changed as well

On Mon, 29 Jun 2020 at 13:25, Rogan Hamby <email address hidden>
wrote:

> Most Evergreen installs will replace the logo so I'd just make it
> greyscale (personal opinion). However, there are quite a few,
> especially self-hosted minimal resources, that keep the default color
> scheme and layout so I have no objection to modernizing colors as well.
> Just my .02 dinars.
>
> --
> You received this bug notification because you are subscribed to the bug
> report.
> https://bugs.launchpad.net/bugs/1778972
>
> Title:
> Wishlist - OPAC Redesign
>
> Status in Evergreen:
> Confirmed
>
> Bug description:
> After the Evergreen conference, it seemed like everyone was under the
> same impression that the out of box OPAC needed some love. I had
> planned to do work on my OPAC after the conference, but in the sake of
> community I have been accomplishing this by keeping most defaults in
> place and moving/rediesigning items on the OPAC.
>
> This was the second most requested change by the community, so I
> wanted to contribute back this possible alternative.
>
> See the progress at https://test.nflibrary.ca/eg/opac
>
> And the git commit at https://git.evergreen-
>
> ils.org/?p=working/Evergreen.git;a=commit;h=324cc66ad01b971208b1d1e57b49e612cdc68cfc
>
> You can also obtain the OPAC from my GitHub if you just want to try
> out the OPAC template:
> https://github.com/GalacticHero228/EvergreenOpacV2
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/evergreen/+bug/1778972/+subscriptions
>

--
Chris Burton
*Technology Coordinator** @*
*Niagara Falls Public Library*
4848 Victoria Avenue, Niagara Falls, ON L2E 4C5
Tel [phone] x 267 <email address hidden> <email address hidden>
<https://my.nflibrary.ca>

[Jane Sandberg (sandbergja)]

I'd like to propose a few changes to managing the opac-new directory, in the interest of maintainability of the project and simpler upgrade paths for libraries that want to use this OPAC:

* Change opac-new to opac-bootstrap or something else more descriptive
* Remove any files from opac-bootstrap that are identical to files already in the opac directory (e.g. i18n_strings.tt2). parts/config.tt2 looks very close; we'd just need to add ctx.maintenance_type to opac/parts/config.tt2
* Include an example of using OILSWebTemplatePath to load templates first from local customizations, then from the bootstrap OPAC, and then from the base opac.

I don't want us to add too many duplicate templates. I just know that we won't always remember to keep both directories up-to-date. :-)

[Galen Charlton (gmc)]

I agree with Jane's suggestions, and have a couple more:

- provide a way to let Bootstrap be served locally rather than from bootstrapcdn.com and Cloudflare; at the moment referrers (such as search terms in the URL) are getting leaked to the CDN
- ditto for the Evergreen logo, which is currently served from evergreen-ils.org.

We will need at least some color tweaks; e.g., the header and footer links don't have enough contrast to meet WCAG guidelines.

Since we have a collab branch, Chris, are you amenable to folks going ahead and using it to implement their suggestions, or would you prefer the significant changes go through you?

[Christopher Burton (cburton)]

I would love to have a collaborative effort on this.
I'm excited so many people are into it.
It will probably take many iterations for this to be widely accepted. So
any helping hands are welcome.

All the suggestions are great. Alot of things I hadn't really thought of
but would like to implement.

On Mon, 29 Jun 2020 at 16:51, Galen Charlton <email address hidden>
wrote:

> I agree with Jane's suggestions, and have a couple more:
>
> - provide a way to let Bootstrap be served locally rather than from
> bootstrapcdn.com and Cloudflare; at the moment referrers (such as search
> terms in the URL) are getting leaked to the CDN
> - ditto for the Evergreen logo, which is currently served from
> evergreen-ils.org.
>
> We will need at least some color tweaks; e.g., the header and footer
> links don't have enough contrast to meet WCAG guidelines.
>
> Since we have a collab branch, Chris, are you amenable to folks going
> ahead and using it to implement their suggestions, or would you prefer
> the significant changes go through you?
>
> --
> You received this bug notification because you are subscribed to the bug
> report.
> https://bugs.launchpad.net/bugs/1778972
>
> Title:
> Wishlist - OPAC Redesign
>
> Status in Evergreen:
> Confirmed
>
> Bug description:
> After the Evergreen conference, it seemed like everyone was under the
> same impression that the out of box OPAC needed some love. I had
> planned to do work on my OPAC after the conference, but in the sake of
> community I have been accomplishing this by keeping most defaults in
> place and moving/rediesigning items on the OPAC.
>
> This was the second most requested change by the community, so I
> wanted to contribute back this possible alternative.
>
> See the progress at https://test.nflibrary.ca/eg/opac
>
> And the git commit at https://git.evergreen-
>
> ils.org/?p=working/Evergreen.git;a=commit;h=324cc66ad01b971208b1d1e57b49e612cdc68cfc
>
> You can also obtain the OPAC from my GitHub if you just want to try
> out the OPAC template:
> https://github.com/GalacticHero228/EvergreenOpacV2
>
> To manage notifications about this bug go to:
> https://bugs.launchpad.net/evergreen/+bug/1778972/+subscriptions
>

--
Chris Burton
*Technology Coordinator** @*
*Niagara Falls Public Library*
4848 Victoria Avenue, Niagara Falls, ON L2E 4C5
Tel [phone] x 267 <email address hidden> <email address hidden>
<https://my.nflibrary.ca>

[Jane Sandberg (sandbergja)]

Okay, I pushed two commits to the collab branch implementing my suggestions. The second one just fixes a mistake in my first commit hahaha.

You can now turn Chris' sweet design on and off by simply commenting/uncommenting a line in eg_vhost.conf and restarting Apache.

I also started some release notes.

One issue with the OILSWebTemplatePath that I did not address: we'll need to add the new directory to the Makefile so that it can be installed during the make install step.

Some other work that is needed is to chip away at the files that are almost duplicates between Open-ILS/src/templates vs. Open-ILS/src/templates-bootstrap, with the goal of reducing unnecessary file overrides.

Also, Chris, I noticed that you have a config.tt2 and a config-fresh.tt2. Do we need the config-fresh.tt2 for anything?

[Jane Sandberg (sandbergja)]

A small CSS note: there is some CSS that boosts the size of highlighted text in a record. Unfortunately, if the highlighted text is in the title, it has the opposite effect: the highlighted text is pretty small.

I would expect that the highlighted text would be the same size or larger.

Here's a link on Chris' test server: https://test.nflibrary.ca/eg/opac/record/58615?query=harry%20potter;qtype=keyword;locg=101;detail_record_view=1

I've also attached a screenshot.

[Jane Sandberg (sandbergja)]

Sorry, one more thing! The browse list is currently center-aligned. I think it would be more readable if it were left-aligned.

[Christopher Burton (cburton)]

I made another push on this a few days ago with a few updates on the look.

I have plenty more updates on the way as I am putting all the pages through the W3C Validation service
https://validator.w3.org/.I will be doing an accessibility runthrough after and then removing all the untouched files for a final upload.

If we can take another look at it to see if anything else needs to change while I am validating the code, that would be fantastic.

I have:
Merged the collab
Left Aligned the browser list
Fixed the highlighting size issue
Localized all the dependancies and logo image to the host (Not sure how to add the folders to the MAKE)
The logo is also full color
Fixed the footer weirdness that I really never liked myself. Sometimes they don't like to be a foot.
Some other things I can't quite remember right now.

Take a look, tell me what you think. It may change a bit here and there on my test server linked at the top as I fix issues brought up in validation.

[Christopher Burton (cburton)]

Another commit was made with a number of changes while running a long list of pages through validation.

Also, a complete overhaul of the My Account interface to help bring all the content to the top of the page and reduce scrolling as that has been requested heavily in this project. All the navigation has been combined into one navigator for the whole section. The dropdown action items have also been translated to buttons for a simpler experience.
While it's not 100% complete in my eyes, I was excited and wanted to share the update.

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=commit;h=97dc5bd3e76f172ecb971cda59b10742102c455a

[Christopher Burton (cburton)]

Another update was pushed today, it is a Final Draft of sorts.

I have re-added any pages in the template that were removed for my final code cleanup/review as I may want to change some of the structure in those files. They will be removed at the end if they are unchanged.

Fontawesome has been added to show icons and give the OPAC some character while attempting to help those maybe not so good with a default language as Jane Sandberg had suggested from a partner library.
This is hosted locally like the other resources added so there aren't a bunch of requests going out.
https://fontawesome.com/

I saw some comments in the templates looking for a lightweight datepicker, so I have added Bootstrap Datepicker to help choosing dates. It puts the date in the requested format automatically too so it should help with ease of form completion.
https://bootstrap-datepicker.readthedocs.io/en/latest/

The MyOpac is a complete reimagining, and the counters on the navigation for those pages is why I removed them from the navigation. It just made it more bulky up top, but all those totals are just a click away. The navigation that existed in the MyOpac pages, all spread out by section and some listed in dropdowns no longer exists as it has all been amalgamated into one menu and action buttons with visual represention.

Charges and Payments have been separeated into their own pages. This and the removal of the navbar counts caused some back end code to be changed to help support both OPAC options. That being said, this project has turned into more than a replacable template. There is some back end code needed to fully support the new template.

Everything got an update and I got to change some things that have bothered me about the OPAC for a while and I think I have covered all the bases when it comes to comments/concerns on this Launchpad Item.

I am really excited to see this come out and while I have some code cleanup to do, the front end should stay looking the same or very similar if you want to check it out and I should have a final push soon unless there are any other requested changes/updates to consider.

[Galen Charlton (gmc)]

I've updated collab/gmcharlt/lp1778972_opac_redesign with the latest and greatest from Chris and the master branch.

[Ruth Frasur Davis (redavis)]

In the test OPAC, attempting to view the MARC record from an individual record page produces an internal server error. I think (but could definitely be wrong) that this is somehow also the reason that an expert search fails.

[Ruth Frasur Davis (redavis)]

N/m my comment about the expert search failing. But don't n/m the comment about the MARC producing a server error.

[Ruth Frasur Davis (redavis)]

Related to the expert search, when scoping the search to the consortium, the MARC tag search displays results for the consortium and the preferred library. When scoping to a library, no results are retrieved.

[Christopher Burton (cburton)]

Yes. I have identified a few server related errors on the test server and I will be rebuilding it to current before Feedback Week next week. The MARC record for one, I confirmed as a server based error and not the template as the template was fine on a secondary server

[Christopher Burton (cburton)]

The server has been updated and is live again. I have tested the MARC Record page and Expert page and can confirm they work again.

The server is now running opensrf 3.2 and Evergreen 3.5.1 (The most current release)

[Llewellyn Marshall (lbmarshallv)]

I found an issue on the Expert search page. If I have more than 1 row and try to remove one, it does not remove the row. I think the issue is with the killRowIfAtLeast(min, link) function in simple.js. It's only set up to recognize TR tags.

[Ruth Frasur Davis (redavis)]

I can confirm Llewellyn's observation regarding undeletable rows in the expert search. In the search results page, I also encountered display issue. The "place hold/add to basket/add to my list" element on the right hand side of the each record doesn't align with the actual record. I've attached a screen shot of it happening "above the fold" but it persists in record rows as you scroll down as well.

[Ruth Frasur Davis (redavis)]

I filled a basket with items, viewed the basket, and from the "view basket" screen, chose to place a hold on all of the items. There was no notification that the holds had been placed, and I was not taken to the holds screen to verify my notification/pickup methods. The holds were not placed. I believe that is because the account (testUser; demo123) is expired. There was no message, however, indicating that.

Neither the Current Items on Hold nor Holds History show when a hold was placed.

[Terran McCanna (tmccanna)]

A few more small things:

1) On the carousel, the next/prev buttons overlap the cover images

2) My Account menu - when a submenu is opened, it overlaps the rest of the menu, but the color/style is too similar, so it's visually confusing. I think either changing the color, or having it pop up to the side, or expand the entire menu more like a classic tree would be easier to use.

3) On the account preferences, the test user is expired and the expiration date could be styled better - right now it is indented, but the text is still black, so it looks misaligned. If the text was red it would stand out more prominently.

4) The patron self-registration form could use a date picker for the DOB

[Jennifer Bruch (jbruchpails)]

The addition of the icon package opens up a simple way to fix an accessibility issue with the Holds Success/Failure messages being very similar mentioned below.

https://bugs.launchpad.net/evergreen/+bug/1034906

See attached for image or mockup

[Erica Rohlfs (erohlfs)]

This is looking good! The bug comments are a bit long, so someone may have already noticed. When viewing shelf browse on monitor at full screen, there appears to be a mix of dotted and straight line under Shelf Browser and Next Page button (image attached). When viewing on a smaller screen, I don't see it.

Also, perhaps the Evergreen large logo should include the trademark symbol.

[Christopher Burton (cburton)]

Just as a side note, this is more than just a template at this point as some Javascript files and perl files needed to be edited to make all the changes work harmoniously with the current and proposed OPAC. You will need a full load of this patch to make the OPAC completely functional.

[Ruth Frasur Davis (redavis)]

I have tested this and note several fixes and some outstanding issues.
Outstanding issues:
1. lack of an alert/message when a hold fails to be placed.
2. functionality issues when attempting to places holds from "view basket" interface. Placing holds from basket menu > place holds works.

Fixed issues:
1. row in expert search can now be deleted.
2. carousel prev/next buttons render appropriately
3. MARC record appears (acknowledging that this was a server issues rather than template issue)
4. My Account submenus no longer cover rest of menu
5. OMG, thank you for the date picker in patron self-registration.

[Christopher Burton (cburton)]

Thanks Ruth! I identified the problem with the buttons on the basket interface and have fixed that!
There also is a message when a hold fails to place https://imgur.com/a/88xX67Q. Is there another location a message is expected?

[Ruth Frasur Davis (redavis)]

Chris,

I think the lack of message was related to the button issue rather than an actual lack of message in an otherwise functional environment. I've verified the fix of the button(s) on the basket interface. Nice!

[Ruth Frasur Davis (redavis)]

I have tested this code and consent to signing off on it with my name, rfrasur and my email address, <email address hidden>. (not sure this is necessarily necessary, but there it is).

[Blake GH (bmagic)]

I jumped on the band wagon and made a small change to the css to move the label text up a nudge. Tip of the collab branch

[Christopher Burton (cburton)]

Perhaps the change should go in the template CSS file and override that class? If bootstrap gets updated or replaced or pulled from the bootstrap repo with npm or something that change could end up getting squashed

[Galen Charlton (gmc)]

As a heads up, today and tomorrow I will be taking on a comprehensive review of this for inclusion in 3.6. The specific goals I have in mind are:

- integrating any changes that
- integrating some changes and improvements that were contributed by Owen Leonard
- pulling in the core dependencies via npm rather than bundling them.
- see if any adjustments are needed to the installation instructions

I'll produce a branch with my follow-ups, then ask for review from Chris. As far as core functionality is concerned, I'll rely on Ruth's signoff, although I'll also of course so some functionality testing of my own.

Since the Bootstrap skin will be marked as experimental 3.6, errata in terms of functionality that may be added to the TPAC skin for 3.6 but not yet included in the Bootstrap skin is to be expected. I'll open LP tickets as I run across such issues.

[Galen Charlton (gmc)]

Re Blake's patch, I agree with Chris: the core Bootstrap stuff should not be changed directly, as it will shortly be pulled from NPM and not bundled.

[Galen Charlton (gmc)]

Noting that for now that the branch I'm working in for my review is user/gmcharlt/bootstrap_review.

[Blake GH (bmagic)]

Christopher - you're right, though it's a subtle change, it made the boxes line up better for all of the screen resolutions I tested. Are you suggesting adding a CSS clause to "templates-bootstrap/opac/css/style.css.tt2" ? I'll commit that

[Blake GH (bmagic)]

Done

[Galen Charlton (gmc)]

user/gmcharlt/bootstrap_review now includes patches to:

- install the dependencies from NPM
- install templates-bootstrap by default

It also includes Blake's new form-check-input patch.

[Galen Charlton (gmc)]

I'm now ready to sign off on this as an experimental feature. Branch is user/gmcharlt/bootstrap_signoff.

I've added additional follow-ups to:

- make templates-bootstrap available for I18N
- restore a copy of the locale picker to the navbar: users should not be required to log in to switch between enabled locales

[Jane Sandberg (sandbergja)]

Added to master, for inclusion as an experimental feature in 3.6. This is a great step forward for the OPAC, and I'm excited to watch it develop further.

Thanks to everybody who contributed to this and provided feedback! Special acknowledgements to Galen, Owen, Blake, and Ruth for contributing code and signoffs. And thanks especially to Chris for your persistent work on this huge project.

[Christopher Burton (cburton)]

Thank you everyone for your feedback!

Jane, can you please add commit f5c39df5130cc7dd2370b2a139947f1be2bde4a9. One of the previous collab commits had altered some files causing a couple issues in the templating and HTML validity and I see those errors are in the master

[Jane Sandberg (sandbergja)]

See bug 1895398 for some follow-up needs that I noted.

[Jane Sandberg (sandbergja)]

Chris: sure, let me take a look!

[Jane Sandberg (sandbergja)]

Confirmed that f5c39df gets our logo back, makes the html more valid, and removes a duplicate process block. Pushed to master; thanks, Chris.