Skip to content
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

Updating Website to Bootstrap 4 #2

Open
malsf21 opened this issue Apr 24, 2019 · 14 comments

Comments

Projects
None yet
2 participants
@malsf21
Copy link

commented Apr 24, 2019

I've noticed that the website uses an older version of Bootstrap, which is still usable but gives it a bit of a dated look (and also makes mobile usage tough). If you would like, I wouldn't mind submitting a PR that updates the styling dependencies for the site (Bootstrap 4, FA5/another icon font, jQuery-slim), while still keeping the content the same. What are your thoughts?

@ctrueden

This comment has been minimized.

Copy link
Member

commented Apr 24, 2019

@malsf21 A PR updating that would be amazing! 🤩 Also, I don't think anyone on the project feels strongly about the content layout, so if you have opinions you want to inflict, please feel free.

As long as I'm asking for things: the SCIFIO website is set up the same way, and I'm betting would benefit from a similar update. If it's easy, would you be willing to do that one as well?

@malsf21

This comment has been minimized.

Copy link
Author

commented Apr 24, 2019

Sure, if fixing up the fiji website is simple enough, I can do the same for the SCIFIO website - it doesn't look like there are many distinct pages there either.

I'll fork this website for now, and send a PR your way when I'm ready!

@malsf21

This comment has been minimized.

Copy link
Author

commented Apr 26, 2019

Hey, just wanted to update you on my progress - I've slightly restructured the content of the site to be more sequential, and I removed some (but not all) of some hacky CSS that's not responsive for mobile use (i.e. the use of tables for centering content, the nav search bar, etc.). You can see a draft of it here; any thoughts?

I still have to make the download section more responsive (though in this case, it works as-is on most mobile phones). In addition, I need to re-add the Twitter feed and the plugin information (which was in a carousel). Out of curiosity, do you have a specific preference for the carousel style? If not, I might restructure the same information into a different style of presentation (e.g. tiles, cards, some sort of accordion or tab system)?

@ctrueden

This comment has been minimized.

Copy link
Member

commented Apr 26, 2019

Thanks for the update, @malsf21! I love what you've done with it.

Regarding the plugin carousel, I don't have strong opinions. The reason we included it is because the previous Fiji site (a page in MediaWiki) had a carousel. However, the plugins featured there are woefully uneven (TrakEM2 is featured several times, lol) and outdated (many awesome new plugins like BigDataViewer, BigStitcher, SciView, not shown). If you have the time and energy to create a new carousel in whatever style you like, such that it is feasible for new plugins to be featured easily, that would be amazing. Or if not, I'd favor simply cutting the carousel, since what's already there is perfectly good without it.

@malsf21

This comment has been minimized.

Copy link
Author

commented Apr 26, 2019

Sounds good, and yeah, I definitely can rework how the plugin information is displayed - as long as you're in no rush, I can implement these changes over the next two or three weeks.

This might be asking for much, but do you have updated information on what plugins you'd like to feature on the website? I'm not familiar with most of the plugins, so having an expert opinion on how to phrase the information, what images to place, would be great - then, I can just implement the styling.

@malsf21

This comment has been minimized.

Copy link
Author

commented Apr 26, 2019

And, for clarity, I'll give a shot at formatting it like this, with a card with tabs that lets you switch between the different featured plugins (with a title, image example, and a text description).

@ctrueden

This comment has been minimized.

Copy link
Member

commented Apr 26, 2019

For which plugins to feature, I think the sustainable way forward is to crowd-source it. We can ask the community by posting a topic on the Image.sc Forum. I have started a thread!

@malsf21

This comment has been minimized.

Copy link
Author

commented Apr 29, 2019

Saw your forum thread, and responded to it. Just wanted to also let you know that I've implemented everything that's not the plugins pane - including a new way of presenting the download button, that automatically detects what OS your browser has (but still has other options available) - what do you think? I'm not sure if it looks too clunky or not.

@ctrueden

This comment has been minimized.

Copy link
Member

commented Apr 30, 2019

a new way of presenting the download button, that automatically detects what OS your browser has (but still has other options available) - what do you think?

Slick! 😎

Two suggestions:

  1. The "no JRE" version is not macOS-specific. That one should go at the very bottom, under another horizontal divider. It was only aligned with the macOS download before for symmetry of the table.
  2. The adjacent Options dropdown button looks weird to me, because it is the same color and font size. Might look better was a different colored button, or maybe smaller font with different foreground color? Or even get rid of the word "Options" in favor of only the downward triangle? But I'm not a graphic designer so take anything I suggest along these lines with a grain of salt. Have you seen any other projects with a similar download mechanism we can steal ideas from?
@malsf21

This comment has been minimized.

Copy link
Author

commented May 1, 2019

Ah, thanks for the feedback - didn't know how the "no JRE" version worked! I split it up and tried to give it an icon that signified what it meant (though I'm not sure if it's clear).

As for the adjacent options dropdown, I agree - I was internally debating how I could it look clearer. I pushed a different approach I had, which involves splitting up the button into two distinct components - I'm not sure if it's clear as to what the button does, however. I got the inspiration for this idea from the VSCode website.

Let me know what you think!

@ctrueden

This comment has been minimized.

Copy link
Member

commented May 1, 2019

I think the dropdown button is better with just the arrow, yeah. Actually I kinda like it better without the explicit space, but instead margin-left: 1px for a minimal separation:

minimal-space

Or even just a faint dividing line appearing as a single button like this:

dividing-line

I achieved the latter with CSS like:

#auto-download { border-radius: .3rem 0 0 .3rem; }
#download-dropdown {
  border-left: 1px solid rgba(1, 1, 1, 0.1);
  border-radius: 0 .3rem .3rem 0;
}

Where download-dropdown is the ID assigned to the ▼ button. Also needed to remove the explicit space character between the <a> and <button> elements there.

Could improve upon the exact border-left formula, of course.

Thoughts?

@malsf21

This comment has been minimized.

Copy link
Author

commented May 1, 2019

Actually, your second suggestion looks great to me - much better than what I had in mind, and a lot more elegant too! I pushed it to the fork, you can take a look.

@malsf21

This comment has been minimized.

Copy link
Author

commented May 3, 2019

Hey, I've added a draft of a plugins view that employs a card-based nav, and loads from a new JSON file I've created called plugins.json. What are your thoughts? I still need to add a few features (the links, which I don't have, sanitization, and limiting the number of cards that are added). Here's the link

@malsf21

This comment has been minimized.

Copy link
Author

commented May 12, 2019

Just a heads up, submitted a PR under #3. Still open to changing anything if needed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.