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 coala#559

Author: KVGarg

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">

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

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;
+}