Change idps grouping in discopower

- Handle idps that have the tag "idps_with_logos" or
  "idps_in_searchable_list_index".
- Adjust style of separator (or) in order to support any kind of sorting of
  groups.

Author: athinab

themes/ssp/discopower/disco-tpl.php

@@ -38,7 +38,7 @@
   $(document).ready(function() {';
     $i = 0;
     foreach ($this->data['idplist'] AS $tab => $slist) {
-  if ($tab == 'all') {
+  if ($tab == 'idps_in_searchable_list') {
       $this->data['head'] .= "\n" . '$("#query_' . $tab . '").liveUpdate("#list_' . $tab . '")' .
         (($i++ == 0) && (empty($faventry)) ? '.focus()' : '') . ';';
   }
@@ -159,10 +159,12 @@ function getTranslatedName($t, $metadata) {
   ');
 }
 
-
+$idps_in_searchable_list_index;
+$idps_with_logos_index;
 foreach( $this->data['idplist'] AS $tab => $slist) {
   if (!empty($slist)) {
-    if($tab == 'all') {
+    if($tab == 'idps_in_searchable_list') {
+      $idps_in_searchable_list_index = array_search($tab, array_keys($this->data['idplist']));
       $top = '<div class="row ssp-content-group js-spread">
                 <div class="col-sm-12 js-spread">';
       $search_name = 'query_' . $tab;
@@ -173,7 +175,7 @@ function getTranslatedName($t, $metadata) {
                     . $search_name . '" id="' . $search_name . '" />'
                 . '</form>'
                 . '</div>';
-      $list_open = '<div class="metalist ssp-content-group__provider-list ssp-content-group__provider-list--all js-spread" id="list_' . $tab . '">';
+      $list_open = '<div class="metalist ssp-content-group__provider-list ssp-content-group__provider-list--idps_in_searchable_list js-spread" id="list_' . $tab . '">';
       $list_items = '';
       $close = '</div></div></div>'; // /metalist /ssp-content-group /row
 
@@ -190,12 +192,13 @@ function getTranslatedName($t, $metadata) {
       echo($top . $search . $list_open . $list_items . $close);
     }
     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">
-            <div class="col-sm-12">';
-      $or = '<div class="text-center ssp-line-or-line"><span class="ssp-line-or-line__or">' . $this->t('{themevanilla:discopower:or}') . '</span></div>';
-      $list_open = '<div class="metalist ssp-content-group__provider-list ssp-content-group__provider-list--other">';
+            ';
+      $list_open = '<div class="col-sm-12"><div class="metalist ssp-content-group__provider-list ssp-content-group__provider-list--other">';
       $list_items = '';
-      $close = '</div></div></div>'; // /metalist /ssp-content-group /row
+      $close_list = '</div>';
+      $close = '</div></div>'; // /metalist /ssp-content-group /row
       if (!empty($this->data['preferredidp']) && array_key_exists($this->data['preferredidp'], $slist)) {
         $idpentry = $slist[$this->data['preferredidp']];
         $list_items .=  (showEntry($this, $idpentry, TRUE, TRUE));
@@ -206,7 +209,14 @@ function getTranslatedName($t, $metadata) {
           $list_items .= (showEntry($this, $idpentry, FALSE, TRUE));
         }
       }
-      echo $top . $or . $list_open . $list_items . $close;
+      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>';
+        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>';
+        echo $top . $list_open . $list_items . $close_list . $or . $close;
+      }
     }
   }
 }

www/resources/sass/_extra.scss

@@ -345,7 +345,7 @@ h4 {
     padding: 0px 42px;
     &__provider-list {
         overflow: auto;
-        &--all {
+        &--idps_in_searchable_list {
             margin: 6px 6px 6px 42px;
             height: 23vh;
             a {
@@ -396,8 +396,14 @@ h4 {
 .ssp-line-or-line {
     position: relative;
     border-bottom: 1px solid #ccc;
-    margin-bottom: 18px;
-    margin-top: 6px;
+    &--top {
+        margin-bottom: 18px;
+        margin-top: 6px;
+    }
+    &--bottom {
+    margin-bottom: 30px;
+    margin-top: 0;
+    }
     .ssp-line-or-line__or {
         @extend h2;
         position: relative;