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, using angular. Also, due to addition of new changes, the file length (i.e. line count) got increased to 500+. Therefore, the coala module directives are splitted and added a new folder named directives that consists of all the app directives. Also, it makes the project more understandable to users, that what all directives does this project uses instead of scrolling down through the large lines of code (if not splitted out). Closes #559
coala · Aug 26, 2019 · 3857d95 · 3857d95
1 parent 4c8db7f
commit 3857d95
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 {
+  animation-duration: 1s;
+  animation-fill-mode: both;
+  background-color: white;
+  border-radius: 20px;
+  box-shadow: 0 0 15px 2px black;
+  margin: 10px 0;
+  min-width: 350px;
+  position: relative;
+  z-index: 1002;
+  -webkit-animation-duration: 1s;
+  -webkit-animation-fill-mode: both;
+}
+.apply-flex {
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+}
 .break-word {
   word-wrap: break-word;
 }
+.center-content {
+  justify-content: center;
+}
+.close-filters {
+  margin-top: 1.25rem;
+  position: absolute;
+  right: 6%;
+  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 {
+  justify-content: space-around;
+  padding-top: 20px;
+  padding-bottom: 10px;
+  width: 100%;
+}
 .footer-icons {
   display: flex;
   flex-wrap: wrap;
@@ -47,6 +107,9 @@
 .icon {
   color: white;
 }
+.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;
+}