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.

Sign up for GitHub

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

Jump to bottom

mobile header bugs #38

Closed
ZL-Asica opened this issue Oct 23, 2024 · 0 comments · Fixed by #56 or #57
Closed

mobile header bugs #38

ZL-Asica opened this issue Oct 23, 2024 · 0 comments · Fixed by #56 or #57
Labels
bug Something isn't working
Milestone
0.4 Style Refinem...

Comments

@ZL-Asica
Copy link
Owner

ZL-Asica commented Oct 23, 2024 •
edited
Loading

  1. Click out of the opened nav have no effects.
  2. Click willstay even after the nav was hide.
@ZL-Asica ZL-Asica added the bug Something isn't working label Oct 23, 2024
@ZL-Asica ZL-Asica mentioned this issue Nov 12, 2024
Merged
ZL-Asica added a commit that referenced this issue Nov 12, 2024
@ZL-Asica
feat: Style refine. Add progress indicator and BackToTop button. (#57)
a7a8a7d 
This PR refines accessibility, styling, and functionality across several
components, implementing Tailwind CSS, adding a Back to Top button, and
optimizing layout responsiveness. It also includes social media
enhancements in the footer, an animated progress indicator, and improved
dark mode support.

### Key Changes

1. **Accessibility Enhancements** (`Header.tsx`, `SearchInput.tsx`):
- Fixed `aria-hidden` for mobile menu to ensure screen reader
compatibility.
- Added `aria-label` to search-related select components to improve
accessibility.

2. **Styling Refactor and Optimization** (`Footer.tsx`, `Header.tsx`,
`PostListLayout.tsx`):
   - Close mobile menu bar when clicked outside. #38
- Moved CSS from standalone files to styled-components and Tailwind
classes for improved maintainability.
   - Added overlay effect when mobile menu is open.
   - Improved dark mode styles and consistency for `PostListLayout`.
- Removed unused CSS files: `footer.css`, `header.css`, and
`postListLayout.css`.

4. **Footer Social Media Expansion** (`Footer.tsx`, `config.yml`):
- Added a broader selection of social media options, improving icon
alignment and accessibility.
   - Moved CSS styles into Tailwind classes.

5. **UI Enhancements**:
- **Progress Indicator** (`Header.tsx`): Added a scroll progress
indicator at the top, providing users with a quick visual of their
position on the page.
   - **Back to Top Button** (`BackToTop.tsx`): #16
     - Displays when users scroll down and fades in/out smoothly.
- Includes bounce animation when users reach the bottom of the page.
- Button uses Tailwind for styling and hover scaling for improved
interactivity.

6. **Post List Layout Improvements** (`PostListLayout.tsx`):
- Combined and optimized styles into Tailwind classes, reducing CSS
dependency.
- Added “Read More” button for each post, with smooth scaling on hover.
- Addressed responsive display issues, ensuring consistent layout on
various screen sizes.

7. **Minor Fixes**:
   - Update `README` to show the newest file structure.
   - Fix `pr-size` wrokflow.

### Summary

These changes enhance user experience by improving accessibility,
responsiveness, and visual clarity across the application, while
streamlining and unifying styling practices.
This was linked to pull requests Nov 12, 2024
refactor(components): UI Improvements, Header Modularization, and File Restructure #56
Merged
feat: Style refine. Add progress indicator and BackToTop button. #57
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
0.4 Style Refinement and Accessibility.
1 participant
@ZL-Asica