Accomplishments edit by year 4188

_data/internal/accomplishments.yml

@@ -4,45 +4,61 @@
     In 9/2020 Hack for LA joined over 40 Code for America brigades in bringing together civic leaders, 
     public servants, designers, coders, and engaged citizens to partner with local government and community groups to help those most 
     in need of a social safety net services during COVID-19.
+  year: 2020
+  program-area: Justice   
 
 - title: Food Oasis
   link: https://www.hackforla.org/projects/food-oasis
   description: >
     Launched 8/2020 the most comprehensive listing of Food Pantries and Meals to address food insecurity in Los Angeles (listed as a resource on LA County Public Health website).
+  year: 2020
+  project-file: food-oasis.md
 
 - title: LA TDM Calculator
   link: https://www.hackforla.org/projects/tdm-calculator
   description: >
     Hack for LA’s first software application in CI/CD on LA City Department of Transportation’s 
     Azure servers - launching publicly in Q4 2020
+  year: 2020
+  project-file: tdm-calculator.md
 
 - title: 311-DATA
   link: https://www.hackforla.org/projects/311-data
   description: >
     Launched 8/2020 a comprehensive 311 service report Neighborhood Council (NC) and City Council district 
     comparison tool using 311 data provided by LA City’s data portal.  The product was created through extensive 
     Design thinking workshops with NC board members and LA Department of Neighborhood Empowerment
+  year: 2020
+  project-file: 311-data.md
 
 - title: Climate Collabathon
   link: https://www.collabathon.openclimate.earth/
   description: >
     Launched 4/2020 the Online Climate Collabathon in partnership with Yale Open Labs, Sensorica, 
     ESMT Berlin, and CoMakery.  15 speakers, and over 20 breakout and working sessions with experts 
     and professionals from across the sector all on Zoom.
+  year: 2020
+  program-area: Environment
 
 - title: Undebate
   link: https://www.hackforla.org/projects/undebate
   description: >
     Hack for LA has provided labor to this important tool which continues to increase engagement at local elections 
     throughout the country from the San Francisco City Attorney race, to Student Association Elections on College Campuses.
+  year: 2020
+  project-file: undebate.md
 
 - title: Write for All
   link: https://www.hackforla.org/projects/writeforall
   description: >
     Launched 04/2020. The Write For All project proof of concept finds exclusive language where inclusive language should exist.
+  year: 2020
+  project-file: writeforall.md
 
 - title: New Schools Today
   link: https://www.hackforla.org/projects/new-schools-today
   description: >
     Created and Presented 3/2020 three technical workshops for Title 1 school students at the UCLA Exploretech Conference.  
-    The project from conception to delivery was executed by Hack for LA’s first team of all high school students.
+    The project from conception to delivery was executed by Hack for LA’s first team of all high school students.
+  year: 2020
+  project-file: new-schools-today.md

_includes/about-page/about-card-accomplishments.html

@@ -1,22 +1,20 @@
 <div class="card-primary page-card-lg page-card--about">
     <div class="about-us-section-header" data-hash="accomplishments"><span class="sec-head-img"><img src="/assets/images/about/section-header-elements/accomplishments.svg" alt="" /></span>Accomplishments</div>
     <div class="about-us-section-content">
+        <div class="accomplishment-nav">
+            <select name="accomplishments-year" id="accomplishments-year-dropdown">
+                <option value="All">All</option>
+                <!--Years are added dynamically-->
+            </select>
+            <ul id="accomplishments-year-list">
+                <li id="All">All</li>
+                <!--Years are added dynamically-->
+            </ul>
+        </div>
         <div class="flex-container">
             <!--This is the top and then right cell-->
-            <div class="top-left-column top-left-column--acc">
-                <p class="text-bold accomplishment-highlights">Highlights from 2020</p>
-                {% for accomplishment in site.data.internal.accomplishments limit:4 %}
-                    <div class="accomplishment-title"><a href="{{accomplishment.link}}" target="_blank" rel="noopener noreferrer"> {{accomplishment.title}} </a></div>
-                    <div> {{ accomplishment.description }} </div>
-                {% endfor %}
-            </div>
-
-            <div class="bottom-right-column bottom-right-column--acc">
-                {% for accomplishment in site.data.internal.accomplishments limit:4 offset:4 %}
-                    <div class="accomplishment-title"><a href="{{accomplishment.link}}" target="_blank" rel="noopener noreferrer"> {{accomplishment.title}} </a></div>
-                    <div> {{ accomplishment.description }} </div>
-                {% endfor %}
-            </div>
+            <div class="top-left-column top-left-column--acc"></div>
+            <div class="bottom-right-column bottom-right-column--acc"></div>
         </div>
         <div class="flex-container flex-container--wins">
             <!--This is the top and then right cell-->
@@ -31,4 +29,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>

_sass/components/_about.scss

@@ -161,7 +161,7 @@ a.anchor {
   padding-bottom: inherit;
 }
 
-// This is putting NOTHING after the header.  It's necessary to align it the same as the other headers
+
 .about-us-section-header--ED:after {
   content: "\2000 \2000 \2000 \2000 \2000 \2000 \2000 \2000";
   float: right;
@@ -437,10 +437,70 @@ a.anchor {
   display: none;
 }
 
+.accomplishment-nav select {
+  width: 100%;
+  height: 44px;
+  top: 56663px;
+  left: -6729px;
+  border-radius: 5px;
+  border: 1px solid rgba(0, 0, 0, 0.24);  
+}
+
+.accomplishment-nav ul {  
+ display: none;  
+}
+
+.wip-msg {
+ padding-top: 10px;
+}
+
+@media #{$bp-mobile-up} {
+  .accomplishment-nav select {
+   display: none;
+  } 
+  .accomplishment-nav ul {
+    display: inline-block;
+    list-style-type: none;
+    background-color:rgba(247, 245, 245, 1);
+    width: 100%;
+    text-align: left;
+    height: 67px;
+    padding: 20px 16px 20px 16px;
+    gap: 36px;
+
+  }
+
+  .accomplishment-nav ul li {  
+      display: inline-block; 
+      font-size: 20px;
+      font-weight: 700;
+      line-height: 27px;
+      letter-spacing: 0em;
+      text-align: left;
+      margin-left: 32px;
+      padding: 5px;
+  }
+
+  #All {
+    color:rgb(250, 17, 79);
+  }
+
+  .accomplishment-nav ul li:hover {
+    color: rgb(250, 17, 79);
+    cursor: pointer;
+  }
+}
+
+.accomplishment-program-area {
+  padding: 10px 0 0 0;
+  color: $color-black;
+  font-weight: 700;
+}
+
 .accomplishment-title {
   color: $color-red;
   text-decoration: underline;
-  margin: 25px 0 10px 0;
+  padding: 10px 0 5px 0;
   font-weight: 500;
 }
 

assets/js/about.js

@@ -1,3 +1,7 @@
+---
+
+---
+
 // Constant setups for reuse throughout document
 const ANCHOR_LINKS_ID = [...document.querySelectorAll(".anchor")].map((anchor) => anchor.id);
 const NAVIGATION_LINK_ELEMENTS = document.querySelectorAll(".sticky-nav a");
@@ -11,8 +15,14 @@ const FLAGS = {
 
 document.addEventListener("DOMContentLoaded", function () {
 
+  const accomplishments=retrieveAccomplishmentsData();
+  const accByProgramArea=sortAccomplishmentsByProgramArea(accomplishments);
+  displayAccomplishments(accByProgramArea);
+
   // UI components are updated on page load
   updateUI();
+
+  loadAccomplishmentYears();
 
   // UI components are updated on location change
   window.addEventListener("locationchange", updateUI);
@@ -22,6 +32,9 @@ document.addEventListener("DOMContentLoaded", function () {
   document.addEventListener("wheel", scrollHandler);
 
   document.querySelectorAll("#sticky-nav li a").forEach((navlink) => { navlink.addEventListener("click", toggleNavClass); });
+
+  document.querySelector("#accomplishments-year-dropdown").addEventListener("change", function(event) {yearEventHandler(accByProgramArea,event)});
+  document.querySelectorAll("#accomplishments-year-list li").forEach((item)=>{item.addEventListener("click", function(event) {yearEventHandler(accByProgramArea,event)})});
 });
 
 /**
@@ -50,18 +63,18 @@ function updateUI() {
   }
   setupAccordionEventLitseners();
   changeDisplayMode();
-  stickItHere();
+  stickItHere();  
 }
 
 function changeDisplayMode() {
   if (window.innerWidth < BREAK_POINT && FLAGS.displayChanged) {
-    document.querySelectorAll(".page-card--about:nth-child(n+3)").forEach((pageCard) => {pageCard.lastElementChild.style.display = "none"; });
+    document.querySelectorAll(".page-card--about:nth-child(n+3)").forEach((pageCard) => {pageCard.lastElementChild.style.display = "none"; });   
     document.querySelector(`div[data-hash="${window.location.hash.split("#")[1]}"]`).parentElement.lastElementChild.style.display = "block";
     document.querySelector(`div[data-hash="${window.location.hash.split("#")[1]}"]`).parentElement.children[0].classList.toggle("au_active")
     FLAGS.displayChanged = false;
   } 
   else if (window.innerWidth > BREAK_POINT && !FLAGS.displayChanged) {
-    document.querySelectorAll(".page-card--about:nth-child(n+3)").forEach((pageCard) => { pageCard.lastElementChild.style.display = "block"; });
+    document.querySelectorAll(".page-card--about:nth-child(n+3)").forEach((pageCard) => { pageCard.lastElementChild.style.display = "block"; });   
     document.querySelectorAll(".au_active").forEach((pageCard) => { pageCard.classList.remove("au_active"); });
     FLAGS.displayChanged = true;
   }
@@ -126,6 +139,20 @@ function stickItHere() {
   }
 }
 
+//This function lists the years in the Accomplishments 
+function loadAccomplishmentYears() {
+  let d = new Date();
+  let year = d.getFullYear();
+  for (let i=year; i>=2020; i--){
+    let optionsHtml='<option value="' + i + '">' + i + '</option>';
+    document.querySelector("#accomplishments-year-dropdown").insertAdjacentHTML ('beforeend',optionsHtml);
+  }
+  for (let i=year; i>=2020; i--){
+    let listItemHtml='<li id="' + i + '">' + i + '</li>';
+    document.querySelector("#accomplishments-year-list").insertAdjacentHTML ('beforeend',listItemHtml);
+  }  
+}
+
 
 /**
  * Alignment of page card with its corresponding link on the sticky navigation
@@ -184,4 +211,103 @@ window.addEventListener(
 
 
   }
-)
+);
+
+function retrieveAccomplishmentsData() {
+  const scriptTag = document.getElementById("aboutScript");
+  let receivedData = scriptTag.getAttribute("accomplishments");
+  let accData=receivedData.replaceAll("}{", "},{").replaceAll("=>",":");
+  let jsonFormat="[" + accData + "]";
+  const accomplishmentsData=JSON.parse(jsonFormat);
+  return accomplishmentsData;
+}
+
+function sortAccomplishmentsByProgramArea(accomplishments){
+  let accData=[...accomplishments];
+  {% assign projects = site.projects %}
+  let projectData=[{%- for project in projects -%}
+                      {"project-path":"{{project.path | split: '/' | last}}","program-area": "{{project.program-area}}"}
+                      {%- unless forloop.last -%}, {% endunless %}
+                  {%- endfor -%}];
+  accData.forEach(acc => {
+    if (acc["project-file"]){
+      projectData.forEach(project => {
+        if (project["project-path"] == acc["project-file"]){
+          acc["program-area"] = project["program-area"];
+        }
+      })
+    }
+  });
+  accData.sort( (a,b) => (a["program-area"] > b["program-area"]) ? 1 : -1);
+  return (accData);  
+}
+
+function yearEventHandler(accByProgramArea,e){
+  let items=document.querySelectorAll("#accomplishments-year-list li");
+  items.forEach(year=>year.style.color="black");
+  let element=e.target.nodeName;
+  let accYear="";
+  let accToDisplay=[];
+  if(element=="LI"){ 
+    e.target.style.color = "rgb(250, 17, 79)";
+    accYear=e.target.id;
+    document.querySelector("#accomplishments-year-dropdown").value=accYear;
+  }
+  else {
+    accYear=e.target.value;
+    let element=document.getElementById(accYear);
+    element.style.color="rgb(250,17,80,255)";
+  }
+
+  if (accYear == "All"){
+    accToDisplay=accByProgramArea;
+  }
+  else {
+    let year=parseInt(accYear,10);
+    accByProgramArea.forEach(acc => {
+      if(acc.year== year) {
+        accToDisplay.push(acc);
+      }
+    })
+  }
+  displayAccomplishments(accToDisplay);
+}
+
+function displayAccomplishments(accToDisplay) {  
+  document.querySelector(".top-left-column--acc").innerHTML="";
+  document.querySelector(".bottom-right-column--acc").innerHTML="";
+  if(accToDisplay.length ==0){
+    document.querySelector(".top-left-column--acc").innerHTML="<p class='wip-msg'>Work In Progress...</p>";
+  }
+  let progAreaList=[];
+  let accCount = accToDisplay.length;
+  let colItems = Math.ceil(accCount/2);
+  let counter = 1;
+  accToDisplay.forEach(acc => {
+    if(!progAreaList.includes(acc["program-area"])) {
+      progAreaList.push(acc["program-area"]);
+    }      
+  })
+  for( let i=0; i<=progAreaList.length-1;i++){
+    let progAreaHtml='<div class="accomplishment-program-area">' + progAreaList[i] + '</div>';
+    if (counter <= colItems){
+      document.querySelector(".top-left-column--acc").insertAdjacentHTML("beforeend",progAreaHtml);
+    }
+    else {
+      document.querySelector(".bottom-right-column--acc").insertAdjacentHTML("beforeend",progAreaHtml);
+    }
+    accToDisplay.forEach(acc => { 
+      if(acc["program-area"]== progAreaList[i] && counter<=colItems){
+        counter++;
+        let accHtml= ` <div class="accomplishment-title"><a href="${acc.link}" target="_blank" rel="noopener noreferrer"> ${acc.title} </a></div>
+                      <div> ${acc.description} </div>`;
+        document.querySelector(".top-left-column--acc").insertAdjacentHTML("beforeend",accHtml);
+      }
+      else if (acc["program-area"]== progAreaList[i] && counter>colItems) {
+        let accHtml= ` <div class="accomplishment-title"><a href="${acc.link}" target="_blank" rel="noopener noreferrer"> ${acc.title} </a></div>
+                      <div> ${acc.description} </div>`;
+        document.querySelector(".bottom-right-column--acc").insertAdjacentHTML("beforeend",accHtml);
+      }
+    }) 
+  }
+}

pages/about.html

@@ -31,6 +31,7 @@ <h1 class="title1">About Us</h1>
             {% include about-page/about-card-sustainability.html %}
 
             <a class="anchor" id='accomplishments' data-name="Accomplishments"></a>
+            {% assign accomplishments= site.data.internal.accomplishments %}
             {% include about-page/about-card-accomplishments.html %}
 
             <a class="anchor" id='metrics' data-name="Metrics"></a>
@@ -73,4 +74,7 @@ <h1 class="title1">About Us</h1>
 
 
 <!-- Include javaScript -->
-<script src="{{ '/assets/js/about.js' | absolute_url }}"></script>
+<script id="aboutScript"
+    src="{{ '/assets/js/about.js' | absolute_url }}"
+    type="module"
+    accomplishments='{{ accomplishments }}'></script>