quay/static/partials/view-repo.html

<div class="resource-view" resource="repository" error-message="'No Repository Found'">
  <div class="container repo">
    <!-- Repo Header -->
    <div class="header">
      <h3>
        <span class="repo-circle" repo="repo"></span>
        <span style="color: #aaa;"> {{repo.namespace}}</span> <span style="color: #ccc">/</span> {{repo.name}}
        <span class="settings-cog" ng-show="repo.can_admin" title="Repository Settings" bs-tooltip="tooltip.title" data-placement="bottom">
          <a href="{{ '/repository/' + repo.namespace + '/' + repo.name + '/admin' }}">
            <i class="fa fa-cog fa-lg"></i>
          </a>
        </span>
      </h3>   
      
      <!-- Pull command -->
      <div class="pull-command visible-md visible-lg" style="display: none;">
        <span class="pull-command-title">Pull repository:</span>
        <div class="pull-container">
          <div class="input-group">
            <input id="pull-text" type="text" class="form-control" value="{{ 'docker pull quay.io/' + repo.namespace + '/' + repo.name }}" readonly>
            <span id="copyClipboard" class="input-group-addon" title="Copy to Clipboard" data-clipboard-target="pull-text">
              <i class="fa fa-copy"></i>
            </span>
          </div>
        </div>

        <div id="clipboardCopied" class="hovering" style="display: none">
          Copied to clipboard
        </div>
      </div>
    </div>

    <!-- Status boxes -->
    <div class="status-boxes">
      <div id="buildInfoBox" class="status-box" ng-show="repo.is_building"
           bs-popover="'static/partials/build-status-item.html'" data-placement="bottom">
        <span class="title">
          <span class="quay-spinner"></span>
          <b>Building Images</b>
        </span>
        <span class="count" ng-class="buildsInfo ? 'visible' : ''"><span>{{ buildsInfo ? buildsInfo.length : '-' }}</span></span>
      </div>
    </div>

    <!-- Description -->
    <div class="description markdown-input" content="repo.description" can-write="repo.can_write"
         content-changed="updateForDescription" field-title="'repository description'"></div>

    <!-- Empty message -->
    <div class="repo-content" ng-show="!currentTag.image && !repo.is_building">
      <div class="empty-message">
        This repository is empty
      </div>

      <div class="empty-description" ng-show="repo.can_write">
        To push images to this repository:<br><br>
        <pre>sudo docker tag <i>0u123imageidgoeshere</i> quay.io/{{repo.namespace}}/{{repo.name}}
sudo docker push quay.io/{{repo.namespace}}/{{repo.name}}</pre>
      </div>
    </div>

    <div class="repo-content" ng-show="!currentTag.image && repo.is_building">
      <div class="empty-message">
        Your build is currently processing, if this takes longer than an hour, please contact <a href="mailto:support@quay.io">Quay.io support</a>
      </div>
    </div>

    <!-- Content view -->
    <div class="repo-content" ng-show="currentTag.image">
      <!-- Image History -->
      <div id="image-history" style="max-height: 10px;">
        <div class="row">
          <!-- Tree View container -->
          <div  class="col-md-8">
            <div class="panel panel-default">
              <div class="panel-heading">
                <!-- Tag dropdown -->
                <div class="tag-dropdown dropdown" title="Tags" bs-tooltip="tooltip.title" data-placement="top">
                  <i class="fa fa-tag"><span class="tag-count">{{getTagCount(repo)}}</span></i>
                  <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{currentTag.name}} <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li ng-repeat="tag in repo.tags">
                      <a href="javascript:void(0)" ng-click="setTag(tag.name)">{{tag.name}}</a>
                    </li>
                  </ul>
                </div>
                <span class="right-title">Tags</span>                
              </div>

              <!-- Image history tree -->
              <div class="resource-view" resource="imageHistory">
                <div id="image-history-container" onresize="tree.notifyResized()"></div>
              </div>
            </div>	
          </div>

          <!-- Side Panel -->
          <div class="col-md-4">
            <div class="panel panel-default">
              <div class="panel-heading">
                <!-- Image dropdown -->
                <div class="tag-dropdown dropdown" title="Images" bs-tooltip="tooltip.title" data-placement="top">
                  <i class="fa fa-archive"><span class="tag-count">{{imageHistory.value.length}}</span></i>
                  <a href="javascript:void(0)" class="dropdown-toggle" data-toggle="dropdown">{{currentImage.id.substr(0, 12)}} <b class="caret"></b></a>
                  <ul class="dropdown-menu">
                    <li ng-repeat="image in imageHistory.value">
                      <a href="javascript:void(0)" ng-click="setImage(image)">{{image.id.substr(0, 12)}}</a>
                    </li>
                  </ul>
                </div>
                <span class="right-title">Image</span>
              </div>
              
              <div class="panel-body">
                <div id="current-image">
                  <div ng-show="currentImage.comment">
                    <blockquote style="margin-top: 10px;">
                      <span class="markdown-view" content="currentImage.comment"></span>
                    </blockquote>
                  </div>

                  <dl class="dl-normal">
                    <dt>Created</dt>
                    <dd am-time-ago="parseDate(currentImage.created)"></dd>
                    <dt>Image ID</dt>
                    <dd><a href="{{'/repository/' + repo.namespace + '/' + repo.name + '/image/' + currentImage.id}}">{{ currentImage.id }}</a></dd>
                  </dl>

                  <!-- Image changes loading -->
                  <div class="resource-view" resource="currentImageChangeResource">
                    <div class="changes-container small-changes-container"
                         ng-show="currentImageChanges.changed.length || currentImageChanges.added.length || currentImageChanges.removed.length">
                      <div class="changes-count-container accordion-toggle" data-toggle="collapse" data-parent="#accordion" data-target="#collapseChanges">
                        <span class="change-count added" ng-show="currentImageChanges.added.length > 0" title="Files Added"
                              bs-tooltip="tooltip.title" data-placement="top">
                          <i class="fa fa-plus-square"></i>
                          <b>{{currentImageChanges.added.length}}</b>
                        </span>
                        <span class="change-count removed" ng-show="currentImageChanges.removed.length > 0" title="Files Removed"
                              bs-tooltip="tooltip.title" data-placement="top">
                          <i class="fa fa-minus-square"></i>
                          <b>{{currentImageChanges.removed.length}}</b>
                        </span>
                        <span class="change-count changed" ng-show="currentImageChanges.changed.length > 0" title="Files Changed"
                              bs-tooltip="tooltip.title" data-placement="top">
                          <i class="fa fa-pencil-square"></i>
                          <b>{{currentImageChanges.changed.length}}</b>
                        </span>
                      </div>

                      <div id="collapseChanges" class="panel-collapse collapse in">
                        <div class="well well-sm">		     
                          <div class="change added" ng-repeat="file in currentImageChanges.added | limitTo:5">
                            <i class="fa fa-plus-square"></i>
                            <span title="{{file}}">{{file}}</span>
                          </div>
                          <div class="change removed" ng-repeat="file in currentImageChanges.removed | limitTo:5">
                            <i class="fa fa-minus-square"></i>
                            <span title="{{file}}">{{file}}</span>
                          </div>
                          <div class="change changed" ng-repeat="file in currentImageChanges.changed | limitTo:5">
                            <i class="fa fa-pencil-square"></i>
                            <span title="{{file}}">{{file}}</span>
                          </div>
                        </div>
                        <div class="more-changes" ng-show="getMoreCount(currentImageChanges) > 0">
                          <a href="{{'/repository/' + repo.namespace + '/' + repo.name + '/image/' + currentImage.id}}">
                            And {{getMoreCount(currentImageChanges)}} more...
                          </a>
                        </div>
                      </div>
                    </div>           
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>