Adds projects onto homepage with filters

.gitignore

@@ -14,3 +14,5 @@ dist
 .DS_store
 .vscode
 _site
+
+#CNAME

CNAME

@@ -1 +1 @@
-www.hackforla.org
+www.hackforla.org

_includes/current-projects.html

@@ -1,57 +1,92 @@
-<a class="anchor" id="projects"></a>
-<section class="content-section projects">  
-  <div class="page-contain projects-inner">
-    <h2 class="project-header">Current Projects</h2>
-      <ul class="project-list unstyled-list">
+<section id="projects" class="projects content-section">
+  <div class="page-contain">
+    <div class="all-projects__header">
+      <div class="all-projects__header-title">
+        <h2>Current Projects</h2>
+        <p class="project-pitch">Have an idea?
+                  <a href="#contact" class="btn btn-complimentary">Submit your pitch</a>
+        </p>
+      </div>
+      <h4>Here's what we're working on. Join us at one of our meetups and contribute!</h4>
+    </div>
+    <div class="all-projects-container">
+      <div class="filter-form">
+        <h3 class="filter-form__header">Sort By:</h3>
+        <div class="filter-form__form">
+          <div class="filter-form__select" style="width:150px;">
+            <select id = "location-selection">
+              <option value="all-projects-card" default>LOCATION</option>
+              <option value = "downtownla">DTLA</option>
+              <option value = "southla">SOUTH LA</option>
+              <option value = "santamonica">WESTIDE</option>
+            </select>
+          </div>
+          <div class="filter-form__select" style="width:150px;">
+            <select id = "status-selection">
+              <option value="all-projects-card" default>STATUS</option>
+              <option value = "active">ACTIVE</option>
+              <option value = "onhold">ON HOLD</option>
+              <option value = "rebooting">REBOOTING</option>
+            </select>
+          </div>
+        </div>
+      </div>
+      <ul id="project-list" class="all-projects-list">
         {%- for item in site.projects -%}
-          {%- if item.hide != true -%}
-            <li class="project-card">
-              <div class="project-card-inner">
-                <div class="project-tmb">
-                  <img src={{ item.image | absolute_url }} class="project-tmb-img" alt={{item.alt}}/>
-                </div>
-                <div class="project-body">
-                  <div class='status-indicator {{ "status-" | append: item.status }}'>
-                    <h5 class='status-text'>{{ item.status }}</h5>
-                  </div>
-                  <h4 class="project-title">{{ item.title }}</h4>
-                  <p class="project-description">{{ item.description }}</p>
-                  {%- if item.links -%}
-                    <div class="project-links">
-                      <strong>Links: </strong> 
-                        {%- for item in item.links -%} 
-                          <a href={{ item.url }} rel="noopener" target='_blank'> {{ item.name }}</a>{%- if forloop.last == false -%},
-                          {%- endif -%}
-                        {%- endfor -%}
-                    </div>
-                  {%- endif -%} 
-                  {%- if item.partner -%}
-                    <div class="project-partner">
-                    <strong>Partner: </strong>
-                      {{ item.partner }}
-                    </div>
-                  {%- endif -%}
-                  {%- if item.looking -%}
-                    <div class="project-needs">
-                      <strong>Looking for: </strong>
-                        {{ item.looking }}
-                    </div>
-                  {%- endif -%}
-
-                  {%- if item.location -%}
-                    <div class="project-location">
-                      <strong>Location: </strong>
-                        {{ item.location }}
-                    </div>
-                  {%- endif -%}
-                </div>
+        {%- if item.hide != true -%}
+        <li class="all-projects-card
+        {{item.location | split: " " | join: "" | downcase}}
+        {{item.status | split: " " | join: "" | downcase}}"
+        >
+        <div class="all-projects-inner">
+          <div class="all-project-tmb">
+            <img src={{ item.image | absolute_url }} class="all-projects-tmb-img" alt={{item.alt}}/>
+          </div>
+          <div class="all-projects-body">
+            <div class='status-indicator {{ "status-" | append: item.status}}'>
+              <h5 class="status-text">{{item.status}}</h5>
+            </div>
+            <h4 class="all-project-title">
+              <!-- add the commented code below / delete the div when you're ready to link to Kain's project page -->
+              <!-- <a href="{{ item.url | absolute_url}}">{{item.title}}</a> -->
+              <div>{{item.title}}</div>
+              <!-- delete the div above after you uncomment the anchor -->
+            </h4>
+            <p class="all-project-description">{{ item.description }}</p>
+            {%- if item.location -%}
+            {%- if item.links -%}
+              <div class="project-links">
+                <strong>Links: </strong>
+                  {%- for item in item.links -%}
+                    <a href={{ item.url }} rel="noopener" target='_blank'> {{ item.name }}</a>{%- if forloop.last == false -%},
+                    {%- endif -%}
+                  {%- endfor -%}
               </div>
-            </li>
-          {%- endif -%}
-        {%- endfor -%}
-      </ul>
-    <p class="project-pitch">Have an idea?
-              <a href="#contact" class="btn btn-primary">Submit your pitch</a>
-    </p>
+            {%- endif -%}
+            {%- if item.partner -%}
+              <div class="project-partner">
+              <strong>Partner: </strong>
+                {{ item.partner }}
+              </div>
+            {%- endif -%}
+            {%- if item.looking -%}
+              <div class="project-needs">
+                <strong>Looking for: </strong>
+                  {{ item.looking }}
+              </div>
+            {%- endif -%}
+            <div class="all-project-location">
+              <strong>Location: </strong>
+              {{ item.location }}
+            </div>
+            {%- endif -%}
+          </div>
+        </div>
+      </li>
+      {%- endif -%}
+      {%- endfor -%}
+    </ul>
+  </div>
   </div>
-</section>
+
+</section>

_layouts/default.html

@@ -14,6 +14,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
     <script src="{{ '/assets/js/api-actionnetwork.js' | absolute_url }}"></script>
     <script src="{{ '/assets/js/api-calendar.js' | absolute_url }}"></script>
+    <script src="{{ '/assets/js/all-projects.js' | absolute_url }}"></script>
   </div>
 </body>
 </html>

_sass/_main.scss

@@ -40,6 +40,7 @@
 @import 'components/press';
 @import 'components/projects';
 @import 'components/social-links';
+@import 'components/all-projects';
 
 // /**
 //  * Layouts

_sass/components/_all-projects.scss

@@ -0,0 +1,90 @@
+// All projects
+
+.all-projects {
+  background: #32ddb1;
+  padding: 32px 16px;
+}
+
+.all-projects-container {
+  // background: $color-teal;
+  // padding: 32px 16px;
+}
+
+.all-projects__header {
+  // margin-top: 6rem;
+  // background: #030d2d;
+  // padding: 0 5rem;
+  // font-size: 1.8rem;
+  h2 {
+    color: #dd325e;
+    font-size: 3rem;
+    margin-bottom: 0.3rem;
+  }
+  h4 {
+    color: #333;
+    margin-bottom: 0;
+  }
+}
+
+.all-projects__header-title {
+  display: flex;
+  .btn-complimentary {
+    background-color: #dd325e;
+  }
+}
+
+
+.all-projects-list {
+    column-count: auto;
+    column-width: 18rem;
+    column-gap: 3rem;
+    padding: 0 0 4rem 0;
+    .all-projects-card {
+      margin-bottom: 20px;
+      break-inside: avoid;
+      background: $color-white;
+      border: 0 solid rgba($color-black, 0.06);
+      border-radius: 16px;
+      box-shadow: 0 0 8px 0 rgba($color-black, 0.2);
+      // margin-bottom: 24px;
+      overflow: hidden;
+
+      // @media #{$bp-tablet-up} {
+      //   margin-bottom: 0;
+      // }
+      // padding-bottom: 1px;
+    }
+}
+.filter-form {
+  width: 50%;
+  margin: 2rem 0px;
+  .filter-form__header {
+    margin: 0;
+    // padding: 2rem 0 0.5rem 0;
+    color: #333;
+  }
+  .filter-form__form {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+
+.all-projects-inner {
+  display: flex;
+  flex-direction: column;
+
+  @media #{$bp-mobile-up} {
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
+.all-projects-tmb-img {
+  display: block;
+  width: 100%;
+}
+
+.all-projects-body {
+  padding: 16px;
+}

_sass/components/_projects.scss

@@ -1,3 +1,4 @@
+
 .projects {
   background: $color-teal;
   padding: 32px 16px;

assets/js/all-projects.js

@@ -0,0 +1,35 @@
+
+
+var projects = document.getElementById("project-list").getElementsByTagName("li");
+var locationSelector = document.getElementById("location-selection");
+var statusSelector = document.getElementById("status-selection");
+/* all-projects-card is the default class name that all of the
+project cards start with */
+var searchFilters = {
+  location: "all-projects-card",
+  status: "all-projects-card"
+};
+
+/* Goes through all projects and
+shows them if they have a class in the filter or
+hides them if they don't have a class in the filter */
+function showHideProjects(){
+  Array.from(projects).forEach(function(project){
+    projectClassIncludesFilter = Object.values(searchFilters)
+      .every((filter) => project.className.includes(filter) );
+
+    if (projectClassIncludesFilter) {project.style.display = "block"}
+    else {project.style.display = "none"}
+  });
+};
+
+// current implementation replaces select boxes with styled divs, but this code is still here in case you want to use out-of-the-box selectors in the future
+locationSelector.addEventListener('change', (event) => {
+  searchFilters["location"] = event.target.value;
+  showHideProjects();
+});
+
+statusSelector.addEventListener('change', (event) => {
+  searchFilters["status"] = event.target.value;
+  showHideProjects();
+});