"Reader Mode" theme component feedback

site feedback
,
1

I recently installed a theme component here on Meta that introduces a “reader mode” when viewing a topic.

The button to toggle this feature is located at the top of the topic timeline controls:

image
image1920×923 128 KB

Clicking it will put the topic into “reading mode”, covering most of the UI with a slightly opaque cover in order to minimize distraction.

Some other things that happen are a filter applied to all avatars and images, turning them into a greyscale image.

Here is a screen recording of it in use.

The component is available on the following themes installed here on meta:

  • Air Theme
  • Default
  • Default (Full Width)
  • Fully
  • Meta Branded
  • Redditish
  • Sam’s Simple Theme

This is still a WIP and would appreciate any bug reports or feedback be posted here :smile:

21 Likes
2

Very cool!

One thing I noticed is that some of the styling changes cause the layout to ‘jump’ when I click the button. I guess some elements are being display: none;'d? Or some font sizes are changing?

Would it be feasible to make the button purely ‘grey out’ (or visibility: hidden;) unnecessary elements, without causing any layout shift?

4 Likes
3

Yes, this was a pain I encountered.

Ideally, the sidebar would animate closed, as it does when you click the sidebar toggle normally.

Since my component closes the sidebar, but doesnt animate it, it turns out to be a jolt.

I could either:

  • animate the sidebar closed
    • im unsure how to do this, as I think its done via JS + Css?
  • dont close sidebar
1 Like
4

How about visibility: hidden;? Or opacity: 0;? So it’s still there & included in the layout, but invisible? I guess we’d need something to prevent clicks/focus on it as well? Or maybe we make it visible again on hover/focus? :face_with_monocle:

One relatively safe way would be to mimic the user interaction:

if(document.body.classList.contains("has-sidebar-page")){ // Sidebar is visible
  document.querySelector(".btn-sidebar-toggle").click()
}
1 Like
5

Are you speaking of sidebar?

If so, I am actually toggling it closed with my component, so it’s using the same core way like this:

  @action
  toggleReaderMode() {
    if (this.sidebarIsOpen && !this.isActive) {
      getOwner(this).lookup("controller:application").set("showSidebar", false);
      this.readerModeActive = !this.readerModeActive;
    } else {
      getOwner(this).lookup("controller:application").set("showSidebar", true);
      this.readerModeActive = false;
    }
  }

There is nothing on the page that I am actually removing other than toggling this sidebar closed.

2 Likes
6

Right, but that causes a layout shift. So I’m thinking we could leave it open, but make it invisible?

3 Likes
7

Ok yes, sorry for the confusion. I am understanding you now. Since the reader mode isnt known to be a toggle for sidebar, it could be confusing that it’s toggled, causing the shift when you didnt want that to happen.

I guess I assumed if the sidebar toggle causes a shift, then the reader mode doing the same thing wouldnt matter.

I can try not toggling the sidebar and posting a video here to show you.

2 Likes
8

When the sidebar is closed before you use the reader mode button, the sidebar opens, and afterwards, the button does not do anything.

5 Likes
9

I was wondering what the heck that new icon was. Now I know. Thanks.

But.

DiscourseHub, iPad and theme default: all it does is expanding the sidebar.

Edit.

Ok, I have to first open the sidebar. After that the magic happends. Except… I don’t use the sidebar here :smirk:

2 Likes
10

Looks great!

Not sure how difficult it would be, but I was thinking it would be nice if the user could hit ESC to exit reader mode. Since the button is considered part of the timeline, if you scroll to the very bottom of the topic, the button can go off screen.

image
image1877×933 49.3 KB

5 Likes
11

It’s a very cool feature. Excellent job, Jordan! :+1:

As David said, I’m wondering if it’s possible not to shift the content.
Also, is there a particular reason for reducing the original width? I might not be aware of some limitations, though.

What I mean is somewhat like this:

chrome_oW7GzSDCWw

3 Likes
12

Functionality, all this appears to do is hide the timeline and notification bar, since the sidebar is already collapsible. I don’t really see the experience being changed or improved sufficiently to have another button in every topic.

It would make more sense if it changed the reading experience in some meaningful way like making it full width in Reader Mode. As it is now, I would probably never use this feature so ironically all it’s doing for me is adding more visual noise to the timeline.

2 Likes
13

I have some longer term goals to add in options for font, text size, width of content, etc. But for now, this is just a small experiment and a WIP.

3 Likes
14

The latest changes to limit movement & have a better transition have been merged into this component. Thanks for the feedback so far :smile:

4 Likes
15

I like this a lot!

Hiding the topic-map creates a big gap between the OP and the first reply. I wonder what a greyscaled topic map would look like.

image

I can reply to the OP, or reply directly to posts in Reader Mode. Maybe it should also be possible to reply from the bottom of the topic?

image

1 Like
16

Yeah, maybe I can make it a bit transparent as well. I tried hiding it with a smooth transition, but because of the way we render items in our list, sometimes this isnt visible, and trying to hide it becomes a pain.

It’s the same with all of the small post notices & time gaps. The only way I could think is to use an element observer API, but even then, the movement is slightly unpredictable and I was noticing jitteriness randomly happening.

This makes sense to me :+1:

1 Like
17

Keyboard shortcut (CTRL-something) to toggle would be awesome here (and we can teach about it when you hover on the button)

Not a fan of black and whiting the images, I feel like I am losing info.

I am pro though removing a lot of chrome like “like counts”, reply button, maybe even avatars.

6 Likes
18

Nice improvement, Jordan! It’s a much better experience not to see any movement shift now and some animation to smooth the transition. :+1:

I agree with Sam’s suggestions; if we hide non-essential information, having the color back would make a good compromise. That could be an option, though. :thinking:

3 Likes
19

Yes, yes yes!!!

1 Like
20

Once you’re in reader mode, you have to click to get to another page, and then, if you want reader mode, you have to click again to turn it back on. Maybe make the other nav links a tiny bit less hidden and let them work and leave it on when we get to the next topic.

Another idea, turn it off automatically when you get to the end of the topic.

Or, automatically navigate to the next topic in the last topic-list you visited!

1 Like