fab-manager/app/assets/templates/projects/index.html.erb

<section class="heading b-b">
  <div class="row no-gutter">
    <div class="col-xs-2 col-sm-2 col-md-1">
      <section class="heading-btn">
        <a href="#" ng-click="backPrevLocation($event)"><i class="fa fa-long-arrow-left "></i></a>
      </section>
    </div>
    <div class="col-xs-10 col-sm-10 col-md-8 b-l b-r-md">
      <section class="heading-title">
        <h1 translate>{{ 'the_fablab_projects' }}</h1>
      </section>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md" ng-if="isAuthorized(['admin','member'])">
      <section class="heading-actions wrapper">
       <a class="btn btn-lg btn-warning bg-white b-2x rounded m-t-sm upper text-sm" ui-sref="app.logged.projects_new" role="button" translate>{{ 'add_a_project' }}</a>
      </section>
    </div>
  </div>
</section>


<section class="m-lg">
  <div class="row m-b-md">
    <div class="col-md-12"><h3 class="m-t-xs">{{ 'filter_projects' | translate }}
      <a href="" class="text-sm pull-right" name="button" ng-click="resetFilters()"><i class="fa fa-refresh"></i> {{ 'reset_all_filters' | translate }}</a></h3>
    </div>
    <div class="col-md-12 m-b">
      <form class="form-inline">
        <div class="form-group">
          <div class="input-group">
            <div class="input-group-addon"><i class="fa fa-search"></i></div>
            <input type="search" class="form-control" placeholder="Mots-clés" ng-model="search.q"/>
            <div class="input-group-btn">
              <button ng-click="triggerSearch()" type="button" class="btn btn-warning" translate>{{ 'search' }}</button>
            </div>
          </div>
          
        </div>
      </form>
    </div>
    <div class="col-md-3 m-b" ng-show="isAuthenticated()">
      <select ng-model="search.from" ng-change="triggerSearch()" class="form-control">
        <option value="" translate>{{ 'all_projects' }}</option>
        <option value="mine" translate>{{ 'my_projects' }}</option>
        <option value="collaboration" translate>{{ 'projects_to_whom_i_take_part_in' }}</option>
      </select>
    </div>

    <div class="col-md-3 m-b">
      <select ng-model="search.machine_id" ng-change="triggerSearch()" class="form-control" ng-options="m.id as m.name for m in machines">
        <option value="" translate>{{ 'all_machines' }}</option>
      </select>
    </div>

    <div class="col-md-3 m-b">
      <select ng-model="search.theme_id" ng-change="triggerSearch()" class="form-control" ng-options="t.id as t.name for t in themes">
        <option value="" translate>{{ 'all_themes' }}</option>
      </select>
    </div>

    <div class="col-md-3 m-b">
      <select ng-model="search.component_id" ng-change="triggerSearch()" class="form-control" ng-options="t.id as t.name for t in components">
        <option value="" translate>{{ 'all_materials' }}</option>
      </select>
    </div>
  </div>


  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4" ng-repeat="project in projects" ng-click="showProject(project)">
      <div class="box-thumb box-thumb-project" style="background-image: url({{project.project_image}});">

        <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon" bs-holder ng-if="!project.project_image">

        <div class="box-content project-caption">
          <h1>{{project.name}}</h1>
        </div>
        <div class="box-footer">
          <div class="btn-group">
            <div class="btn btn-default" ui-sref="app.logged.projects_edit({id:project.id})" ng-if="projectEditableBy(currentUser) || isAuthorized('admin')">
              <i class="fa fa-edit"></i> {{ 'edit' | translate }}
            </div>
            <div class="btn btn-default" ng-click="showProject(project)">
              <i class="fa fa-eye"></i> {{ 'consult' | translate }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-12 text-center">
        <a class="btn btn-warning" ng-click="loadMoreProjects()" ng-if="paginateActive" translate>{{ 'load_next_projects' }}</a>
    </div>
  </div>
</section>