Align with Node sample

adyen-examples · Sep 19, 2023 · 95dea97 · 95dea97
1 parent 03fe478
commit 95dea97
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/giving-example/src/main/resources/static/css/application.css b/giving-example/src/main/resources/static/css/application.css
@@ -84,7 +84,6 @@ a:hover {
 
 .main-container {
   margin: auto;
-  max-width: 1048px;
   padding: 0 16px;
   display: flex;
   flex-direction: column;
@@ -93,7 +92,6 @@ a:hover {
 .integration-list {
   display: flex;
   margin-top: 6%;
-  max-width: 1048px;
   flex-wrap: wrap;
   justify-content: space-between;
   list-style: none;
@@ -118,22 +116,21 @@ a:hover {
 }
 
 .integration-list-item {
-  background: #f7f8f9;
-  border-radius: 6px;
-  flex: 1 1 0;
-  margin: 4px;
-  min-width: 40%;
+  background: #fcfcfc;
+  border-radius: 8px;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
-  border: 1px solid #f7f8f9;
+  border: 3px solid black;
+  margin: 32px 0px 16px 0px;
+  width: 100%;
 }
 
 .integration-list-item:hover {
   box-shadow: 0 16px 24px 0 #e5eaef;
   text-decoration: none;
-  border: 1px solid #06f;
+  border: 3px solid #0abf53;
 }
 
 @media (min-width: 768px) {
@@ -154,22 +151,25 @@ a:hover {
   justify-content: center;
 }
 
+
 @media (min-width: 768px) {
   .integration-list-item-link {
+    max-width:100%;
     padding-left: 28px;
     padding-bottom: 28px;
     padding-right: 28px;
     padding-top: 28px;
   }
 }
 
+
+
 .integration-list-item-title {
   margin: 0;
   text-align: center;
   color: #00112c;
   font-size: 1em;
   font-weight: 700;
-  margin: 10px 0 0;
 }
 
 @media (min-width: 768px) {
@@ -208,6 +208,12 @@ a:hover {
   color: #00112c;
 }
 
+.giving-view-container {
+  background-color: #f1f1f1;
+  padding: 16px;
+}
+
+
 /* end Index page */
 
 /* Cart preview page */

diff --git a/giving-example/src/main/resources/templates/index.html b/giving-example/src/main/resources/templates/index.html
@@ -9,15 +9,18 @@
   <div class='main-container'>
     <div class="info">
       <h1>Adyen Giving - Donations demo</h1>
-      <p>
-        This is a sample designed to demonstrate the <a href="https://docs.adyen.com/online-payments/donations/web-component">Adyen Giving</a> donations workflow.
-      </p>
-      <p>
-        First make a test payment using one of our test card numbers, so you can see the donation screen appear.
-        You can find more test card numbers <a href="https://docs.adyen.com/development-resources/test-cards/test-card-numbers">here</a>.
-      </p>
-      <p>To learn more about client-side integration solutions, check out <a href="https://docs.adyen.com/checkout">Online
-        payments.</a></p>
+      <div class="giving-view-container">
+        <p>
+          This is a sample designed to demonstrate the <a href="https://docs.adyen.com/online-payments/donations/web-component">Adyen Giving</a> donations workflow.
+        </p>
+        <p>
+          First make a test payment using one of our test card numbers, so you can see the donation screen appear.
+          You can find more test card numbers <a href="https://docs.adyen.com/development-resources/test-cards/test-card-numbers">here</a>.
+        </p>
+        <p>To learn more about client-side integration solutions, check out <a href="https://docs.adyen.com/checkout">Online
+          payments.</a></p>
+      </div>
+    </div>
     </div>
     <ul class="integration-list">
       <li class="integration-list-item">