Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
fmaida opened this issue Oct 13, 2023 · 8 comments · Fixed by #146
Closed

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

fmaida opened this issue Oct 13, 2023 · 8 comments · Fixed by #146

Comments

@fmaida
Copy link
Contributor

fmaida commented Oct 13, 2023

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
Copy link
Owner

@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
Copy link

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

@github-actions github-actions bot added the Stale label Oct 28, 2023
@LautaroLobo12
Copy link

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

@github-actions github-actions bot removed the Stale label Oct 30, 2023
@github-actions github-actions bot added the Stale label Nov 10, 2023
Repository owner deleted a comment from github-actions bot Nov 11, 2023
@hugo-sid hugo-sid removed the Stale label Nov 11, 2023
Copy link

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

@github-actions github-actions bot added the Stale label Nov 21, 2023
@fmaida
Copy link
Contributor Author

fmaida commented Nov 22, 2023

up

@hugo-sid
Copy link
Owner

hugo-sid commented Dec 6, 2023

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

@fmaida
Copy link
Contributor Author

fmaida commented Dec 6, 2023

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.

@hugo-sid
Copy link
Owner

hugo-sid commented Dec 6, 2023

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants