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

implemented two column layout for footer in mobile view #1946

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

snehaio
Copy link

@snehaio snehaio commented Oct 31, 2024

Description

This PR fixes #1827

Notes for Reviewers

Signed commits

  • Yes, I signed my commits.

Copy link

netlify bot commented Oct 31, 2024

Deploy Preview for mesheryio-preview ready!

Name Link
🔨 Latest commit a8f47cf
🔍 Latest deploy log https://app.netlify.com/sites/mesheryio-preview/deploys/67367a5a81e943000853a00f
😎 Deploy Preview https://deploy-preview-1946--mesheryio-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@leecalcote
Copy link
Member

Thanks, @snehaio !

Copy link
Contributor

@GaganpreetKaurKalsi GaganpreetKaurKalsi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @snehaio! Can we do something to align the footer items towards extreme left of there columns, something like shown in the screenshot attached?

image

Also @leecalcote, how about reorganizing them to Getting Started > Resources > Community > Socials......This way things can be grouped together based on structural similarity (only if it makes sense)

image
image

@Pratik-050
Copy link

Thanks @snehaio you can try to keep the socials and community divs side by side as suggested by @GaganpreetKaurKalsi and also try to align them properly.

@snehaio
Copy link
Author

snehaio commented Nov 1, 2024

Noted! @GaganpreetKaurKalsi @Pratik-050 .
Will work upon the same and update the pr shortly.

@snehaio
Copy link
Author

snehaio commented Nov 2, 2024

Rearranged the columns according to their structural similarity, as provided in the screenshot by @GaganpreetKaurKalsi . Please review it once and lmk if any changes are still required. Thankyou!

Copy link
Contributor

@GaganpreetKaurKalsi GaganpreetKaurKalsi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we align the content as shown below? Try to use grid layout if flexbox isn't working for the requirement. @snehaio

image

@snehaio
Copy link
Author

snehaio commented Nov 3, 2024

Thank you, @GaganpreetKaurKalsi, for suggesting the grid layout! Switching to grid made it much easier to align the columns as needed. I’ve made the changes and updated the PR.

@vishalvivekm
Copy link
Contributor

@snehaio Let's discuss this on websites call on Monday at 6:30 PM IST (7:00 AM CT). Add it as an agenda item to the meeting minutes, if you would :)

Copy link
Contributor

@GaganpreetKaurKalsi GaganpreetKaurKalsi left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@snehaio there is this horizontal overflow on small screen size (look at the scrollbar at the bottom)
image

Copy link
Contributor

@vishalvivekm vishalvivekm left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@snehaio revert the lint changes, if you would, please.

responsive: [{ breakpoint: 1300, settings: { slidesToShow: 2.5 } }, /* other breakpoints */]
});
});
</script>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

any reasons to remove other breakpoints ? @snehaio

@vishalvivekm
Copy link
Contributor

@snehaio Let's discuss this on websites call on Monday at 6:30 PM IST (7:00 AM CT). Add it as an agenda item to the meeting minutes, if you would :)

Added this to agenda items:
https://docs.google.com/document/d/1XczAHXVe2FIWPqiF57ospJ43zw5cZQ7ui8mn39v5EvA/edit?tab=t.0

Comment on lines 112 to 119
clipboard.on('success', function (e) { /* clipboard success logic */ });
clipboard.on('error', function (e) { /* clipboard error logic */ });
</script>
<script>
function displayCode(id) { /* function logic */ }
</script>
<script type="text/javascript">
let toggleBtn = document.getElementById("mode-toggle-btn");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@snehaio we'd probably want to have the logic back in place here

Signed-off-by: Sneha Singh <[email protected]>
childElements[1].style.color = 'white';
childElements[1].style.background = "#00b39fff";
}
}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please correct the formatting and confirm if the added logic is same as previous. Thanks!

@vishalvivekm
Copy link
Contributor

@snehaio we could not disucss this PR in previous websites meeting, will you be presenting it today on sites' call at 6PM IST?
https://docs.google.com/document/d/1XczAHXVe2FIWPqiF57ospJ43zw5cZQ7ui8mn39v5EvA/edit?tab=t.0 - link to meeting minutes, please add it there, if you would.

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

Successfully merging this pull request may close these issues.

Implement Two-Column Layout for Mobile
5 participants