Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Side by Side Diff: index.html

Issue 8681060: share-page: Implement final design (Closed)
Patch Set: Created Nov. 5, 2012, 8:36 a.m.
Left:
Right:
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff | Download patch
« no previous file with comments | « googleplus.png ('k') | twitter.png » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(Empty)
1 <!DOCTYPE html>
2 <html>
3 <head>
4
5 <style>
6 body
7 {
8 width: 680px;
9 height: 570px;
10 margin: auto;
11 padding-left: 30px;
12 border: 5px solid #a42c23;
13 background: white;
14 }
15
16 #headline
17 {
18 height: 100px;
19 font-family: Arial, Helvetica, sans;
20 font-size: 28px;
21 text-align: center;
22 margin: 0;
23 color: #a42c23;
24
25 display: -webkit-box;
26 -webkit-box-orient: vertical;
27 -webkit-box-pack: center;
28
29 display: box;
30 box-orient: vertical;
31 box-pack: center;
32 }
33
34 #facebook, #twitter, #gplus
35 {
36 margin-bottom: 10px;
37 padding-left: 140px;
38 width: 500px;
39 height: 140px;
40 background-repeat: no-repeat;
41 background-size: 140px;
42 background-position: 0px 50%;
43
44 display: -webkit-box;
45 -webkit-box-orient: vertical;
46 -webkit-box-pack: center;
47
48 display: box;
49 box-orient: vertical;
50 box-pack: center;
51
52 border-radius: 7px;
53 }
54
55 #facebook
56 {
57 background-image: url("/facebook.png");
58 background-color: #8e9bb2;
59 }
60
61 #twitter
62 {
63 background-image: url("/twitter.png");
64 background-color: #64abcb;
65 }
66
67 #gplus
68 {
69 background-image: url("/googleplus.png");
70 background-color: #cf6d5c;
71 }
72
73 .widget-container
74 {
75 width: 490px;
76 height: 118px;
77 border-radius: 0px 3px 3px 0px;
78 background-color: white;
79 }
80
81 .fb-like {
82 margin-top: 30px;
83 margin-left: 12px;
84 }
85
86 #twitter iframe {
87 margin-top: 40px;
88 margin-left: 10px;
89 }
90 </style>
91 <script><!--
92 (function()
93 {
94 function initFacebook(locale)
95 {
96 var map = {
97 "en": "en_US",
98 "he": "he_IL",
99 "ko": "ko_KR",
100 };
101 if (locale in map)
102 locale = map[locale];
103
104 // HACK AHEAD
105 if (locale.length == 2)
106 locale = locale + "_" + locale.toUpperCase();
107
108 (function(d, s, id) {
109 var js, fjs = d.getElementsByTagName(s)[0];
110 if (d.getElementById(id)) return;
111 js = d.createElement(s); js.id = id;
112 js.src = "//connect.facebook.net/" + locale + "/all.js#xfbml=1";
113 fjs.parentNode.insertBefore(js, fjs);
114 }(document, 'script', 'facebook-jssdk'));
115 }
116
117 function initTwitter()
118 {
119 !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementBy Id(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js ";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
120 }
121
122 function initGooglePlus()
123 {
124 var po = document.createElement('script'); po.type = 'text/javascript'; po.a sync = true;
125 po.src = 'https://apis.google.com/js/plusone.js';
126 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefor e(po, s);
127 }
128
129 function sendDimensions()
130 {
131 if (window.parent === window)
132 return;
133
134 var dimensions = {
135 width: document.body.offsetWidth,
136 height: document.body.offsetHeight
137 };
138 window.parent.postMessage(dimensions, "*");
139 }
140
141 window.addEventListener("DOMContentLoaded", function()
142 {
143 var locale = window.location.pathname.replace(/^\/+/, "").replace(/\/.*/, "" );
144 if (/^\w\w(_\w\w)?/.test(locale))
145 {
146 // Set language for Twitter
147 var links = document.getElementById("twitter").getElementsByTagName("a");
148 for (var i = 0; i < links.length; i++)
149 links[i].setAttribute("data-lang", locale.toLowerCase());
150
151 // Set language for Google+
152 window.___gcfg = {lang: locale};
153 }
154 else
155 locale = "en";
156
157 initFacebook(locale);
158 initTwitter();
159 initGooglePlus();
160 sendDimensions();
161 }, false);
162 })();
163 --></script>
164
165 </head>
166 <body>
167
168 <div id="headline">Think Adblock Plus is worth sharing?</div>
169
170 <div id="facebook">
171 <div class="widget-container">
172 <div id="fb-root"></div>
173 <div class="fb-like" data-href="https://www.facebook.com/adblockplus" data-s end="true" data-width="450" data-show-faces="true"></div>
174 </div>
175 </div>
176
177 <div id="twitter">
178 <div class="widget-container">
179 <a href="https://twitter.com/AdblockPlus" class="twitter-follow-button" data -show-count="false" data-size="large">@AdblockPlus folgen</a>
180 <a href="https://twitter.com/share" class="twitter-share-button" data-url="h ttps://adblockplus.org" data-text="I browse the web without annoying ads thanks to @AdblockPlus!" data-size="large">Tweet</a>
181 </div>
182 </div>
183
184 <div id="gplus">
185 <div class="widget-container">
186 <div class="g-plus" data-href="https://plus.google.com/110020691898167279887 " data-width="490" data-rel="publisher"></div>
187 </div>
188 </div>
189
190 </body>
191 </html>
OLDNEW
« no previous file with comments | « googleplus.png ('k') | twitter.png » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld