@phenomlab said in Material View Support foir Stock NodeBB:
@DownPW Did you review the classes as I mentioned?
yes but added the wrong class name, it’s better now.
I’m here at the moment.
JS :
// ------------------------------------------
// 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
$('[component=post]').addClass('material');
$('[component="category/topic"]').addClass('material');
$('[component="categories/category"]').addClass('material');
} else {
console.log('Material Thread view is inactive.');
// Remove the CSS rules here
$$('[component=post]').removeClass('material');
$('[component="category/topic"]').removeClass('material');
$('[component="categories/category"]').removeClass('material');
}
// 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();
});
CSS :
.material-threads-wrapper {
display: flex;
left: 5px !important;
position: relative !important;
}
@media (min-width:460px) {
[component=post].material, [component="category/topic"].material, [component="categories/category"].material {
background: #F7F7F7 !important;
border-radius: 0.375rem;
margin-bottom: 20px;
padding-left: 20px;
border: 1px solid var(--bs-border-color);
}
}
– There are quite a few things left, for example:
- if we scan the recent or unread ones, the rest is not in the background :
- And the block + timeline in the topics :
I would also like to change the button which is not suitable for a vertical display
For the moment, I haven’t found for all of that but I’m looking for.