"ADD Updated Standalone fundraiser banner "

Fixes sugarlabs#579: Add standalone fundraiser banner above navigation bar - Introduces a new banner component for standalone fundraiser visibility. - Problem: The fundraiser section was not prominent on the site. - Solution: Placed the banner above navigation bar
bhagyashree980 · Dec 18, 2024 · a3defa2 · a3defa2
1 parent 43ea2fa
commit a3defa2
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 17 deletions.
diff --git a/_config.yml b/_config.yml
@@ -8,4 +8,5 @@ sass:
   sass_dir: css
 collections:
   faqs:
-    output: true
+    output: true
+show_fundraiser_banner: true
diff --git a/_includes/banner-mobile.html b/_includes/banner-mobile.html
@@ -1,4 +1,3 @@
-<body title="Donation ask.">
   <div class="d-flex">
     <p style="padding:10px 5% 0 5%;">Our goal is $25k this fall, and every contribution counts! Whether you give $3 or more, your tax-deductible donation will help us continue to provide a unique learning environment where youth can solve authentic tasks and learn by doing. <a href="{{ site.baseurl }}/community/2024/12/03/help-SL-continue-to-transform-education/">Read more</a> about how we can make a difference together and <a href="https://www.paypal.com/donate?campaign_id=NEAV3YL4H6B5S">donate today!</a></p>
   </div>
diff --git a/_includes/banner.css b/_includes/banner.css
@@ -0,0 +1,27 @@
+#fundraiser-banner {
+    background-color: #f8f9fa; /* Light gray background */
+    color: #333; /* Neutral text color */
+    border-bottom: 1px solid #ddd; /* Subtle bottom border */
+    font-family: Arial, sans-serif;
+    padding: 15px; /* Padding around the banner */
+    display: flex;
+    justify-content: space-between; /* Space between text and PayPal button */
+    align-items: center; /* Vertical alignment */
+    z-index: 1000; /* Ensure it's above other elements */
+    position: relative;
+  }
+
+  #fundraiser-banner p {
+    margin: 0;
+    font-size: 16px;
+  }
+
+  #donate-button-container {
+    display: inline-block;
+  }
+
+  #fundraiser-banner .btn {
+    margin-left: 10px;
+    font-size: 0.9rem;
+  }
+
diff --git a/_includes/banner.html b/_includes/banner.html
@@ -1,20 +1,26 @@
-<div class="d-flex">
-  <p style="padding:10px 5% 0 5%;">Our goal is $25k this fall, and every contribution counts! Whether you give $3 or more, your tax-deductible donation will help us continue to provide a unique learning environment where youth can solve authentic tasks and learn by doing. <a href="{{ site.baseurl }}/community/2024/12/03/help-SL-continue-to-transform-education/">Read more</a> about how we can make a difference together and <a href="https://www.paypal.com/donate?campaign_id=NEAV3YL4H6B5S">donate today!</a></p>
-  <!-- Paypal Start -->
-  <div id="donate-button-container">
+<div id="fundraiser-banner" class="d-flex align-items-center">
+  <p style="padding: 10px 5% 0 5%; margin: 0;">
+    Our goal is $25k this fall, and every contribution counts! Whether you give $3 or more, your tax-deductible donation will help us continue to provide a unique learning environment where youth can solve authentic tasks and learn by doing.
+    <a href="{{ site.baseurl }}/community/2024/12/03/help-SL-continue-to-transform-education/">Read more</a>
+    about how we can make a difference together and 
+    <a href="https://www.paypal.com/donate?campaign_id=NEAV3YL4H6B5S" class="btn btn-primary btn-sm">Donate today!</a>
+  </p>
+
+  <!-- PayPal Button -->
+  <div id="donate-button-container" class="ml-3">
     <div id="donate-button"></div>
     <script src="https://www.paypalobjects.com/donate/sdk/donate-sdk.js" charset="UTF-8"></script>
     <script>
       PayPal.Donation.Button({
-	  env:'production',
-	  hosted_button_id:'PTEFYZE5PUWNL',
-	  image: {
-	      src:'https://www.paypalobjects.com/images/Debit_Credit_APM.svg',
-	      alt:'Donate with PayPal button',
-	      title:'Donate to Sugar Labs today!',
-	  }
+        env: 'production',
+        hosted_button_id: 'PTEFYZE5PUWNL',
+        image: {
+          src: 'https://www.paypalobjects.com/images/Debit_Credit_APM.svg',
+          alt: 'Donate with PayPal button',
+          title: 'Donate to Sugar Labs today!',
+        }
       }).render('#donate-button');
     </script>
   </div>
-  <!-- Paypal End -->
 </div>
+
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -2,13 +2,15 @@
 <header class="large" id="firstHeader">
   <div class="row">
     <div class="container">
+    	<div>
+        {% include banner.html %}
+      </div>
+
       <nav class="navbar navbar-default navbar-expand-lg fixed-top align-items-center d-flex justify-content-between     pb-0  pt-0">
         <div class="logo1" id="navLogo">
           <a href="{{ site.baseurl }}/">{% include logo.svg %}</a>
         </div>
-	<div>
-	  {% include banner.html %}
-	</div>
+
         <div class="d-flex justify-content-center">
           <div class="zeroMarPadBtm ">
             <ul class="mr-5  navbar-nav" id="menuBar">

diff --git a/_layouts/base.html b/_layouts/base.html
@@ -39,6 +39,7 @@
             } 
         </script>
         <!-- CSS files-->
+        <link rel="stylesheet"  href="{{ site.baseurl }}/assets/css/banner.css"/>
         <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/bootstrap.css" />
         <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/airspace.css" />
         <link rel="stylesheet" type="text/css" href="{{ site.baseurl }}/css/custom.css" />
@@ -75,6 +76,11 @@
         </script>
     </head>
     <body {{ page.bodyExt }}>
+        {% if site.show_fundraiser_banner %}
+        {% include banner.html %}
+    {% endif %}
+
+
 
     {{ content }}