- Make robots manager fully responsive

- Add a cor-table which automatically stacks and collapses on mobile views
This commit is contained in:
Joseph Schorr 2015-04-17 16:43:53 -04:00
parent d26927cb45
commit 32635cc641
8 changed files with 222 additions and 37 deletions

View file

@ -2,26 +2,23 @@
<div class="cor-loader" ng-show="loading"></div>
<div ng-show="!loading">
<div class="manager-header">
<div class="side-controls">
<span class="popup-input-button" pattern="ROBOT_PATTERN"
placeholder="'Robot Account Name'"
submitted="createRobot(value)">
<i class="fa fa-plus"></i> Create Robot Account
</span>
</div>
<h3>Robot Accounts</h3>
<div class="manager-header" header-title="Robot Accounts">
<span class="popup-input-button" pattern="ROBOT_PATTERN"
placeholder="'Robot Account Name'"
submitted="createRobot(value)">
<i class="fa fa-plus"></i> Create Robot Account
</span>
</div>
<div class="manager-header section-description-header">
<div class="section-description-header">
Robot Accounts are named tokens that can be granted permissions on multiple repositories
under this <span ng-if="organization">organization</span><span ng-if="!organization">user namespace</span>. They are typically used in environments where credentials will
be shared, such as deployment systems.
</div>
<span class="co-filter-box" ng-show="robots.length">
<div class="manager-filter-box" ng-show="robots.length">
<input class="form-control" type="text" ng-model="robotFilter" placeholder="Filter Robot Accounts...">
</span>
</div>
<div class="empty" ng-if="!robots.length">
<div class="empty-primary-msg">No robot accounts defined.</div>
@ -37,9 +34,9 @@
</div>
</div>
<table class="co-table" ng-if="(robots | filter:robotFilter).length">
<table class="cor-table" ng-if="(robots | filter:robotFilter).length">
<thead>
<td class="caret-col" ng-if="(user || organization.is_admin) && Config.isNewLayout()"></td>
<td class="caret-col hidden-xs" ng-if="(user || organization.is_admin) && Config.isNewLayout()"></td>
<td>Robot Account Name</td>
<td ng-if="organization && Config.isNewLayout()">Teams</td>
<td ng-if="Config.isNewLayout()">Repository Permissions</td>
@ -48,7 +45,7 @@
<tbody ng-repeat="robotInfo in robots | filter:robotFilter | orderBy:getShortenedRobotName">
<tr ng-class="robotInfo.showing_permissions ? 'open' : 'closed'">
<td class="caret-col" ng-if="(user || organization.is_admin) && Config.isNewLayout()">
<td class="caret-col hidden-xs" ng-if="(user || organization.is_admin) && Config.isNewLayout()">
<span ng-if="robotInfo.repositories.length > 0" ng-click="showPermissions(robotInfo)">
<i class="fa"
ng-class="robotInfo.showing_permissions ? 'fa-caret-down' : 'fa-caret-right'"
@ -56,7 +53,7 @@
</span>
</td>
<td class="robot">
<i class="fa fa-wrench"></i>
<i class="fa fa-wrench hidden-xs"></i>
<a ng-click="showRobot(robotInfo)">
<span class="prefix">{{ getPrefix(robotInfo.name) }}+</span>{{ getShortenedName(robotInfo.name) }}
</a>
@ -81,7 +78,12 @@
<span class="member-perm-summary" ng-if="robotInfo.repositories.length > 0">
Permissions on
<span class="anchor" href="javascript:void(0)" is-text-only="!organization.is_admin" ng-click="showPermissions(robotInfo)">{{ robotInfo.repositories.length }}
<span class="anchor hidden-xs" href="javascript:void(0)" is-text-only="!organization.is_admin"
ng-click="showPermissions(robotInfo)">{{ robotInfo.repositories.length }}
<span ng-if="robotInfo.repositories.length == 1">repository</span>
<span ng-if="robotInfo.repositories.length > 1">repositories</span>
</span>
<span class="visible-xs" href="javascript:void(0)">{{ robotInfo.repositories.length }}
<span ng-if="robotInfo.repositories.length == 1">repository</span>
<span ng-if="robotInfo.repositories.length > 1">repositories</span>
</span>