redesign

updateWebPaymentdata example fix
PaylineByMonext · Dec 27, 2018 · 4d3d54f · 4d3d54f
1 parent a310f3a
commit 4d3d54f
Show file tree

Hide file tree

Showing 15 changed files with 376 additions and 432 deletions.
diff --git a/examples/ajax/step0Form.php b/examples/ajax/step0Form.php
@@ -1,6 +1,5 @@
 <form action="ajax.php" method="post" class="payline-form">
 	<fieldset>
-		<h4>Configuration</h4>
 		<div class="row">
 			<label for="accessKeyRef">web2token ref.</label>
 			<input type="text" name="accessKeyRef" id="accessKeyRef" disabled="true" value="<?php echo $_SESSION['ACCESS_KEY_REF']?>">

diff --git a/examples/demos/ajax.php b/examples/demos/ajax.php
@@ -34,22 +34,17 @@
 	</head>
 
 	<body>
+	<?php
+	include	'logged.php';
+	?>
+		<div id="wrapper" class="plnBox">
 		<div id="header">
-			<div id="header-inside">
-				<div id="logo">
-					<h1><a href="http://www.payline.com"><span>payline</span></a></h1>
-					<p>by Monext</p>
-				</div>
-				<?php $activeTab = 'ajax'; include 'tabs.php';?>
-		  </div>
+		<?php
+		$activeTab = 'ajax';
+		include 'tabs.php';
+		?>
 		</div>
-
-		<div id="wrapper">
 			<div id="container">
-				<div id="content">
-					<?php include 'logged.php';?>
-					<h2>API Ajax</h2>
-                    <p id="info">Demo that shows the usage of Payline Ajax API</p>
                     <div id="demo">
                     <?php
                     $payline = new PaylineSDK(
@@ -407,7 +402,6 @@
                     }
                     ?>
 					</div>
-				</div>
 				<span class="clr"></span>
 			</div>
 		</div>

diff --git a/examples/demos/css/forms.css b/examples/demos/css/forms.css
@@ -1,15 +1,16 @@
 /* @group Forms */
 form.payline-form {
 	font-size: 11px;
+	/*
 	padding: 10px 30px;
 	border: 1px solid #ddd;
 	background: #f9f9f9;
 	margin-bottom: 10px;
+	*/
 }
 .payline-form fieldset {
 	margin-bottom: 1em;
 	padding-bottom: 1em;
-	border-bottom: 1px solid #eee;
 }
 .payline-form .row {
 	clear : both;

diff --git a/examples/demos/css/header.css b/examples/demos/css/header.css
@@ -15,34 +15,18 @@ div#logo h1 a span, div#logo p {
 }
 
 div#header {
-	height: 80px;
-	border-bottom: #eeeeee 8px solid;
-	background: #FFF;
-}
-
-div#header-inside {
-	font-family: Lucida Grande, Arial, Helvetica;
-	width: 1000px;
-	height: 66px;
-	margin: 0 auto;
-	background: url(../img/header_bg.gif) repeat-x;
-}
-
-
-div#logo h1 a {
-	background: url(../img/Payline_fr.png) no-repeat;
-	height: 47px;
-	width: 123px;
-	float: left;
+	background: #7b7f81;
+	text-align: center;
+	margin-top: 3px;
+	margin-right: 3px;
+	margin-left: 3px;
+	margin-bottom: 3px;
 }
 
 ul#menu {
 	clear: both;
-	float: right;
 	list-style: none;
 	position: relative;
-	top: -14px;
-	right: 50px;
 }
 
 ul#menu li {
@@ -61,31 +45,34 @@ ul#menu li a {
 	height: 15px;
 	padding: 5px 0;
 	display: block;
+	/*
 	background-image: url(../img/tab.gif);
 	background-repeat: no-repeat;
 	background-position: center left;
+	*/
+	background-color: #5E5E5E;
 	font-size: 11px;
 }
 
 ul#menu li a:hover,
 ul#menu li a:active {
-	background-position: top left;
+	/*background-position: top left;*/
+	background-color: #FFFFFF;
 }
 
 ul#menu li a.selected,
 ul#menu li a.on {
-	background-position: bottom left;
+	/*background-position: bottom left;*/
+	background-color: #666666;
 }
 
 /*footer*/
 
 body #footer {
 	background: #fff;
-	border-top: 8px solid #eeeeee;
 	font-size: 9px;
 	color: #595965;
-	padding: 15px 0;
-	height: 1%; /*crazy ie7...*/
+	padding: 10px 0;
 	text-align: center;
 }
 
@@ -127,4 +114,10 @@ span.PROD {
 	background-color: #FF0000;
 	color: #FFFFFF;
 	padding: 2px;
+}
+
+span.AX17 {
+	background-color: #FFCC33;
+	color: #000000;
+	padding: 2px;
 }
diff --git a/examples/demos/css/style.css b/examples/demos/css/style.css
@@ -5,8 +5,7 @@ body {
 }
 
 #wrapper {
-	background: #fff;
-	padding: 15px 0;
+	background: #FFF;
 }
 
 #container {
@@ -68,10 +67,12 @@ span.clr {
 
 a:link, a:visited {
 	color: #3d4d5b;
+	text-decoration: none;
 }
 
 a:hover, a:active {
 	color: #D15227;
+	text-decoration: none;
 }
 
 a.backtoform {
@@ -89,10 +90,6 @@ ol li, ul.start li {
 	list-style-type: decimal;
 	margin-left: 2em;
 }
-span.title {
-	color: #e6335d;
-	font-weight: bold;
-}
 
 /* @group Demo Info */
 
@@ -110,6 +107,7 @@ h4 {
 	/*border-bottom: 1px solid #eee;*/
 	padding-bottom: 3px;
 	margin-bottom: 7px;
+	margin-left: 4px;
 }
 
 p#info {
@@ -135,7 +133,6 @@ a#exampleonly {
 h3 {
 	font-size: 15px;
 	color: #6F7477;
-	border-bottom: 1px solid #eee;
 	padding-bottom: 3px;
 	margin-bottom: 7px;
 }
@@ -294,3 +291,187 @@ span.mailpaymentstatus5 { /* 5 = expired */
 	background-color: #A20506;
 	font-size: 16px;
 }
+
+.plnBox {
+	width: 950px;
+	border: 2px solid #7b7f81;
+	margin-left: auto;
+	margin-right: auto;
+	padding: 5 5 5 5; /*top right bottom left*/
+}
+
+span.title {
+	background-color: #7b7f81;
+	text-align: center;
+	display: inline-block;
+	width: 100%;
+	font-family: "Verdana";
+	font-size: 26px;
+	color: white;
+	padding: 5 0 5 0; /*top right bottom left*/
+	Margin: 0 0 20 0;
+}
+
+span.toptab {
+	background-color: #7b7f81;
+	text-align: center;
+	display: inline;
+	font-family: "Verdana";
+	font-size: 26px;
+	color: white;
+	padding-right: 10px;
+	padding-left: 10px;
+	padding-top: 3px;
+	padding-bottom: 4px;
+}
+
+span.toptab.active{
+	background-color: #eeeeee;
+}
+
+span.toptab:hover{
+	background-color: #CCCCCC;
+}
+
+span.error {
+	color: #FF0000;
+	text-align: center;
+	display: inline-block;
+	width: 100%;
+	font-family: "Verdana";
+	font-size: 14px;
+}
+
+span.info {
+	color: #00BB00;
+	text-align: center;
+	display: inline-block;
+	width: 100%;
+	font-family: "Verdana";
+	font-size: 14px;
+}
+
+span.label {
+	text-align: right;
+	width: 300px;
+	font-family: "Verdana";
+	font-size: 12px;
+	font-weight: bold;
+	color: #7b7f81;
+	display: inline-block;
+  	padding-bottom: 7px;
+}
+
+span.link {
+	text-align: right;
+	width: 100%;
+	font-family: "Verdana";
+	font-size: 13px;
+	display: inline-block;
+	color: #333333;
+}
+
+span.value {
+	font-family: "Verdana";
+	font-size: 14px;
+	font-weight: bold;
+}
+
+.user-row{
+	display: inline-block;
+	text-align: center;
+	width: 100%;
+	font-family: "Verdana";
+	font-size: 20px;
+}
+
+.merchant-row{
+	margin-bottom: 1px; 
+}
+
+.merchant-row:hover{
+	background: #CCCCCC;  
+}
+
+.merchant-env {
+	display: inline-block;
+	text-align: center;
+	width: 70px;
+}
+
+.merchant-id {
+	display: inline-block;
+	text-align: left;
+	width: 140px;
+	font-family: "Verdana";
+	font-size: 14px;
+}
+
+.merchant-name {
+	display: inline-block;
+	text-align: left;
+	width: 300px;
+	font-family: "Verdana";
+	font-size: 12px;
+}
+
+.merchant-suppr {
+	display: inline-block;
+	text-align: right;
+	width: 80px;
+	font-family: "Verdana";
+	font-size: 12px;
+}
+
+input,button {
+    border: 1px solid #9F9F9F;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    font-size: 11px;
+    padding: 4px;
+    outline: 0;
+    /* -webkit-appearance: none; */
+    background-color: #f6f6f6;
+    width: 165px;
+}
+
+span.DEV {
+	background-color: #000000;
+	color: #FFFFFF;
+	padding: 2px;
+	font-family: "Verdana";
+	font-size: 10px;
+}
+
+span.INT {
+	background-color: #7F7F7F;
+	color: #FFFFFF;
+	padding: 2px;
+	font-family: "Verdana";
+	font-size: 10px;
+}
+
+span.HOMO {
+	background-color: #22B14C;
+	color: #FFFFFF;
+	padding: 2px;
+	font-family: "Verdana";
+	font-size: 10px;
+}
+
+span.PROD {
+	background-color: #FF0000;
+	color: #FFFFFF;
+	padding: 2px;
+	font-family: "Verdana";
+	font-size: 10px;
+}
+
+span.AX17 {
+	background-color: #FFCC33;
+	color: #000000;
+	padding: 2px;
+	font-family: "Verdana";
+	font-size: 10px;
+}