Hello @phenomlab
like thread view in topics and in Chat, I got the idea of having the same principle for the material view in the home page, the recent Topics view, unread, inside topics etc…
We could call it Material View
The idea would be to have a button in the right sidebar (User Bar) to activate the Material view or not. The container to use would therefore be [component="sidebar/right]
This should of course not interact with the Thread view mode in the topics nor with the Stock code of nodeBB
To not interfere with the other 2 codes, we could name the CSS class to add .mview or .material for example
This is the desired result if you activate the Material view button :
– Home Page :
a039760d-3601-4afc-a694-47de36fe4a1c-image.png
– Recent, unread, etc…
fc3c540e-455f-4e9a-93bc-d58ec1e2c44d-image.png
– Topic (without thread View)
4c790ca3-9095-4f10-b319-de6c6b4741ff-image.png
Here the CSS code ofr apply this Chnage without Javascript Code, just CSS :
// ------------------------------------------
// Thread CATEGORIES & TOPIC (TEST)
// ------------------------------------------
/* Home Page and Recent */
@media (min-width: 576px) {
[component=post], [component="category/topic"], [component="categories/category"], li[component="chat/message"], [component="chat/recent/room"], div#users-container a {
background: var(--bs-post-category-wrapper);
background: #f7f7f7;
border-radius: var(--bs-post-category-wrapper-radius);
border-radius: 0.375rem;
margin-bottom: var(--bs-post-category-wrapper-margin);
margin-bottom: 20px;
border: 1px solid var(--bs-border-color);
}
}
@media (min-width: 576px){
[component="category/topic"], [component="categories/category"] {
margin-bottom: var(--bs-post-category-topic-margin);
margin-bottom: 20px;
}
}
@media (min-width: 576px) {
ul.topics-list li, li[component="chat/message"], [component="chat/recent/room"], div#users-container a {
padding: 0.75rem 0 !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
}
ul.topics-list li {
border-bottom: 1px solid var(--bs-border-color);
}
@media (min-width: 1600px) {
[component=category] > *, .categories-list > *, [component="groups/container"] > *, .users-container > * {
transition: opacity 150ms linear 100ms, transform 150ms ease-in-out 100ms;
}
}
@media (min-width: 1600px) {
[component=category] > *, .categories-list > *, [component="groups/container"] > *, .users-container > * {
visibility: visible;
}
}
@media (min-width: 576px) {
[component="categories/category"] {
padding: 20px;
}
}
/* Topics & Posts */
.page-topic .topic .posts.timeline .timeline-event, .page-topic .topic .posts.timeline > [component="post/placeholder"], .page-topic .topic .posts.timeline > [component=post] {
border-left: none;
/*box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;*/
transition: margin-left 0.3s ease, margin-right 0.3s ease;
border: 1px solid var(--bs-border-color);
background: #F7F7F7;
}
.post-footer.border-bottom.pb-2 {
border-bottom: 0rem !important;
}
li.necro-post.text-muted.timeline-event.d-flex.gap-2.pt-4 {
box-shadow: none !important;
border-radius: 0rem !important;
border: none;
background: none !important;
}
.page-topic .topic .posts.timeline .timeline-event.highlight, .page-topic .topic .posts.timeline > [component="post/placeholder"].highlight, .page-topic .topic .posts.timeline > [component=post].highlight {
border-radius: 0.375rem;
}
@media (min-width: 1200px) {
ul[component=topic]:before {
margin-left: 50px;
}
}
@media (min-width: 1200px) {
.posts-container:before {
margin-left: 43px;
}
ul[component=topic]:after {
margin-left: 43px;
}
}
@media (min-width: 576px) {
.page-topic .topic .posts.timeline [component="topic/event"].timeline-event .timeline-badge, .page-topic .topic .posts.timeline [component="topic/necro-post"].timeline-event .timeline-badge {
margin-left: 1rem;
}
}
a.post-index.text-muted.d-none.d-md-inline {
margin-right: 5px;
}
.page-topic .topic .posts.timeline .timeline-event:last-child, .page-topic .topic .posts.timeline>[component="post/placeholder"]:last-child, .page-topic .topic .posts.timeline>[component=post]:last-child {
padding-bottom: 0rem;
}
– A helping hand developing this would be super cool. Unless you don’t care at all and you don’t like the idea.
– For now I have a beginning, the following code inspired by your previous codes but I don’t know if I’m on the right track
// ------------------------------------------
// material View Mode
// ------------------------------------------
function material() {
$(document).ready(function () {
// Check if the screen width is 460px or more
if ($(window).width() >= 460) {
// Check if the custom thread view button already exists
if ($('#materialThreadViewButton').length === 0) {
// Create the button for custom thread view mode with custom IDs
var threadViewButton = $('<div class="material-threads-wrapper"><form class="form"><div class="form-check form-switch material-threads-wrapper"> \
<input class="form-check-input" id="materialThreadViewButton" type="checkbox" data-field="materialThreadView"> \
<label class=" d-none d-md-inline fw-semibold" for="materialThreadViewButton"></label> \
</div></form></div>');
// Append the button to the right sidebar
$('[component="sidebar/right"]').append(threadViewButton);
}
// Check if there's a stored state for the checkbox and update it
var storedState = localStorage.getItem('materialThreadViewState');
if (storedState === 'true') {
$('#materialThreadViewButton').prop('checked', true);
}
// Toggle the class 'material' on or off when the checkbox changes state
$('#materialThreadViewButton').on('change', function () {
var isChecked = $(this).is(':checked');
var theTooltip = isChecked ? "Material Thread View Off" : "Material Thread View On"; // Update tooltip message
// Toggle
CSS rules when the button is turned on or off
if (isChecked) {
console.log('Material Thread view is active.');
// Apply your
CSS rules here
} else {
console.log('Material Thread view is inactive.');
// Remove the
CSS rules here
}
// Store the checkbox state in localStorage
localStorage.setItem('materialThreadViewState', isChecked);
// Update the tooltip title
$(this).attr('data-original-title', theTooltip).tooltip('dispose').tooltip({
placement: 'bottom',
title: theTooltip,
trigger: 'hover'
});
});
// Check for changes in the checkbox state when the page loads
$('#materialThreadViewButton').trigger('change');
}
});
}
// Attach the material function to relevant events
$(window).on('action:ajaxify.end', function (data) {
material();
});
$(window).on('action:posts.edited', function (data) {
material();
});
$(window).on('action:posts.loaded', function (data) {
material();
});
– Here the result :
07d72e1d-8ca3-46f8-92ce-5beeeefc8c70-image.png
