Modal Categories Block in ipsProArcade

Wenn man der Übersicht halber mit sehr vielen Kategorien arbeitet ist der Nachteil dabei, dass der Categoryblock dementsprechend gewaltig ausfallen kann. Mit ein bisschen CSS und JS sieht das zum Beispiel so aus...

Tauscht dafür einfach das komplette Template arcade -> front -> category -> categoryBlock hiermit aus, das wars:

<table style="width:100%; border:0px; border-spacing:2px; padding:0px;">
  <tr>
    <td style="text-align:center; width:100%;">
      <div class='ipsButton ipsButton_normal ipsButton_small ipsResponsive_inlineBlock'>
        <ipsButton_normal id="categoryButton">{lang="arcade_categories"}</ipsButton_normal>
      </div>
    </td>
  </tr>
</table>
      
<div id="modalCategories" class="modal">
  <div class="modal-content">
    <div style='text-align:center;'><h4 class='ipsAreaBackground_dark ipsType_sectionTitle ipsType_reset cForumTitle'><strong>{lang="arcade_categories"}
        <div class="ipsPos_left"><span class="close">&times;</span></div>
          {{if $refresh}}<div class="ipsPos_right"><a href="{url="ipsproarcade"}" data-ipsTooltip title="{lang="reset_category_selection"}"><i class="fa fa-refresh"></i></a></div>
          {{endif}}
        </strong></h4>
        </div>
    <div class='ipsAreaBackground'><table style='border-spacing:1px; width:100%;'>
        <tr>
          {{if \count($categories)}}
          {{$cnt = 0;}}
          {{foreach $categories as $cat}}
          {{if ( $catsPerRow ) && ( $cnt % $catsPerRow == 0 ) && ( $cnt != 0 )}}
        </tr><tr>
          {{$cnt = 0;}}
          {{endif}}
          <td style="text-align:center; width:10%; border:1px solid;">
            <a data-ipshover="" data-ipshover-target="{url="app=arcade&module=arcade&controller=category&cat={$cat->c_id}" base="front" seoTemplate="arcade_category"}" data-ipsHover-width='800' href="{$url}{$cat->c_id}"}" data-ipsTooltip title="{$cat->cat_bare_name}">
              {{if $cat->cat_img != ''}}
              <img src="{url="applications/arcade/interface/cat_imgs/{$cat->cat_img}" base="none"}" class="arcadePhoto arcadePhoto_small" alt="{$cat->cat_bare_name}"><br/>
              {{endif}}
              {{if $currentCat == $cat->c_id}}<strong>{{endif}}{$cat->cat_name|raw}
                <br />({number='$cat->num_of_games'}){{if $currentCat == $cat->c_id}}</strong>{{endif}}<br /></a>
          </td>
          {{$cnt++;}}
          {{endforeach}}
          {{if $cnt < $catsPerRow}}
          {{for $x = $cnt; $x < $catsPerRow; $x++}}
          <td style="text-align:center; width:10%; border:1px solid;"></td>
          {{endfor}}
          {{endif}}

          {{else}}
          {lang="arcade_no_categories_for_you"}
          {{endif}}
        </tr>
      </table>
    </div>
  </div>
</div>

<style>
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  position: relative;
  background-color: #2E2E2E;
  color: #a6a6a6;
  margin: auto;
  padding: 0;
  border: 1px solid #424242;
  width: 50%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
@media screen and (max-width:979px){
.modal-content {
width: 80%; } 
}
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}
@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
.close {
  color: #a6a6a6;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.modal-body {padding: 2px 16px;}
</style>

<script>
var modal = document.getElementById("modalCategories");
var btn = document.getElementById("categoryButton");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>