quay/static/partials/organizations.html

<div class="container org-list">  
  <div class="loading" ng-show="loading">
    <i class="fa fa-spinner fa-spin fa-3x"></i>
  </div>

  <div class="button-bar-right">
    <a href="/organizations/new/" title="Starts the process to create a new organization" bs-tooltip="tooltip.title">
      <button class="btn btn-success">
        <i class="fa fa-plus"></i>
        Create New Organization
      </button>
    </a>
    <a href="/user/?migrate" ng-show="!user.anonymous" title="Starts the process to convert this account into an organization" bs-tooltip="tooltip.title">
      <button class="btn btn-primary">
        <i class="fa fa-caret-square-o-right"></i>
        Convert account
      </button>
    </a>
  </div>

  <!-- Organizations -->
  <div ng-show="user.organizations.length > 0">
    <h2>Organizations</h2>

    <div class="organization-listing" ng-repeat="organization in user.organizations">
      <img class="gravatar" src="//www.gravatar.com/avatar/{{ organization.gravatar }}?s=32&amp;d=identicon">
      <a class="org-title" href="/organization/{{ organization.name }}">{{ organization.name }}</a>
    </div>
  </div>

  <!-- Organization Help/Tour -->
  <div class="product-tour" ng-show="!user.organizations || user.organizations.length == 0">

    <div class="tour-section row">
      <div class="col-md-12">
        <div class="tour-section-title">Organizations</div>
        <div class="tour-section-description">
          Organizations in Quay provide unique features for businesses and other
          groups, including team-based sharing and fine-grained permission controls.
        </div>
      </div>
    </div>

    
    <div class="tour-section row">
      <div class="col-md-7"><img src="/static/img/org-repo-list.png" title="Repositories - Quay" data-screenshot-url="https://quay.io/repository/" class="img-responsive"></div>
      <div class="col-md-5">
        <div class="tour-section-title">A central collection of repositories</div>
        <div class="tour-section-description">
          Your organization is the focal point for all activity that occurs within
          your public or private repositories. Your repositories are centrally visible
          and managed within the namespace of your organization. You may share
          your repositories with as many users and teams as you like, without
          any additional cost.
        </div>
      </div>
    </div>

    <div class="tour-section row">
      <div class="col-md-7 col-md-push-5"><img src="/static/img/org-admin.png" title="buynlarge Admin - Quay" data-screenshot-url="https://quay.io/organization/buynlarge/admin" class="img-responsive"></div>
      <div class="col-md-5 col-md-pull-7">
        <div class="tour-section-title">Organization settings at a glance</div>
        <div class="tour-section-description">
          Your organization allows you to view your private repository count
          and manage billing settings in a centralized place.
        </div>
        <div class="tour-section-description">
          You can also see all of the users who have access to your organization
          and the teams of which they are members. This allows you to audit the
          access that has been granted in your organization.
        </div>
      </div>
    </div>

    <div class="tour-section row">
      <div class="col-md-7"><img src="/static/img/org-teams.png" title="buynlarge - Quay" data-screenshot-url="https://quay.io/organization/buynlarge" class="img-responsive"></div>
      <div class="col-md-5">
        <div class="tour-section-title">Teams simplify access controls</div>
        <div class="tour-section-description">
          Teams allow your organization to delegate access to your namespace and
          repositories in a controlled fashion. Each team has permissions that
          apply across the entire org, and can also be given specific levels of
          access to specific repositories. A user is switching roles? No problem,
          change their team membership and their access will be adjusted accordingly.
        </div>
        <div class="tour-section-description">
          Owners of your organization, and members of other teams with
          administrator privileges, have full permissions to all repositories
          in the organization, as well as permissions to view and adjust the
          account settings for the organization. Add users to these teams with
          caution.
        </div>
      </div>
    </div>

    <div class="tour-section row">
      <div class="col-md-7 col-md-push-5"><img src="/static/img/org-repo-admin.png" title="buynlarge/orgrepo - Quay" data-screenshot-url="https://quay.io/repository/buynlarge/orgrepo" class="img-responsive"></div>
      <div class="col-md-5 col-md-pull-7">
        <div class="tour-section-title">Fine-grained control of sharing</div>
        <div class="tour-section-description">
          Repositories that you create within your organization can be assigned
          fine-grained permissions just like any other repository. You can also
          add teams that exist in your organization, or individual users from
          inside our outside your organization.
        </div>
        <div class="tour-section-description">
          In order to protect your intellectual property, we warn you before
          you share your repositories with anyone who is not currently a member
          of a team in your organization.
        </div>
      </div>
    </div>

    <div class="button-bar-right button-bar-bottom">
      <a href="/organizations/new/" title="Starts the process to create a new organization" bs-tooltip="tooltip.title">
        <button class="btn btn-success">
          <i class="fa fa-plus"></i>
          Create New Organization
        </button>
      </a>
      <a href="/user/?migrate" ng-show="!user.anonymous" title="Starts the process to convert this account into an organization" bs-tooltip="tooltip.title">
        <button class="btn btn-primary">
          <i class="fa fa-caret-square-o-right"></i>
          Convert account
        </button>
      </a>
    </div>
  </div>
</div>