fix text padding on mobile, made what our members say visible

CheeseLad · CheeseLad · commit 1d2293bf3e4b · 2024-09-07T03:12:10.000+01:00
diff --git a/mps_site/data/homepage.py b/mps_site/data/homepage.py
@@ -122,7 +122,7 @@
     "subtitle": "Our Society has won many awards over the years!",
     "awards": [
       {
-        "award": "Best Society in a Cultural/Academic/Social Field",
+        "award": "Best Society in a Cultural / Academic / Social Field",
         "sponsor": "DCU Society Awards",
         "year": "2024",
         "award_icon": "fa-solid fa-trophy",
diff --git a/mps_site/static/css/style.css b/mps_site/static/css/style.css
@@ -90,6 +90,8 @@ h4 {
 
 h3, h5 {
   text-align: center; 
+  padding-left: 10px;
+  padding-right: 10px;
   color: var(--text-color);
 }
 
diff --git a/mps_site/templates/components/home/about_us.html b/mps_site/templates/components/home/about_us.html
@@ -21,10 +21,10 @@ <h1>About Us</h1>
         </div>
       </div>
       <div class="center-contents">
-        <a class="btn btn-primary mt-4" style="background-color: #202E4E; border-radius: 25px; border-width: 4px; border-color: white;" href="https://dcuclubsandsocs.ie/society/media-production" target="_blank">What are you waiting for? Join MPS Now!</a>  
+        <a class="btn btn-primary mt-4" style="background-color: #202E4E; border-radius: 25px; border-width: 4px; border-color: white; margin-left: 40px; margin-right: 40px;" href="https://dcuclubsandsocs.ie/society/media-production" target="_blank">What are you waiting for? Join MPS Now!</a>  
       </div>
       <div class="center-contents mt-4">
-        <a class="btn btn-primary" style="background-color: #202E4E; border-radius: 25px; border-width: 4px; border-color: white;" href="/committee/history">View Committee History</a>  
+        <a class="btn btn-primary" style="background-color: #202E4E; border-radius: 25px; border-width: 4px; border-color: white;"  href="/committee/history">View Committee History</a>  
       </div>
     </div>
     
diff --git a/mps_site/templates/components/home/what_our_members_say.html b/mps_site/templates/components/home/what_our_members_say.html
@@ -3,97 +3,88 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Member Testimonials</title>
-  <!-- Swiper.js CSS -->
   <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
-  <!-- Custom Styles -->
   <style>
-    /* Swiper Container */
     .swiper-container {
-      width: 95%;
+      width: 98%;
       height: 100%;
-      margin: 20px auto;
+      margin: 0px auto;
       position: relative;
-      overflow: hidden; /* Ensure that the overflow is hidden */
+      overflow: hidden;
     }
 
-    /* Testimonial Box */
     .testimonial-box {
       background-color: #202E4E;
       color: white;
       border-radius: 15px;
-      padding: 20px;
+      padding: 25px;
       text-align: center;
     }
 
-    /* Swiper Navigation Arrows */
     .swiper-button-next, .swiper-button-prev {
       color: white;
     }
 
-    /* Swiper Pagination Dots */
     .swiper-pagination {
       position: relative;
-      margin-top: -15px;
+      margin-top: -22px;
       width: 100%;
       text-align: center;
     }
 
     .swiper-pagination-bullet {
-      background: rgba(255, 255, 255, 0.8); /* Lighter color for better contrast */
-      width: 12px; /* Slightly larger dots */
-      height: 12px; /* Slightly larger dots */
+      background: rgba(255, 255, 255, 0.8);
+      width: 10px;
+      height: 10px;
       border-radius: 50%;
-      margin: 0 4px; /* Spacing between dots */
-      opacity: 0.7; /* Slightly transparent */
+      margin: 0 4px;
+      opacity: 0.7;
     }
 
     .swiper-pagination-bullet-active {
-      background: white; /* White color for active dot */
-      opacity: 1; /* Fully opaque */
+      background: white;
+      opacity: 1;
     }
   </style>
 </head>
 <body>
   <div class="container">
     <h1>What Our Members Say</h1>
     <h5><i>Read why they love MPS so much!</i></h5>
+    <div class="row justify-content-center" style="padding: 20px;">
     <div class="col-md-12 custom-box shadow-lg bg-body">
       <div class="swiper-container">
         <div class="swiper-wrapper">
-          <!-- Slide 1 -->
           <div class="swiper-slide">
             <div class="testimonial-box">
               <p>"MPS is love, MPS is life"</p>
               <h5>- Jake Farrell</h5>
-              <small>2nd Year Computer Science</small>
+              <small>3rd Year Computer Science</small>
             </div>
           </div>
           <div class="swiper-slide">
             <div class="testimonial-box">
               <p>"MPS is love, MPS is life"</p>
               <h5>- Jake Farrell</h5>
-              <small>2nd Year Computer Science</small>
+              <small>3rd Year Computer Science</small>
             </div>
           </div>
           <div class="swiper-slide">
             <div class="testimonial-box">
               <p>"MPS is love, MPS is life"</p>
               <h5>- Jake Farrell</h5>
-              <small>2nd Year Computer Science</small>
+              <small>3rd Year Computer Science</small>
             </div>
           </div>
         </div>  
-        <!-- Add Pagination -->
         <div class="swiper-pagination"></div>
-        <!-- Add Navigation -->
         <div class="swiper-button-next"></div>
         <div class="swiper-button-prev"></div>
       </div>
     </div>
+    </div>
   </div>
 
-  <!-- Swiper.js JS -->
   <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
   <script>
     var swiper = new Swiper('.swiper-container', {
diff --git a/mps_site/templates/index.html b/mps_site/templates/index.html
@@ -18,6 +18,7 @@ <h5><i>We know you'll love it!</h5></i>
 {% include "components/subgroup.html" with subgroups_data=subgroups_data %}
 {% include 'components/stats.html' with title="Media Production Society In Numbers" subtitle="See how we've grown!" animate_seconds=5 stats=stats_data %}
 {% include "components/home/why_join.html" %}
+{% include 'components/home/what_our_members_say.html' %}
 {% include 'components/home/awards_history.html' with homepage_awards=homepage_awards %}
 {% include "components/home/sponsors.html" %}
 {% include 'components/testimonials.html' %}

Original file line number	Diff line number	Diff line change
`@@ -122,7 +122,7 @@`
`122`	`122`	`"subtitle": "Our Society has won many awards over the years!",`
`123`	`123`	`"awards": [`
`124`	`124`	`{`
`125`		`- "award": "Best Society in a Cultural/Academic/Social Field",`
	`125`	`+ "award": "Best Society in a Cultural / Academic / Social Field",`
`126`	`126`	`"sponsor": "DCU Society Awards",`
`127`	`127`	`"year": "2024",`
`128`	`128`	`"award_icon": "fa-solid fa-trophy",`
Original file line number	Diff line number	Diff line change
`@@ -90,6 +90,8 @@ h4 {`
`90`	`90`
`91`	`91`	`h3, h5 {`
`92`	`92`	`text-align: center;`
	`93`	`+ padding-left: 10px;`
	`94`	`+ padding-right: 10px;`
`93`	`95`	`color: var(--text-color);`
`94`	`96`	`}`
`95`	`97`