From 53802389192e0af46d742dfbde504447cf70bd23 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <josephschorr@users.noreply.github.com>
Date: Wed, 8 Nov 2017 15:58:34 -0500
Subject: [PATCH] Fix tag column width on smaller displays

We change how we selectively hide columns to give more room to the tag column
---
 .../directives/repo-view/repo-panel-tags.html | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/static/directives/repo-view/repo-panel-tags.html b/static/directives/repo-view/repo-panel-tags.html
index 20fe43daa..aebd4b2be 100644
--- a/static/directives/repo-view/repo-panel-tags.html
+++ b/static/directives/repo-view/repo-panel-tags.html
@@ -101,27 +101,27 @@
         style="width: 140px;">
       <a ng-click="orderBy('last_modified_datetime')">Last Modified</a>
     </td>
-    <td class="hidden-xs"
+    <td class="hidden-sm hidden-xs"
         style="width: 200px;"
         quay-require="['SECURITY_SCANNER']">
         Security Scan
     </td>
-    <td class="hidden-sm hidden-xs"
+    <td class="hidden-xs"
         ng-class="tablePredicateClass('size', options.predicate, options.reverse)"
         style="width: 80px;">
       <a ng-click="orderBy('size')" data-title="The compressed size of the tag's image" data-container="body" bs-tooltip>Size</a>
     </td>
-    <td class="hidden-sm hidden-xs"
+    <td class="hidden-sm hidden-xs hidden-md"
         ng-class="tablePredicateClass('expiration_date', options.predicate, options.reverse)"
         style="width: 140px;">
       <a ng-click="orderBy('expiration_date')" data-title="When the tag expires" data-container="body" bs-tooltip>Expires</a>
     </td>
-    <td class="hidden-xs hidden-sm"
+    <td class="hidden-xs hidden-sm hidden-md"
         ng-class="tablePredicateClass('image_id', options.predicate, options.reverse)"
         style="width: 140px;">
       <a ng-click="orderBy('image_id')">Image</a>
     </td>
-    <td class="hidden-xs hidden-sm image-track" ng-repeat="it in imageTracks"
+    <td class="hidden-xs hidden-sm hidden-md image-track" ng-repeat="it in imageTracks"
         ng-if="imageTracks.length <= maxTrackCount"></td>
     <td class="hidden-xs hidden-sm" ng-if="imageTracks.length > maxTrackCount"
         style="width: 20px; position: relative;">
@@ -154,7 +154,7 @@
       </td>
 
       <!-- Security scanning -->
-      <td quay-require="['SECURITY_SCANNER']" class="security-scan-col hidden-xs">
+      <td quay-require="['SECURITY_SCANNER']" class="security-scan-col hidden-sm hidden-xs">
         <span class="cor-loader-inline" ng-if="getTagVulnerabilities(tag).loading"></span>
         <span class="vuln-load-error" ng-if="getTagVulnerabilities(tag).hasError"
               data-title="The vulnerabilities for this tag could not be retrieved at the present time, try again later"
@@ -229,10 +229,10 @@
       </td>
 
       <!-- Size -->
-      <td class="hidden-sm hidden-xs" bo-text="tag.size | bytes"></td>
+      <td class="hidden-xs" bo-text="tag.size | bytes"></td>
 
       <!-- Expiration -->
-      <td class="hidden-xs hidden-sm">
+      <td class="hidden-xs hidden-sm hidden-md">
         <a ng-click="askChangeTagsExpiration([tag])"
            ng-if="!repository.tag_operations_disabled && repository.can_write">
           <expiration-status-view expiration-date="tag.expiration_date"></expiration-status-view>
@@ -241,10 +241,10 @@
       </td>
 
       <!-- Image link -->
-      <td class="hidden-xs hidden-sm image-id-col">
+      <td class="hidden-xs hidden-sm hidden-md image-id-col">
         <span class="image-link" repository="repository" image-id="tag.image_id" manifest-digest="tag.manifest_digest"></span>
       </td>
-      <td class="hidden-xs hidden-sm image-track"
+      <td class="hidden-xs hidden-sm hidden-md image-track"
           ng-if="imageTracks.length > maxTrackCount" bindonce>
           <span ng-repeat="it in imageTracks">
             <span ng-repeat="entry in it.entries">
@@ -253,7 +253,7 @@
             </span>
           </span>
       </td>
-      <td class="hidden-xs hidden-sm image-track" ng-repeat="it in imageTracks"
+      <td class="hidden-xs hidden-sm hidden-md image-track" ng-repeat="it in imageTracks"
           ng-if="imageTracks.length <= maxTrackCount" bindonce>
         <span ng-repeat="entry in it.entries">
           <span class="image-track-dot" bo-if="entry.image_id == tag.image_id"
@@ -293,7 +293,7 @@
     </tr>
     <tr ng-if="expandedView">
       <td class="checkbox-col"></td>
-      <td class="labels-col" colspan="{{6 + (Features.SECURITY_SCANNER ? 1 : 0) + (repository.trust_enabled ? 1 : 0) }}">
+      <td class="labels-col" colspan="{{6 + (repository.trust_enabled ? 1 : 0) + (Features.SECURITY_SCANNER ? 1 : 0) }}">
         <!-- Labels -->
         <div class="manifest-label-list" repository="repository"
              manifest-digest="tag.manifest_digest" cache="labelCache"></div>
@@ -303,7 +303,7 @@
           <tag-signing-display compact="false" tag="tag" delegations="repoDelegationsInfo"></tag-signing-display>
         </div>
       </td>
-      <td class="hidden-xs hidden-sm image-track" ng-repeat="it in imageTracks"
+      <td class="hidden-xs hidden-sm hidden-md image-track" ng-repeat="it in imageTracks"
           ng-if="imageTracks.length <= maxTrackCount" bindonce>
         <span ng-repeat="entry in it.entries">
           <span class="image-track-line"
@@ -311,7 +311,7 @@
                 bo-style="{'borderColor': entry.color}"></span>
         </span>
       </td>
-      <td colspan="2"></td>
+      <td colspan="1" class="hidden-xs hidden-sm hidden-md"></td>
     </tr>
    </tbody>
  </table>