hugo-sid/hugo-blog-awesome

On the homepage, post dates wrap if post titles are too long

fmaida opened this issue · 8 comments

fmaida commented

Describe the bug
On the homepage, post dates wrap if post titles are too long. This happens especially if the post titles are too long and you're browsing the website from a device with a small screen resolution - such as a mobile phone.

Steps to reproduce
Steps to reproduce the behavior:

  1. Create a new post or edit an existing one with a very long title
  2. See the homepage in a web browser
  3. Collapse the browser window to the minimum, or open the website on a mobile phone for example

This is an example of what I get. Please notice that post date wraps to the second line of text:

Home___Awesome_Hugo_blog-4

How I fixed this problem

I know this is not an elegant solution, but at the moment it's working.
I simply patched the source in layouts/partials/postCard.html by replacing this code:

<time class="post-item-meta" datetime="{{ dateFormat $ISO_date .Date }}">
    {{ time.Format $configDateFormat .Date }}
</time>

with this code that replaces normal spaces with non-breakable spaces:

<time class="post-item-meta" datetime="{{ dateFormat $ISO_date .Date }}">
    {{ $postDate := time.Format $configDateFormat .Date }}
    {{ strings.Replace $postDate " " "&nbsp;" | safeHTML }}
</time>

And now this is how the posts are now displayed on a single line:

Home___Awesome_Hugo_blog-3

You see, it's not the best solution in the world, so I was hoping that maybe you could find a better solution to this problem.

Best regards

hugo-sid commented

@fmaida, thanks for reporting the bug.

You see, it's not the best solution in the world, so I was hoping that maybe you could find a better solution to this problem.

You're right. I will see if there is a better way to do this.

github-actions commented

This issue has been marked stale due to inactivity. It will auto-close in 7 days without an update.

LautaroLobo12 commented

max len and ... ? it may be worth a try to see how it looks

github-actions commented

This issue has been marked stale due to inactivity. It will auto-close in 7 days without an update.

fmaida commented

up

hugo-sid commented

@fmaida can you please confirm whether this issue is resolved by this commit ?

fmaida commented

I tested it on both Chrome device emulation and on my real iPhone 12 Pro.
It works like a charm now, thank you very much.

  • ❤️1
hugo-sid commented

Thank you very much Francesco, for testing with the latest commit.

I'll include this in the upcoming release, which has been delayed for a while.