JS/CSS Fix for Story Map rendering

[zamu]

A lot of complaints I've looked over in the Site Feedback have been due to the way that story map chapters just run off the screen towards the right.

Playing around with a bit of CSS and JS, I found two small fixes that seem to alleviate this issue entirely.

Essentially, the 'story-map-chapter' CSS Class has two attributes that cause the off screen run off:

1. margin-left being defined as multiples of 30px, and
2. min-width being defined as 1000px.

Changing these values we can get much better user experience.

Since the story map (and most of the site) is rendered client side but that code is unfortunately minified, I had to resort to JS to change the values as needed.

Array.from(document.querySelectorAll('.story-map-chapter')).map(x=>{
  if (x.dataset.adjusted_indent) {
    return
  }
  margin = x.style['margin-left'];
  indent = parseInt(margin.replace('px','')) / 30
  margin = `${Math.min(indent, document.body.clientWidth - 300 - Math.min(indent, 200 ))}px`;
  x.style['margin-left'] = margin;
  x.style['min-width'] = '500px';
  x.dataset.adjusted_indent = true;
})

This essentially indents 1px per chapter and changes the min-width down to 500 pixels. Unfortunately, since the collapse and un-collapse features utilize the min-width attribute to determine what to collapse, we can't offload the math onto the browser's CSS engine, but instead have to use JS to calculate the value to convert it to a string to make it work.

Additionally, since this is JS based, you need to store that it's been modified already somewhere, hence the guard at the top.

Overall, I've tested this against The Gamer, Chyoa Edition and Sexual Privilege. The Gamer has one of the deepest branches (Funatic's is currently over 800 chapters) and Sexual Privilege is fairly wide but relatively shallow. It works.

Here is an example before:

and after:

 

[Friedman]

That seems to be a great solution

 

[blank97]

Well, what you are doing might be considered a solution for stories that has a lot of depth but not many branches.

For any story with many branches the fact that chapters with same depth in story, line up and next chapter has a considerable shift makes it easier to navigate.(in previous format)

With your format the shift is almost negligible so the story map looks more like a list.

I don't know how will it it work in terms of coding but a better way would be to check for the longest (most word) title of chapter and set the width of all chapter lines to that and keep the shift of previous format. This way you will utilize the space between chapter title and view count. There is no need to fill up the whole width of screen.

I think reducing the wastage of space in each chapter line will make the story map easier to navigate.

Another feature to add that will make story map even better would be to add more options of collapse and expand. Like collapsing all and expand all but for each chapter.
You could have - and -*. Pressing - will collapse following chapter. Pressing -* will collapse all following chapter. same for + and +*

 

[zamu]

@blank97
The issue is that collapse-uncollapse explicit uses the indentation and hides content based on that. It requires that indentation be consistent for all chapters displayed for it to work properly. I actually ran through a few versions and even tested your idea of fitting based on chapter title, but it would break collapse-uncollapse functionality since the chapters would eventually hit the upper limit and cause weird rendering or stuff going off the screen. Even the current implementation it can hit that upper limit which is ~1450 deep branch on a 1080p display with the browser in fullscreen, but at that point a branch with more than 1450 chapters is going to break other stuff.

What can be done is scale the indentation based on the deepest branch in the story. So The Gamer with over 800 chapter deep branch scales down to a 1 pixel indentation, but more shallow stories might stay at a 30 pixel indentation. That requires a lot more testing though and I'm not getting paid for this (lol).

@Friedman
Glad to be of service!

 

[blank97]

That requires a lot more testing though and I'm not getting paid for this (lol).

Well most people are here just for fun. Some get paid to write stories and probably moderators are getting paid too but most users are here on this site because of their love for good erotic content.

Thank you for trying my suggestion as I said I don't know that much coding so I didn't know what will work

 

[gene.sis]

probably moderators are getting paid too

Huh? Where's my check?


Well, CHYOA is mainly funded by the community (Patreon) and that just covers the site's expenses.

 

[blank97]

Huh? Where's my check?

Oh my bad, for assuming moderaters have salary. I thought since moderaters check all story and solve many problems, they must be getting paid. If you and other moderators are just getting patreon money then it is a really big deal that you(all moderator) answer queries on forum, check all stories that are to be published and really all the help.

Hats off to all moderators.

 

[gene.sis]

If you and other moderators are just getting patreon money then it is a really big deal that you(all moderator) answer queries on forum, check all stories that are to be published and really all the help.

The revenue is only used to pay for the expenses (server, traffic, and so on)