projects.html: Add filters for searching projects

This commit adds filters for filtering the projects based on project work status, tags, difficulty level, initiatives and collaborating projects. Closes coala#559
KVGarg · Aug 26, 2019 · 5d22ef8 · 5d22ef8
1 parent c7d0e0e
commit 5d22ef8
Show file tree

Hide file tree

Showing 8 changed files with 658 additions and 340 deletions.
diff --git a/index.html b/index.html
@@ -20,6 +20,12 @@
   <script src="resources/vendors/showdown/showdown.js"></script>
   <script src="resources/vendors/markdown/markdown.js"></script>
   <script src="resources/js/app.js"></script>
+  <!-- Import coala module directives -->
+  <script src="resources/js/directives/projects.js"></script>
+  <script src="resources/js/directives/mentors.js"></script>
+  <script src="resources/js/directives/faqs.js"></script>
+  <script src="resources/js/directives/students.js"></script>
+
   <script src="resources/js/analytics.js"></script>
   <link rel="stylesheet" href="resources/vendors/materialize/css/materialize.css">
   <link rel="stylesheet" href="https://rawgit.com/coala/coalaCSS/master/coala.css">

diff --git a/partials/tabs/projects.html b/partials/tabs/projects.html
@@ -5,8 +5,39 @@
   <br>
   <div class="main-content container">
     <div class="col m8 col offset-m2 s12">
-      <div class="input-field searchbar">
-        <input ng-model="searchText" placeholder="Search for a project" id="search" type="search" class="validate"> </div>
+      <div class="filter-projects-inputs">
+        <div class="input-field searchbar">
+          <input ng-model="searchText" placeholder="Search for a project" id="search" type="search" class="validate"> </div>
+        <div class="filter-btn apply-flex center-content">
+          <a id="filters" class="waves-effect waves-light btn-large" ng-click="toggleFiltersDisplay()">
+            <b>Filter Projects</b>
+          </a>
+        </div>
+      </div>
+      <div ng-class="{'display-none':!lc.displayFilters}" ng-click="toggleFiltersDisplay()">
+        <i class="fa fa-times close-filters"></i>
+      </div>
+      <div class="all-filters-option apply-flex center-content fade-in" ng-class="{'display-none':!lc.displayFilters}">
+        <h6><b>Filter Projects</b></h6>
+        <div class="filters-inputs apply-flex">
+          <div class="filter-select-fields apply-flex evenly-spread-content">
+            <label class="project-filter" ng-repeat="(filter, metadata) in projectFilterOptions">
+              <select class="{{ filter }}-selector" ng-model="metadata.model" ng-change="setModelList(filter, metadata.model)" name="{{ filter }}-selector" multiple>
+                <option value="" disabled>{{ metadata.label }}</option>
+                <option value="{{ value }}" ng-repeat="(key, value) in metadata.options">{{ key }}</option>
+              </select>
+            </label>
+          </div>
+          <div class="filter-btns">
+            <a class="waves-effect waves-light btn" ng-click="applyFilters()">
+              <i class="fa fa-check" aria-hidden="true"> Apply Filters</i>
+            </a>
+            <a class="waves-effect waves-light btn" ng-click="clearFilters()">
+              <i class="fa fa-trash-o clear-filters"> Clear Filters</i>
+            </a>
+          </div>
+        </div>
+      </div>
       <div style="text-align: center;">
         For more project ideas, <a href="https://github.com/coala/projects/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22Project+Proposal%22">click here</a>.
       </div>
@@ -18,7 +49,10 @@
       <div class="row outline">
         <div class="parent-wrapper">
           <div class="parent">
-            <div ng-repeat="project in projectList | filter: searchText" class="card child">
+            <div class="no-projects-found" ng-show="projectList.length === 0">
+              {{ message.noProjectsFound }}
+            </div>
+            <div ng-repeat="project in projectList | filter: searchText | orderBy: sortOrder" class="card child">
               <div class="card-content waves-effect" ng-click="lc.showProject(project)">
                 <div class="card-title center">{{ project.name }}</div>
                 <div btf-markdown="project.desc" class="markdown"></div>
@@ -98,6 +132,8 @@
         'slow');
     })
 
+    $('.filter-select-fields select').material_select();
+
     $('.modal').modal({
       dismissible: true, // Modal can be dismissed by clicking outside of the modal
       opacity: 0.8, // Opacity of modal background

diff --git a/resources/css/style.css b/resources/css/style.css
@@ -1,6 +1,39 @@
+.all-filters-option {
+  position: relative;
+  z-index: 1002;
+  min-width: 350px;
+  margin: 10px 0;
+  background-color: white;
+  box-shadow: 0 0 15px 2px black;
+  border-radius: 20px;
+  -webkit-animation-duration: 1s;
+  animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+  animation-fill-mode: both;
+}
+.apply-flex {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+}
 .break-word {
   word-wrap: break-word;
 }
+.center-content {
+  justify-content: center;
+}
+.close-filters {
+  right: 6%;
+  margin-top: 1.25rem;
+  position: absolute;
+  z-index: 1003;
+}
+.display-none {
+  display: none;
+}
+.evenly-spread-content {
+  justify-content: space-evenly;
+}
 .hash_value_dup {
   position: 'absolute';
   left: '-9999px';
@@ -35,6 +68,33 @@
 .fa-clipboard:hover .hinttext {
   visibility: visible;
 }
+.filter-projects-inputs {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: space-evenly;
+  margin-top: 1rem;
+}
+.filter-btn {
+  width: 165px;
+  z-index: 0;
+}
+.filter-btn .btn-large {
+  border-radius: 100px;
+  box-shadow: 0 0 10px 1px darkslategray;
+}
+.filters-btns {
+  width: 50%;
+}
+.filters-inputs {
+  justify-content: space-around;
+  padding: 20px 0;
+}
+.filter-select-fields {
+  width: 100%;
+  padding-top: 20px;
+  padding-bottom: 10px;
+  justify-content: space-around;
+}
 .footer-icons {
   display: flex;
   flex-wrap: wrap;
@@ -47,6 +107,9 @@
 .icon {
   color: white;
 }
+i.fa {
+  cursor: pointer;
+}
 .justify-text {
   text-align: justify;
 }
@@ -141,6 +204,11 @@ nav {
   border: 0;
   z-index: 9;
 }
+.searchbar {
+  width: 85%;
+  min-width: 340px;
+  margin-top: 0;
+}
 .sha256sum_hash {
   display: flex;
   justify-content: space-evenly;
@@ -156,3 +224,15 @@ nav {
 #sha256sum_hash_value {
   word-wrap: break-word;
 }
+@-webkit-keyframes fade-in {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+@keyframes fade-in {
+  0% {opacity: 0;}
+  100% {opacity: 1;}
+}
+.fade-in {
+  -webkit-animation-name: fade-in;
+  animation-name: fade-in;
+}