No "visible" login nav menu for mobile

Đang mở Phù hợp với người mới
#3 0 bình luận 1 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
2/5
Thời gian dự kiến
1-3 giờ
Mức phù hợp với người mới
68/100
Loại issue
Lỗi
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Ít trao đổi
Công nghệ
css
Lĩnh vực
frontend

Hướng nghiên cứu

Tái hiện thanh điều hướng của https://rss.chat/ trong chế độ xem responsive ở các chiều rộng 445px và 444px bằng Safari hoặc Chrome trên thiết bị di động. Kiểm tra hành vi float của .navbar .nav.pull-right và xác nhận rằng menu đăng nhập vẫn hiển thị và được định vị chính xác ở 444px mà không làm hỏng bố cục rộng hơn.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

Observed this with both mobile Safari & Chrome on my iPhone 17 Pro.

To replicate:

  1. Open https://rss.chat/ with Chrome Inspect.

  2. Select responsive view for dimensions.

  3. Set width to 445px.
    The login menu is visible.

  4. Drop width to 444px.
    The login menu "disappears".

At 444px the login menu has no room, so it's forced below the other nav items (why the container gets taller) and for some reason the float style gets wonky. Image

  1. Toggle off the float style (.navbar .nav.pull-right {float: right;}).
    The login menu will "reappear".
Image

A quick hack might be to override and remove the original float style, then add a media query: @media (width >= 444px) { .navbar .nav.pull-right { float: right; } }.

I hate floats, IMO CSS Flexbox is better for nav bars. Ask Claude to rework the nav to use Flexbox and see if you don't like that better Dave.

Also, again IMO, I like all major page elements to have an id, even if styling is done with classes. I think it helps when debugging.

Ngôn ngữ chính
JavaScript
Star
37
Fork
7
Không có pull request nào được merge trong 30 ngày

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của scripting/rss.chat

Tất cả issue của scripting/rss.chat

Issue tương tự

Thêm issue về JavaScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.