Merge pull request ansible#937 from newswangerd/role-image-squishiness

Prevent images on content detail from getting stretched out.
newswangerd · Jul 24, 2018 · 61a0c4f · 61a0c4f
2 parents 829e8cb + 0a6c5f6
commit 61a0c4f
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/galaxyui/src/app/content-detail/repository/repository.component.html b/galaxyui/src/app/content-detail/repository/repository.component.html
@@ -2,9 +2,11 @@
 
     <div class="col-lg-2">
         <div class="namespace-img">
-            <a [routerLink]="['/', repositoryView.namespace]"
-                tooltip="View the author's profile." >
-                <img class="img-wrapper" [src]="namespace.avatar_url"></a>
+            <div class="img-wrapper">
+                <a [routerLink]="['/', repositoryView.namespace]"
+                    tooltip="View the author's profile." >
+                    <img class="namespace-avatar" [src]="namespace.avatar_url"></a>
+            </div>
             <a [routerLink]="['/', repositoryView.namespace]"
                 tooltip="View the author's profile.">
                 <span class="fa fa-user"></span> {{ namespace.name }}</a>

diff --git a/galaxyui/src/app/content-detail/repository/repository.component.less b/galaxyui/src/app/content-detail/repository/repository.component.less
@@ -38,7 +38,15 @@
         }
 
         .img-wrapper {
+            display: flex;
+            justify-content: center;
+            align-items: center;
             height: 120px;
+            overflow: hidden;
+        }
+
+        .namespace-avatar {
+            width: 120px;
             @media(min-width: 1200px){
                 margin: auto;
             }