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

News panel #98

Merged
merged 11 commits into from
Jun 19, 2019
Merged

News panel #98

merged 11 commits into from
Jun 19, 2019

Conversation

emilmelnikov
Copy link
Member

@emilmelnikov emilmelnikov commented Jun 13, 2019

Now we have a "News" section with the news posts, and also a sidebar on the front page that shows the latest piece of news. You can add more news by creating a Markdown file YYYY-MM-DD-YOUR-TITLE-HERE.md in the directory news/_posts. The news/_drafts directory can be used to store unpublished content (without the YYYY-MM-DD part). Consult the Jekyll documentation for more details.

I have also changed some visuals in the front page (call-to-action blocks and the intro text). Please let me know if something needs to be changed and/or reverted back.

Close #97

Replace layout-dependent headers with a single header implementation.
Title of that header can still be overriden on a layout basis
with the `layout_header` variable.

Homepage-specific header was removed to make room for the upcoming
news sidebar.
The news section is now located in the right column, front title,
carousel and call-to-action blocks are located in nested columns.
* Use jumbotron for the main text that makes it stand out a little more
* Use consistent iconset for "Get in Touch" CTA block
* Wrap CTA blocks into a panel for visual grouping
* Move Netlify badge to footer
Now CTA block titles are single-word verbs.
@emilmelnikov
Copy link
Member Author

A follow-up suggestion: we could use the remaining space on the right to embed a twitter feed for #ilastik hashtag or something similar.

Copy link
Contributor

@k-dominik k-dominik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Heyo,

this was fast. Also very cool, I tried different screen sizes and it behaves very nicely. Also, very cool how easy it is to add new news items now.

this:

You can add more news by creating a Markdown file YYYY-MM-DD-YOUR-TITLE-HERE.md in the directory news/_posts. The news/_drafts directory can be used to store unpublished content (without the YYYY-MM-DD part). Consult the Jekyll documentation for more details.

could probably be added to our README.

A follow-up suggestion: we could use the remaining space on the right to embed a twitter feed for #ilastik hashtag or something similar.

yes, right now it looks empty-ish.

In the current state, the ilastik description is in a grey background box. I cannot say right now if it is the design change, or that all the other elements have a grey border and white background instead - maybe I just have to get used to it, but right now it looks strange. I mean I get that these sentences are pretty special, since they describe what ilastik is in the first place. I wonder what @akreshuk or the rest of the team (@Tomaz-Vieira @m-novikov) think...

@emilmelnikov
Copy link
Member Author

In the current state, the ilastik description is in a grey background box. I cannot say right now if it is the design change, or that all the other elements have a grey border and white background instead - maybe I just have to get used to it, but right now it looks strange. I mean I get that these sentences are pretty special, since they describe what ilastik is in the first place. I wonder what @akreshuk or the rest of the team (@Tomaz-Vieira @m-novikov) think...

This is a kind of a lead paragraph that is supposed to catch readers' attention.

@k-dominik
Copy link
Contributor

k-dominik commented Jun 13, 2019

In the current state, the ilastik description is in a grey background box. I cannot say right now if it is the design change, or that all the other elements have a grey border and white background instead - maybe I just have to get used to it, but right now it looks strange. I mean I get that these sentences are pretty special, since they describe what ilastik is in the first place. I wonder what @akreshuk or the rest of the team (@Tomaz-Vieira @m-novikov) think...

This is a kind of a lead paragraph that is supposed to catch readers' attention.

it does.

Maybe it's the size difference of the news panel and the lead paragraph box, that makes it look a little odd (heights 411 vs 413px for me)?

@emilmelnikov
Copy link
Member Author

emilmelnikov commented Jun 13, 2019

Also, I feel that the description on the front page is somewhat lengthy and maybe more suitable for the "About" section.

What if we replace the lead text to something like this:

With ilastik you can leverage machine learning algorithms to easily segment, classify, track and count your cells or other experimental data.
Most operations are interactive, even on large datasets, so you receive immediate feedback.
No expertise in machine learning is needed.
Learn more... [link to the expanded version].

We can also replace "machine learning" with "AI", but this is probably too much marketing.
On a serious note, the intention is to simplify the description as much as possible for new users, but maybe this is not necessary.

@k-dominik
Copy link
Contributor

With ilastik you can leverage machine learning algorithms to easily segment, classify, track and count your cells or other experimental data.
Most operations are interactive, even on large datasets, so you receive immediate feedback.
No expertise in machine learning is needed.
Learn more... [link to the expanded version].

I really like that. No user knows what lazy means in that context anyway and phrasing it "Most operations are interactive, even on large datasets, so you receive immediate feedback" describes what the users actually experience.
Personally I would not want to use the term "AI" with ilastik atm.

@akreshuk what do you think?

@akreshuk
Copy link
Member

Really like the new look and description, thanks @emilmelnikov ! No AI, keep machine learning. I think the twitter feed would be good to have on the right, below the news. I think the central position of the main text is setting it apart sufficiently and we don't need the gray background in the box, we can keep it white rectangle with a gray boundary. Or at least let's try it and see how bad that looks.

@emilmelnikov
Copy link
Member Author

emilmelnikov commented Jun 18, 2019

I've inserted the timeline for @ilastik_team. The main text is reverted, but I've made the font size slightly larger. As always, waiting for the feedback.

N.B. The suggestion to replace "machine learning" with "AI" was not a serious one :)

@k-dominik
Copy link
Contributor

that looks very cool! Sorry for not getting the ai joke.

Is there a way to make the space between the left items more "floaty" such that both columns end at the same height?
floaty png

also, while we are at it, the follow us at twitter thingy can potentially go now, or could be relocated to the twitter feed?

@emilmelnikov
Copy link
Member Author

emilmelnikov commented Jun 18, 2019

Is there a way to make the space between the left items more "floaty" such that both columns end at the same height?

It is not easily possible because these elements are located in different columns, and also the timeline is actually an iframe that gets loaded by Twitter JS. You can only specify height statically through a data attribute. Maybe this is achievable with some magic (e.g. attach an event listener and change some properties when the timeline iframe is loaded), but it seems like a bad idea.

Alternatively, we can decrease the iframe's height up to some smaller value that looks batter. This won't align the blocks, but should be better anyway.

@akreshuk
Copy link
Member

Looking great, good to merge from my side. @k-dominik ?

@k-dominik
Copy link
Contributor

Looking great, good to merge from my side. @k-dominik ?

oh absolutely - I really like the refurbished thing, having looked at it a couple of times.
I have already written a comment along these lines but it hasn't made it here...

@k-dominik k-dominik self-requested a review June 19, 2019 09:38
Copy link
Contributor

@k-dominik k-dominik left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@emilmelnikov
Copy link
Member Author

Twitter timeline height has been changed to 500, and now looks good.

image

@emilmelnikov emilmelnikov merged commit 81e7fcd into ilastik:master Jun 19, 2019
@emilmelnikov emilmelnikov deleted the news-panel branch June 19, 2019 09:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Move news section to the side
3 participants