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

Redesign the landing page, mount public timeline on it #4122

Merged
merged 24 commits into from Jul 11, 2017

Conversation

@Gargron
Copy link
Member

Gargron commented Jul 8, 2017

image
image

TODO:

  • ~~~Public streaming API without access token, or catch-all access token for the frontpage~~~ Public timeline polling
  • Make all <Permalink />s act like normal links when mounted outside router
  • Put actions in disabled state when viewed by anonymous user
  • Adjust pages with "auth" layout to look better over plain background
  • Fix tests

@Gargron Gargron force-pushed the feature-redesign-landing branch 2 times, most recently from 0930e7c to e1c3766 Jul 8, 2017

@Gargron Gargron force-pushed the feature-redesign-landing branch from e1c3766 to df46737 Jul 8, 2017

@Technowix

This comment has been minimized.

Copy link
Contributor

Technowix commented Jul 8, 2017

Add an options to enable/disable/use local instead of federated, for the 'public' timeline?

@Gargron Gargron added ui and removed work in progress labels Jul 9, 2017

humane_approach_title: A more humane approach
not_a_product_body: Mastodon is not a commercial network. No advertising, no data mining, no walled gardens. There is no central authority.
not_a_product_title: You’re a person, not a product
real_conversation_body: With 500 characters at your avail and support for granular content and media warnings, you can express your thoughts in a more coherent manner.

This comment has been minimized.

@beatrix-bitrot

beatrix-bitrot Jul 9, 2017

Contributor

I don't have a suggestion for anything better right now (will think on it), but this particular bit of copy really rubs me the wrong way and I'm gonna guess I'm not the only one

This comment has been minimized.

@Gargron

Gargron Jul 9, 2017

Member

coherent -> comprehensive?

@@ -81,7 +90,7 @@ export default class DropdownMenu extends React.PureComponent {
return (
<Dropdown ref={this.setRef} onShow={this.handleShow} onHide={this.handleHide}>
<DropdownTrigger className='icon-button' style={{ fontSize: `${size}px`, width: `${size}px`, lineHeight: `${size}px` }} aria-label={ariaLabel}>
<i className={`fa fa-fw fa-${icon} dropdown__icon`} aria-hidden />
<i className={`fa fa-fw fa-${icon} dropdown__icon`} aria-hidden />
</DropdownTrigger>

This comment has been minimized.

@eramdam

eramdam Jul 9, 2017

Contributor

I feel like it'd be a good idea to have the className and style props in a var (or use classnames like we do in other componenets) this way we can prevent oversights whenever these have to change in this component.

.learn-more-cta
.container
%h3= t('about.description_headline', domain: site_hostname)
%p= @instance_presenter.site_description.html_safe.presence || t('about.generic_description')

This comment has been minimized.

@ykzts

ykzts Jul 9, 2017

Collaborator

t('about.generic_description', domain: site_hostname) ?

@Gargron

This comment has been minimized.

Copy link
Member

Gargron commented Jul 9, 2017

Responsive design:

screen shot 2017-07-09 at 16 00 03
screen shot 2017-07-09 at 16 00 09
screen shot 2017-07-09 at 16 00 13
screen shot 2017-07-09 at 16 00 17

@Gargron Gargron force-pushed the feature-redesign-landing branch from 2151ec0 to c189236 Jul 9, 2017

@Gargron

This comment has been minimized.

Copy link
Member

Gargron commented Jul 9, 2017

Added clouds:

image

@Gargron Gargron force-pushed the feature-redesign-landing branch from c189236 to 5a1fca8 Jul 9, 2017

@schnittchen

This comment has been minimized.

Copy link

schnittchen commented Jul 9, 2017

Is this opt-in? What are the defaults for this feature?

Thinking about closed instances here, they might not want to expose content after an upgrade.

@Gargron

This comment has been minimized.

Copy link
Member

Gargron commented Jul 9, 2017

Thinking about closed instances here, they might not want to expose content after an upgrade.

Closed in what way? Closed registrations doesn't mean it's a different network. Public posts are still public and people still follow each other etc etc. So it's not closed off in a cultural sense. Closed as in running on an intranet with no access to the internet, well, the page would be visible to people on the intranet only. Whitelist-only like awoo.space? Well, it's not an officially supported way of using Mastodon (I've expressed my thoughts on the harm of whitelist-based approaches to decentralization) and they modify a lot of code anyway, they can modify this as well.

};

static defaultProps = {
autoPlayGif: true,

This comment has been minimized.

@nightpool

nightpool Jul 9, 2017

Collaborator

shouldn't this be inherited from the site-wide settings.yml? or would that be super complicated?

This comment has been minimized.

@Gargron

Gargron Jul 9, 2017

Member

There is no other case when a user-specific setting would be used standalone without a user.

@Gargron

This comment has been minimized.

Copy link
Member

Gargron commented Jul 9, 2017

Is this opt-in? What are the defaults for this feature?

Not opt-in. It displays the full public (=federated) timeline. Reasoning:

  1. Public timelines had public API access for a good number of releases. This made tools like unmung.com/mastoview possible
  2. A preview of the public timeline has been requested since day 1 of Mastodon
  3. Giving a local-only preview may be more useful to experienced users, but I feel it would be underselling the federated nature to new users
  4. Local-only timelines are slower-moving and have less content - again, underselling the network
@nerdfiles

This comment has been minimized.

Copy link

nerdfiles commented Jul 10, 2017

Oh, and about GIF autoplay, people wanting GIF autoplay off everywhere should configure their browser, they can’t expect all websites to implement this on their own.

If the reason users wanted GIF autoplay off was not due to conflict with basic features of the product itself (streaming content that updates automatically), that would make sense — but in this case, the higher order question is the very intentional crafting of the UI and assumptions around UX. Users can and should configure their browsers, at their leisure and convenience. Forcing them to configure their browser because other users' content has not be planned sufficiently within a community creates unmanageable social entropy. The motivation is that users should feel comfortable posting their content without the worry of introducing problems to other users — as content. So distilling the animation is just like normalizing typesettings. The same justifications hold. You wouldn't tell users "we're not going to set our fonts on our product because you can configure that in your browser." It is true you spend some non-negligible amount of time on typesetting, etc., when principally the user can configure it themselves. So why do that, and not offer configurable animated GIFs? If there were a configurable-animated-GIF-lib that you could install through npm or homebrew you'd use that if it were easy to implement, or made implementation easier. What's the principle to determine "when we have the justification to tell users to configure their browser"? — because such a principle is not entertained or authorized consistently. So it makes sense to craft and accessify a product's brand UX, in terms of GIF config, in just the same way they protect their brand by normalizing/typesetting fonts.

@ProgVal

This comment has been minimized.

Copy link
Contributor

ProgVal commented Jul 10, 2017

@Gargron Thanks!

Gargron added some commits Jul 10, 2017


.screenshot-with-signup
.mascot= image_tag asset_pack_path('fluffy-elephant-friend.png')

This comment has been minimized.

@ggtea

ggtea Jul 10, 2017

Do we no longer need a mascot? I still want mascot be there.

@Cassolotl

This comment has been minimized.

Copy link

Cassolotl commented Jul 10, 2017

This new front page thing is looking AWESOME and I love it. I am excited to see it happen across the Mastodon network!

I think that gifs should be paused by default. Re: "people wanting GIF autoplay off everywhere should configure their browser, they can’t expect all websites to implement this on their own" - I am a reasonably techy frequent internet user on a very common OS using a very common browser (Mac, Chrome) and I have yet to find a way to auto-pause gifs in all cases all over the internet. Sometimes an extension will work on some gifs for a little while, but it never lasts (with the exception of x-kit). I have to close tabs as soon as I see animated gifs, pretty much. So yeah, telling us to each deal with the issue on our own machines, this is not an acceptable thing to say to someone! It's like saying, "oh you have a wheelchair? We shouldn't build ramps, you should carry a ramp around with you to lay over stairs when you need to enter a building."

This is an accessibility issue, and it's important, and thankfully it's pretty clear when an image is a paused gif. I do agree that folks should be able to see how awesome a site looks with all the gifs giffing happily away, but accessibility and not causing overload and not causing seizures and not throwing porn gifs in people's faces on porny instances etc. is really much more important! This whole front page shift is going to make such a huge difference to people joining up, I really do think it will help attract more users and such, but like... disabled people are potential users too. We're not an inconvenience, we're people who access sites just like anyone else and honestly seeing people talk like that about us is shocking and demeaning and humiliating.

@Gargron

This comment has been minimized.

Copy link
Member

Gargron commented Jul 10, 2017

GIFs default to non-animated now. But I added play-on-hover like for avatars. That's what Discord does and I am satisfied with that approach.

@Cassolotl

This comment has been minimized.

Copy link

Cassolotl commented Jul 10, 2017

@Gargron That sounds great. :) Thank you!

@Gargron

This comment has been minimized.

Copy link
Member

Gargron commented Jul 11, 2017

Elephant friend is back:

image

@nightpool
Copy link
Collaborator

nightpool left a comment

changes LGTM

@Gargron Gargron merged commit e19eefe into master Jul 11, 2017

3 checks passed

codeclimate All good!
Details
continuous-integration/travis-ci/pr The Travis CI build passed
Details
continuous-integration/travis-ci/push The Travis CI build passed
Details

@Gargron Gargron deleted the feature-redesign-landing branch Jul 11, 2017

@MightyPork

This comment has been minimized.

Copy link
Contributor

MightyPork commented Jul 11, 2017

won't the URL collide with the trunk when it's too long? Otherwise it's 👌

nightpool added a commit that referenced this pull request Jul 11, 2017

humane_approach_body: Learning from failures of other networks, Mastodon aims to make ethical design choices to combat the misuse of social media.
humane_approach_title: A more humane approach
not_a_product_body: Mastodon is not a commercial network. No advertising, no data mining, no walled gardens. There is no central authority.
not_a_product_title: You’re a person, not a product

This comment has been minimized.

@mal0ki

mal0ki Jul 11, 2017

"You are a person, not a product"
We haven't used informal writing in the rest of the text, so it would be bad to start now.

This comment has been minimized.

@clworld

clworld Jul 11, 2017

Collaborator

I think this sentence "You're a person, not a product" is referred to article like this: "You are Facebook's product, not customer" http://www.wired.co.uk/article/doug-rushkoff-hello-etsy

This comment has been minimized.

@Gargron

Gargron Jul 11, 2017

Member

Mal is talking about the difference between "you're" and "you are"

This comment has been minimized.

@nightpool

nightpool Jul 11, 2017

Collaborator

calling "you're" informal feels faintly ridiculous to me—I checked three dictionaries, and none of them mark it as informal. Also, both Facebook and Twitter use it in official communications, and searching for it on the front page of the New York Times returns a bunch of results, and none for "you are".

Additionally, I think the context here is important: this is header copy, so it needs to be terse and readable. "You are a person, not a product" is very awkward to read aloud, takes longer to parse and understand, and generally would trip up a reader instead of draw them in—the opposite of what a good header should do.

This comment has been minimized.

@nightpool

nightpool Jul 11, 2017

Collaborator

from a broader perspective, I think categorizing the tone of our copy as "informal" or "formal" is a false dichotomy. we definitely don't want to start sounding like over-processed corporate speak—we're trying to create a website users can trust, and that requires a careful balance of neutral tone and personable language.

This comment has been minimized.

@mal0ki

mal0ki Jul 14, 2017

Good points, all of it. And yeah, you got a point @nightpool, I'm just a bit broken from my thesis writing. It just felt like it was the only place we hyphenated, and thus it felt out if place. I should have been more clear in my comment. And I should do my full review before commenting (and add the comments together). There's definitely a balance to be had here.

@ProgVal ProgVal referenced this pull request Jul 14, 2017

Open

Language whitelist for the timeline on the landing page #4207

1 of 2 tasks complete

ykzts added a commit to ykzts/mastodon that referenced this pull request Jul 23, 2017

Gargron added a commit that referenced this pull request Jul 23, 2017

YaQ00 added a commit to YaQ00/mastodon that referenced this pull request Sep 5, 2017

Redesign the landing page, mount public timeline on it (tootsuite#4122)
* Redesign the landing page, mount public timeline on it

* Adjust the standalone mounted component to the lacking of router

* Adjust auth layout pages to new design

* Fix tests

* Standalone public timeline polling every 5 seconds

* Remove now obsolete translations

* Add responsive design for new landing page

* Address reviews

* Add floating clouds behind frontpage form

* Use access token from public page when available

* Fix mentions and hashtags links, cursor on status content in standalone mode

* Add footer link to source code

* Fix errors on pages that don't embed the component, use classnames

* Fix tests

* Change anonymous autoPlayGif default to false

* When gif autoplay is disabled, hover to play

* Add option to hide the timeline preview

* Slightly improve alt layout

* Add elephant friend to new frontpage

* Display "back to mastodon" in place of "login" when logged in on frontpage

* Change polling time to 3s

YaQ00 added a commit to YaQ00/mastodon that referenced this pull request Sep 5, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment