Skip to content

Switch between list and card view function

Moved Let's Build It
  • I decided that Hostrisk, my infosec news site needed a facelift, and given the nature of the information being presented, it didn’t lean itself very well to a forum in my view… So, I changed it 🙂

    Because of the CSS changes, the layout only changes at 1200px so if you’re viewing the site itself on a mobile, you won’t notice any difference. However, the desktop view now looks like this

    35320c81-ab45-4bb1-84d8-e9c3a6e31eee-image.png

    This is all CSS with no js whatsoever.

    NOTE: For the latest stable release, see https://sudonix.org/post/8433

    Enjoy

  • This new type of layout had me curious, so I’ve enabled it here (very very beta - there are bugs). On the topic list header, you’ll see a toggle switch that flips between list and card view

    image.png

    Note that the session state is not saved, and there are some formatting issues, but it’s here for you to try.

    EDIT: Toggle switch is shown below

    6c604ab2-5aa1-4d61-a680-29b34aff0386-image.png

    EDIT2: The toggle issue is resolved, as is the session state.

    6d2a3293-6a12-4a1f-99d1-a0abb0bde669-image.png

  • A picture says a thousand words, so here’s a short video so you can see how it works.

  • I love this @phenomlab
    Very very good job 👍

    will you share the code when it is mature?

  • @DownPW of course. The real issue here is that it’ll need some customising because it fits with the css I’m using here.

    I’ll explain more once I have it stable and ready for release.

  • Just see this little bug here with tags/stats posts :

    image.png

  • @DownPW yes, I’m aware of this. It’s not a bug as such, but due to screen estate. Because the original css uses 100% width and the new layout uses 32%, it severely restricts the available space.

    One way of alleviating this, which I am in the process of reviewing is to limit the number of tags shown. I considered using either nth-child or type-of-child in css to do this, although this doesn’t appear to work as intended so the only other route is js.

    Still undecided currently, but another option is to hide the tags altogether. However, this is counter productive in my view as filtering based on tags might look odd if the specific tag you’ve searched for doesn’t display, but instead, you see another one and think the search isn’t working properly - obviously, it is, but if that specific tag is hidden, it’s easy to understand the confusion.

  • The only feasible way to do this is to increase the height and max-height of the card itself by 20px. This has been applied to the view, and effective now.

  • @phenomlab said in Switch between list and card view function:

    The only feasible way to do this is to increase the height and max-height of the card itself by 20px. This has been applied to the view, and effective now.

    great 🙂

    I also wonder about the selection of topics if we use the subject tools on the administrator side, does it work? (You know, the little selection check mark)

    73aead84-3a8a-45c7-b1eb-038a5fbc466f-image.png

  • @DownPW Yes, that still works. A small cosmetic issue with the selection box placement which I need to fix, but…

    e7868bec-0569-4955-a1a9-b626373875a9-image.png

    Moved the positioning of the checkbox to the bottom left. Why not the top right? Because that means we have to truncate the header which makes it look odd - it’s width overlaps the checkbox, and even z-index has no marked effect with position.

    46110686-3561-49b2-818c-4dbb7080e6f0-image.png

  • Base code release below. WARNING - this code is stable, but still in beta meaning that there may be bugs. I think I’ve resolved most of them, so report any you find in this thread please.

    https://github.com/phenomlab/harmony-card-view

    Instructions

    • Copy all of the code in functions.js and append this to Admin->Appearance->Custom Content->Custom Javascript and ensure you change the var href = "/path/to/card.css"; variable located within the functions.js file so that it points to the actual location where you stored the file - for example: var href = "/assets/card.css";
    • Ensure Custom JS is enabled, and save
    • Copy the card.css file to your hosting ideally in the public path inside your NodeBB file structure.
    • Reload the site and test

    You should see the toggle button appear in the card list view

    783b1088-3338-4928-8983-2497c73096f6-image.png

    IMPORTANT: Your CSS layout is likely to be vastly different to that of Sudonix (there are some exceptions where sites that I have prior approved have the same layout - you know who you are), and this means you should first deploy this into a test environment and modify the layout so that it fits your site.

    I will probably provide a “raw” version of the css that is based on stock Harmony with no mods in due course depending on the popularity of this new function.

  • I will probably have small modifications to make to adapt to my CSS and my Material View function but I will test this on my test environment very very quickly.

    Thanks Mark. In any case, I think this idea is great.

  • @DownPW said in Switch between list and card view function:

    test this on my test environment very very quickly

    Let me know how you get on 🙂

  • Found a small bug already which is CSS related

    image.png

    I’ll fix this tomorrow and provide an update 🙂

  • So I tested and here are my remarks:

    • Pay attention to the name of the JSS file in the Javascript code. I put underscores and the CSS was not taken into account.

    • The topic selection check box is difficult to check: most of the time I enter the topic rather than checking the box :

    check.gif

    • I still have the problem displaying tags :

    aaaaa682-c849-46fe-9156-9841af9a6c3b-image.png

    • For my part, in French, the boxes are a little tight here, I’ll see what I can do :

    981fc293-ef24-4f5d-9585-e3d357647889-image.png

    • If you have a pinned topic with the pinned label, the line is visible behind the label

    35bc08d5-990a-4628-9466-b732ae49ecd4-image.png

    –> For this, maybe add a background color to this loke this ? :

    [component="topic/pinned"].border-gray-300 {
        background: var(--bs-body-navbar) !important;
    }
    
    • Why not take the same width as the toolbar here ? :

    dc851c4c-ab54-47bd-ae50-0cc3f5383b3b-image.png

    Many thanks again Mark

  • @DownPW All good comments, thanks. Don’t forget that your CSS is also very customized over the stock that comes with NodeBB, but I’m quite surprised by this

    @DownPW said in Switch between list and card view function:

    The topic selection check box is difficult to check: most of the time I enter the topic rather than checking the box

    Perhaps I missed some final modifications here, but I cannot reproduce that - will need to check

    @DownPW said in Switch between list and card view function:

    I still have the problem displaying tags :

    Again, surprised by that as it was addressed in the final code. Will need to check

    @DownPW said in Switch between list and card view function:

    If you have a pinned topic with the pinned label, the line is visible behind the label

    Yes, I’m aware of that one - the CSS you propose would work, but not for those without custom CSS

    @DownPW said in Switch between list and card view function:

    Why not take the same width as the toolbar here ?

    Because you cannot fit 32% into 100% even with simple math 🙂 It needs either padding or margin - both of which will be negative, but I’ve done it here

    fb23ef77-84e2-4fc0-af92-5011eaf10e06-image.png

    I’m going to release a vanilla harmony CSS file (working on it now) shortly. This will be the starting point that will fit most users, but obvously, the more customized CSS you have, the more work it needs.

  • no problem,

    I noticed that as soon as I make changes to the CSS file, I have to empty the cache and close the browser so that the changes are taken into account even in incognito mode.

  • @DownPW Yes, I have a fix for that also going forward. Will supply that once I’m done with testing.

  • @phenomlab said in Switch between list and card view function:

    @DownPW Yes, I have a fix for that also going forward. Will supply that once I’m done with testing.

    No worries my friend :), I’m just making the comments to make this code concrete because I find it excellent.

    Now that I have seen that I have to close the browser each time I make a change, this seems OK to me except for the last 2 points mentioned which you are currently working on.

    @phenomlab said in Switch between list and card view function:

    Because you cannot fit 32% into 100% even with simple math It needs either padding or margin - both of which will be negative, but I’ve done it here

  • @DownPW thanks. I have an almost stable vanilla harmony version I’ll be posting this weekend.


  • 5 Votes
    3 Posts
    260 Views

    Very good like always 😉

  • 15 Votes
    51 Posts
    3k Views

    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS

  • 14 Votes
    14 Posts
    663 Views

    Just circling back here as I’ve been helping @cagatay this morning on his site, and noticed that if you use a mixture of fa-brands and fa-solid then the code supplied above may produce some odd looking results.

    If this is the case, replace the function with this

    $(document).ready(function() { $.getJSON('/api/categories', function(data, status) { $.each(data.categories, function(key, value) { var iconClass = 'fa'; // Default to 'fa' if the icon type is not recognized // Check if the icon is FontAwesome Unicode if (this.icon.startsWith('&#x') || this.icon.startsWith('&#xf')) { iconClass = 'fa'; } else if (this.icon.startsWith('fab')) { iconClass = 'fab'; } var categorylist = $(" \ <li class='dropdown-item tree-root'><span class='category-menu'><i class='" + iconClass + " " + this.icon + "'></i><a style='display: inherit;' class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></span></li> \ <ul class='tree-branch' style='list-style: none;'>" + this.children.map(c => { var childIconClass = 'fa'; // Default to 'fa' for child icons // Check if the child icon is FontAwesome Unicode if (c.icon.startsWith('&#x') || c.icon.startsWith('&#xf')) { childIconClass = 'fas'; } else if (c.icon.startsWith('fab')) { childIconClass = 'fab'; } return `<li class='dropdown-item tree-node'><span class='category-menu-tree-node'><i class='${childIconClass} ${c.icon}'></i><a class='dropdown-item rounded-1' style='display: inherit;' href='/category/${c.slug}'>${c.name}</a></span></li>`; }).join(" ") + "</ul>" ); if ($(window).width() < 767) { $(".bottombar #thecategories").append(categorylist); } else { $(".sidebar-left #thecategories").append(categorylist); } }); }); });

    In fact, if you want to replace it anyway to make your experience “future proof”, you can use this code now 🙂

  • 2 Votes
    1 Posts
    174 Views
    No one has replied
  • 0 Votes
    7 Posts
    730 Views

    @downpw ooops. Forgot that. Thanks for adding.

  • [NODEBB] Welcome Message

    Solved Customisation
    18
    13 Votes
    18 Posts
    2k Views

    For anyone reviewing this post, there’s an updated version here that also includes an sunrise / sun / moon icon depending on the time of day

    https://sudonix.com/topic/233/nodebb-welcome-message-with-logo-footer-change/3?_=1645445273209

  • Avatar on Topic Header

    Solved Customisation
    9
    0 Votes
    9 Posts
    528 Views

    @jac said in Avatar on Topic Header:

    @downpw said in Avatar on Topic Header:

    Great Plugin 🙂

    I make it a bit cleaner via this CSS code:

    /*------------------------------------------------------------------*/ /*---------------- nodebb-plugin-browsing-users -----------------*/ /*------------------------------------------------------------------*/ /*Space between the avatar and the RSS icon */ .topic [component="topic/browsing-users"] { margin-bottom: -5px; padding-left: 10px; } /*Space between avatars*/ .pull-left { float: left!important; padding-right: 5px; }

    Do you have a screenshot of how this looks with the CSS change?

    Just added this change, thanks @DownPW 🙂

  • 24 Votes
    112 Posts
    13k Views

    @DownPW as discussed in PM

    Seems to have been solved with the new JS code that you added allowing the version CSS file change!!

    Cache problem therefore with the JS of the Switcher theme

    Based on this, I will close this thread and reference
    https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27