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

Author: KVGarg

partials/tabs/forms.html

@@ -35,7 +35,7 @@ <h1 class="fine center">Open Source Forms</h1>
             </tr>
         </tbody>
       </table>
-      <div class="apply-flex" ng-show="osforms.formsList.length === 0" style="padding: 5% 0;">
+      <div class="apply-flex center-content" ng-show="osforms.formsList.length === 0" style="padding: 5% 0;">
         <h6>
             No forms have been uploaded, yet! If you are already a member of organization and a developer,
             you can share it with us on <a href="https://community.coala.io/">Community website</a>

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 Google Summer of Code 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>.
         <br>
@@ -21,6 +52,9 @@
       <div class="row outline">
         <div class="parent-wrapper">
           <div class="parent">
+            <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>
@@ -97,6 +131,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,13 +1,42 @@
+.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;
-  justify-content: center;
+  flex-flow: row wrap;
+  align-items: center;
 }
 .black-shadow {
   box-shadow: 0 0 15px 2px black;
 }
 .center-align-text {
   text-align: center;
 }
+.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';
@@ -42,6 +71,36 @@
 .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;
+}
+i.fa {
+  cursor: pointer;
+}
 .project-detail-element > .clickable:hover, .clickable:hover .chip:hover {
   cursor: pointer;
   background-color: #f3f5f8;
@@ -124,6 +183,11 @@
   border: 0;
   z-index: 9;
 }
+.searchbar {
+  width: 85%;
+  min-width: 340px;
+  margin-top: 0;
+}
 .sha256sum_hash {
   display: flex;
   justify-content: space-evenly;
@@ -136,3 +200,15 @@
 #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;
+}