search

yourduskquibbles / webannoyances

Fix and remove annoying web elements such as sticky headers, floating boxes, floating videos, dickbars, social share bars and other distracting elements.
Creative Commons Attribution Share Alike 4.0 International
1.31k stars 48 forks source link

sfchronicle.com #175

Closed Jap2-0 closed 5 years ago

Jap2-0 commented 5 years ago

URL(s) where the issue occurs

https://www.sfchronicle.com/bayarea/article/FAA-safety-report-reveals-cases-of-pilots-mixing-14436212.php

Describe the issue

Floating header, header overlaps the top of the page, content of the header is a mess as you scroll. (the header turning into a hot mess when you scroll down appears to be the fault of something else, but we'll be hiding that so it doesn't matter.)

Screenshot(s)

Top of the page: image

Scrolling down: image

Versions

Settings

Notes

I looked into this a little (and by a little I mean quite extensively), and the best ended up with was replacing the current filters with the following set:

sfchronicle.com###articleRibbon
sfchronicle.com###navigation:style(position: relative !important; top: 0 !important;)
sfchronicle.com##body:style(margin-top: 0 !important;)
sfchronicle.com##.pageHeader.standard:style(position: relative !important; data-stage: "0" !important;)
sfchronicle.com###subNavigation:style(position: relative !important; top: 0 !important;)
sfchronicle.com##.hide-rss-link.hdnce-e.hdnce-collection-94830-sub_navigation:style(margin-top: calc(0px - var(--vh, 1vh)*100 + 65px) !important;)
sfchronicle.com##.article:style(margin-top: 44px !important;)

But that begins to run into some small issues when changing screen size, and not knowing what all of the original filters do means it's quite possible I'm missing something the old filters did. I can look at this more tomorrow if you want, but I'll leave it here for now.

yourduskquibbles commented 5 years ago

I think this combination of filters solves it for me. Can you confirm this looks OK for you as well?

! ultralist.txt
sfchronicle.com###articleRibbon
sfchronicle.com###fixedCarousel
sfchronicle.com##.zonePremiumF.zone
sfchronicle.com##.pageHeader:not(.collection) .pageHeader--titleBar

! css_style_filters.txt
americanbanker.com,backblaze.com,boardingarea.com,boredomtherapy.com,cbc.ca,dailyfx.com,dangerousminds.net,depositaccounts.com,diynetwork.com,extrahop.com,fixya.com,foodnetwork.com,fox29.com,fox5dc.com,fritz.ai,gamingonlinux.com,greatamericancountry.com,hackr.io,hgtv.com,honesttopaws.com,houstonchronicle.com,inews.co.uk,investopedia.com,lull.com,mediaite.com,nbcolympics.com,nypost.com,pagesix.com,pga.com,psychologytoday.com,realclearbooks.com,realcleardefense.com,realcleareducation.com,realclearenergy.org,realclearfuture.com,realclearhealth.com,realclearhistory.com,realclearinvestigations.com,realclearlife.com,realclearmarkets.com,realclearpolitics.com,realclearreligion.org,realclearscience.com,realclearsports.com,realclearworld.com,sfchronicle.com,spiegel.de,spoonuniversity.com,thejc.com,travelchannel.com##body:style(margin-top: 0 !important;)
sfchronicle.com##.article:style(margin-top: 70px !important; padding-top: 44px !important;)
sfchronicle.com##.stickyItem:style(position: absolute !important;)
sfchronicle.com##.pageHeader, body > .header:style(position: relative !important;)
sfchronicle.com###subNavigation:style(position: relative !important; top: 0 !important;)
sfchronicle.com##.pageHeader:not(.collection)[data-stage="2"] .pageHeader--logo:style(display: block !important;)

! social_filters.txt
sfchronicle.com##.pageHeader:not(.collection)[data-stage="2"] .pageHeader--shareTools
Jap2-0 commented 5 years ago

That works beautifully. I'd also add sfchronicle.com###navigation:style(position: relative !important;) - it makes the menu line up with the header even if you scroll a few pixels before opening it.

yourduskquibbles commented 5 years ago

That works beautifully. I'd also add sfchronicle.com###navigation:style(position: relative !important;) - it makes the menu line up with the header even if you scroll a few pixels before opening it.

That makes the menu appear in the middle of the page for me.

I also noticed with my above filters the navigation links didn't work because of z-index being set so low by the site (-2) I've made a few other updates to the filter set. I think this is good now and have tested on other pages[1] as well.

! ultralist.txt
sfchronicle.com##.pageHeader--progress
sfchronicle.com##.pageHeader:not(.collection) .pageHeader--titleBar
sfchronicle.com##.zonePremiumF.zone

! css_style_filters.txt
americanbanker.com,backblaze.com,boardingarea.com,boredomtherapy.com,cbc.ca,dailyfx.com,dangerousminds.net,depositaccounts.com,diynetwork.com,extrahop.com,fixya.com,foodnetwork.com,fox29.com,fox5dc.com,fritz.ai,gamingonlinux.com,greatamericancountry.com,hackr.io,hgtv.com,honesttopaws.com,houstonchronicle.com,inews.co.uk,investopedia.com,lull.com,mediaite.com,nbcolympics.com,nypost.com,pagesix.com,pga.com,psychologytoday.com,realclearbooks.com,realcleardefense.com,realcleareducation.com,realclearenergy.org,realclearfuture.com,realclearhealth.com,realclearhistory.com,realclearinvestigations.com,realclearlife.com,realclearmarkets.com,realclearpolitics.com,realclearreligion.org,realclearscience.com,realclearsports.com,realclearworld.com,sfchronicle.com,spiegel.de,spoonuniversity.com,thejc.com,travelchannel.com##body:style(margin-top: 0 !important;)
sfchronicle.com###container:style(margin-top: 70px !important;)
sfchronicle.com###content:style(margin-top: 41px !important;)
sfchronicle.com###navigation:style(margin-top: 44px !important;)
sfchronicle.com###subNavigation:style(position: relative !important; top: 0 !important; z-index: unset !important;)
sfchronicle.com##.article:style(padding-top: 44px !important; margin-top: 70px !important;)
sfchronicle.com##.articleRibbon:style(position: relative !important; transform: translateY(0) !important; box-shadow: none !important;)
sfchronicle.com##.pageHeader, body > .header:style(position: relative !important;)
sfchronicle.com##.pageHeader:not(.collection)[data-stage="2"] .pageHeader--logo:style(display: block !important;)
sfchronicle.com##.stickyItem:style(position: absolute !important;)

! social_filters.txt
sfchronicle.com##.pageHeader:not(.collection)[data-stage="2"] .pageHeader--shareTools

Thanks for reporting and helping to test!

[1] https://www.sfchronicle.com/us-world/

Edit: updated filters for the article carousel ribbon to not remove it but keep it pinned to the bottom of the page where the site loads it.