OpenSource.org | Post top margin causing display issues

[toncijajic]

A margin-top: -350px; was causing the top of the post to move "out of the page", we need to investigate why it happened.

Details

This bit of code was forcing the post out of page (screenshot: https://d.pr/i/QUAFjl):

dotOrg/themes/osi/assets/scss/_6_components.wp-content.scss

Line 69 in 09f69df

margin-top: -350px;

I fixed it temporarily by unsetting it via custom CSS:

/*2024-06-14 Tonci #8330205 temporary to solve top margin*/

.post .post--content {
    margin-top: unset;
}

However, that code has been there since August 2023, so something else must've changed to cause this issue.

We should investigate what and fix it.

[geoffguillain]

Hey @toncijajic

I have been able to identify when the issue has been introduced (Fev, 21st):
PR (dev): #52 | PR (prod): #56

Before this pull request, blog posts used to have featured images. The post was displayed to overlap the image, hence the negative margin.

Here is a screenshot from my local environment before this PR with dummy content:

Since the theme does not use the feature image, we don't need this negative margin anymore.

I can remove it from the template's stylesheets if that works for you.

Extra

While investigating this issue, I have done a small Q/A and I have monitored 2 issues:

1. On all pages: when we hide the main navigation, the content loses the height of the navigation, and the content "jumps" up ~100 pixels. We should counterbalance when the navigation is hidden by adding the navigation's height as the top margin for content.
2. On Chrome (and slightly on Firefox) Blog archive page is having some trouble when the navigation is hidden. The navigation is flickering before disappearing. A class is added while the header is resized after some scrolling down on small devices. File responsible for this: https://github.com/OpenSourceOrg/dotOrg/blob/09f69dfdc1984847a27182801844791475840af5/themes/osi/assets/js/src/theme/header-resize.js

Please take a look at my feedback and let me know how you want to move forward.

[toncijajic]

@geoffguillain it feels weird the navigation is disappearing, it should follow the user scrolling down.
Could it be a bug? Would it be easy to fix?

[geoffguillain]

Hey @toncijajic

This was done on purpose on large screens:

dotOrg/themes/osi/assets/scss/_7_vendor.plugins.scss

Lines 110 to 113 in 09f69df

	/* Ensures the small header is hidden on larger screens */
	.header-main-small {
	display: none;
	}

The header is transforming to a minimized version, this can be seen on mobile. When it is happening on the desktop the menu is hidden. By the way, the styles of this minimized version of the header are not desktop-ready, cf. screenshot.
If you want to keep the header visible at all times, we will need to revert the styles to the non-minimized version on large screens, or design something specific.

Could you please double-check that you want to re-enable the sticky header on large screens and some directions about the expected output if so?

[geoffguillain]

Hey @toncijajic,

I have created a PR for the original request. The blog posts on the develop server are fixed:
https://open-source-initiative-development.mystagingwebsite.com/blog/open-source-ai-definition-weekly-update-mar-11

Please have a look, and let me know if I can merge this to production.

[toncijajic]

Thanks for the info @geoffguillain!

This was done on purpose on large screens:

Very weird.

Could you please double-check that you want to re-enable the sticky header on large screens and some directions about the expected output if so?

Yup, I'll confirm this shouldn't be happening.

Please have a look, and let me know if I can merge this to production.

Will do once I confirm with the partner that the print preview they use is working correctly, too.

[toncijajic]

@geoffguillain we're seeing some issues with H1 headings disappearing on the pages.

Examples:

• https://open-source-initiative-development.mystagingwebsite.com/osd
• https://open-source-initiative-development.mystagingwebsite.com/about-3/team

Could you spin up these changes on a fresh production clone so we can remove the environment variables and know what to fix?

[geoffguillain]

Hey @toncijajic

Could you spin up these changes on a fresh production clone so we can remove the environment variables and know what to fix?

The issue is not the staging server but the repo. Some commits/PR has been pushed only to the production branch.

I have cherry-picked the commits that I have found about the title and imported them to the develop branch. That should be enough for testing:
https://open-source-initiative-development.mystagingwebsite.com/osd

I would recommend archiving the current develop branch and creating a new one based on trunk to align both environments.
Before doing so, it would be better if there is no pending work on develop before doing this. I can see some opened issues currently working on: https://github.com/OpenSourceOrg/dotOrg/issues

[toncijajic]

@geoffguillain, thanks for the analysis!

Give us a day to get our ducks in a row and we'll ping back on the next steps.

[xpurichan]

@geoffguillain I've assessed the open issues:

1. Blog Posts should display the date published rather than the last modified date. #93 - active work in progress
2. OpenSource.org | Post top margin causing display issues #92 - this issue
3. Add Donation Widget on the site #71 - awaiting partner feedback, prolonged delay
4. SugarCalendar: Recurrence shows the wrong information on the front end #55 - irrelevant since the partner has moved to another events solution
5. SugarCalendar - Link not being added to the ics #34 - irrelevant since the partner has moved to another events solution

With this in mind, it sounds like we should wait for #93 to be completed (hopefully within a day or so). I can also communicate with the partner that we require a response and closure on #71 in order to move forward with this.

Let me know if that's a good plan of action for you.

[xpurichan]

👋 @geoffguillain checking back in with you on this ⬆️

[geoffguillain]

Hey @xpurichan

#93 - The extra requests have been solved and pushed to production

Looking at the other linked issues, I do not see comments about code living in development.

I assume we could:

1. merge this issue OpenSource.org | Post top margin causing display issues #92 to production
2. Create a new 'clean' develop branch from the trunk (production) branch for future work.
   The old develop branch can be renamed (archived), and legacy code would still be available there if needed.

Let me know if you have any questions.

[xpurichan]

@geoffguillain , let's move forward with that. I do see #71 getting some attention now, so we'll notify them there once the change is made.

[geoffguillain]

Hey @xpurichan

Issue

• The fix related to this issue has been pushed to production. I have removed the hotfix in the customizer.
  https://opensource.org/blog/open-source-ai-definition-weekly-update-june-24

Branches

• The develop branch has been archived and named develop-2024-07-01 and a new one aligned on the main branch (production) has been recreated and called develop, the new branch is now reflected on the development server: https://open-source-initiative-development.mystagingwebsite.com/

Please take a look and let me know if you have any questions.

[toncijajic]

@geoffguillain thanks! Good idea to also redo the development site, so it's all new?

[geoffguillain]

@toncijajic
I would say not mandatory since the behaviors should not be identical. But if you need to align the production database with the development one feel free to also reset the develop site itself.

[toncijajic]

@geoffguillain let's merge this to prod if not merged already, and we can close it.

[geoffguillain]

Code in this issue has been merged to prod

[toncijajic]

Neat, closing - thank you!