Add option to support align the image center vertically for donation …

…launcher.
greenpeace · Mar 2, 2020 · 2f2689b · 2f2689b
1 parent 002fc73
commit 2f2689b
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 21 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,4 +4,5 @@
 /classes/backups
 .tern-port
 .dir-locals.el
-.ac-php-conf.json
+.ac-php-conf.json
+yarn.lock
diff --git a/classes/class-p4ct-metabox-register.php b/classes/class-p4ct-metabox-register.php
@@ -941,6 +941,15 @@ public function register_main_options_metabox() {
 			)
 		);
 
+		$cmb_options->add_field(
+			array(
+				'name'    => esc_html__( 'Align the image to vertical center for donation launcher', 'gpea_theme_backend' ),
+				'desc'    => esc_html__( 'Align the image center vertically.', 'gpea_theme_backend' ),
+				'id'      => 'gpea_post_donation_launcher_image_align_center',
+				'type'    => 'checkbox',
+			)
+		);
+
 	}
 
 	/**

diff --git a/frontend/scss/organisms/_section-post-donation-launcher.scss b/frontend/scss/organisms/_section-post-donation-launcher.scss
@@ -3,7 +3,7 @@
   margin-top: 20px;
   padding: 40px 0 20px !important;
   background: $color-lightblue !important;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4);  
+  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.4);
 
   @include lessThan('sm') {
     padding: 40px 0 20px !important;
@@ -16,16 +16,19 @@
   @include lessThan('sm') {
     .post-donation-launcher__image {
       display: none;
-    }    
+    }
   }
 
   @include greaterThan('sm') {
-    > div {
+    > .ct-container {
       display: flex;
       justify-content: space-between;
+      padding: 0 65px;
 
       .post-donation-launcher__text {
-        width: 62%;
+        // width: 62%;
+        flex: 1;
+        margin-right: 1rem;
       }
     }
 
@@ -38,7 +41,21 @@
         width: 100%;
         bottom: -20px;
       }
-    }    
+    }
+
+    &.align-items-center {
+      > .ct-container {
+        align-items: center;
+      }
+
+      .post-donation-launcher__image {
+        img {
+          position: relative;
+          bottom: 0;
+        }
+
+      }
+    }
   }
 }
 

diff --git a/single.php b/single.php
@@ -141,7 +141,8 @@
 	'intro_donation_launcher' => isset( $options['gpea_post_donation_launcher_text'] ) ? $options['gpea_post_donation_launcher_text'] : '',
 	'donation_launcher_link' => isset( $options['gpea_post_donation_launcher_link'] ) ? $options['gpea_post_donation_launcher_link'] : '',
 	'i_support' => isset( $options['gpea_post_donation_launcher_label'] ) ? $options['gpea_post_donation_launcher_label'] : '',
-	'donation_launcher_img' => isset( $options['gpea_post_donation_launcher_image'] ) ? $options['gpea_post_donation_launcher_image'] : '',	
+	'donation_launcher_img' => isset( $options['gpea_post_donation_launcher_image'] ) ? $options['gpea_post_donation_launcher_image'] : '',
+	'donation_launcher_img_align_center' => isset( $options['gpea_post_donation_launcher_image_align_center'] ) ? $options['gpea_post_donation_launcher_image_align_center'] : '',
 	'related_news' => __( 'Related news', 'gpea_theme' ),
 	'share' => __( 'Share', 'gpea_theme' ),
 ];

diff --git a/static/css/style.css b/static/css/style.css
diff --git a/static/css/style.css.map b/static/css/style.css.map
diff --git a/static/js/donation.js b/static/js/donation.js
diff --git a/static/js/script.js b/static/js/script.js
diff --git a/static/js/search.js b/static/js/search.js
diff --git a/static/js/world.js b/static/js/world.js
diff --git a/templates/single.twig b/templates/single.twig
@@ -51,14 +51,14 @@
         <span>{{ strings.author }} {{ post.author.name }}</span>
       </div>
 
-      {{ post.content|e('wp_kses_post')|raw }}      
+      {{ post.content|e('wp_kses_post')|raw }}
 
     </section>
 
   </article>
 
   {%if (show_article_donation_launcher=='on') %}
-  <section class="section-post-donation-launcher">
+  <section class="section-post-donation-launcher {%if (strings.donation_launcher_img_align_center=='on') %}align-items-center{%endif%}">
 		<div class="ct-container">
       <div class="post-donation-launcher__text">
         <h2>{{ strings.article_donation_launcher }}</h2>
@@ -68,7 +68,7 @@
       <div class="post-donation-launcher__image">
         <img src="{{ strings.donation_launcher_img }}" alt="" title="">
       </div>
-      
+
     </div>
   </section>
   <div class="section-post-donation-launcher__border-bottom"></div>