Zum Inhalt springen
  • Modal Categories Block in ipsProArcade

       (1 Bewertung)

    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>

     


    • Like 1



    Benutzer-Feedback

    Dein Kommentar

    Sie schreibst als Gast. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.
    Hinweis: Dein Beitrag muss vom Moderator freigeschaltet werden, bevor er sichtbar wird.

    Gast

    marco2306

      

    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 zur Bewertung
    Auf anderen Seiten teilen


×
×
  • Neu erstellen...

Wichtige 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 Datenschutzerklärung.