search

internetarchive / wayback-machine-firefox

Reduce annoying 404 pages by automatically checking for an archived copy in the Wayback Machine. Learn more about this Test Pilot experiment at https://testpilot.firefox.com/
GNU Affero General Public License v3.0
53 stars 17 forks source link

Implement Styles to Match UX Spec #5

Closed johngruen closed 8 years ago

johngruen commented 8 years ago

wayback version one 2x Wayback Version One.pdf

You can copy and paste from the PDF

johngruen commented 8 years ago

Here's a link to the close SVG: https://www.dropbox.com/s/0d539agcasms4s3/Close.svg?dl=0

rchrd2 commented 8 years ago

Hello. Thanks for these suggestions. I have updated the styles and text template to match your pdf.

One note: I did not change the height to be 50px, because in small width windows, this caused a problem. The latest version (atm) is v1.3.1.

rchrd2 commented 8 years ago

Oh, I am also working on getting an SVG asset. Once I have that I will update the plugin. Should be soon.

rchrd2 commented 8 years ago

Hello again. The plugin now uses an SVG, and also I updated the font to be "14px message-box". I believe that takes care of everything in this ticket. Here's a screenshot. Let me know if you think this is resolved.

screen shot 2016-06-01 at 18 07 25

johngruen commented 8 years ago

hey @rchrd2 look good to me...two three little changes

  1. The message-box font can't be set on a font-family property, it has to be set on a font property. The rule comes from some internal Firefox style sheet magic. It should default to a sans-serif.
  2. Make the box shadow on the big div: box-shadow: 0 0 10px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(0, 0, 0, 0.3);
  3. The link should be set to text-decoration: none;
rchrd2 commented 8 years ago

@johngruen I'll make the box-shadow change. However, the font is already set using the font property. It's essentially set like this:

el.style.font = "14px message-box";

Does it not look correct? Could it be a problem with it being set on the element's style attribute instead of through a css file?

johngruen commented 8 years ago

@rchrd2 Yeah, that might be it. I'll have to chase down what the Font stack should be in CSS. Probably best to go ahead and merge in these changes and I can file a follow on bug. Thanks!

rchrd2 commented 8 years ago

@johngruen Okay let me know if you find out any more info about making message-box work with inline styles. In the meantime, I set it to 14px message-box, sans-serif and it looks more like your example pdf. Here's the source if you're interested: https://github.com/internetarchive/FirefoxNoMore404s/blob/master/src/scripts/client.js#L69