fab-manager/app/frontend/templates/projects/show.html

<div>

<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="fas fa-long-arrow-alt-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>{{ project.name }} <span class="badge" ng-if="project.state == 'draft'" translate>{{ 'app.public.projects_show.rough_draft' }}</span></h1>
      </section>
    </div>

    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md">
      <section class="heading-actions wrapper">

          <a ui-sref="app.logged.projects_edit({id: project.id})" ng-if="projectEditableBy(currentUser) || isAuthorized('admin')" class="btn btn-lg btn-warning bg-white b-2x rounded m-t-xs text-u-c text-sm"><i class="fa fa-edit"></i> {{ 'app.shared.buttons.edit' | translate }}</a>
          <a ng-click="deleteProject(event)" ng-if="projectDeletableBy(currentUser) || isAuthorized('admin')" class="btn btn-lg btn-danger b-2x rounded no-b m-t-xs"><i class="fa fa-trash-o"></i></a>

      </section>
    </div>
  </div>
</section>


<div class="row no-gutter">
  <div class="col-sm-12 col-md-12 col-lg-9 b-r-lg">

    <div class="article wrapper-lg">

      <div class="article-thumbnail" ng-if="project.project_image">
        <a href="{{project.project_full_image}}" target="_blank"><img ng-src="{{project.project_image}}" alt="{{project.name}}"></a>
      </div>

      <h3 translate>{{ 'app.public.projects_show.project_description' }}</h3>
      <p ng-bind-html="project.description | toTrusted"></p>

      <div class="article-steps">
        <div class="row article-step m-b-lg" ng-repeat="step in project.project_steps_attributes">
          <div class="col-md-12 m-b-xs">
             <h3 class="well well-simple step-title">{{ 'app.public.projects_show.step_N' | translate:{INDEX:step.step_nb} }} : {{step.title}}</h3>
          </div>
          <div ng-repeat-start="image in step.project_step_images_attributes" class="clearfix" ng-if="$index % 3 == 0"></div>
          <div class="col-md-4" ng-repeat-end>
            <a href="{{image.attachment_full_url}}" target="_blank"><img class="m-b" ng-src="{{image.attachment_url}}" alt="{{image.attachment}}" ></a>
          </div>
          <div class="col-md-8" ng-class="{'col-md-12' : step.project_step_images_attributes.length > 1 || step.project_step_images_attributes.length == 0}">

              <p ng-bind-html="step.description | toTrusted"></p>
          </div>


        </div>
      </div>

    </div>

    <div class="text-center" id="social-share">
      <a ng-href="{{shareOnFacebook()}}" target="_blank" class="btn btn-facebook btn-lg m-t"><i class="fa fa-facebook m-r"></i> {{ 'app.public.projects_show.share_on_facebook' | translate }}</a>
      <a ng-href="{{shareOnTwitter()}}" target="_blank" class="btn btn-twitter btn-lg m-t"><i class="fa fa-twitter m-r"></i> {{ 'app.public.projects_show.share_on_twitter' | translate }}</a>
    </div>

    <div class="wrapper-lg" ng-if="disqusShortname">
      <dir-disqus disqus-shortname="{{ disqusShortname }}" disqus-identifier="project_{{ project.id }}" disqus-url="{{ projectUrl }}" ready-to-bind="{{ project }}">
      </dir-disqus>
    </div>

  </div>

  <div class="col-sm-12 col-md-12 col-lg-3">


    <div class="text-center m-t-lg m-v">
      <div class="thumb-lg m-b-xs">
        <fab-user-avatar ng-model="project.author.user_avatar" avatar-class="thumb-50"></fab-user-avatar>
      </div>
      <div>
        <a ng-show="project.author_id" class="text-sm font-sbold project-author" ui-sref="app.logged.members_show({id: project.author.slug})">
          <i> {{ 'app.public.projects_show.by_name' | translate:{NAME:project.author.first_name} }}</i>
        </a>
        <span ng-hide="project.author_id" class="text-sm font-sbold text-gray" translate>{{ 'app.public.projects_show.deleted_user' }}</span>
      </div>
      <small class="text-xs m-b"><i>{{ 'app.public.projects_show.posted_on_' | translate }} {{project.created_at | amDateFormat: 'LL'}}</i></small>


    </div>

    <section class="widget panel b-a m" ng-if="project.project_caos_attributes">
      <div class="panel-heading b-b">
        <span class="badge bg-warning pull-right">{{project.project_caos_attributes.length}}</span>
        <h3 translate translate-values="{COUNT:project.project_caos_attributes.length}">{{ 'app.public.projects_show.CAD_file_to_download' }}</h3>
      </div>

        <ul class="widget-content list-group list-group-lg no-bg auto">
          <li ng-repeat="file in project.project_caos_attributes" class="list-group-item no-b clearfix">
            <a target="_blank" ng-href="{{file.attachment_url}}" download="{{file.attachment_url}}"><i class="fa fa-arrow-circle-o-down"> </i> {{file.attachment | humanize : 25}}</a>
          </li>
        </ul>
    </section>

    <section class="widget panel b-a m" ng-if="project.machines">
      <div class="panel-heading b-b">
        <span class="badge bg-warning pull-right">{{project.machines.length}}</span>
        <h3 translate>{{ 'app.public.projects_show.machines_and_materials' }}</h3>
      </div>

        <ul class="widget-content list-group list-group-lg no-bg auto">
          <li ng-repeat="machine in project.machines" class="list-group-item no-b clearfix">
            <a ui-sref="app.public.machines_show({id: machine.id})">{{machine.name}}</a>
          </li>
        </ul>

        <ul class="widget-content list-group list-group-lg no-bg auto">
          <li ng-repeat="component in project.components" class="list-group-item no-b clearfix">
            {{component.name}}
          </li>
        </ul>
    </section>

    <section class="widget panel b-a m" ng-if="project.project_users.length > 0">
      <div class="panel-heading b-b">
        <span class="badge bg-warning pull-right">{{project.project_users.length}}</span>
        <h3 translate>{{ 'app.public.projects_show.collaborators' }}</h3>
      </div>

        <ul class="widget-content list-group list-group-lg no-bg auto">
          <li class="list-group-item no-b clearfix block-link" ng-repeat="collaborator in project.project_users" ui-sref="app.logged.members_show({id: collaborator.slug})">
            <span class="pull-left thumb-sm avatar m-r">
              <fab-user-avatar ng-model="collaborator.user_avatar" avatar-class="thumb-38"></fab-user-avatar>

              <i class="on b-white bottom" ng-if="collaborator.is_valid"></i>
              <i class="off b-white bottom" ng-if="!collaborator.is_valid"></i>
            </span>
            <span class="clear"><span>{{collaborator.full_name}}</span>
              <small class="text-muted clear text-ellipsis text-c">{{collaborator.username}}</small>
            </span>

          </li>
        </ul>
    </section>

    <section class="widget panel b-a m" ng-if="project.licence">
      <div class="panel-heading b-b">
        <h3 translate>{{ 'app.public.projects_show.licence' }}</h3>
      </div>
      <div class="panel-body">
        {{ project.licence.name }}
      </div>
    </section>

      <section class="widget b-t">

          <div class="widget-content text-center m-t">
              <a href="#" ng-click="signalAbuse($event)"><i class="fa fa-warning"></i> {{ 'app.public.projects_show.report_an_abuse' | translate }}</a>
          </div>
      </section>
  </div>
</div>


</div>