Improve IdPs section in discopower

Author: athinab

themes/ssp/discopower/disco-tpl.php

@@ -193,12 +193,12 @@ function getTranslatedName($t, $metadata) {
     }
     else if($tab == "idps_with_logos") {
       $idps_with_logos_index = array_search($tab, array_keys($this->data['idplist']));
-      $top = '<div class="row ssp-content-group">
+      $top = '<div class="row ssp-content-group"><div class="col-sm-12">
             ';
-      $list_open = '<div class="col-sm-12"><div class="metalist ssp-content-group__provider-list ssp-content-group__provider-list--other">';
+      $list_open = '<div class="metalist ssp-content-group__provider-list ssp-content-group__provider-list--other js-idps">';
       $list_items = '';
-      $close_list = '</div>';
-      $close = '</div></div>'; // /metalist /ssp-content-group /row
+      $close_list = '</div>'; // /metalist
+      $close = '</div></div>'; // /ssp-content-group /col-sm-12
       if (!empty($this->data['preferredidp']) && array_key_exists($this->data['preferredidp'], $slist)) {
         $idpentry = $slist[$this->data['preferredidp']];
         $list_items .=  (showEntry($this, $idpentry, TRUE, TRUE));
@@ -210,11 +210,11 @@ function getTranslatedName($t, $metadata) {
         }
       }
       if($idps_in_searchable_list_index < $idps_with_logos_index) {
-        $or = '<div class="col-sm-12"><div class="col-sm-12 text-center ssp-line-or-line ssp-line-or-line--top"><span class="ssp-line-or-line__or">' . $this->t('{themevanilla:discopower:or}') . '</span></div>';
+        $or = '<div class="text-center ssp-line-or-line ssp-line-or-line--top"><span class="ssp-line-or-line__or">' . $this->t('{themevanilla:discopower:or}') . '</span></div>';
         echo $top . $or . $list_open . $list_items . $close_list . $close;
       }
       else {
-        $or = '<div class="col-sm-12 text-center ssp-line-or-line ssp-line-or-line--bottom"><span class="ssp-line-or-line__or">' . $this->t('{themevanilla:discopower:or}') . '</span></div>';
+        $or = '<div class="text-center ssp-line-or-line ssp-line-or-line--bottom"><span class="ssp-line-or-line__or">' . $this->t('{themevanilla:discopower:or}') . '</span></div>';
         echo $top . $list_open . $list_items . $close_list . $or . $close;
       }
     }

www/resources/sass/_extra.scss

@@ -276,8 +276,11 @@ h4 {
         position: relative;
         padding: 6px;
         background-color: $denim;
-        margin-right: 18px;
+        margin-right: 9px;
+        margin-left: 9px;
         border: 1px solid;
+        min-width: 145px;
+        text-align: center;
         &:hover, &:focus {
             color: $white;
             text-decoration: none;
@@ -289,13 +292,16 @@ h4 {
         }
     }
     &__icon-no-label {
+        text-align: center;
         color: $white;
         display: inline-block;
         position: relative;
         padding: 0px 6px;
         background-color: $denim;
-        margin-right: 18px;
+        margin-right: 9px;
+        margin-left: 9px;
         border: 1px solid;
+        min-width: 145px;
         &:hover, &:focus {
             color: $white;
             text-decoration: none;
@@ -358,7 +364,8 @@ h4 {
             }
         }
         &--other {
-            margin: 2px 6px 2px 54px;
+            margin: 2px 0px 2px 46px;
+            text-align: center;
         }
     }
 }