Finish mobilification of org view

This commit is contained in:
Joseph Schorr 2015-04-20 14:00:10 -04:00
parent 531ddadb8a
commit f1ea20315a
10 changed files with 153 additions and 112 deletions

View file

@ -10,6 +10,7 @@ from auth.permissions import AdministerOrganizationPermission, AdministerOrganiz
from auth.auth_context import get_authenticated_user from auth.auth_context import get_authenticated_user
from data import model from data import model
from auth import scopes from auth import scopes
from app import avatar
def log_view(log): def log_view(log):
@ -25,6 +26,7 @@ def log_view(log):
'kind': 'user', 'kind': 'user',
'name': log.performer.username, 'name': log.performer.username,
'is_robot': log.performer.robot, 'is_robot': log.performer.robot,
'avatar': avatar.get_data_for_user(log.performer)
} }
return view return view

View file

@ -0,0 +1,100 @@
.logs-view-element .header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
margin-bottom: 20px;
}
@media (max-width: 767px) {
.logs-view-element {
min-width: 300px;
}
.logs-view-element #bar-chart {
display: none;
}
.logs-view-element .date-line {
display: block;
margin-bottom: 10px;
}
.logs-view-element .date-line-caption {
display: inline-block;
width: 50px;
text-transform: capitalize;
}
.logs-view-element .manager-header {
padding-bottom: 72px;
}
}
.logs-view-element .table-container {
min-height: 200px;
}
.logs-view-element .manager-header .header-text {
font-size: 24px;
vertical-align: middle;
}
.logs-view-element .manager-header .header-text .mini {
font-size: 18px;
color: #999;
margin-left: 10px;
}
.logs-view-element .logs-date-picker {
width: 122px;
}
.logs-view-element .manager-header input {
font-size: 14px;
text-align: center;
border: 1px solid #eee;
padding: 4px;
border-radius: 4px;
}
.logs-view-element .manager-header .right {
float: right;
margin-left: 10px;
}
.logs-view-element .log i.fa {
margin-right: 6px;
}
.logs-view-element .log .circle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 6px;
margin-top: 6px;
vertical-align: middle;
float: left;
}
.logs-view-element .log .log-description {
margin-left: 20px;
display: block;
line-height: 25px;
}
.logs-view-element .log .log-description code {
max-width: 300px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
}
.logs-view-element .log-performer {
white-space: nowrap;
}
.logs-view-element .side-controls {
text-align: right;
margin-bottom: 20px;
}

View file

@ -40,7 +40,7 @@
right: 0px; right: 0px;
} }
.manager-header .manager-header-side-controls .btn { .manager-header .manager-header-side-controls .btn, .manager-header .manager-header-side-controls .popup-input-button {
display: block; display: block;
width: 100%; width: 100%;
} }

View file

@ -12,6 +12,13 @@
margin-left: 10px; margin-left: 10px;
} }
@media (max-width: 767px) {
.teams-manager .control-col {
padding-left: 55px;
padding-bottom: 10px;
}
}
.teams-manager .header-col .info-icon { .teams-manager .header-col .info-icon {
font-size: 16px; font-size: 16px;
} }

View file

@ -501,71 +501,6 @@ i.toggle-icon:hover {
visibility: hidden; visibility: hidden;
} }
.logs-view-element .header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
margin-bottom: 20px;
}
.logs-view-element .header .header-text {
font-size: 24px;
vertical-align: middle;
}
.logs-view-element .header .header-text .mini {
font-size: 18px;
color: #999;
margin-left: 10px;
}
.logs-view-element .logs-date-picker {
width: 122px;
}
.logs-view-element .header input {
font-size: 14px;
text-align: center;
border: 1px solid #eee;
padding: 4px;
border-radius: 4px;
}
.logs-view-element .header .right {
float: right;
}
.logs-view-element .log i.fa {
margin-right: 6px;
}
.logs-view-element .log .circle {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 6px;
margin-top: 6px;
vertical-align: middle;
float: left;
}
.logs-view-element .log .log-description {
margin-left: 20px;
display: block;
line-height: 25px;
}
.logs-view-element .log .log-description code {
max-width: 300px;
display: inline-block;
vertical-align: middle;
overflow: hidden;
text-overflow: ellipsis;
}
.logs-view-element .log-performer {
white-space: nowrap;
}
.billing-options-element .current-card { .billing-options-element .current-card {
font-size: 16px; font-size: 16px;

View file

@ -1,17 +1,14 @@
<div class="application-manager-element"> <div class="application-manager-element">
<div class="cor-loader" ng-show="loading"></div> <div class="cor-loader" ng-show="loading"></div>
<div ng-show="!loading"> <div ng-show="!loading">
<div class="manager-header"> <div class="manager-header" header-title="OAuth Applications">
<div class="side-controls"> <span class="popup-input-button" placeholder="'Application Name'"
<span class="popup-input-button" placeholder="'Application Name'" submitted="createApplication(value)">
submitted="createApplication(value)"> <i class="fa fa-plus"></i> Create New Application
<i class="fa fa-plus"></i> Create New Application </span>
</span>
</div>
<h3>OAuth Applications</h3>
</div> </div>
<div class="manager-header section-description-header"> <div class="section-description-header">
The OAuth Applications panel allows organizations to define custom OAuth applications that can be used by internal or external customers to access <span class="registry-name"></span> data on behalf of the customers. More information about the <span class="registry-name"></span> API can be found by contacting support. The OAuth Applications panel allows organizations to define custom OAuth applications that can be used by internal or external customers to access <span class="registry-name"></span> data on behalf of the customers. More information about the <span class="registry-name"></span> API can be found by contacting support.
</div> </div>
@ -23,7 +20,7 @@
</div> </div>
</div> </div>
<table class="co-table" ng-show="applications.length"> <table class="cor-table" ng-show="applications.length">
<thead> <thead>
<td>Application Name</td> <td>Application Name</td>
<td>Application URI</td> <td>Application URI</td>

View file

@ -1,16 +1,17 @@
<div class="logs-view-element"> <div class="logs-view-element">
<div class="header"> <div class="manager-header" header-title="Usage Logs">
<span class="header-text"> <span id="logs-range" class="mini">
<span ng-show="!performer">Usage Logs</span> <span class="date-line">
<span class="entity-reference" entity="performer" ng-show="performer"></span> <span class="date-line-caption">From</span>
<span id="logs-range" class="mini">
From
<input type="text" class="logs-date-picker input-sm" name="start" ng-model="logStartDate" data-max-date="{{ logEndDate }}" data-container="body" bs-datepicker/> <input type="text" class="logs-date-picker input-sm" name="start" ng-model="logStartDate" data-max-date="{{ logEndDate }}" data-container="body" bs-datepicker/>
<span class="add-on">to</span> </span>
<span class="date-line">
<span class="date-line-caption add-on">to</span>
<input type="text" class="logs-date-picker input-sm" name="end" ng-model="logEndDate" data-min-date="{{ logStartDate }}" bs-datepicker/> <input type="text" class="logs-date-picker input-sm" name="end" ng-model="logEndDate" data-min-date="{{ logStartDate }}" bs-datepicker/>
</span> </span>
</span> </span>
<span class="right"> <span class="hidden-xs right">
<i class="fa fa-bar-chart-o toggle-icon" ng-class="chartVisible ? 'active' : ''" <i class="fa fa-bar-chart-o toggle-icon" ng-class="chartVisible ? 'active' : ''"
ng-click="toggleChart()" data-title="Toggle Chart" bs-tooltip="tooltip.title"></i> ng-click="toggleChart()" data-title="Toggle Chart" bs-tooltip="tooltip.title"></i>
<a href="{{ logsPath }}" download="usage-log.json" target="_new"> <a href="{{ logsPath }}" download="usage-log.json" target="_new">
@ -19,13 +20,12 @@
</span> </span>
</div> </div>
<div class="cor-loader-inline" ng-show="loading"></div> <div>
<div ng-show="!loading">
<div id="bar-chart" style="width: 800px; height: 500px;" ng-show="chartVisible"> <div id="bar-chart" style="width: 800px; height: 500px;" ng-show="chartVisible">
<svg style="width: 800px; height: 500px;"></svg> <svg style="width: 800px; height: 500px;"></svg>
</div> </div>
<div class="side-controls"> <div class="hidden-xs side-controls">
<div class="result-count"> <div class="result-count">
Showing {{(logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150).length}} of Showing {{(logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150).length}} of
{{(logs | visibleLogFilter:kindsAllowed | filter:search).length}} matching logs {{(logs | visibleLogFilter:kindsAllowed | filter:search).length}} matching logs
@ -36,14 +36,14 @@
</div> </div>
<div class="table-container"> <div class="table-container">
<table class="table"> <div class="cor-loader" ng-show="loading"></div>
<thead> <table class="cor-table">
<th>Description</th> <thead>
<th style="min-width: 226px">Date/Time</th> <td>Description</td>
<th>User/Token/App</th> <td style="min-width: 226px">Date/Time</td>
</thead> <td>User/Token/App</td>
</thead>
<tbody>
<tr class="log" ng-repeat="log in (logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150)"> <tr class="log" ng-repeat="log in (logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150)">
<td> <td>
<span class="circle" style="{{ 'background: ' + getColor(log.kind) }}"></span> <span class="circle" style="{{ 'background: ' + getColor(log.kind) }}"></span>
@ -74,8 +74,7 @@
</span> </span>
</td> </td>
</tr> </tr>
</tbody> </table>
</table>
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,17 +1,14 @@
<div class="prototype-manager-element"> <div class="prototype-manager-element">
<div class="cor-loader" ng-show="loading"></div> <div class="cor-loader" ng-show="loading"></div>
<div ng-show="!loading"> <div ng-show="!loading">
<div class="manager-header"> <div class="manager-header" header-title="Default Permissions">
<div class="side-controls"> <button class="btn btn-primary" ng-click="showAddDialog()">
<button class="btn btn-primary" ng-click="showAddDialog()"> <i class="fa fa-plus"></i>
<i class="fa fa-plus"></i> Create Default Permission
Create Default Permission </button>
</button>
</div>
<h3>Default Permissions</h3>
</div> </div>
<div class="manager-header section-description-header"> <div class="section-description-header">
The Default permissions panel defines permissions that should be granted automatically to a repository when it is created, in addition to the default of the repository's The Default permissions panel defines permissions that should be granted automatically to a repository when it is created, in addition to the default of the repository's
creator. Permissions are assigned based on the user who created the repository. creator. Permissions are assigned based on the user who created the repository.
<br><br> <br><br>
@ -26,7 +23,7 @@
</div> </div>
</div> </div>
<table class="co-table" ng-show="prototypes.length"> <table class="cor-table" ng-show="prototypes.length">
<thead> <thead>
<td> <td>
<span class="context-tooltip" <span class="context-tooltip"

View file

@ -1,10 +1,9 @@
<div class="teams-manager-element"> <div class="teams-manager-element">
<div class="manager-header"> <div class="manager-header" header-title="Teams">
<span class="popup-input-button" pattern="TEAM_PATTERN" placeholder="'Team Name'" <span class="popup-input-button" pattern="TEAM_PATTERN" placeholder="'Team Name'"
submitted="createTeam(value)" ng-show="organization.is_admin"> submitted="createTeam(value)" ng-show="organization.is_admin">
<i class="fa fa-plus" style="margin-right: 6px;"></i> Create New Team <i class="fa fa-plus" style="margin-right: 6px;"></i> Create New Team
</span> </span>
<h3>Teams</h3>
</div> </div>
<div class="row hidden-xs"> <div class="row hidden-xs">
@ -33,7 +32,7 @@
<div class="team-description markdown-view" content="team.description" first-line-only="true"></div> <div class="team-description markdown-view" content="team.description" first-line-only="true"></div>
<div class="team-member-list" ng-if="members[team.name]"> <div class="team-member-list hidden-xs" ng-if="members[team.name]">
<div class="cor-loader" ng-if="!members[team.name].members"></div> <div class="cor-loader" ng-if="!members[team.name].members"></div>
<span class="team-member" <span class="team-member"
ng-repeat="member in members[team.name].members | orderBy:'is_robot' | limitTo: 20"> ng-repeat="member in members[team.name].members | orderBy:'is_robot' | limitTo: 20">

View file

@ -745,10 +745,15 @@ angular.module("core-ui", [])
return clone; return clone;
}; };
var appendRepeater = function(div, tr, headers) { var appendRepeater = function(div, tr, headers, includeRepeat) {
// Find all the tds directly under the tr and convert into a header + value span. // Find all the tds directly under the tr and convert into a header + value span.
tr.children('td').each(function(idx, td) { tr.children('td').each(function(idx, td) {
var displayer = cloneWithAttr(tr, 'div'); var displayer = cloneWithAttr(tr, 'div');
if (!includeRepeat) {
displayer.removeAttr('ng-repeat');
}
displayer.append(headers[idx].clone(true).addClass('mobile-col-header')); displayer.append(headers[idx].clone(true).addClass('mobile-col-header'));
displayer.append(cloneWithAttr(td, 'div', true).addClass('mobile-col-value')); displayer.append(cloneWithAttr(td, 'div', true).addClass('mobile-col-value'));
div.append(displayer); div.append(displayer);
@ -771,10 +776,10 @@ angular.module("core-ui", [])
// itself should be a tr. // itself should be a tr.
if (repeater.nodeName.toLowerCase() == 'tbody') { if (repeater.nodeName.toLowerCase() == 'tbody') {
$(repeater).children().each(function(idx, tr) { $(repeater).children().each(function(idx, tr) {
appendRepeater(divRepeater, $(tr), headers); appendRepeater(divRepeater, $(tr), headers, true);
}); });
} else { } else {
appendRepeater(divRepeater, $(repeater), headers); appendRepeater(divRepeater, $(repeater), headers, false);
} }
var repeaterBody = $(document.createElement('tbody')); var repeaterBody = $(document.createElement('tbody'));