forked from LiveCarta/PayPal-PHP-SDK
Cosmetic Changes to Sample UI
- Preetified it a bit - Changed PayPal Logo to PayPal Developer - Some CSS and JS changes - Enabled Anchor Links for each sample
This commit is contained in:
japatel
@@ -53,8 +53,8 @@ class ResultPrinter
|
||||
if (self::$printResultCounter == 0) {
|
||||
include "header.html";
|
||||
echo '
|
||||
<div class="row header"><div class="col-md-3 pull-left"><br /><a href="../index.php"><h3>❮❮ Back to Samples</h3></a><br /><br /></div> <br />
|
||||
<div class="col-md-2 pull-right"><img src="../images/pp_v_rgb.png" height="70" /></div> </div><div class="clearfix visible-xs-block"></div><br />';
|
||||
<div class="row header"><div class="col-md-5 pull-left"><br /><a href="../index.php"><h1 class="home">❮❮ Back to Samples</h1></a><br /></div> <br />
|
||||
<div class="col-md-4 pull-right"><img src="https://www.paypalobjects.com/webstatic/developer/logo2_paypal_developer_2x.png" class="logo" width="300"/></div> </div>';
|
||||
echo '<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">';
|
||||
}
|
||||
self::$printResultCounter++;
|
||||
|
||||
@@ -32,6 +32,9 @@
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
.panel-title a, .home{
|
||||
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
|
||||
}
|
||||
h1.error, h2.error, h3.error, h4.error, h5.error {
|
||||
color: red;
|
||||
}
|
||||
@@ -45,12 +48,16 @@
|
||||
margin-left: 0px;
|
||||
}
|
||||
.header {
|
||||
background: -webkit-linear-gradient(-9deg, #428bca 75%, white 35%);
|
||||
background: #fff url("https://www.paypalobjects.com/webstatic/developer/banners/Braintree_desktop_BG_2X.jpg") no-repeat top right;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
color: #EEE;
|
||||
}
|
||||
.header a:link, .header a:visited, .header a:hover, .header a:active {
|
||||
text-decoration: none;
|
||||
color: #FFF;
|
||||
|
||||
}
|
||||
/* Sticky footer styles
|
||||
-------------------------------------------------- */
|
||||
@@ -70,7 +77,7 @@
|
||||
width: 100%;
|
||||
/* Set the fixed height of the footer here */
|
||||
min-height: 60px;
|
||||
background: -webkit-linear-gradient(-9deg, #428bca 70%, white 25%);
|
||||
padding-top: 15px;
|
||||
}
|
||||
.footer .footer-links, .footer .footer-links li {
|
||||
display: inline-block;
|
||||
@@ -78,7 +85,6 @@
|
||||
font-size: 110%;
|
||||
}
|
||||
.footer a {
|
||||
color: #FFF;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -41,6 +41,28 @@ if (PHP_SAPI == 'cli') {
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
||||
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<style>
|
||||
/* Header Links */
|
||||
/* Adopted from http://ben.balter.com/2014/03/13/pages-anchor-links/ */
|
||||
.header-link {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
opacity: 0;
|
||||
|
||||
}
|
||||
|
||||
h2:hover .header-link,
|
||||
h3:hover .header-link,
|
||||
h4:hover .header-link,
|
||||
h5:hover .header-link,
|
||||
h6:hover .header-link {
|
||||
opacity: 1;
|
||||
}
|
||||
.list-group-item h5 {
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
/* End Header Links */
|
||||
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@@ -50,19 +72,29 @@ if (PHP_SAPI == 'cli') {
|
||||
background-color: #EEE;
|
||||
}
|
||||
|
||||
.jumbotron{
|
||||
background: #fff url("https://www.paypalobjects.com/webstatic/developer/banners/Braintree_desktop_BG_2X.jpg") no-repeat top right;
|
||||
-webkit-background-size: cover;
|
||||
-moz-background-size: cover;
|
||||
-o-background-size: cover;
|
||||
background-size: cover;
|
||||
}
|
||||
.jumbotron{
|
||||
margin-bottom: 0px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.jumbotron h2, .jumbotron p, h5{
|
||||
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
.jumbotron {
|
||||
background: white;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: #428bca;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.footer-div a {
|
||||
color: #000;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -76,18 +108,16 @@ if (PHP_SAPI == 'cli') {
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.jumbotron {
|
||||
background: -webkit-linear-gradient(-9deg, white 30%, #428bca 25%);
|
||||
color: #EEE;
|
||||
background-color: #FFF;
|
||||
}
|
||||
|
||||
.footer-div a {
|
||||
color: #EEE;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: fixed;
|
||||
top: 40px;
|
||||
top: 80px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -106,7 +136,7 @@ if (PHP_SAPI == 'cli') {
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
min-height: 60px;
|
||||
background: -webkit-linear-gradient(-9deg, #428bca 70%, white 25%);
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.footer-links, .footer-links li {
|
||||
@@ -121,6 +151,11 @@ if (PHP_SAPI == 'cli') {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #428bca;
|
||||
;
|
||||
}
|
||||
|
||||
.fixed {
|
||||
position: fixed;
|
||||
}
|
||||
@@ -142,19 +177,16 @@ if (PHP_SAPI == 'cli') {
|
||||
<div class="jumbotron">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-md-4 pull-left">
|
||||
<img src="images/pp_v_rgb.png" class="logo" height="200"/>
|
||||
<div class="col-md-3 pull-left">
|
||||
<img src="https://www.paypalobjects.com/webstatic/developer/logo2_paypal_developer_2x.png" class="logo" width="300"/>
|
||||
</div>
|
||||
<div class="col-md-8 pull-right">
|
||||
<h1> REST API Samples</h1>
|
||||
<div class="col-md-9 pull-right">
|
||||
<h2>// REST API Samples</h2>
|
||||
|
||||
<p>These examples are created to experiment with the PayPal-PHP-SDK capabilities. Each examples
|
||||
are
|
||||
designed to demonstrate the default use-cases in each segment.
|
||||
Many examples should be executable, and should allow you to experience the default behavior
|
||||
of our
|
||||
sdk, to expedite your integration experience.</p>
|
||||
|
||||
designed to demonstrate the default use-cases in each segment.</p>
|
||||
<br />
|
||||
<div class="footer-div">
|
||||
<ul class="footer-links">
|
||||
<li>
|
||||
@@ -196,7 +228,7 @@ if (PHP_SAPI == 'cli') {
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-9">
|
||||
<div class="col-md-9 samples">
|
||||
<div class="panel panel-primary">
|
||||
<div class="panel-heading">
|
||||
<h3 id="payments" class="panel-title"><a
|
||||
@@ -1151,6 +1183,7 @@ if (PHP_SAPI == 'cli') {
|
||||
</div>
|
||||
</div>
|
||||
<!-- /container -->
|
||||
<hr />
|
||||
<footer class="footer">
|
||||
<div class="container">
|
||||
<div class="footer-div">
|
||||
@@ -1178,6 +1211,7 @@ if (PHP_SAPI == 'cli') {
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/scrollspy.min.js"></script>
|
||||
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js"></script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
@@ -1185,6 +1219,19 @@ if (PHP_SAPI == 'cli') {
|
||||
$(".execute").hide();
|
||||
}
|
||||
});
|
||||
$(function() {
|
||||
return $(".samples h5, h6").each(function(i, el) {
|
||||
var $el, icon, id;
|
||||
$el = $(el);
|
||||
id = CryptoJS.MD5(($el.html())).toString();
|
||||
//id = $el.attr('id');
|
||||
icon = '<i class="fa fa-link"></i>';
|
||||
if (id) {
|
||||
$el.parent().parent().parent().attr('id', id);
|
||||
return $el.prepend($("<a />").addClass("header-link").attr('title', "Anchor Link for this Sample").attr("href", "#" + id).html(icon));
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user