Responsiivinen sukutaulu

Asennusohjeet

Sivun alkupuolelle, head-tagien väliseen osioon laita viewport meta-tagi ja jQuery-kirjasto (jos näitä ei vielä ole). Huomaa, että jos ulkoasuasi ei ole rakennettu responsiiviseksi alusta saakka, viewport meta-tagi saattaa sekoittaa sen kokonaan. Viewport meta-tagi on kuitenkin responsiivisuuden kulmakivi, eikä sitä ilman voi käyttää tätä sukutaulukoodia tai mitään muitakaan responsiivisia elementtejä.

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
                
            

Css-tyylimäärittelyihin lisää nämä seuraavat määrittelyt. Seassa on runsaasti kommentteja, joita noudattelemalla pystyt muokkaamaan sukutaulun ulkoasua.

Ota Jassuun yhteyttä, jos sukutaulukoodisi hajoaa mukautuksiesi seurauksena: esim. marginien tai paddingien muuttaminen saattaa rikkoa responsiivisuuden mutta se saadaan kyllä räätälöityä uudestaan toimivaksi.

.kirjaimet {
    font-weight:bold; /* voit vaihtaa */
    color:hotpink; /* voit vaihtaa */
    margin-right:.5rem; /* voit vaihtaa */
}

.meriitit {
    font-style:italic; /* voit vaihtaa */
    color:darkgrey; /* voit vaihtaa */
}

.sukutaulu {
    font-family: monospace; /* voit vaihtaa */
    line-height:1.2rem; /* en suosittele koskemaan */
    gap:.1rem; /* en suosittele koskemaan */
    /* tämän alle ei missään nimessä muutoksia */
    display:flex;
    flex-direction:column;
    justify-content:center;
    flex-wrap:wrap;
    height:auto;
}

.sukutaulu, .sukutaulu * {
    box-sizing: border-box; /* älä koske */
}

.sukutaulu > div {
    background-color:snow; /* voit vaihtaa */
    padding:.5rem; /* voit pienentää, jos nostat niin joudut muuttaan javascriptiä */
    /* älä koske näihin kolmeen: */
    display:flex;
    align-items:center;
    flex-grow:1;
}

/* 
    Älä koske näiden flexeihin, mutta lisää/poista display:none
    sen mukaan, montako polvea haluat taulussa oletuksena näkyvän.
    Tässä on nyt nelospolvi display:nonella eli kolme polvea näkyy.
*/
.sukutaulu > div.polvi1 {flex:calc(50% - .1rem);}
.sukutaulu > div.polvi2 {flex:calc(25% - .1rem);}
.sukutaulu > div.polvi3 {flex:calc(12.5% - .1rem);}
.sukutaulu > div.polvi4 {display:none; flex:calc(6.25% - .1rem);}

/* älä koske: */
.polvi1 .meriitit, .polvi2 .meriitit {display:block;}

/* 
    Voit nostaa tässä 600px:ia jos tuntuu että haluat taulukon
    wrappaavan jo tätä leveämmällä näyttökoolla.
    Muita muutoksia en suosittele tämän alle.
*/
@media screen and (max-width:600px) {
    .sukutaulu {
        flex-direction: row;
        height: auto;
        row-gap: 0.1rem;
    }
    .sukutaulu > div.polvi1 {flex:100%;}
    .sukutaulu > div:not(.polvi1) {flex:calc(49% - 1rem);}
}
                
            

Sitten sivun loppuun, ennen body:n sulkutagia laita nämä seuraaavat Javascript/jQuery-funktiot.

<script>

    var sukuarray = [
        'isa',
        'ii', 'ie',
        'iii', 'iei',
        'iiii', 'ieii',
        'iiie', 'ieie',
        'iie', 'iee',
        'iiei', 'ieei',
        'iiee', 'ieee',
        'ema',
        'ei', 'ee',
        'eii', 'eei',
        'eiii', 'eeii',
        'eiie', 'eeie',
        'eie', 'eee',
        'eiei', 'eeei',
        'eiee', 'eeee',
    ];
    
    var jarjestysLuvut = function() {
        $(".sukutaulu").css("height", "auto");
        $(".meriitit").css("display", "block");
        
        for(var i = 0; i < sukuarray.length; i++) {
            $("."+ sukuarray[i]).css('order', i);
        }
    }

    var sukarikork = function() {
        $("div:not('.polvi1, .polvi2') > .suksolu > .meriitit").css("display", "inline");
        
        for(var a = 1; a < 10; a++) {
            if($(".polvi"+a+":visible").length > 0) {
                var lkm = $(".polvi"+a).length;
                if ($(window).width() < 600) {
                    jarjestysLuvut();
                } else {
                    $(".sukutaulu").css("height", "calc("+ lkm + " * 2.3rem)");
                }
            }
        }
    }
    
    sukarikork();
    
     $(window).resize(function() {
      if ($(window).width() < 600) {
         jarjestysLuvut();
      } else {
          $(".sukutaulu").children().each(function() {
              $(this).css('order', 0)
              sukarikork();
          });
      }
    });
    
</script>
                
            

Ja lopuksi päästään lisäämään varsinainen sukutaulun html-koodi. Pistä tämä siihen kohtaan sivua missä haluat sukutaulun olevan.

<div class="sukutaulu">
    <div class="polvi1 isa"><div class="suksolu">
        <span class="kirjaimet">i.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi1 ema"><div class="suksolu">
        <span class="kirjaimet">e.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>

    <div class="polvi2 ii"><div class="suksolu">
        <span class="kirjaimet">ii.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi2 ie"><div class="suksolu">
        <span class="kirjaimet">ie.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi2 ei"><div class="suksolu">
        <span class="kirjaimet">ei.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi2 ee"><div class="suksolu">
        <span class="kirjaimet">ee.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>

    <div class="polvi3 iii"><div class="suksolu">
        <span class="kirjaimet">iii.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi3 iie"><div class="suksolu">
        <span class="kirjaimet">iie.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi3 iei"><div class="suksolu">
        <span class="kirjaimet">iei.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi3 iee"><div class="suksolu">
        <span class="kirjaimet">iee.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi3 eii"><div class="suksolu">
        <span class="kirjaimet">eii.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi3 eie"><div class="suksolu">
        <span class="kirjaimet">eie.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi3 eei"><div class="suksolu">
        <span class="kirjaimet">eei.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi3 eee"><div class="suksolu">
        <span class="kirjaimet">eee.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>

    <div class="polvi4 iiii"><div class="suksolu">
        <span class="kirjaimet">iiii.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 iiie"><div class="suksolu">
        <span class="kirjaimet">iiie.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 iiei"><div class="suksolu">
        <span class="kirjaimet">iiei.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 iiee"><div class="suksolu">
        <span class="kirjaimet">iiee.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 ieii"><div class="suksolu">
        <span class="kirjaimet">ieii.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 ieie"><div class="suksolu">
        <span class="kirjaimet">ieie.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 ieei"><div class="suksolu">
        <span class="kirjaimet">ieei.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 ieee"><div class="suksolu">
        <span class="kirjaimet">ieee.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 eiii"><div class="suksolu">
        <span class="kirjaimet">eiii.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 eiie"><div class="suksolu">
        <span class="kirjaimet">eiie.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 eiei"><div class="suksolu">
        <span class="kirjaimet">eiei.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 eiee"><div class="suksolu">
        <span class="kirjaimet">eiee.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 eeii"><div class="suksolu">
        <span class="kirjaimet">eeii.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 eeie"><div class="suksolu">
        <span class="kirjaimet">eeie.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 eeei"><div class="suksolu">
        <span class="kirjaimet">eeei.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
    <div class="polvi4 eeee"><div class="suksolu">
        <span class="kirjaimet">eeee.</span>
        Hepan Nimi 
        <span class="meriitit">PALKINNOT</span>
    </div></div>
</div>