EB:203 UI consensus #84
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Website logo is quite long so hamburger menu was on row/line below quite often. Fix was to add more media queries for logo size on smaller screens to help keep them on the same row for longer. Now only a "small phone" e.g. samsung galaxy S8 would show hamburger menu on new line/row. Don't think making the logo any smaller (to keep the hamburger menu on same line) is a good idea for such a screen (logo becomes too small).
- Tabs stacked at md breakpoint, horizontal at lg and above - Use a darker border for the tabs (better contrast when presenting etc...)
HTML and JS needed for theme switching. - JS for intial recognition of preference on site load - HTML and JS to swap themes (added to navbar)
Some images/icons needed a dark mode specific version to be visible. This commit covers adding them to work with the JS that swaps themes. Also cleaned up some unused images and icons.
Dropdown buttons in the species search misbehaving for reasons still not fully unclear (version in main branch works fine at time of writing).
Modified JS file now included in the head (using {{ define "script_includes" }}) as it should be.
Add a wait for the dom to be loaded before running main function and targeting each dropdown option made it work again.
Date last updated information no longer a part of the footer so test not needed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR covers EB:203 which is a combination of many tasks around the UI for the portal. Please feel free to explore the changes locally and let me know what you think or if you spot any issues. Of course, happy to make changes/additions both in the code or more stylistically, I see this as a good way to get the ball rolling.
Tasks (with specific comments associated):
1. Use a darker border of the tabs of the species pages
Reason: some projectors struggle displaying light grey, perhaps use medium grey? Or consider another style for displaying the tabs, so there is more colour contrast.
Done.
2. Website logo is too long for a mobile phone screen, fixable?
Extra media queries added to handle this for all cases except a small phone. For a small phone screen reducing the logo size makes it too small, so this I think is a good compromise and improvement on what we had.
3. Decide whether "first date on portal" should be kept in the Downloads table
So far kept, don't have any strong opinions on this though.
4. The website logo cannot be seen in a mobile or tablet using “dark mode"
A "Dark mode" theme has now been added to the genome portal. Dark mode will be automatically activated for those users that have that as there default preference. It can also be modified in the navbar.
A side note here is that JBrowse also has light and dark themes (tools -> preferences -> themes). I have left that alone in this PR but it is something we can consider for the future.
5. Suggested format for footer part of software versions: "Website code on Github (v1.0.0)". Perhaps release date is not important to show, as for citation what matter is the date of visit/use
I have edited the footer to remove the date but wrote the following instead: "Swedish Reference Genome Portal version: v1.1.0"
Happy to change it though.
6. See if copy to clipboard can copy formatted text not plain text
It's possible to copy in a non-plain text way like HTML but the problem is this is not reliably transferable as hoped when you then paste it. For example copying and then pasting into google docs gives text like:
<em>this text should be italics but instead the pasted text is just HTML <em>, instead of directly converting it to italicized text. Essentially, there doesn't seem to be a good solution for this that will reliably paste how we want it to. So I think sticking with plain text copying seems to be the best option.7. Increase font size for the “title“ of each of the questions in the FAQ page (taken from EB-402)
Done, can consider further modification if desired. Such as using bootstrap's accordion component for each faq question etc...