search

freedomofpress / pressfreedomtracker.us

Code for the U.S. Press Freedom Tracker project website
https://pressfreedomtracker.us
GNU Affero General Public License v3.0
17 stars 7 forks source link

Browser testing issues #1307

Open urlsangel opened 2 years ago

urlsangel commented 2 years ago

@harrislapiroff

I'm going to put all of my findings into one issue for now to avoid polluting Github, they can then be pulled out into separate issues based on priority etc.

urlsangel commented 2 years ago

~Social media nav in footer too close to footer links~

Resolved #1386

Screenshot 2022-03-29 at 09 49 42 Screenshot 2022-03-29 at 14 29 29
urlsangel commented 2 years ago

~Mobile nav icon margin incorrect~

Edit: resolved here: https://github.com/freedomofpress/pressfreedomtracker.us/pull/1399

Figma has the margins as margin-top: 8px and margin-right: 16px, the actual is 17px and 33px respectively.

Screenshot 2022-03-29 at 10 12 03
urlsangel commented 2 years ago

Chart filters spacing appears inconsistent

The Figma design doesn't have stacked filters (not sure what was meant in the design), but the rows look a little close together, and are missing an overline (which may lead to it feeling like a big gap above the top filter buttons row).

Screenshot 2022-03-29 at 10 19 38
urlsangel commented 2 years ago

~Button bottom border and search placeholder overlaps~

Edit: fixed

The bottom border overlap looks like it appears wherever btn-primary is used.

Screenshot 2022-03-29 at 10 26 39 Screenshot 2022-03-29 at 10 35 38
urlsangel commented 2 years ago

Overflow X movement on mobile

There appears to be available movement on the x axis when scrolling, although I can't find anything overlapping the container, and the content seems to snap back to position. This makes the page feel very floaty when scrolling through content.

Maybe add overflow-x: hidden to the body?

urlsangel commented 2 years ago

 Double underline on incident card in "Recent incidents" block

Should last-of-type on these cards lose the bottom border?

Screenshot 2022-03-29 at 10 58 08
urlsangel commented 2 years ago

Footer sign up form fields alignment and border

Edit: partially fixed. The curve has been fixed using border-radius: 0, the fields going beyond the container could be fixed by box-sizing: border-box, but this would have potential knock on effects to other areas of the site so needs regression testing if implemented.

The left bottom border has a slight curve, and the fields extend to the edge of the screen - they should have some right margin according to Figma.

Screenshot 2022-03-29 at 10 59 56
urlsangel commented 2 years ago

Text wrap on "Submit an incident" button means icon is misaligned

This is the view of the buttons when the mobile nav is expanded - wrapping occurs on iPhone Mini size screens.

Screenshot 2022-03-29 at 11 08 30
urlsangel commented 2 years ago

Mobile nav buttons very far away on mobile menu via tablet

Harris: Opened https://github.com/freedomofpress/pressfreedomtracker.us/issues/1342 to address. Let's leave where they are, but add margins on the bottom

The "Donate" and "Submit an incident" buttons are very far away from the main navigation, maybe they should be part of the nav rather than absolutely positioned to the container?

Screenshot 2022-03-29 at 11 24 47
urlsangel commented 2 years ago

~Search field has rounded border on iPad Pro~

Edit: fixed

Screenshot 2022-03-29 at 11 33 20
urlsangel commented 2 years ago

Featured incidents block missing margin

Harris: I notice GitHub doesn't support this version of Safari, so it might be below our threshold too.

Screenshot 2022-03-29 at 11 44 56
urlsangel commented 2 years ago

Charts misaligned on iPad Air

Screenshot 2022-03-29 at 11 49 13
urlsangel commented 2 years ago

Top nav margin missing between items

Screenshot 2022-03-29 at 11 51 58
urlsangel commented 2 years ago

Site title wrapped at desktop width

Screenshot 2022-03-29 at 15 08 25
urlsangel commented 2 years ago

Download dataset not dismissable by clicking elsewhere

Once revealed by clicking the down arrow control, the details can only be dismissed by clicking again on the arrow icon - this could be improved by closing the details on any document click outside the element.

Screenshot 2022-03-29 at 15 24 49
urlsangel commented 2 years ago

Show less 'X' looks slightly large and a little close to the text

Screenshot 2022-03-29 at 16 11 56
urlsangel commented 2 years ago

Filter form fields text size small, device zooms in on focus

When attempting to enter text into a filter form, the device zooms into the field which can then make the filters section disorientating - form field font size usually needs to be minimum 16px to avoid this on iOS.

EDIT: this also happens on the search fields at the top of the page.

Screenshot 2022-03-29 at 16 16 13
urlsangel commented 2 years ago

"Show xxx incidents" button doesn't do anything if filters already active

In the scenario screenshotted, nothing happens when tapping the "Show 182 incidents" button.

Screenshot 2022-03-29 at 16 20 44
urlsangel commented 2 years ago

Filters button ends up over the footer

This would probably make more sense if it stopped at the bottom of the listing container?

Screenshot 2022-03-29 at 16 24 06
urlsangel commented 2 years ago

Layout of incident card in database search results looks disconnected

When an incident has tags, the layout makes it seem quite disconnected (large margin below the title link?). Also, the "Show more" link looks misaligned, as it's indented but doesn't appear aligned with any other element.

Screenshot 2022-03-30 at 10 11 41
urlsangel commented 2 years ago

Image caption on single incident over indented

According to Figma, the caption text should align with the body copy.

Screenshot 2022-03-30 at 11 05 38
urlsangel commented 2 years ago

Featured article list missing margin

The article list goes to edge of screen, the Figma design shows it should be indented to follow the headline, other page content etc.

Screenshot 2022-03-30 at 11 48 51
urlsangel commented 2 years ago

Featured article items missing right margin

Screenshot 2022-03-30 at 11 58 06
urlsangel commented 2 years ago

~Top navigation missing~

Edit: fixed

Screenshot 2022-03-30 at 14 56 37
urlsangel commented 2 years ago

Contact page has a "None" button

Screenshot 2022-03-30 at 16 03 13
urlsangel commented 2 years ago

Hover over third column on About page table results in glitchiness

When hovering over the right side of "See Articles" or "Visit the Page" links, the animation gets confused and jumps between initial and hover state.

Screenshot 2022-03-30 at 16 37 38
urlsangel commented 2 years ago

Author page link results in 500 error

The page linked to from the About template returns a 500 - missing template?

Screenshot 2022-03-30 at 16 40 38
urlsangel commented 2 years ago

Clicking "Visit the Page" triggers layout jump but no link action

Screenshot 2022-03-30 at 16 46 02
urlsangel commented 2 years ago

Mobile nav layout broken

It looks like the mobile nav layout is broken on anything lower than iOS 15 - the above browsers are on 14 and 13 respectively.

Screenshot 2022-04-07 at 11 48 25 Screenshot 2022-04-07 at 11 47 23