includes/index/style.html - Issue 29499714: Issue 4912 - Update media coverage links on eyeo.com

Keyboard Shortcuts

	File
u :	up to issue
m :	publish + mail comments
M :	edit review message
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line
<Enter> :	respond to / edit current comment
d :	mark current comment as done

	Issue
u :	up to list of issues
m :	publish + mail comments
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue
# :	close issue

	Comment/message editing
<Ctrl> + s or <Ctrl> + Enter :	save comment
<Esc> :	cancel edit

Delta Between Two Patch Sets: includes/index/style.html

Issue 29499714: Issue 4912 - Update media coverage links on eyeo.com (Closed) Base URL: https://hg.adblockplus.org/web.eyeo.com

Left Patch Set: Created July 27, 2017, 4:46 p.m.

Right Patch Set: Refactor alternative text and title for media coverage links Created Aug. 2, 2017, 10:33 a.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
1 <style>	1 <style>

2	2

3 #media-links	3 #media

4 {	4 {

5 text-align: center;	5 text-align: center;

6 }	6 }

7	7

8 #media-links img	8 #media-links

9 {	9 {

10 max-height: 30px;	10 list-style: none;

11 max-width: 100%;	11 padding: 0;
juliandoucette 2017/07/31 20:00:28 What does this do? What does this do? ire 2017/08/01 10:04:05 On smaller screens, the image shouldn't expand pas Show quoted text On 2017/07/31 20:00:28, juliandoucette wrote: > What does this do? On smaller screens, the image shouldn't expand past 100%
	12 margin-bottom: 0;

12 }	13 }

13	14

14 #media-links a	15 #media-links li

15 {	16 {

16 display: inline-block;	17 display: inline-block;

17 position: relative;	18 position: relative;

18 margin: 0px 10px 20px;	19 margin: 0px 10px 20px;

19 }	20 }

20	21

21 #media-links a:after,	22 .publisher-logo

22 #media-links a:after

23 {	23 {

24 content: "";	24 max-height: 25px;

25 background-image: url("/images/icon-external-link.svg");	25 max-width: 100%;

26 background-size: 20px;	26 }
juliandoucette 2017/07/31 20:00:28 NIT: SVG background-image and background-size do n NIT: SVG background-image and background-size do not work in IE 8. Please avoid if easy (we don't have to support IE8 on eyeo.com, but it may not hurt - we can ask Jessica how many IE 8 visitors we get. I don't remember if we have done this before). ire 2017/08/01 10:04:05 Okay. I'm going to change this to using an actual Show quoted text On 2017/07/31 20:00:28, juliandoucette wrote: > NIT: SVG background-image and background-size do not work in IE 8. Please avoid > if easy (we don't have to support IE8 on http://eyeo.com, but it may not hurt - we can > ask Jessica how many IE 8 visitors we get. I don't remember if we have done this > before). Okay. I'm going to change this to using an actual image in the HTML.
	27

	28 .external-link-icon
	juliandoucette 2017/08/02 20:31:13 NIT: I think you could center this icon by positio NIT: I think you could center this icon by positioning [top/left: 0, height/width: 100%, line-height: 25px (100%), text-align: center]. And that would properly center the alt text without overflowing if the image fails to load.
	29 {

27 position: absolute;	30 position: absolute;

28 top: 50%;	31 top: 50%;

29 left: 50%;	32 left: 50%;

30 height: 20px;	33 height: 20px;

31 width: 20px;	34 width: 20px;

32 margin-left: -10px;	35 margin-left: -10px;

33 margin-top: -12px;	36 margin-top: -12px;

34 opacity: 0;	37 opacity: 0;

35 }	38 }

36	39

37 #media-links a:hover:after,	40 #media-links a:hover .external-link-icon,

38 #media-links a:focus:after	41 #media-links a:focus .external-link-icon

39 {	42 {

40 opacity: 1;	43 opacity: 1;

41 }	44 }

42	45

43 #media-links a:hover img,	46 #media-links a:hover .publisher-logo,

44 #media-links a:focus img	47 #media-links a:focus .publisher-logo

45 {	48 {

46 opacity: 0.2;	49 opacity: 0.2;
	juliandoucette 2017/08/02 20:31:13 NIT: It may be hard to see the external link icon NIT: It may be hard to see the external link icon at this opacity. Here are a few things that may help: - Add a white background to the image via CSS (so that the alt text has a white background too if the image doesn't load) - Change this opacity to 0.1 (I'm not sure about this. I think we want people who can't see well to see the effect as well as possible. And 0.1 may may the fade out too hard to see.)
47 }	50 }

48	51

	52 #media small

	53 {

	54 display: block;

	55 margin-bottom: 1em;

	56 }

	57

	58 @media (min-width: 620px) and (max-width: 930px)

	59 {

	60 #media-links

	61 {

	62 max-width: 600px;

	63 margin-right: auto;

	64 margin-left: auto;

	65 }

	66 }

	67

	68 @media (min-width: 930px)

	69 {

	70 #media small

	71 {

	72 display: none;

	73 }

	74 }

	75

49 </style>	76 </style>

LEFT	RIGHT