Link vs Refresh

Madchatthew

I have the pages plugin and the featured topics extended plugin installed. I have the layout of my blog page the way I want with custom css and html. I have a custom page that says blog. The link to the blog is /blog preceded by the domain.

When I click on the link it brings me to the blog page but the layout is all wrong and looks horrible. If I press the refresh button the layout then appears the way that it should. I do notice that when I first click on the blog link that the layout does start to look the way it should but then in less than a second it gets all messed up and doesn’t look right.

This is the way it should look. I am not done designing this, but this is in general how it will look.

This is how it looks when I click the blog link that you see.

Then when I refresh, it will go back to looking like that first pic. I am not sure what is happening and why it is doing that. Any help is greatly appreciated! Thank you!!

phenomlab

@Madchatthew I took an extended look at this, and the issue is being caused by the code you have for the custom template below

<div class="grid">
  <!-- BEGIN topics -->
  <div id="gridItem" class="grid__item">
    <div class="card">
      <img class="card__img" src="{topics.imageurl}">  
      <div class="card__content">
        <h1 class="card__header"><a href="{config.relative_path}/topic/{topics.slug}">{topics.title}</a></h1>
        <p>{topics.date.full}</p>
        <p class="card__text">{topics.post.content}</p>
        <a href="{config.relative_path}/topic/{topics.slug}"><button class="card__btn">Read More<span>&rarr;</span></button></a>
      </div>
    </div>
  </div>
  <!-- END topics --> 
</div>

No matter what I try, it looks like the CSS you have is being overridden by either the plugin, or the core itself. Based on this, I took the decision to rewrite the code. Here’s what is in use now on your site

<div class="row blog-wrapper">
<br>
<!-- BEGIN topics -->
<div class="col-xs-2 col-sm-2 post-holder" tid="{topics.tid}">
    <div class="blog-container">
  <a href="{config.relative_path}/topic/{topics.slug}" class="post-box" style="min-height: 340px;">
      <div class="parent">
    <figure class="blog-image child" style="background: {topics.user.icon:bgColor}
      <!-- IF topics.imageurl -->
        url({topics.imageurl})
      <!-- END topics.imageurl -->
      ;">     
    </figure>
    </div>
    <div class="blog">
        <span class="category">{topics.title}</span>
    </div>
  </a>
</div>
</div>
<!-- END topics -->
</div>

 <!-- IF paginator -->
  <div class="section sectionMain">
    <div class="PageNav">
      <nav>
        <!-- IF prevpage -->
        <a href="{config.relative_path}{featuredRoute}{prevpage}" class="btn btn-default paginate"></a>
        <!-- ENDIF prevpage -->

        <!-- BEGIN pages -->
        <a href="{config.relative_path}{featuredRoute}{pages.number}" class="btn <!-- IF pages.currentPage -->btn-primary active<!-- ELSE -->btn-default<!-- ENDIF pages.currentPage -->">{pages.number}</a>
        <!-- END pages -->

        <!-- IF nextpage -->
        <a href="{config.relative_path}{featuredRoute}{nextpage}" class="btn btn-default paginate"></a>
        <!-- ENDIF nextpage -->
      </nav>
    </div>
  </div>
  <!-- ENDIF paginator -->
</div>

Plus, I added some custom CSS on your site

/* Phenomlab Custom CSS */
figure.blog-image {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-size: cover !important;
    height: 150px;
}
.blog {
    background: #ffffff;
    border-radius: 0 0 4px 4px;
    border-top: 0;
    color: #333;
    font-size: 2.0em;
    padding: 20px 25px;
    line-height: 1.5em;
    min-height: 108px;
    transition: all .2s ease-in-out;
    margin: 1px;
}
.post-holder {
    margin-bottom: 20px;
}
.row.blog-wrapper {
    padding: 50px;
}
span.category {
    color: #3384C7;
}
.blog-content-wrapper {
  max-width: 400px;
  margin: 50px auto;
}
@media (max-width: 767px) {
.post-holder {
    width: 100%;
}
}

The end result is this when accessing the site directly, or clicking the “Blog” link

As you can see, this works without issue. Of course, you’ll need to tweak the template I created (and probably the CSS) to get the desired look and feel you want. Note, that an <a> tag is present in the entire body of each post, so no matter where you click, it’ll open the associated article - there’s no need for a “Read More” or “Explore” function.

The code is also 100% mobile friendly, and will stack accordingly at 767px in terms of viewport breakpoint.

phenomlab

@Madchatthew can you provide a link where I can see this ? From what you’ve explained, this sounds JS related in the sense that the callback is missing and is only present on load.

Madchatthew

@phenomlab I don’t. It is setup on my laptop on a virtual machine running a Ubuntu server with virtualmin setup installed. I can see if I can make it a live link when I get home and leave it running for you to check out.

phenomlab

@Madchatthew ok, thanks. Let me know.

Madchatthew

@phenomlab I have it set up so you can see the site.

24.230.54.176

This also happens on the Edge browser as well. When I went to the page with my phone it works as it should with all the cards in a single column and spaced as it should be.

Not sure when it is in full screen mode why it doesn’t. When you click on refresh it will display as it should.

Thanks again for the help!

phenomlab

@Madchatthew thanks. I’ll take a look at this. How long will the instance be up for ? I don’t think I’ll get to this until tomorrow my time now.

Madchatthew

@phenomlab I will leave it up and running so when you get time to check it out. Again, I really appreciate it.

Madchatthew

I noticed that when I right click on Blog and choose Open in new tab that the page displays the way I want it too. It is just when I click on Blog and have it open in the same page. I am not sure how to fix this?

phenomlab

@Madchatthew I tried looking at this earlier, but didn’t get very far as I need access to the admin settings. Do you get the same if you browse to /user/admin/blog ? (I’m assuming you are logged in as admin)

Madchatthew

@phenomlab I get the following error when I go to that address. Also I sent you a DM with username and password so you can login and take a look.

Internal Error.
Oops! Looks like something went wrong!

/user/admin/blog

Cannot read property 'username' of null

phenomlab

@Madchatthew thanks. I’ll check on this tomorrow.

Madchatthew

@phenomlab Sounds good! Thank you!!

phenomlab

@Madchatthew From what I can see, you have some custom JS that looks like the below

const gridItem = document.getElementById("gridItem");
gridItem.removeAtribute('style');

I’m not entirely sure what this is for, but it will only fire on page load - not on AJAX calls which is used when clicking links. To fix this issue, you can wrap the JS so that it will also work on AJAX calls as follows

$(window).on('action:ajaxify.end', function(data) {
    const gridItem = document.getElementById("gridItem");
    gridItem.removeAtribute('style');
});

This will then allow the same code to execute when the links are clicked. However, this then generates the below error in the console

This relates to gridItem.removeAttribute not being a valid function, so the JS fails and will not process further. This shortened version will work though

$(window).on('action:ajaxify.end', function(data) {
    document.getElementById("gridItem").removeAttribute("style");
});

As I mentioned, I do not see any reason for this specific code to execute, as it appears to be removing a style from an element. Is this actively being used for anything ? This doesn’t seem to be causing the strange layout - I suspect this comes from the URL entered in config.json in the NodeBB root.

The blog page should also show when you navigate to https://siteurl.com/user/username/blog but it fails to render with the below in the console

GET http://x.x.x.x/assets/src/client/account/fte-blog.js?v=ph7njujnhro net::ERR_ABORTED 404 (Not Found)

Again, I think this is because of the url value in config.json. Is there any way I can get access to the Ubuntu server this instance is running on ?

Madchatthew

@phenomlab I added the js to remove a style that was making the layout not work the way I wanted. So I thought well I will just remove the style so that my css will work. When I did that then my layout would work. But maybe that is the cause of my issue?

I will see if I can set it up so you can access the server remotely. I will figure out how to make the IP public so you can remote in or at least so you can access the virtualmin/webmin pages.

phenomlab

@Madchatthew great. Thanks

Madchatthew

@phenomlab I sent you a DM with the info in it. Thanks again!

phenomlab

@Madchatthew I took an extended look at this, and the issue is being caused by the code you have for the custom template below

<div class="grid">
  <!-- BEGIN topics -->
  <div id="gridItem" class="grid__item">
    <div class="card">
      <img class="card__img" src="{topics.imageurl}">  
      <div class="card__content">
        <h1 class="card__header"><a href="{config.relative_path}/topic/{topics.slug}">{topics.title}</a></h1>
        <p>{topics.date.full}</p>
        <p class="card__text">{topics.post.content}</p>
        <a href="{config.relative_path}/topic/{topics.slug}"><button class="card__btn">Read More<span>&rarr;</span></button></a>
      </div>
    </div>
  </div>
  <!-- END topics --> 
</div>

No matter what I try, it looks like the CSS you have is being overridden by either the plugin, or the core itself. Based on this, I took the decision to rewrite the code. Here’s what is in use now on your site

<div class="row blog-wrapper">
<br>
<!-- BEGIN topics -->
<div class="col-xs-2 col-sm-2 post-holder" tid="{topics.tid}">
    <div class="blog-container">
  <a href="{config.relative_path}/topic/{topics.slug}" class="post-box" style="min-height: 340px;">
      <div class="parent">
    <figure class="blog-image child" style="background: {topics.user.icon:bgColor}
      <!-- IF topics.imageurl -->
        url({topics.imageurl})
      <!-- END topics.imageurl -->
      ;">     
    </figure>
    </div>
    <div class="blog">
        <span class="category">{topics.title}</span>
    </div>
  </a>
</div>
</div>
<!-- END topics -->
</div>

 <!-- IF paginator -->
  <div class="section sectionMain">
    <div class="PageNav">
      <nav>
        <!-- IF prevpage -->
        <a href="{config.relative_path}{featuredRoute}{prevpage}" class="btn btn-default paginate"></a>
        <!-- ENDIF prevpage -->

        <!-- BEGIN pages -->
        <a href="{config.relative_path}{featuredRoute}{pages.number}" class="btn <!-- IF pages.currentPage -->btn-primary active<!-- ELSE -->btn-default<!-- ENDIF pages.currentPage -->">{pages.number}</a>
        <!-- END pages -->

        <!-- IF nextpage -->
        <a href="{config.relative_path}{featuredRoute}{nextpage}" class="btn btn-default paginate"></a>
        <!-- ENDIF nextpage -->
      </nav>
    </div>
  </div>
  <!-- ENDIF paginator -->
</div>

Plus, I added some custom CSS on your site

/* Phenomlab Custom CSS */
figure.blog-image {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-size: cover !important;
    height: 150px;
}
.blog {
    background: #ffffff;
    border-radius: 0 0 4px 4px;
    border-top: 0;
    color: #333;
    font-size: 2.0em;
    padding: 20px 25px;
    line-height: 1.5em;
    min-height: 108px;
    transition: all .2s ease-in-out;
    margin: 1px;
}
.post-holder {
    margin-bottom: 20px;
}
.row.blog-wrapper {
    padding: 50px;
}
span.category {
    color: #3384C7;
}
.blog-content-wrapper {
  max-width: 400px;
  margin: 50px auto;
}
@media (max-width: 767px) {
.post-holder {
    width: 100%;
}
}

The end result is this when accessing the site directly, or clicking the “Blog” link

As you can see, this works without issue. Of course, you’ll need to tweak the template I created (and probably the CSS) to get the desired look and feel you want. Note, that an <a> tag is present in the entire body of each post, so no matter where you click, it’ll open the associated article - there’s no need for a “Read More” or “Explore” function.

The code is also 100% mobile friendly, and will stack accordingly at 767px in terms of viewport breakpoint.

Madchatthew

@phenomlab Wow, that is awesome! I can see I have a long way to go before I become a web dev. It seems to me like I should have been able to figure this out. Thanks again for your help. I really appreciate it!!

phenomlab

@Madchatthew No problem at all. More than happy to help with stuff like this

phenomlab

@pobojmoks Do you see any errors being reported in the console ? At first guess (without seeing the actual code or the site itself), I’d say that this is AJAX callback related

Link vs Refresh

Did this solution help you?

Related Topics

Glitch effect when refreshing the home page

CSS code customization for the link preview plugin

hover link effect

Title on homepage of nodebb forum

Link Text Colour.

CSS codes for fa-info icon

New blog section added

NodeBB Discord Plugins

Link vs Refresh

Did this solution help you?

Related Topics

Individual Categories