From f1ea20315a10511958eade7cfafc22a82937d820 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Mon, 20 Apr 2015 14:00:10 -0400
Subject: [PATCH] Finish mobilification of org view

---
 endpoints/api/logs.py                       |   2 +
 static/css/directives/ui/logs-view.css      | 100 ++++++++++++++++++++
 static/css/directives/ui/manager-header.css |   2 +-
 static/css/directives/ui/teams-manager.css  |   7 ++
 static/css/quay.css                         |  65 -------------
 static/directives/application-manager.html  |  17 ++--
 static/directives/logs-view.html            |  39 ++++----
 static/directives/prototype-manager.html    |  17 ++--
 static/directives/teams-manager.html        |   5 +-
 static/js/core-ui.js                        |  11 ++-
 10 files changed, 153 insertions(+), 112 deletions(-)
 create mode 100644 static/css/directives/ui/logs-view.css

diff --git a/endpoints/api/logs.py b/endpoints/api/logs.py
index 258e17118..d83cff202 100644
--- a/endpoints/api/logs.py
+++ b/endpoints/api/logs.py
@@ -10,6 +10,7 @@ from auth.permissions import AdministerOrganizationPermission, AdministerOrganiz
 from auth.auth_context import get_authenticated_user
 from data import model
 from auth import scopes
+from app import avatar
 
 
 def log_view(log):
@@ -25,6 +26,7 @@ def log_view(log):
       'kind': 'user',
       'name': log.performer.username,
       'is_robot': log.performer.robot,
+      'avatar': avatar.get_data_for_user(log.performer)
     }
 
   return view
diff --git a/static/css/directives/ui/logs-view.css b/static/css/directives/ui/logs-view.css
new file mode 100644
index 000000000..a561ecef7
--- /dev/null
+++ b/static/css/directives/ui/logs-view.css
@@ -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;
+}
\ No newline at end of file
diff --git a/static/css/directives/ui/manager-header.css b/static/css/directives/ui/manager-header.css
index 5d778c9a8..80b6727f2 100644
--- a/static/css/directives/ui/manager-header.css
+++ b/static/css/directives/ui/manager-header.css
@@ -40,7 +40,7 @@
     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;
     width: 100%;
   }
diff --git a/static/css/directives/ui/teams-manager.css b/static/css/directives/ui/teams-manager.css
index 35cd2cfad..6e24ad484 100644
--- a/static/css/directives/ui/teams-manager.css
+++ b/static/css/directives/ui/teams-manager.css
@@ -12,6 +12,13 @@
   margin-left: 10px;
 }
 
+@media (max-width: 767px) {
+  .teams-manager .control-col {
+    padding-left: 55px;
+    padding-bottom: 10px;
+  }
+}
+
 .teams-manager .header-col .info-icon {
   font-size: 16px;
 }
diff --git a/static/css/quay.css b/static/css/quay.css
index d176534f3..782d874d3 100644
--- a/static/css/quay.css
+++ b/static/css/quay.css
@@ -501,71 +501,6 @@ i.toggle-icon:hover {
   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 {
   font-size: 16px;
diff --git a/static/directives/application-manager.html b/static/directives/application-manager.html
index 57c8a111d..b69104fc6 100644
--- a/static/directives/application-manager.html
+++ b/static/directives/application-manager.html
@@ -1,17 +1,14 @@
 <div class="application-manager-element">
   <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" placeholder="'Application Name'"
-              submitted="createApplication(value)">
-          <i class="fa fa-plus"></i> Create New Application
-        </span>
-      </div>
-      <h3>OAuth Applications</h3>
+    <div class="manager-header" header-title="OAuth Applications">
+      <span class="popup-input-button" placeholder="'Application Name'"
+            submitted="createApplication(value)">
+        <i class="fa fa-plus"></i> Create New Application
+      </span>
     </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.
     </div>
 
@@ -23,7 +20,7 @@
       </div>
     </div>
 
-    <table class="co-table" ng-show="applications.length">
+    <table class="cor-table" ng-show="applications.length">
       <thead>
         <td>Application Name</td>
         <td>Application URI</td>
diff --git a/static/directives/logs-view.html b/static/directives/logs-view.html
index 651f91b3f..5a5b2ad0a 100644
--- a/static/directives/logs-view.html
+++ b/static/directives/logs-view.html
@@ -1,16 +1,17 @@
 <div class="logs-view-element">
-  <div class="header">
-    <span class="header-text">
-      <span ng-show="!performer">Usage Logs</span>
-      <span class="entity-reference" entity="performer" ng-show="performer"></span>
-      <span id="logs-range" class="mini">
-        From
+  <div class="manager-header" header-title="Usage Logs">
+    <span id="logs-range" class="mini">
+      <span class="date-line">
+        <span class="date-line-caption">From</span>
         <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/>
       </span>
     </span>
-    <span class="right">
+    <span class="hidden-xs right">
       <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>
       <a href="{{ logsPath }}" download="usage-log.json" target="_new">
@@ -19,13 +20,12 @@
     </span>
   </div>
 
-  <div class="cor-loader-inline" ng-show="loading"></div>
-  <div ng-show="!loading">
+  <div>
     <div id="bar-chart" style="width: 800px; height: 500px;" ng-show="chartVisible">
       <svg style="width: 800px; height: 500px;"></svg>
     </div>
 
-    <div class="side-controls">
+    <div class="hidden-xs side-controls">
       <div class="result-count">
         Showing {{(logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150).length}} of
         {{(logs | visibleLogFilter:kindsAllowed | filter:search).length}} matching logs
@@ -36,14 +36,14 @@
     </div>
 
     <div class="table-container">
-    <table class="table">
-      <thead>
-        <th>Description</th>
-        <th style="min-width: 226px">Date/Time</th>
-        <th>User/Token/App</th>
-      </thead>
+      <div class="cor-loader" ng-show="loading"></div>
+      <table class="cor-table">
+        <thead>
+          <td>Description</td>
+          <td style="min-width: 226px">Date/Time</td>
+          <td>User/Token/App</td>
+        </thead>
 
-      <tbody>
         <tr class="log" ng-repeat="log in (logs | visibleLogFilter:kindsAllowed | filter:search | limitTo:150)">
           <td>
             <span class="circle" style="{{ 'background: ' + getColor(log.kind) }}"></span>
@@ -74,8 +74,7 @@
             </span>
           </td>
         </tr>
-      </tbody>
-    </table>
+      </table>
     </div>
   </div>
 </div>
diff --git a/static/directives/prototype-manager.html b/static/directives/prototype-manager.html
index 7eebba032..92efa920a 100644
--- a/static/directives/prototype-manager.html
+++ b/static/directives/prototype-manager.html
@@ -1,17 +1,14 @@
 <div class="prototype-manager-element">
   <div class="cor-loader" ng-show="loading"></div>
   <div ng-show="!loading">
-    <div class="manager-header">
-      <div class="side-controls">
-        <button class="btn btn-primary" ng-click="showAddDialog()">
-          <i class="fa fa-plus"></i>
-          Create Default Permission
-        </button>
-      </div>
-      <h3>Default Permissions</h3>
+    <div class="manager-header" header-title="Default Permissions">
+      <button class="btn btn-primary" ng-click="showAddDialog()">
+        <i class="fa fa-plus"></i>
+        Create Default Permission
+      </button>
     </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
       creator. Permissions are assigned based on the user who created the repository.
       <br><br>
@@ -26,7 +23,7 @@
       </div>
     </div>
 
-    <table class="co-table" ng-show="prototypes.length">
+    <table class="cor-table" ng-show="prototypes.length">
       <thead>
         <td>
           <span class="context-tooltip"
diff --git a/static/directives/teams-manager.html b/static/directives/teams-manager.html
index 840cf6dc4..bc86df5f6 100644
--- a/static/directives/teams-manager.html
+++ b/static/directives/teams-manager.html
@@ -1,10 +1,9 @@
 <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'"
           submitted="createTeam(value)" ng-show="organization.is_admin">
       <i class="fa fa-plus" style="margin-right: 6px;"></i> Create New Team
     </span>
-    <h3>Teams</h3>
   </div>
 
   <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-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>
           <span class="team-member"
                 ng-repeat="member in members[team.name].members | orderBy:'is_robot' | limitTo: 20">
diff --git a/static/js/core-ui.js b/static/js/core-ui.js
index c21d7a541..91d0cd809 100644
--- a/static/js/core-ui.js
+++ b/static/js/core-ui.js
@@ -745,10 +745,15 @@ angular.module("core-ui", [])
         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.
         tr.children('td').each(function(idx, td) {
           var displayer = cloneWithAttr(tr, 'div');
+
+          if (!includeRepeat) {
+            displayer.removeAttr('ng-repeat');
+          }
+
           displayer.append(headers[idx].clone(true).addClass('mobile-col-header'));
           displayer.append(cloneWithAttr(td, 'div', true).addClass('mobile-col-value'));
           div.append(displayer);
@@ -771,10 +776,10 @@ angular.module("core-ui", [])
       // itself should be a tr.
       if (repeater.nodeName.toLowerCase() == 'tbody') {
         $(repeater).children().each(function(idx, tr) {
-          appendRepeater(divRepeater, $(tr), headers);
+          appendRepeater(divRepeater, $(tr), headers, true);
         });
       } else {
-        appendRepeater(divRepeater, $(repeater), headers);
+        appendRepeater(divRepeater, $(repeater), headers, false);
       }
 
       var repeaterBody = $(document.createElement('tbody'));