Improve visibility of comment threads in Frio theme

[eengnr]

Is the feature request related to a problem? Please describe.

Not a big problem, but especially on mobile I think it's hard to see which comment relates to which one, especially if there are several nested comments under a post. The color of the comment (light grey) and the background (white) are hard to distinguish.

Describe the feature you'd like

Optimize the CSS for Frio like this:

• Add the thread_level_2 to the margin section, i.e. also move the first comments to the right a little bit
• Add a colored border on the left of a comment to guide the eyes ($link_color or any other slightly darker color than the light grey of the comment background)

/* The wall-item thread levels */
.wall-item-container.thread_level_2,
.wall-item-container.thread_level_3,
.wall-item-container.thread_level_4,
.wall-item-container.thread_level_5,
.wall-item-container.thread_level_6,
.wall-item-container.thread_level_7,
.wall-item-container.thread_level_8,
.wall-item-container.thread_level_9 {
	margin-left: 15px;
}


	.wall-item-container.thread_level_2,
	.wall-item-container.thread_level_3,
	.wall-item-container.thread_level_4,
	.wall-item-container.thread_level_5,
	.wall-item-container.thread_level_6,
	.wall-item-container.thread_level_7,
	.wall-item-container.thread_level_8,
	.wall-item-container.thread_level_9 {
		margin-left: 5px;
	}
	
.comment .media {
	position: relative !important;
	margin-top: 0;
	border-left: 2px solid $link_color;
}

[MrPetovan]

Can you please show before/after screenshots?

[eengnr]

Yes, it would look like this (scaled to 80% in Firefox to show more comments):
Before:

After:

[MrPetovan]

Thanks, what about the mobile view?

[eengnr]

Mobile view (color 'silver' which also matches quite nice):

I wrote a small userscript which does the adaption on the fly:

// ==UserScript==
// @name        Friendica comment thread readability
// @namespace   Violentmonkey Scripts
// @match       https://loma.ml/*
// @match       https://friendica.mrpetovan.com/*
// @match       https://pirati.ca/*
// @grant       none
// @version     1.0
// @author      eengnr
// ==/UserScript==

(function () {
  const markCommentThread = function () {
    const thread_level_2 = document.querySelectorAll('div.wall-item-container.thread_level_2');
    thread_level_2.forEach((comment) => {
      const move = window.innerWidth > 600 ? '15px' : '5px';
      comment.style.marginLeft = move;
      const commentmedia = comment.querySelectorAll('div.media');
      commentmedia.forEach((comment) => {
        comment.style.borderLeft = '2px solid silver';
      });
    });
  };

  const observer = new MutationObserver(markCommentThread);
  const config = {
    attributes: true,
    childList: true,
    subtree: true,
  };
  observer.observe(document.body, config);
})();

You can load it with Violentmonkey, Tampermonkey or similar and have a look :)

[loma-one]

For my own themes, I have solved this by giving the thread levels different colours. The colours should remain rather discreet in the background.

.thread_level_1 {
	position: relative !important;
	margin-top: 0;
	border-left: 3px solid #5151511a;
}

.thread_level_2 {
	position: relative !important;
	margin-top: 0;
	border-left: 3px solid #d2af7f6b;
}

.thread_level_3 {
	position: relative !important;
	margin-top: 0;
	border-left: 3px solid #ddd;
}

.thread_level_4 {
	position: relative !important;
	margin-top: 0;
	border-left: 3px solid #b8a17e;
}

.thread_level_5 {
	position: relative !important;
	margin-top: 0;
	border-left: 3px solid #8fafb8;
}