Add minor style adjustments for the demo

app/frontend/src/javascript/directives/directives.js

@@ -34,8 +34,8 @@ Application.Directives.directive('fileread', [() =>
 Application.Directives.directive('bsHolder', [() =>
   ({
     link (scope, element, attrs) {
-      Holder.addTheme('icon', { background: 'white', foreground: '#e9e9e9', size: 80, font: 'FontAwesome' })
+      Holder.addTheme('icon', { background: 'white', foreground: '#ebebeb', size: 60, font: 'FontAwesome' })
-        .addTheme('icon-xs', { background: 'white', foreground: '#e0e0e0', size: 20, font: 'FontAwesome' })
+        .addTheme('icon-xs', { background: 'white', foreground: '#ebebeb', size: 20, font: 'FontAwesome' })
         .addTheme('icon-black-xs', { background: 'black', foreground: 'white', size: 20, font: 'FontAwesome' })
         .addTheme('avatar', { background: '#eeeeee', foreground: '#555555', size: 16, font: 'FontAwesome' })
         .run(element[0]);

app/frontend/src/stylesheets/app.components.scss

@@ -191,7 +191,9 @@
     overflow: hidden;
 
     img {
-      max-height: 400px;
+      aspect-ratio: 16/9;
+      object-fit: cover;
+      object-position: center;
     }
   }
 
@@ -243,7 +245,7 @@
 
     &.picture {
       height: 250px;
-      background-size: contain;
+      background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
       background-color: transparent;
@@ -304,6 +306,7 @@
 
   &.avatar-block {
     white-space: inherit;
+    width: 100%;
     height: 76px;
 
     .user-name {

app/frontend/src/stylesheets/app.layout.scss

@@ -661,8 +661,121 @@ body.container {
 }
 
 .home-events {
-  .event-description {
+  h4 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    column-gap: 1rem;
+    i { margin-right: 1rem;}
+  }
+}
+
+.home-events-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+  gap: 30px;
+  margin-bottom: 5rem;
+  @media (max-width: 480px) {
+    grid-template-columns: 1fr;
+  }
+
+  .Event {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid #ddd;
+    border-radius: 5px;
     overflow: hidden;
+    &:hover {
+      cursor: pointer;
+      & .Event-picture {opacity: 0.7;}
+    }
+    
+    &-picture {
+      height: 250px;
+      background-color: #fff;
+      border-bottom: 1px solid #ebebeb;
+      transition: opacity 0.4s ease-out;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+    
+    &-desc {
+      position: relative;
+      padding: 15px;
+      h3 {
+        max-width: 75%;
+        margin-top: 0;
+        font-size: 2rem;
+        font-weight: 900;
+        line-height: 1.3;
+        text-transform: uppercase;
+        color: #000 !important;
+      }
+      span {
+        position: absolute;
+        right: 15px;
+        top: 15px;
+      }
+    }
+
+    &-info {
+      display: grid;
+      grid-template-rows: repeat(2, max-content);
+      grid-template-columns: repeat(2, 1fr);
+      gap: 15px;
+      margin-top: auto;
+      padding: 15px 30px 30px;
+      border-top: 1px solid #eee;
+      &-item {
+        height: 20px;
+        display: flex;
+        align-items: center;
+        i {
+          width: 16px;
+          height: 16px;
+          font-size: 16px;
+          text-align: center;
+          color: #cb1117;
+        }
+        h6 { margin: 0 0 0 15px;}
+      }
+    }
+  }
+}
+
+.month-events-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 15px;
+  margin-bottom: 2rem;
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
+  }
+
+  .Event {
+    display: flex;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    overflow: hidden;
+
+    &-desc {
+      flex: 1;
+      padding: 10px 15px 15px;
+    }
+    &-picture {
+      width: 33%;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      @media (max-width: 500px) {
+        display: none;
+      }
+    }
   }
 }
 

app/frontend/src/stylesheets/modules/machines/machine-card.scss

@@ -51,28 +51,30 @@
 
   .machine-picture {
     height: 250px;
-    background-size: contain;
+    background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     transition: opacity 0.5s ease;
     cursor: pointer;
     padding: 0;
     color: #333333;
-    border-color: #ddd;
+    border-bottom: 1px solid #ebebeb;
-    border-bottom: 1px solid transparent;
     border-top-left-radius: 5px;
     border-top-right-radius: 5px;
     position: relative;
 
     &.no-picture::before {
       position: absolute;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       content: '\f03e';
       font-family: 'Font Awesome 5 Free' !important;
       font-weight: 900;
-      font-size: 4em;
+      font-size: 80px;
-      width: 100%;
+      color: #ebebeb;
-      text-align: center;
-      padding-top: 84px;
     }
   }
 

app/frontend/src/stylesheets/overrides.scss

@@ -1,4 +1,21 @@
 .carousel {
+  position: relative;
+  border-radius: 5px;
+  overflow: hidden;
+  &::before {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    content: '\f03e';
+    font-family: 'Font Awesome 5 Free' !important;
+    font-weight: 900;
+    font-size: 80px;
+    color: #ebebeb;
+  }
+  
   &-inner {
       aspect-ratio: 16/9;
     }

app/frontend/templates/admin/settings/general.html

@@ -202,7 +202,7 @@
                     <input name="_method" type="hidden" ng-value="methods.logo">
                     <h3 class="m-l" translate>{{ 'app.admin.settings.logo_white_background' }}</h3>
                     <div class="custom-logo" style="background-image: url({{customLogo}});">
-                        <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon-xs" bs-holder ng-show="!customLogo" class="img-responsive">
+                        <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder ng-show="!customLogo" class="img-responsive">
                         <img base-sixty-four-image="customLogo" ng-show="customLogo && customLogo.base64">
                         <img ng-src="{{customLogo.custom_asset_file_attributes.attachment_url}}" alt="{{customLogo.custom_asset_file_attributes.attachment}}" ng-show="customLogo && customLogo.custom_asset_file_attributes" />
                         <div class="tools-box">
@@ -254,7 +254,7 @@
                     <input name="_method" type="hidden" ng-value="methods.favicon">
                     <h3 class="m-l" translate>{{ 'app.admin.settings.favicon' }}</h3>
                     <div class="custom-favicon" style="background-image: url({{customFavicon}});">
-                        <img src="data:image/png;base64," data-src="holder.js/32x32/text:&#xf03e;/font:'Font Awesome 5 Free'/icon-xs" bs-holder ng-show="!customFavicon" class="img-responsive">
+                        <img src="data:image/png;base64," data-src="holder.js/32x32/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder ng-show="!customFavicon" class="img-responsive">
                         <img base-sixty-four-image="customFavicon" ng-show="customFavicon && customFavicon.base64">
                         <img ng-src="{{customFavicon.custom_asset_file_attributes.attachment_url}}" alt="{{customFavicon.custom_asset_file_attributes.attachment}}" ng-show="customFavicon && customFavicon.custom_asset_file_attributes" />
                         <div class="tools-box">
@@ -316,7 +316,7 @@
                     <input name="_method" type="hidden" ng-value="methods.profileImage">
                     <h3 class="m-l" translate>{{ 'app.admin.settings.background_picture_of_the_profile_banner' }}</h3>
                     <div class="custom-profile-image" style="background-image: url({{profileImage}});">
-                        <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon-xs" bs-holder ng-show="!profileImage" class="img-responsive">
+                        <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder ng-show="!profileImage" class="img-responsive">
                         <img base-sixty-four-image="profileImage" ng-show="profileImage && profileImage.base64">
                         <img ng-src="{{profileImage.custom_asset_file_attributes.attachment_url}}" alt="{{profileImage.custom_asset_file_attributes.attachment}}" ng-show="profileImage && profileImage.custom_asset_file_attributes" />
                         <div class="tools-box">

app/frontend/templates/admin/settings/reservations.html

@@ -56,7 +56,7 @@
                                     settings="allSettings"
                                     label="app.admin.settings.prior_period_hours"
                                     classes="col-md-8"
-                                    fa-icon="fa-clock-o"
+                                    fa-icon="fas fa-clock"
                                     min="0"
                                     required="allSettings.booking_move_enable === 'true'">
                     </number-setting>
@@ -76,7 +76,7 @@
                                     settings="allSettings"
                                     label="app.admin.settings.prior_period_hours"
                                     classes="col-md-8"
-                                    fa-icon="fa-clock-o"
+                                    fa-icon="fas fa-clock"
                                     min="0"
                                     required="allSettings.booking_cancel_enable === 'true'">
                     </number-setting>
@@ -112,7 +112,7 @@
                                 settings="allSettings"
                                 label="app.admin.settings.duration_minutes"
                                 classes="col-md-4"
-                                fa-icon="fa-clock-o"
+                                fa-icon="fas fa-clock"
                                 min="1"
                                 required="true">
                 </number-setting>
@@ -139,7 +139,7 @@
                             settings="allSettings"
                             label="app.admin.settings.prior_period_hours"
                             classes="col-md-4"
-                            fa-icon="fa-clock-o"
+                            fa-icon="fas fa-clock"
                             helper-text="app.admin.settings.default_value_is_24_hours"
                             min="0">
             </number-setting>

app/frontend/templates/events/index.html

@@ -43,45 +43,37 @@
     <div ng-repeat="month in monthOrder">
       <h1>{{monthNames[month.split(',')[0] - 1]}}, {{month.split(',')[1]}}</h1>
 
-      <div class="row" ng-repeat="event in (eventsGroupByMonth[month].length/3 | array)">
+      <div class="month-events-list" ng-repeat="event in (eventsGroupByMonth[month].length/3 | array)">
+        <a class="Event" ng-repeat="event in eventsGroupByMonth[month].slice(3*$index, 3*$index + 3)" ui-sref="app.public.events_show({id: event.id})">
+          <div class="Event-desc"> 
+            <h5 class="text-xs m-t-n">{{event.category.name}}</h5>
+            <h4 class="m-n text-sm clear l-n">{{event.title}}</h4>
+            <h3 class="m-n" ng-show="onSingleDay(event)">{{event.start_date | amDateFormat:'L'}}</h3>
+            <h3 class="m-n" ng-hide="onSingleDay(event)">{{event.start_date | amDateFormat:'L'}} <span class="text-sm font-thin" translate> {{ 'app.public.events_list.to_date' }} </span> {{event.end_date | amDateFormat:'L'}}</h3>
 
-        <div class="col-xs-12 col-sm-6 col-md-4" ng-repeat="event in eventsGroupByMonth[month].slice(3*$index, 3*$index + 3)" ng-click="showEvent(event)">
+            <h6 class="m-n" ng-if="!event.amount" translate>{{ 'app.public.events_list.free_admission' }}</h6>
+            <h6 class="m-n" ng-if="event.amount">{{ 'app.public.events_list.full_price_' | translate }} {{event.amount | currency}} <span ng-repeat="price in event.prices">/ {{ price.category.name }} {{price.amount | currency}}</span></h6>
 
-
+            <div>
-          <a class="block bg-white img-full p-sm p-l-m box-h-m event b b-light-dark m-t-sm" ui-sref="app.public.events_show({id: event.id})">
+              <span class="text-black-light text-xs m-r-xs" ng-repeat="theme in event.event_themes">
-            <div class="pull-left half-w m-t-n-sm">
+                <i class="fa fa-tags" aria-hidden="true"></i> {{theme.name}}
-              <h5 class="text-xs">{{event.category.name}}</h5>
+              </span>
-              <h4 class="m-n text-sm clear l-n">{{event.title}}</h4>
+              <span class="text-black-light text-xs" ng-if="event.age_range"><i class="fa fa-users" aria-hidden="true"></i> {{event.age_range.name}}</span>
-              <h3 class="m-n" ng-show="onSingleDay(event)">{{event.start_date | amDateFormat:'L'}}</h3>
-              <h3 class="m-n" ng-hide="onSingleDay(event)">{{event.start_date | amDateFormat:'L'}} <span class="text-sm font-thin" translate> {{ 'app.public.events_list.to_date' }} </span> {{event.end_date | amDateFormat:'L'}}</h3>
-
-              <h6 class="m-n" ng-if="!event.amount" translate>{{ 'app.public.events_list.free_admission' }}</h6>
-              <h6 class="m-n" ng-if="event.amount">{{ 'app.public.events_list.full_price_' | translate }} {{event.amount | currency}} <span ng-repeat="price in event.prices">/ {{ price.category.name }} {{price.amount | currency}}</span></h6>
-
-              <div>
-                <span class="text-black-light text-xs m-r-xs" ng-repeat="theme in event.event_themes">
-                  <i class="fa fa-tags" aria-hidden="true"></i> {{theme.name}}
-                </span>
-                <span class="text-black-light text-xs" ng-if="event.age_range"><i class="fa fa-users" aria-hidden="true"></i> {{event.age_range.name}}</span>
-              </div>
-
-              <div>
-                <span class="text-black-light text-xs" ng-if="event.nb_free_places > 0">{{event.nb_free_places}} {{ 'app.public.events_list.still_available' | translate }}</span>
-                <span class="text-black-light text-xs" ng-if="event.nb_total_places > 0 && event.nb_free_places <= 0" translate>{{ 'app.public.events_list.sold_out' }}</span>
-                <span class="text-black-light text-xs" ng-if="event.nb_total_places == -1" translate>{{ 'app.public.events_list.cancelled' }}</span>
-                <span class="text-black-light text-xs" ng-if="!event.nb_total_places" translate>{{ 'app.public.events_list.without_reservation' }}</span>
-              </div>
             </div>
 
-            <!-- Event Image -->
+            <div>
-            <div class="pull-right crop-155">
+              <span class="text-black-light text-xs" ng-if="event.nb_free_places > 0">{{event.nb_free_places}} {{ 'app.public.events_list.still_available' | translate }}</span>
-              <img class="pull-right" ng-src="{{event.event_image_small}}" title="{{event.title}}" ng-if="event.event_image">
+              <span class="text-black-light text-xs" ng-if="event.nb_total_places > 0 && event.nb_free_places <= 0" translate>{{ 'app.public.events_list.sold_out' }}</span>
-              <img class="pull-right img-responsive" src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder ng-if="!event.event_image">
+              <span class="text-black-light text-xs" ng-if="event.nb_total_places == -1" translate>{{ 'app.public.events_list.cancelled' }}</span>
+              <span class="text-black-light text-xs" ng-if="!event.nb_total_places" translate>{{ 'app.public.events_list.without_reservation' }}</span>
             </div>
+          </div>
 
-          </a>
+          <!-- Event Image -->
-
+          <div class="Event-picture" ng-if="event.event_image">
-        </div>
+            <img ng-src="{{event.event_image_small}}" title="{{event.title}}">
+          </div>
+        </a> 
       </div>
     </div>
 

app/frontend/templates/events/show.html

@@ -83,7 +83,7 @@
         <dl class="text-sm">
           <dt><i class="fa fa-calendar" aria-hidden="true"></i> {{ 'app.public.events_show.dates' | translate }}</dt>
           <dd>{{ 'app.public.events_show.beginning' | translate }} <span class="text-u-l">{{event.start_date | amDateFormat:'L'}}</span><br>{{ 'app.public.events_show.ending' | translate }} <span class="text-u-l">{{event.end_date | amDateFormat:'L'}}</span></dd>
-          <dt><i class="fa fa-clock-o"></i> {{ 'app.public.events_show.opening_hours' | translate }}</dt>
+          <dt><i class="fas fa-clock"></i> {{ 'app.public.events_show.opening_hours' | translate }}</dt>
           <dd ng-if="event.all_day == 'true'"><span translate>{{ 'app.public.events_show.all_day' }}</span></dd>
           <dd ng-if="event.all_day == 'false'">{{ 'app.public.events_show.from_time' | translate }} <span class="text-u-l">{{event.start_date | amDateFormat:'LT'}}</span> {{ 'app.public.events_show.to_time' | translate }} <span class="text-u-l">{{event.end_date | amDateFormat:'LT'}}</span></dd>
         </dl>

app/frontend/templates/home/events.html

@@ -1,63 +1,51 @@
 <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>
+  <h4 class="text-sm m-t-sm">
+    {{ 'app.public.home.fablab_s_next_events' | translate }}
+    <a ui-sref="app.public.events_list">
+      <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="home-events-list" ng-repeat="event in (upcomingEvents.length/3 | array)">
+    <div class="Event" ng-repeat="event in upcomingEvents.slice(3*$index, 3*$index + 3)" ui-sref="app.public.events_show({id: event.id})">
+      <div class="Event-picture">
+        <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder ng-if="!event.event_image" class="img-responsive">
+        <img ng-if="event.event_image" src="{{event.event_image_medium}}">
+      </div> 
 
-    <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="Event-desc">
+        <h3>{{event.title}}</h3>
+        <span class="v-middle badge text-xs" ng-class="'bg-{{event.category.slug}}'">{{event.category.name}}</span>
+        <p ng-bind-html="event.description | simpleText | humanize : 500 | breakFilter"></p>
+      </div>
 
-
+      <div class="Event-info">
-      <div class="widget panel panel-default" ui-sref="app.public.events_show({id: event.id})">
+        <div class="Event-info-item">
-        <div class="panel-heading picture" style="background-image: url({{event.event_image_medium}});" >
+          <i class="fa fa-calendar"></i>
-          <img src="data:image/png;base64," data-src="holder.js/100%x100%/text:&#xf03e;/font:'Font Awesome 5 Free'/icon" bs-holder ng-if="!event.event_image" class="img-responsive">
+          <h6 class="" 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="" ng-show="isOneDayEvent(event)">{{ 'app.public.home.on_the_date' | translate:{DATE:(event.start_date | amDateFormat:'L')} }}</h6>
         </div>
-        <div class="panel-body" style="heigth:170px;">
+        <div class="Event-info-item">
-          <div class="row">
+          <i class="fas fa-clock"></i>
-            <div class="col-xs-9">
+          <h6 class="">
-              <h1 class="m-b">{{event.title}}</h1>
+            <span ng-if="event.all_day == 'true'" translate>{{ 'app.public.home.all_day' }}</span>
-            </div>
+            <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>
-            <div class="col-xs-3">
+          </h6>
-              <span class="v-middle badge text-xs" ng-class="'bg-{{event.category.slug}}'">{{event.category.name}}</span>
+        </div>
-            </div>
+        <div class="Event-info-item">
-          </div>
+          <i class="fa fa-user"></i>
-          <p class="event-description" ng-bind-html="event.description | simpleText | humanize : 500 | breakFilter"></p>
+          <h6 class="">
-
+            <span ng-if="event.nb_free_places > 0">{{ 'app.public.home.still_available' | translate }} {{event.nb_free_places}}</span>
-          <hr/>
+            <span ng-if="!event.nb_total_places" translate>{{ 'app.public.home.without_reservation' }}</span>
-          <div class="row">
+            <span ng-if="event.nb_total_places > 0 && event.nb_free_places <= 0" translate>{{ 'app.public.home.event_full' }}</span>
-            <div class="col-sm-6 row m-b-sm">
+          </h6>
-              <i class="fa fa-calendar red col-xs-3 padder-icon"></i>
+        </div>
-              <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>
+        <div class="Event-info-item">
-              <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>
+          <i class="fa fa-bookmark"></i>
-            </div>
+          <h6 class="">
-            <div class="col-sm-6 row m-b-sm">
+            <span ng-if="event.amount == 0" translate>{{ 'app.public.home.free_admission' }}</span>
-              <i class="fa fa-clock-o red col-xs-3 padder-icon"></i>
+            <span ng-if="event.amount > 0">{{ 'app.public.home.full_price' | translate }} {{event.amount | currency}}</span>
-              <h6 class="m-n col-xs-9">
+          </h6>
-                <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.without_reservation' }}</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>

app/frontend/templates/trainings/index.html

@@ -41,7 +41,7 @@
             </div>
             <div class="col-sm-6 no-padder">
               <div class="btn btn-default btn-block padder-v no-b red" ng-click="showTraining(training)">
-                <i class="fa fa-eye"></i> {{ 'app.shared.buttons.consult' | translate }}
+                <i class="fas fa-eye"></i> {{ 'app.shared.buttons.consult' | translate }}
               </div>
             </div>
           </div>