misc: fixes to better display logos

src/main/resources/PublicWebSite/Code/BlockLogosMacro.xml

@@ -182,7 +182,7 @@ navalgroup.png|references.naval-group|alt="Naval Group Logo"
 @grid-float-breakpoint: @screen-md-min;
 @grey-d6: #D6D6D6;
 
-.blocklogos{
+.blocklogos {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
@@ -208,21 +208,20 @@ navalgroup.png|references.naval-group|alt="Naval Group Logo"
 
   .v-center-item {
     display: flex;
+    height: 100%;
+    vertical-align: middle;
     align-items: center;
     min-height: 150px;
   }
 
   @media (min-width: 480px) {
     .row-eq-height {
-     display: -webkit-box;
-     display: -webkit-flex;
-     display: -ms-flexbox;
-     display: flex;
     }
   }
 
-  .blocklogos img {
-    width: 70%;
+  img {
+    max-height: 100px;
+    max-width: 80%;
   }
 
   .center-block {
@@ -410,14 +409,16 @@ navalgroup.png|references.naval-group|alt="Naval Group Logo"
 #set($logos = $content.split("\r\n"))
 #if($logos.size()<=1)
  #set($cols="col-xs-12 col-sm-12")
-#elseif($logos.size()<=2)
+#elseif($logos.size()==2)
  #set($cols="col-xs-6 col-sm-6")
-#elseif($logos.size()<=3)
- #set($cols="col-xs-4 col-sm-4")
-#elseif($logos.size()<=4)
- #set($cols="col-xs-4 col-sm-3")
+#elseif($logos.size()==3)
+ #set($cols="col-xs-4")
+#elseif($logos.size()==4)
+ #set($cols="col-xs-6 col-sm-3")
+#elseif($logos.size()==5)
+ #set($cols="col-xs-4 col-sm-4 col-lg-2 col-lg-push-1")
 #else
- #set($cols="col-xs-4 col-sm-2")
+ #set($cols="col-xs-4 col-sm-4 col-lg-2")
 #end
 #foreach($item in $logos)
  #set($itemData = $item.split("[|]"))
@@ -425,19 +426,21 @@ navalgroup.png|references.naval-group|alt="Naval Group Logo"
  #set($itemLogoUrl = $doc.getAttachmentURL($itemLogo))
  #set($itemTargetPage = $listtool.get($itemData, 1))
  #set($itemLogoParams = $listtool.get($itemData, 2))
-      <div class="${cols} v-center-item">
+      <div class="${cols}">
+        <div class="v-center-item">
  #if($itemTargetPage && $itemTargetPage!="")
         #if($itemTargetPage.startsWith("http"))
           #set($itemTargetUrl = $itemTargetPage)
         #else
           #set($itemTargetUrl = $xwiki.getDocument($itemTargetPage).getURL())
         #end
-        <a href="$itemTargetUrl" class="center-block">
+         <a href="$itemTargetUrl" class="center-block">
  #end
-         <img class="img-responsive center-block" src="${itemLogoUrl}" $!{itemLogoParams} >
+          <img class="img-responsive center-block" src="${itemLogoUrl}" $!{itemLogoParams} >
  #if($itemTargetPage && $itemTargetPage!="")
-        </a>
+         </a>
  #end
+       </div>
       </div>
 #end
      </div>