Changes to Topics page

[DavidJanku]

Problem: The amount of text describing topic ideas for various disciplines (e.g. psychology or life sciences) seems to be too big, causing that one has to scroll a lot to find the topic they like.

Potential solution: Make the text for each topic collapsable - i.e. after a few rows collapse the text and offer "read more" link or button. This should work for each topic separately - like this -- one idea how to do it is to enable creating multiple "paragraphs" (or bodies of text) in snippets Thesis disciplines, so I can copy each topic in a separate text body and then set the condition that all text bodies in snippets thesis discipline would collapse after X rows of text

[DavidJanku]

Another option would perhaps be to put the list of topic headings at the top of each page and make them links to the full topic profiles - something like "table of contents" in Word.

--> when you click e.g. on "Alternative meat research and development" it moves you down to where the topic is described in full depth (something similar like when you add #disciplines at the end of https://effectivethesis.com/theses/, it moves you directly to list of disciplines

[DavidJanku]

The latter version seems better. Ideally, make it so that we can link to each research direction profile independently.

Also, it would be good to include the option of adding video or picture in each profile like this -->

[patbl]

It looks like the content of that page is stored as HTML in the database. If that's true, there's no easy, reliable way to separate the headers from the rest of the content. Adding this process would be a bit of work, requiring changes to the database schema. I'm not familiar with how the app works, so I'm not really qualified to know whether this is something worth doing.

Here's a quick and dirty, but fragile, solution in JavaScript:

function slugify(text) {
    return text.replace(/[^a-zA-Z]+/g, "-");
}
$(".all-tags p b").each(function(i, el) {
    $(el).attr("id", slugify($(el).html()));
})
let introductoryParagraph;
$(".all-tags p").each(function (i, el) {
    console.log($(el).html())
    if ($(el).html().match(/There are several paths/)) {
        introductoryParagraph = $(el);
        return false;
    }
});
let subsections = $("b");
introductoryParagraph.append("<br />")
introductoryParagraph.append("<ul class='hacky-table-of-contents'></ul>");
let hackyTableOfContents = $(".hacky-table-of-contents");
subsections.each(function (i, subsection) {
    const text = $(subsection).html();
    if (text) {
        const slug = slugify(text);
        hackyTableOfContents.append(`<li><a href="#${slug}">${text}</a></li>`);
    }
})

[hnykda]

Hey.

The whole website is mostly server-side rendered, but the page is surely not "stored in the DB as HTML". Only the raw data are stored in the database, which is dynamically "templated" into the template when the page is requested.

Creating table of contents would be somewhat easily done on the server side by sending it explicitly to the template and editing the template (@veselyvojtech just did something similar elsewhere, here it seems to be even easier), the JS seems too hackish and fragile indeed. Are you @patbl able to edit the server code too or not?

Given you have written it already though, you can try that and deploy on beta to see how well it works.

[patbl]

I can edit the server-side code.

I thought that the descriptions were stored as raw HTML because that's what selected_discipline_description appeared to be here:

https://github.com/ea-czech-republic/efektivnialtruismus.cz/blob/da46572e8dfd8e22151227c804501973d1d240f6/website/theses/models.py#L114

I'll need to look at it a bit more thoroughly!

I don't mind throwing away the JS code I wrote. I threw that together quickly, and suggested it only because I thought there wasn't an easy server-side solution.

[hnykda]

You are actually right @patbl, apologies on my side, I forgot that discipline fields are specified as a streamfield and therefore it will be hard to do much more on the server-side :facepalm: (I have mistaken that with an old version where we had actual "topics" as individual objects).

[hnykda]

I don't have much more ideas than what you proposed on frontend. At least not easily. Let's open a PR, give it a shot on beta env and we'll see?

Another way would be to make the model of the discipline "richer" by having explicit headings etc., but that doesn't seem ideal either and would require some data migrations.

[hnykda]

Hey @patbl - any updates on this? I also realized that the streamfield is indeed a big blob stored in the database, but not as a plain html text, but a structured JSON, so we should be able to get e.g. the tags or headlines out to populate the context.

[patbl]

Sorry, I haven't gotten around to working on it yet. Thanks for the tip re JSON. I think I'll have an hour to work on it tomorrow, and some more time this weekend.

[veselyvojtech]

@DavidJanku I tried to create that kind of outline (basically list of the links for the topics) by reusing the solution that was used for the Resources page.

The discipline snippet contained all the information in the description field. I broke it into 2 parts:

• introduction - the piece of text that should be above the outline
• topics - the rest of the text about the topics. It is not a single field, but list of different kinds of fields.
  • heading_linkable - field based on which the outline is generated. All the heading of the topics should be in this kind of field
  • paragraph - should be used for the rest of text, the description of each topic should be in the field
  • embed, image - as was requested, it should possible to include the media using those fields

The generated outline is displayed under the introduction text.

I rewrote the discipline life sciences on beta to this format, you can take a look.

[DavidJanku]

Thanks @veselyvojtech, it looks good. The only problems I've spotted are:

1. When I try to link specific topics (e.g. https://beta.effectivethesis.org/theses/?discipline=life+sciences#alternative-foods-research) - the page doesn't show me the specific topic and just ends up loading the same as if I just opened the general discipline tag https://beta.effectivethesis.org/theses/?discipline=life+sciences#disciplines
2. it would be good if the embedded videos were set to be 50 % smaller - it is across the whole page and it is too big
3. Would it be possible to get a link to the Footer of the Theses page, starting with text "If you get interested in any of these topics, let us know. We can:...."?
4. Would it be possible to have the option of making H5 headlines in the "paragraph" fields?

[DavidJanku]

Maybe two more changes -

5. I would put the outline at the beginning of the page to a border - similarly as on Resources page
6. It would be great to have some kind of border with a coloured background (came colour as the website) at the end of each Research direction profile - e.g. now you can see that I have made bold two sentences at the end of the first 2 research direction profiles in Life sciences. I wanted to emphasize these sentences, but maybe instead of bolding them (which doesn't look so good) it would be better to put them in the border to emphasise them even more