fab-manager/app/assets/templates/home/events.html

<section class="home-events">
  <h4 class="text-sm m-t-sm">{{ 'app.public.home.fablab_s_next_events' | translate }} <a ui-sref="app.public.events_list" class="pull-right"><i class="fa fa-tags"></i> {{ 'app.public.home.every_events' | translate }}</a></h4>

  <div class="row" ng-repeat="event in (upcomingEvents.length/3 | array)">

    <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4" ng-repeat="event in upcomingEvents.slice(3*$index, 3*$index + 3)">


      <div class="widget panel panel-default" ui-sref="app.public.events_show({id: event.id})">
        <div class="panel-heading picture" style="background-image: url({{event.event_image_medium}});" >
          <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:FontAwesome/icon" bs-holder ng-if="!event.event_image" class="img-responsive">
        </div>
        <div class="panel-body" style="heigth:170px;">
          <div class="row">
            <div class="col-xs-9">
              <h1 class="m-b">{{event.title}}</h1>
            </div>
            <div class="col-xs-3">
              <span class="v-middle badge text-xs" ng-class="'bg-{{event.category.slug}}'">{{event.category.name}}</span>
            </div>
          </div>
          <p class="event-description" ng-bind-html="event.description | simpleText | humanize : 500 | breakFilter"></p>

          <hr/>
          <div class="row">
            <div class="col-sm-6 row m-b-sm">
              <i class="fa fa-calendar red col-xs-3 padder-icon"></i>
              <h6 class="m-n col-xs-9 " ng-hide="isOneDayEvent(event)">{{ 'app.public.home.from_date_to_date' | translate:{START:(event.start_date | amDateFormat:'L'), END:(event.end_date | amDateFormat:'L')} }}</h6>
              <h6 class="m-n col-xs-9 " ng-show="isOneDayEvent(event)">{{ 'app.public.home.on_the_date' | translate:{DATE:(event.start_date | amDateFormat:'L')} }}</h6>
            </div>
            <div class="col-sm-6 row m-b-sm">
              <i class="fa fa-clock-o red col-xs-3 padder-icon"></i>
              <h6 class="m-n col-xs-9">
                <span ng-if="event.all_day == 'true'" translate>{{ 'app.public.home.all_day' }}</span>
                <span ng-if="event.all_day == 'false'">{{ 'app.public.home.from_time_to_time' | translate:{START:(event.start_date | amDateFormat:'LT'), END:(event.end_date | amDateFormat:'LT')} }}</span>
              </h6>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-6 row m-b-sm">
              <i class="fa fa-user red col-xs-3 padder-icon"></i>
              <h6 class="m-n col-xs-9 ">
                <span ng-if="event.nb_free_places > 0">{{ 'app.public.home.still_available' | translate }} {{event.nb_free_places}}</span>
                <span ng-if="!event.nb_total_places" translate>{{ 'app.public.home.free_entry' }}</span>
                <span ng-if="event.nb_total_places > 0 && event.nb_free_places <= 0" translate>{{ 'app.public.home.event_full' }}</span>
              </h6>
            </div>
            <div class="col-sm-6 row m-b-sm">
              <i class="fa fa-bookmark red col-xs-3 padder-icon"></i>
              <h6 class="m-n col-xs-9">
                <span ng-if="event.amount == 0" translate>{{ 'app.public.home.free_admission' }}</span>
                <span ng-if="event.amount > 0">{{ 'app.public.home.full_price' | translate }} {{event.amount | currency}}</span>
              </h6>
            </div>
          </div>

          <div class="text-center clearfix ">
            <div class="btn btn-lg btn-warning bg-white b-2x rounded m-t-sm m-b-sm upper text-sm width-70" ui-sref="app.public.events_show({id: event.id})" ><span translate>{{ 'app.shared.buttons.consult' }}</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>