ode-csslib-panda-manche/dist/template/portal/applications.html

Panda theme by Open Digital Education

<span ng-controller="ApplicationController">
  <div class="d-flex justify-content-between row mb-3">
    <h1 class="application__title font-weight-bold d-mobile-none col-lg-6">
      <i18n>portal.header.navigation.myapps</i18n>
    </h1>

    <!-- Search bar -->
    <section class="applications__search col-lg-4">
      <div class="input-searchbar">
        <span class="fa fa-search form-control-feedback"></span>
        <input
          role="search"
          type="search"
          ng-model="display.searchText"
          class="form-control"
          i18n-placeholder="apps.search"
          autofocus
        />
      </div>
    </section>
  </div>

  <!-- Applications section -->
  <section class="applications__list" id="apps">
    <!-- apps (can contain connectors) -->
    <article
      ng-repeat="application in filteredApplications = (applications | filter:searchDisplayName)"
      id="[[application.name]]"
      class="position-relative"
    >
      <!-- links for applications (not connector) -->
      <a
        ng-if="!application.isExternal"
        ng-href="[[application.address]]"
        class="application__item"
        target="[[application.target]]"
        title="[[translatedDisplayName(application)]]"
      >
        <img
          ng-if="isIconUrl(application)"
          class="application"
          skin-src="[[application.icon]]"
          img-on-error="[[themeAssetsPath]]/images/image-placeholder.png"
        />
        <i
          ng-if="!isIconUrl(application)"
          class="application [[application.icon]]"
        ></i>
        <span class="text-truncate text-truncate--2"
          >[[translatedDisplayName(application)]]</span
        >
      </a>

      <!-- links for connectors -->
      <a
        ng-if="application.isExternal"
        connector-lightbox-trigger="application"
        href=""
        class="application__item"
        title="[[translatedDisplayName(application)]]"
      >
        <img
          ng-if="isIconUrl(application)"
          class="application"
          skin-src="[[application.icon]]"
          img-on-error="[[themeAssetsPath]]/images/image-placeholder.png"
        />
        <i
          ng-if="!isIconUrl(application)"
          class="application [[application.icon]]"
        ></i>
        <span class="text-truncate text-truncate--2"
          >[[translatedDisplayName(application)]]</span
        >
      </a>
    </article>

    <div
      class="text-center"
      ng-if="display.searchText && !filteredApplications.length"
    >
      <p class="text-center m-3 font-italic">
        <i18n>apps.search.app.empty</i18n>
      </p>
    </div>
  </section>

  <!-- Connectors section -->
  <section
    class="applications__connector"
    ng-if="display.showConnectorSection && connectors && connectors.length > 0"
  >
    <h2>
      <span><i18n>apps.connectors</i18n></span>
    </h2>
    <section class="applications__list" id="connectors">
      <article
        ng-repeat="connector in filteredConnectors = (connectors | filter:searchDisplayName)"
        id="[[connector.name]]"
        class="position-relative"
      >
        <a
          href=""
          connector-lightbox-trigger="connector"
          id="[[connector.name]]"
          class="application__item connector"
          title="[[translatedDisplayName(connector)]]"
        >
          <img
            ng-if="isIconUrl(connector)"
            class="application"
            skin-src="[[connector.icon]]"
            img-on-error="[[themeAssetsPath]]/images/image-placeholder.png"
          />
          <i
            ng-if="!isIconUrl(connector)"
            class="application [[connector.icon]]"
          ></i>
          <span class="text-truncate text-truncate--2"
            >[[translatedDisplayName(connector)]]</span
          >
        </a>
      </article>

      <div
        class="text-center"
        ng-if="display.searchText && !filteredConnectors.length"
      >
        <p class="text-center m-3 font-italic">
          <i18n>apps.search.connector.empty</i18n>
        </p>
      </div>
    </section>
  </section>

  <connector-lightbox></connector-lightbox>
</span>