Jump to content
  • Modal Categories Block in ipsProArcade

       (1 review)

    V0RT3X

    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>

     




    User Feedback

    Join the conversation

    You are posting as a guest. If you have an account, sign in now to post with your account.
    Note: Your post will require moderator approval before it will be visible.

    Guest

    An sich eine gute Sache, aber wenn man 140 Kategorien hat, Scrollt man auch ewig.
    140 Kategorien hat kein Mensch? Doch ich...:flushed-face:
    Unterkategorien wären super.
    Trotzdem super Idee und Umsetzung.

    Link to comment

×
×
  • Create New...

Important Information

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen zu Cookies erhalten Sie in unserer Privacy Policy.