fix(api-picture): fix api icon overlay issue

This closes gravitee-io/issues#178
gravitee-io · Aug 20, 2016 · be04c91 · be04c91
1 parent 65f2066
commit be04c91
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/src/app/api/apisThumbMode.html b/src/app/api/apisThumbMode.html
@@ -40,7 +40,7 @@
               </md-card-header>
       				<md-card-content layout="column">
                 <div class="api-box-description">
-                  <div class="api-box-icon">
+                  <div class="api-box-icon" layout="column" layout-align="center center">
                     <img ng-src="{{api.picture_url}}" />
                   </div>
                   <div class="api-box-name-version" layout-padding>

diff --git a/src/app/application/applicationsThumbMode.html b/src/app/application/applicationsThumbMode.html
@@ -34,7 +34,7 @@
             </md-card-header>
             <md-card-content>
               <div class="api-box-description">
-                <div class="api-box-icon-default">
+                <div class="api-box-icon default">
                 </div>
                 <div class="api-box-name-version" layout-padding>
                   {{application.name}}

diff --git a/src/app/main/_main.scss b/src/app/main/_main.scss
@@ -41,21 +41,23 @@
       text-align: center;
     }
     .api-box-icon {
+      min-height: 80px;
+      max-height: 80px;
       img {
+        display: block;
+        max-width: 150px;
         max-height: 80px;
-        min-height: 80px;
+        width: auto;
+        height: auto;
+      }
+      &.default {
         height: 80px;
+        background-image: url('../app/images/GRAVITEE_LOGOsstxtclair-05.png');
+        background-size: auto 100%;
+        background-position: center center;
+        background-repeat: no-repeat;
       }
     }
-    .api-box-icon-default {
-      max-height: 80px;
-      min-height: 80px;
-      height: 80px;
-      background-image: url('../app/images/GRAVITEE_LOGOsstxtclair-05.png');
-      background-size: auto 100%;
-      background-position: center center;
-      background-repeat: no-repeat;
-    }
     .api-box-name-version {
       font-size: 14px;
       font-weight: 700;