Backport full width layout from LIS

[alancleary]

LIS implemented a _layouts/search.html file that it uses for its gene search page. This layout simply wraps the page content in a container that utilizes the full width of the page. This is generally useful enough that it should be added to the theme with a less specific name, i.e. full-width. Be sure to document this layout in the README.md file as well.

@sammyjava Mind tackling this?

[sammyjava]

Sure, will do.

[sammyjava]

Hrm. I'm having trouble getting things to run all of a sudden. I moved the search layout to the theme as full-width:

[shokin@jekyll-dev-vm jekyll-legumeinfo]$ cat ./_themes/jekyll-theme-legumeinfo/_layouts/full-width.html
---
layout: base
---
<div class="tm-main uk-section uk-section-default uk-flex">
  <div class="uk-container uk-container-expand">
    {{ content }}
  </div>
</div>

and yet the compiler is complaining about full-width not being present. PLUS there's a new uikit error.

     Build Warning: Layout 'full-width' requested in tools/search/gene.html does not exist.
     Build Warning: Layout 'blank' requested in assets/js/graphql/graphql.js does not exist.
  Conversion error: Jekyll::Converters::Scss encountered an error while converting 'assets/css/uikit/uikit-theme.scss':
                    Error: File to import not found or unreadable: uikit/variables-theme.scss. on line 123:1 of uikit-theme.scss >> @import "uikit/variables-theme.scss"; ^ 
                    ------------------------------------------------
      Jekyll 4.2.0   Please append `--trace` to the `serve` command 
                     for any additional information or backtrace. 
                    ------------------------------------------------
/usr/share/gems/gems/jekyll-sass-converter-2.1.0/lib/jekyll/converters/scss.rb:190:in `rescue in convert': Error: File to import not found or unreadable: uikit/variables-theme.scss. (Jekyll::Converters::Scss::SyntaxError)
        on line 123:1 of uikit-theme.scss
>> @import "uikit/variables-theme.scss";

   ^
    from /usr/share/gems/gems/jekyll-sass-converter-2.1.0/lib/jekyll/converters/scss.rb:182:in `convert'

Any ideas??

[alancleary]

@sammyjava Were you able to resolve the issue? I doubt I'll have time to dig into this until next week.

[sammyjava]

Nah, I was gone Thursday/Friday so haven't pursued it. I'd appreciate a look-see when you have some time, I'm stumped.

[sammyjava]

I just pushed a commit to full-width-layout so you can see what I'm working with.

[alancleary]

@sammyjava I pulled your branch in the starter site and ran the site with Docker Compose. There was no error like what you reported. Maybe it's a jekyll-legumeinfo issue?

The full-width layout was afflicted by the bug @StevenCannon-USDA reported in web-components issue #218. As I mentioned in issue #36, the fix is removing the uk-flex class from the main div in the layout. Do you want to make this change? I can open a PR instead if you're still having issues.

[sammyjava]

Well this issue is fixed, or fixed itself. I replaced the "search" layout with "full-width" in the site and removed uk-flex from the top divs in the default and full-width layouts in the theme (in my full-width-layout branch). So it compiles now.

But now the gene search page is throwing a Uncaught TypeError: modal is null which I think I've seen before but I forget what causes it:

https://jekyll.dev.lis.ncgr.org/tools/search/gene.html

[sammyjava]

Oh, never mind, the console showed ERROR/assets/js/web-components/web-components.min.js' not found.`

[sammyjava]

Nope, that's a non-fatal error. Still have the modal is null error with no console messages now.

[sammyjava]

This is on jekyll-legumeinfo:use-theme and jekyll-theme-legumeinfo:full-width-layout.

[alancleary]

I replaced the "search" layout with "full-width" in the site and removed uk-flex from the top divs in the default and full-width layouts in the theme (in my full-width-layout branch). So it compiles now.

The default layout needs the uk-flex class and it works correctly when it's present because it has a purpose, unlike the full-width layout where it's a vestigial carried over by copy-paste. Please add it back to the default layout.

the console showed ERROR /assets/js/web-components/web-components.min.js' not found.`

The theme does not import the web components JS from assets; it uses a CDN. So this error is a jekyll-legumeinfo ism.

Still have the modal is null error with no console messages now.

On the search page did you opt-in to the web components via the front matter, per the documentation.

[sammyjava]

The default layout needs the uk-flex class and it works correctly when it's present because it has a purpose, unlike the full-width layout where it's a vestigial carried over by copy-paste. Please add it back to the default layout.

Done.

On the search page did you opt-in to the web components via the front matter, per the documentation.

Ahhh. I didn't get that memo, I thought we were including web-components everywhere. That was the problem.

I'll close this since it's fine now and we can complain further in the PR.