Pebble app store application template

gistfile1.txt

<section class="app-detail" ng-class="::app.type">
  <article class="app">
    <div class="app-download">
      <div class="app-identity">
        <div class="app-icon" ng-if="::app.icon_image">
          <img ng-src="{{::app.icon_image['48x48']}}" >
        </div>
        <div class="app-title-author">
          <h1 class="app-title">{{::app.title}}</h1>
          <h2 class="app-author">{{::app.author}}</h2>
        </div>
      </div>
      <div class="app-download-actions">
        <pbl-add-btn app="app"></pbl-add-btn>
      </div>

    </div>

    <div class="featured-slider app-preview" ng-if="::app.header_images">
      <ul rn-carousel rn-carousel-auto-slide="5" rn-carousel-index="bannerIndex">
        <li ng-repeat="src in ::app.header_images">
          <img ng-src="{{src['720x320']}}" class="app-image">
        </li>
      </ul>
      <div class="slideSelectors" rn-carousel-indicators ng-if="applications.length > 1" slides="applications" rn-carousel-index="bannerIndex"></div>
    </div>

    <div class="app-meta">
      <div class="app-companion">
        <div class="app-android-ios app-companion-type" ng-if="app.companionPlatform == platforms.IOS_AND_ANDROID || app.companionPlatform == platforms.NONE"></div>
        <div class="app-ios-only app-companion-type" ng-if="app.companionPlatform ==  platforms.IOS">Only</div>
        <div class="app-android-only app-companion-type" ng-if="app.companionPlatform ==  platforms.ANDROID">Only</div>
      </div>

      <div class="app-hearts-container">
        <div class="pill" ng-click="app.toggleHeart()" ng-class="{orange: app.hearted}" ng-disabled="!app.userInfo">
          <div class="hearts">
            <div class="icon heart"
                 ng-class="{
                    orange:!app.loadingHearts &&  app.hearted || app.loadingHearts && !app.hearted,
                    black: !app.loadingHearts && !app.hearted || app.loadingHearts && app.hearted
                  }"
            ></div>
            {{app.hearts | roughNumber}}
          </div>
        </div>
      </div>

      <div class="app-os">
        <div
          ng-if="app.type == 'watchapp' && !app.companionSupported"
          class="only-app" >
          <span>Watchapp</span>
        </div>
        <div
          ng-if="app.type == 'watchface' && !app.companionSupported"
          class="only-face">
          <span>Watchface</span>
        </div>
        <div
            ng-if="app.companionSupported || app.type == 'companion-app'"
            ng-click="app.openModal()"
            ng-disabled="!app.userInfo || !app.companionSupported"
            class="companion-categorization">
          <svg
            version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-561 367 156 68"
            enable-background="new -561 367 156 68" xml:space="preserve">
            <g id="Page-1" sketch:type="MSPage">
              <path fill="none" stroke="#555555" stroke-width="2" d="M-406,415h-154v-39c0-4.4,3.6-8,8-8h138c4.4,0,8,3.6,8,8V415z"/>
              <path id="APP" ng-class="{'browser-app' : (platform == 'all' && app.companionPlatform == platforms.IOS_AND_ANDROID) }" sketch:type="MSShapeGroup" fill="#555555"
                d="M-478.7,394.7h-6.2l-1.2,3.6h-2.9l5.8-16.5h2.8l5.8,16.5h-3
                L-478.7,394.7z M-484.1,392.3h4.6l-1-3.1l-1.3-4.2h-0.1l-1.2,4L-484.1,392.3z M-470.3,389.3h3.8c0.8,0,1.4-0.2,1.9-0.7
                c0.5-0.5,0.7-1.1,0.7-1.9s-0.2-1.4-0.7-1.9c-0.5-0.5-1.1-0.7-1.9-0.7h-3.8V389.3z M-465.9,381.7c0.8,0,1.5,0.2,2.1,0.5
                c0.6,0.3,1.1,0.7,1.5,1.2c0.4,0.5,0.7,1,0.9,1.6c0.2,0.6,0.3,1.2,0.3,1.8s-0.1,1.2-0.3,1.8s-0.5,1.1-0.9,1.6
                c-0.4,0.5-0.9,0.9-1.5,1.2c-0.6,0.3-1.3,0.5-2,0.5h-4.3v6.4h-2.7v-16.5H-465.9z M-456.7,389.3h3.8c0.8,0,1.4-0.2,1.9-0.7
                c0.5-0.5,0.7-1.1,0.7-1.9s-0.2-1.4-0.7-1.9c-0.5-0.5-1.1-0.7-1.9-0.7h-3.8V389.3z M-452.3,381.7c0.8,0,1.5,0.2,2.1,0.5
                c0.6,0.3,1.1,0.7,1.5,1.2c0.4,0.5,0.7,1,0.9,1.6c0.2,0.6,0.3,1.2,0.3,1.8s-0.1,1.2-0.3,1.8s-0.5,1.1-0.9,1.6
                c-0.4,0.5-0.9,0.9-1.5,1.2c-0.6,0.3-1.3,0.5-2,0.5h-4.3v6.4h-2.7v-16.5H-452.3z"/>

              <path ng-if="app.companionPlatform == platforms.ANDROID || (app.companionPlatform == platforms.IOS_AND_ANDROID && platform == platforms.ANDROID)"
                id="android-logo" sketch:type="MSShapeGroup" fill="#555555" d="M-517.2,385.1L-517.2,385.1c-1,0-1.8,0.8-1.8,1.7v7.3
                c0,0.9,0.8,1.7,1.7,1.7h0.1c0.9,0,1.7-0.8,1.7-1.7v-7.3C-515.5,385.9-516.3,385.1-517.2,385.1L-517.2,385.1z M-514.7,396.9
                c0,0.8,0.7,1.5,1.5,1.5h1.6v3.9c0,0.9,0.8,1.7,1.7,1.7h0.1c0.9,0,1.7-0.8,1.7-1.7v-3.9h2.3v3.9c0,0.9,0.8,1.7,1.7,1.7h0.1
                c0.9,0,1.7-0.8,1.7-1.7v-3.9h1.6c0.8,0,1.5-0.7,1.5-1.5v-11.5h-15.5V396.9L-514.7,396.9z M-503.1,378.4l1.3-2
                c0.1-0.1,0-0.3-0.1-0.4c-0.1-0.1-0.3,0-0.4,0.1l-1.4,2.1c-1-0.4-2.2-0.6-3.4-0.6c-1.2,0-2.3,0.2-3.4,0.6l-1.4-2.1
                c-0.1-0.1-0.3-0.2-0.4-0.1c-0.1,0.1-0.2,0.3-0.1,0.4l1.3,2c-2.4,1.2-4,3.3-4,5.8c0,0.2,0,0.3,0,0.5h15.6c0-0.1,0-0.3,0-0.5
                C-499.1,381.8-500.7,379.6-503.1,378.4L-503.1,378.4z M-510.5,382c-0.4,0-0.8-0.3-0.8-0.7c0-0.4,0.3-0.7,0.8-0.7
                c0.4,0,0.8,0.3,0.8,0.7C-509.8,381.7-510.1,382-510.5,382L-510.5,382z M-503.3,382c-0.4,0-0.8-0.3-0.8-0.7c0-0.4,0.3-0.7,0.8-0.7
                c0.4,0,0.8,0.3,0.8,0.7C-502.6,381.7-502.9,382-503.3,382L-503.3,382z M-496.6,385.1L-496.6,385.1c-1,0-1.8,0.8-1.8,1.7v7.3
                c0,0.9,0.8,1.7,1.7,1.7h0.1c0.9,0,1.7-0.8,1.7-1.7v-7.3C-494.9,385.9-495.7,385.1-496.6,385.1L-496.6,385.1z"/>

              <path ng-if="app.companionPlatform == platforms.IOS || (app.companionPlatform == platforms.IOS_AND_ANDROID && platform == platforms.IOS)"
                id="ios-logo" sketch:type="MSShapeGroup" fill="#555555" d="M-499.7,390.9c0-3.5,2.9-5.2,3.1-5.3c-1.7-2.4-4.3-2.7-5.2-2.8
                c-2.2-0.2-4.3,1.3-5.4,1.3c-1.1,0-2.8-1.3-4.7-1.2c-2.4,0-4.6,1.4-5.9,3.5c-2.5,4.3-0.6,10.6,1.8,14.1c1.2,1.7,2.6,3.6,4.5,3.5
                c1.8-0.1,2.5-1.1,4.6-1.1c2.2,0,2.8,1.1,4.7,1.1c1.9,0,3.2-1.7,4.3-3.4c1.4-2,1.9-3.9,2-4C-496,396.5-499.7,395.1-499.7,390.9
                L-499.7,390.9z M-503.3,380.5c1-1.2,1.7-2.8,1.5-4.5c-1.4,0.1-3.1,0.9-4.2,2.1c-0.9,1-1.7,2.7-1.5,4.3
                C-505.9,382.6-504.3,381.7-503.3,380.5L-503.3,380.5z"/>
              <path fill="#555555" stroke="#555555" stroke-width="2" d="M-560,415h154v11c0,4.4-3.6,8-8,8h-138c-4.4,0-8-3.6-8-8V415z"/>
              <text text-anchor="middle" x="-483" y="428.5" fill="#ffffff" font-size="14.5">REQUIRED</text>
            </g>
          </svg>
        </div>
      </div>
    </div>


    <div class="app-screenshots" ng-class="'screenshot-frame-' + screenshotFrame" >
      <div class="slider-container">
        <ul class="slider" rn-carousel rn-carousel-index="screenshotsCarouselIndex">
          <li ng-repeat="src in ::app.screenshot_images" class="slide" ng-class="$index == screenshotsCarouselIndex && 'current'">
            <img ng-src="{{src[app.screenshot_size]}}" class="screenshot"  />
          </li>
        </ul>
      </div>
    </div>

    <div class="app-description">
      <h1 class="description-title">Description</h1>
      <pre class="description-body app-value">{{::app.description}}</pre>
    </div>

    <ul class="app-attributes">
      <li class="app-attribute">
        <span class="attribute-key">Developer</span>
        <a class="attribute-value" ng-if="isWebview" ng-href="developer/{{::app.developer_id}}/1">{{::app.author}}</a>
        <span class="attribute-value" ng-if="!isWebview" >{{::app.author}}</span>
      </li>
      <li class="app-attribute">
        <span class="attribute-key">Category</span>
        <span class="attribute-value">{{::app.category_name}}</span>
      </li>
      <li class="app-attribute">
        <span class="attribute-key">Updated</span>
        <span class="attribute-value">{{::app.latest_release.published_date | date }}</span>
      </li>
      <!-- {{#unless isCompanion}} -->
      <li class="app-attribute">
        <span class="attribute-key">Version</span>
        <span class="attribute-value">{{::app.latest_release.version}}</span>
      </li>
      <!-- {{/unless}} -->
      </ul>

    <ul class="app-links">
      <li class="app-link">
        <a pbl-link ng-href="developer/{{::app.developer_id}}/1">
          MORE FROM THIS DEVELOPER
        </a>
      </li>

      <li class="app-link" ng-if="::app.website">
        <a ng-click="openExternal(app.website)">
          WEBSITE LINK
        </a>
      </li>

      <li class="app-link" ng-if="app.changelog.length">
        <a pbl-link ng-href="application/{{::app.id}}/changelog">
          VERSION INFORMATION
        </a>
      </li>

      <li class="app-link" ng-if="::app.source">
        <a ng-click="openExternal(app.source)">
          SOURCE LINK
        </a>
      </li>

      <li ng-if="isWebview" class="app-link">
        <a ng-click="openExternal('mailto:app_dev_{{::app.id}}@pebble-mail.com')">
          EMAIL DEVELOPER FOR SUPPORT
        </a>
      </li>

      <li ng-if="app.userInfo" class="app-link">
        <a ng-if="!app.flagged" ng-click="app.showFlagConfirm = true">REPORT/FLAG APP</a>
        <a ng-if="app.flagged" ng-click="app.showFlagConfirm = true">Unflag App</a>
      </li>

      <li ng-if="showDevSettings && app.latest_release.pbw_file" class="app-link">
        <a ng-click="openExternal(app.latest_release.pbw_file)">
          Download PBW
        </a>
      </li>
    </ul>

  </article>
</section>

<pbl-banner-ad ng-if="isBrowser"></pbl-banner-ad>

<div ng-if="app.showFlagConfirm" class="open-companion-modal-wrap">
  <div class="open-companion-modal reveal-modal tiny show">
    <p ng-if="!app.flagged">Flag this app for abuse? 

 Tap ok to report this app to Pebble if it contains inappropriate material.</p>
    <p ng-if="app.flagged">Are you sure you want to unflag this application?</p>
    <div class="buttons text-center">
      <div class="button-wrap">
        <button  ng-click="app.showFlagConfirm = false; $event.preventDefault()">
          No
        </button>
      </div>
      <div class="button-wrap">
        <button  ng-click="app.showFlagConfirm = false; app.toggleFlagged()">
          Yes
        </button>
      </div>
    </div>
  </div>
</div>