-
Notifications
You must be signed in to change notification settings - Fork 16
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New attribute page_img: logos for for pages and sections #290
base: main
Are you sure you want to change the base?
Conversation
@PhilReedData Hey! Sorry it took so long to look at your pull request. I played around with some bootstrap classes. Could you have a look in how it behaves on your deployment? |
Thanks, I certainly will try that locally. Which remote call should I use now? To a particular tag/release of ETT? |
this is your branch still ! |
@PhilReedData |
Sorry something behaved different than I expected, you do have the latest version , let me check! |
Ah okay. I thought I had a later version because of the way the logo appears above the heading on the mobile view, that's changed from my code (changed for the better). |
@phil, can you point me to a place/branch where you try out the FAIRDOM Seek website with this version of the theme? The second screenshot show the logo to be be squeezed for example. and I think I want to play a little bit more with the spacings. |
Sure, it is here: https://github.com/FAIRdom/fairdom.github.io/tree/page-logos |
… into pr/PhilReedData/290-1
@PhilReedData I just discovered where I got confused. You are manually overwriting on the FAIRDOM website, the _includes/section-navigation-tiles.html. If you delete that one you can see my new version. |
Good catch btw. That was a bug. I think I am only now happy with all user scenarios. Sorry for all the changes! My conditional was not behaving as expected... |
@PhilReedData THis is unrelated to the changes here, but is related to the hover effect put in place. If the description is is causing an edge case where it is longer that the width it has + a small change in width available, the text wrapping will get triggered. This might not have been the case in the past, since there was more width available since the logo was not there. But I can give you an example where this is already the case: https://www.infectious-diseases-toolkit.org/showcase/ first tile. You will have to play around with the hover effect you've set in your css. |
I think put a slight delay on the shrink of the width compared to the growth on the right side, could fix this. |
Ah I see, thanks anyway. I had a look but I'm already using the same code as your example. It is a rare problem, only happens at specific widths, and if you say it's not been introduced by the page image work then I'll leave it alone for now. What comes next? Is this work ready to go in the next ETT release, and should I wait for that before merging into the production FAIRDOM website? |
I could still Iron out some behaviours while testing it on other instances |
@PhilReedData I think we are kind of in a good state? I tried in in the ELIXIR toolkit theme, the FAIRDOM website (with and without toc), RDMkit and Infectious diseases toolkit. Tried out multiple breaking points. If you could maybe check out on Safari. |
@PhilReedData once I have released a new version, you can use that one in your FAIRDOM instance! |
Here are my Safari tests with FAIRDOM:
When I take out toc: false, the image disappears on both. If I add a (temporary) h2, the image reappears on Chrome only. This problem does not happen on the SEEK page, which is otherwise the same (toc: false). |
@PhilReedData I think this will be a caching thing, since I had to update some javascript and that does not get a unique identifier. Let me improve that! |
… into pr/PhilReedData/290
Normally this should not happen anymore |
As discussed, I have borrowed the
image
page attribute from RO-Crate and used a newpage_img
attribute for pages to show a graphic such as a logo to the side of the page title. It also shows on the section navigation cards. There is no change to the rendered HTML in either place unless thepage_img
attribute appears in the front-matter of a page.More details and images are described in a Google Doc.
This has been tested on a branch of the FAIRDOM website, and in the ETT site itself. I used the following code in
_config.yml
to make a remote call:remote_theme: PhilReedData/elixir-toolkit-theme@page-img-007
This is a fork from version 3.2.0. I did not mean to change the Gemfile.lock file.
To do
Sample images
More images in the linked Google Doc above.