"Reader Mode" theme component feedback

Site feedback
, ,
41

Thank you Jordan :slight_smile:

Your commit also made it easy to identify the css for controlling this. I played around with both full colour, and fully hidden avatars, and after speaking with a few colleagues we’ve decided to go with fully hidden.

For anyone who wants to make changes to go full colour or fully hidden avatar, just add the following as a theme component:

Fully Hide Avatars

.reader-mode {
    .topic-avatar img,
    .topic-avatar .avatar-flair {
    opacity: 0;
    transition: opacity 0.3s;
    filter: none;
  }
}

Show Avatars full colour

.reader-mode {
    .topic-avatar img,
    .topic-avatar .avatar-flair {
    opacity: 1;
    transition: opacity 0.3s;
    filter: none;
  }
}

Font size is not persistent in settings slider

One Colleague also found that when we click out of the font-size settings, and then go back to it, the slider’s setting is not persistent.

Not a major issue, but worth noting if it hasn’t been seen yet.

p.s. when showing them the font style dropdown, the response was “wow, no comic sans :triumph:” :joy:

1 Like
42

Oh this advanced option is so cool, small one I noticed there when setting my text to an age appropriate size.

image
image1243×722 44.8 KB

2 Likes
43

Ah yes, I need to save the state here on change. Will make this update :+1:

1 Like
44

I have a working branch with a huge update I will release this week.

  • exported all code that changes the look & feel to a @service
  • state is now tracked across topics using that same @service
  • simplified the menu
  • simplified font options

Just a few kinks I need to iron out. But here it is in action.

5 Likes
45

This looks absolutely amazing!

The UI is simple and clean; this is gorgeous. :chefs_kiss:

3 Likes
46

The component has been released :smile:

Thanks for the feedback & suggestions everyone!

Reader Mode :eyeglasses:

5 Likes