Skip to content

Commit efe78c7

Browse files
jeffharrelljeffharrell
committed
Pulling CSS and JS into their own files
1 parent 0f5f562 commit efe78c7

File tree

3 files changed

+126
-129
lines changed

3 files changed

+126
-129
lines changed

‎css/app.css‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
body {
2+
margin: 0 auto;
3+
padding: 20px;
4+
max-width: 980px;
5+
background: url(https://www.paypalobjects.com/webstatic/i/ex_ce2/scr/scr_content-bkgd.png) repeat #F8F8F8;
6+
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
7+
}
8+
9+
h1, h2, h3 {
10+
font-weight: normal;
11+
text-shadow: 0 1px 0 #fff;
12+
}
13+
14+
h1 {
15+
margin: 38px 0 0 0;
16+
font-size: 38px;
17+
line-height: 45px;
18+
color: #0079C1;
19+
}
20+
21+
h2 {
22+
font-size: 1.4em;
23+
line-height: 1.4em;
24+
}
25+
26+
h3 {
27+
margin-top: 40px;
28+
}
29+
30+
.nav-tabs {
31+
margin: 40px 0 0;
32+
}
33+
34+
.nav-tabs a {
35+
font-size: 20px;
36+
}
37+
38+
.example {
39+
position: relative;
40+
margin: 0;
41+
padding: 22px;
42+
background-color: white;
43+
border: 1px solid #DDD;
44+
border-top: 0;
45+
-webkit-border-bottom-right-radius: 4px;
46+
-webkit-border-bottom-left-radius: 4px;
47+
-moz-border-radius-bottomright: 4px;
48+
-moz-border-radius-bottomleft: 4px;
49+
border-bottom-right-radius: 4px;
50+
border-bottom-left-radius: 4px;
51+
}
52+
53+
.example .tryit {
54+
margin: 12px 0 -24px;
55+
}
56+
57+
.example pre {
58+
margin: 0 -23px;
59+
padding: 1em 24px;
60+
-webkit-border-radius: 0;
61+
-moz-border-radius: 0;
62+
border-radius: 0;
63+
}
64+
65+
.edit {
66+
float: right;
67+
}
68+
69+
.modal form {
70+
margin: 0;
71+
padding: 35px 20px 20px;
72+
}
73+
74+
@media (min-width: 0) and (max-width: 660px) {
75+
.nav-tabs > li > a {
76+
padding: 8px;
77+
font-size: 13px;
78+
font-weight: bold;
79+
}
80+
81+
.edit {
82+
float: none;
83+
}
84+
}

‎index.html‎

Lines changed: 2 additions & 129 deletions
Original file line numberDiff line numberDiff line change
@@ -5,92 +5,7 @@
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>PayPal Payment Buttons</title>
77
<link rel="stylesheet" href="css/bootstrap.min.css" />
8-
<style type="text/css">
9-
body {
10-
margin: 0 auto;
11-
padding: 20px;
12-
max-width: 980px;
13-
background: url(https://www.paypalobjects.com/webstatic/i/ex_ce2/scr/scr_content-bkgd.png) repeat #F8F8F8;
14-
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
15-
}
16-
17-
h1, h2, h3 {
18-
font-weight: normal;
19-
text-shadow: 0 1px 0 #fff;
20-
}
21-
22-
h1 {
23-
margin: 38px 0 0 0;
24-
font-size: 38px;
25-
line-height: 45px;
26-
color: #0079C1;
27-
}
28-
29-
h2 {
30-
font-size: 1.4em;
31-
line-height: 1.4em;
32-
}
33-
34-
h3 {
35-
margin-top: 40px;
36-
}
37-
38-
.nav-tabs {
39-
margin: 40px 0 0;
40-
}
41-
42-
.nav-tabs a {
43-
font-size: 20px;
44-
}
45-
46-
.example {
47-
position: relative;
48-
margin: 0;
49-
padding: 22px;
50-
background-color: white;
51-
border: 1px solid #DDD;
52-
border-top: 0;
53-
-webkit-border-bottom-right-radius: 4px;
54-
-webkit-border-bottom-left-radius: 4px;
55-
-moz-border-radius-bottomright: 4px;
56-
-moz-border-radius-bottomleft: 4px;
57-
border-bottom-right-radius: 4px;
58-
border-bottom-left-radius: 4px;
59-
}
60-
61-
.example .tryit {
62-
margin: 12px 0 -24px;
63-
}
64-
65-
.example pre {
66-
margin: 0 -23px;
67-
padding: 1em 24px;
68-
-webkit-border-radius: 0;
69-
-moz-border-radius: 0;
70-
border-radius: 0;
71-
}
72-
73-
.edit {
74-
float: right;
75-
}
76-
77-
.modal form {
78-
margin: 0;
79-
padding: 35px 20px 20px;
80-
}
81-
82-
@media (min-width: 0) and (max-width: 660px) {
83-
.nav-tabs > li > a {
84-
padding: 8px;
85-
font-size: 13px;
86-
font-weight: bold;
87-
}
88-
89-
.edit {
90-
float: none;
91-
}
92-
}
93-
</style>
8+
<link rel="stylesheet" href="css/app.css" />
949
</head>
9510
<body>
9611
<div id="page">
@@ -407,48 +322,6 @@ <h3>Find out more</h3>
407322

408323
<script src="js/jquery.min.js"></script>
409324
<script src="js/bootstrap.min.js"></script>
410-
<script>
411-
412-
$('.modal').on('hide', function () {
413-
var data = {},
414-
modal = $(this),
415-
example = modal.closest('.example'),
416-
code = example.find('code'),
417-
tryit = example.find('.tryit'),
418-
inputs = modal.find('.modal-body :input'),
419-
input, merchant, el, len, i;
420-
421-
// Build a map out of the form inputs
422-
for (i = 0, len = inputs.length; i < len; i++) {
423-
input = $(inputs[i]);
424-
425-
data[input.attr('name')] = {
426-
value: input.val()
427-
};
428-
}
429-
430-
// Create a script tag to use as the HTML
431-
el = document.createElement('script');
432-
433-
if (data.button && data.button.value === 'cart') {
434-
el.src = 'paypal-button-minicart.js?merchant=' + data.business.value;
435-
} else {
436-
el.src = 'paypal-button.js?merchant=' + data.business.value;
437-
}
438-
439-
for (key in data) {
440-
if (key !== 'business') {
441-
el.setAttribute('data-' + key, data[key].value);
442-
}
443-
}
444-
445-
code.text(el.outerHTML.replace(/data-/g, "\n data-").replace("></" + "script>", "\n></" + "script>"));
446-
447-
// Update the button
448-
tryit.empty();
449-
PAYPAL.apps.ButtonFactory.create(data.business.value, data, data.button, tryit[0]);
450-
});
451-
452-
</script>
325+
<script src="js/app.js"></script>
453326
</body>
454327
</html>

‎js/app.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
$('.modal').on('hide', function () {
3+
var data = {},
4+
modal = $(this),
5+
example = modal.closest('.example'),
6+
code = example.find('code'),
7+
tryit = example.find('.tryit'),
8+
inputs = modal.find('.modal-body :input'),
9+
input, merchant, el, len, i;
10+
11+
// Build a map out of the form inputs
12+
for (i = 0, len = inputs.length; i < len; i++) {
13+
input = $(inputs[i]);
14+
15+
data[input.attr('name')] = {
16+
value: input.val()
17+
};
18+
}
19+
20+
// Create a script tag to use as the HTML
21+
el = document.createElement('script');
22+
23+
if (data.button && data.button.value === 'cart') {
24+
el.src = 'paypal-button-minicart.js?merchant=' + data.business.value;
25+
} else {
26+
el.src = 'paypal-button.js?merchant=' + data.business.value;
27+
}
28+
29+
for (key in data) {
30+
if (key !== 'business') {
31+
el.setAttribute('data-' + key, data[key].value);
32+
}
33+
}
34+
35+
code.text(el.outerHTML.replace(/data-/g, "\n data-").replace("></" + "script>", "\n></" + "script>"));
36+
37+
// Update the button
38+
tryit.empty();
39+
PAYPAL.apps.ButtonFactory.create(data.business.value, data, data.button, tryit[0]);
40+
});

0 commit comments

Comments
 (0)