added a dynamic way for accomplishments pages to align with its corre…

…sponding heading

assets/js/main.js

@@ -5,60 +5,123 @@
 */
 (function($) {
 
-// Accomplishments page
-console.log("hi im javascript")
-console.log("hi im als ojabacripc")
-
-const ARTICLE = document.getElementsByTagName("article")
-const HEADINGS = document.querySelectorAll("h3")
-const PICTURE_FIGS = document.getElementsByClassName("AccomplishmentFig")
-console.log(`These are the amount of articles: ${ARTICLE.length}`)
-console.log(`These are the amount of headings: ${HEADINGS.length}`)
-console.log(`These are the children: ${ARTICLE.children}`)
-console.log(`These are the picture figs: ${PICTURE_FIGS}`)
-let headerMap = {}
-// for each H3 element in header, headerMap[id] = location //(pixels from top)
-HEADINGS.forEach((h3) => {
-    console.log(`h3 id: ${h3.id}, Offset: ${h3.offsetTop}`)
-    headerMap[h3.id] = h3.offsetTop
-})
-
-// for each fig in picture_fig, if fig.data-correspond match headerMap 
-// then fig.top = headerMap[fig.data-correspond]px;
-Array.from(PICTURE_FIGS).forEach((fig) => {
-    let correspondId = fig.getAttribute('data-correspond');
-    if (headerMap[correspondId] !== undefined) {
-        // Set the top position of the fig to the corresponding header offset
-        fig.style.top = headerMap[correspondId] - 430 + "px";
+    function debounce(func, delay) {
+        let debounceTimer;
+        return function() {
+            const context = this;
+            const args = arguments;
+            clearTimeout(debounceTimer);
+            debounceTimer = setTimeout(() => func.apply(context, args), delay);
+        }
     }
-});
-console.log(headerMap)
-
+
+    // Breakpoints to align accomplishments pictures
+    const calibrationMap = {
+        2560: 500,
+        1920: 450,
+        1680: 430,
+        1440: 360,
+        1280: 430,
+        1024: 240,
+        768:  240,
+        736:  130,
+        425:  130
+    };
+
+    // Function to execute when a breakpoint is hit
+    function onBreakpointHit(width, offset) {
+        // console.log(`Window has hit the width of ${width}px or lower. Using offset ${offset}px.`);
+        calibrateAccomplishmentsSide(offset);
+    }
+
+    function checkWindowWidth() {
+        const currentWidth = window.innerWidth;
+        // console.log(`Current window width: ${currentWidth}`); // Log the current width for debugging
+        const calibrationList = Object.keys(calibrationMap).map(Number).sort((a, b) => a - b);
+
+        let appliedBreakpoint = null;
+
+        console.log(calibrationList);
+        for (const width of calibrationList) {
+            if (currentWidth <= width) {
+                appliedBreakpoint = width;
+                break; // Exit the loop once the first applicable breakpoint is found
+            }
+        }
+
+        // checking applied breakpoint
+        // console.log("checking applied breakpoint", appliedBreakpoint);
+        if (appliedBreakpoint !== null) {
+            onBreakpointHit(appliedBreakpoint, calibrationMap[appliedBreakpoint]);
+        }
+    }
+
+    // Debounce the checkWindowWidth function
+    const debouncedCheckWindowWidth = debounce(checkWindowWidth, 200);
+
+    // Add the event listener for window resize
+    window.addEventListener('resize', debouncedCheckWindowWidth);  
+
+    const SIDEBAR_CONTAINER = document.getElementById("AccomplishmentsRight")
+    const HEADINGS = document.querySelectorAll("h3")
+    const PICTURE_FIGS = document.getElementsByClassName("AccomplishmentFig")
+    const pictureFigsArray = Array.from(PICTURE_FIGS);
+    const lastIndex = pictureFigsArray.length - 1; // Get last index of array
+
+    calibrateAccomplishmentsSide = (align_int) => {
+        let headerMap = {}
+        // for each H3 element in header, headerMap[h3.id] = h3.offsetTop //(pixels from top)
+        HEADINGS.forEach((h3) => {
+            headerMap[h3.id] = h3.offsetTop
+        })
+
+        // for each fig in picture_fig, if fig.data-correspond match headerMap 
+        // then fig.top = headerMap[fig.data-correspond]px;
+
+
+        pictureFigsArray.forEach((fig, index) => {
+            let correspondId = fig.getAttribute('data-correspond');
+            if (headerMap[correspondId] !== undefined) {
+                // Set the top position of the fig to the corresponding header offset
+                fig.style.top = headerMap[correspondId] - align_int + "px";
+            }
 
+            // Check if the current fig is the last entry
+            if (index === lastIndex) {
+                // Grab the offsetTop of the last entry fig
+                const lastFigOffsetTop = fig.offsetTop;
+                // equaling the sidebar to the length of which the last picture's bottom
+                // side is
+                SIDEBAR_CONTAINER.style.height = lastFigOffsetTop + 400 + "px";
+            }
+        });
 
+        console.log(headerMap)
+    }
+    checkWindowWidth()
 
-// Footer
-const COPYRIGHT_FOOTER = document.getElementsByClassName("menu")[0];
+    // Footer
+    const COPYRIGHT_FOOTER = document.getElementsByClassName("menu")[0];
 
-if (COPYRIGHT_FOOTER) {
-    // Grab Footer <li>'s
-    const COPYRIGHT_FOOTER_LIST_ITEMS = COPYRIGHT_FOOTER.getElementsByTagName("li");
+    if (COPYRIGHT_FOOTER) {
+        // Grab Footer <li>'s
+        const COPYRIGHT_FOOTER_LIST_ITEMS = COPYRIGHT_FOOTER.getElementsByTagName("li");
 
-    // Get the indexes of the last two items
-    const totalItems = COPYRIGHT_FOOTER_LIST_ITEMS.length;
-    if (totalItems >= 2) {
-        const secondToLastIndex = totalItems - 2;
-        const lastIndex = totalItems - 1;
+        // Get the indexes of the last two items
+        const totalItems = COPYRIGHT_FOOTER_LIST_ITEMS.length;
+        if (totalItems >= 2) {
+            const secondToLastIndex = totalItems - 2;
+            const lastIndex = totalItems - 1;
 
-        // Select the last two list items
-        const secondLastItem = COPYRIGHT_FOOTER_LIST_ITEMS[secondToLastIndex];
-        const lastItem = COPYRIGHT_FOOTER_LIST_ITEMS[lastIndex];
+            // Select the last two list items
+            const secondLastItem = COPYRIGHT_FOOTER_LIST_ITEMS[secondToLastIndex];
+            const lastItem = COPYRIGHT_FOOTER_LIST_ITEMS[lastIndex];
 
-        // Remove the display of the two <li>'s
-        secondLastItem.style.display = 'none';
-        lastItem.style.display = 'none';
+            // Remove the display of the two <li>'s
+            secondLastItem.style.display = 'none';
+            lastItem.style.display = 'none';
+        }
     }
-}
 
     var $window = $(window),
         $body = $('body');

assets/sass/custom.scss

@@ -136,7 +136,7 @@ $breakpoints: (
 /* Caption text */
 .text {
   color:white;
-  font-size: 30px;
+  // font-size: 30px;
   padding: 50px 0px;
   position: absolute;
   top: 20%;
@@ -146,6 +146,14 @@ $breakpoints: (
   line-height: 2.6vw;
   color:white;
   text-shadow: 2px 2px 0px black;
+
+  @include breakpoint(mobile){
+    font-size: 10px
+  }
+
+  @include breakpoint(mobilel){
+    font-size: 7px;
+  }
 }
 
 /* Number text (1/3 etc) */
@@ -300,23 +308,14 @@ $breakpoints: (
 
 // Handling Accomplishments styles 
 
-// .container {
-//   display: flex;
-//   justify-content: space-between;
-// }
-
-// .main-content {
-//   flex: 0 0 70%;
-//   margin-right: 20px;
-// }
-
 #AccomplishmentsRight {
+  @extend .col-4.col-12-narrower;
   flex: 0 0 30%;
   position: relative;
 }
 
 #AccomplishmentsRight .AccomplishmentFig {
-  position: absolute;
+  position:absolute;
 }
 
 
@@ -335,6 +334,14 @@ $breakpoints: (
     @media (max-width: 1024px) {
       max-width: 80%;
     }
+
+    @include breakpoint(narrower) {
+      max-width: 50%
+    }
+
+    @include breakpoint(mobilel){
+      max-width: 100%;
+    }
   }
 }
 

layouts/partials/sidebar/AccomplishmentsRight.html

@@ -11,11 +11,19 @@
         <img src='{{absURL "images/AccomplishmentsImages/supporting_connected_communites_brandon_jacoby.jpg"}}' >
     </figure>
 
-    <figure class="AccomplishmentFig" data-correspond="creating-a-buildings-living-laboratory" style="max-width: 90%;">
+    <figure class="AccomplishmentFig" data-correspond="enabling-efficiency-in-dc">
+        <img src='{{absURL "images/AccomplishmentsImages/DC_Buildings.jpg"}}' >
+    </figure>
+
+    <figure class="AccomplishmentFig" data-correspond="creating-a-buildings-living-laboratory">
         <img src='{{absURL "images/AccomplishmentsImages/campus_2.png"}}' >
     </figure>
 
-    <figure class="AccomplishmentFig" data-correspond="a-nameconnecting-home-appliancesaconnected-home-appliances" style="max-width: 90%;">
+    <figure class="AccomplishmentFig" data-correspond="dispatching-optimization-and-savings">
+        <img  src='{{absURL "images/AccomplishmentsImages/Web_Size_Power_2.jpg"}}' >
+    </figure> 
+
+    <figure class="AccomplishmentFig" data-correspond="a-nameconnecting-home-appliancesaconnected-home-appliances">
         <img src='{{absURL "images/AccomplishmentsImages/EED_1787_FIG_HomesGraphicRev_v7_1600x1200 (1).png"}}' alt="Homes Graphic">
     </figure>