MIUN - Design Library

Office 365 Block 

<div class="old-exams-container">
    <div class="old-exams-header mb-md">
        <h2 class="heading-level-2">Leta efter gamla tentor</h2>
    </div>
    <div class="old-exams-search-input mb-md">
        <div class="form-group">
            <label for="old-exams-search">Skriv in kurs, program eller ämne</label>
            <input type="text" class="form-control" name="old-exams-search" id="old-exams-search" placeholder="Sök gamla tentor">
        </div>
    </div>
    <div class="old-exams-lists mb-md">
        <article class="old-exam-subject">
            <header class="d-flex justify-content-between align-items-center expand-categorie" data-toggle="collapse" data-target="#exam-0" aria-expanded="false" aria-controls="exam-0">
                <h3 class="heading-level-4">Biologi</h3>
                <span class="material-icons categorie-up-down"></span>
            </header>
            <div id="exam-0" class="old-exam-body collapse">
                <div class="old-exams-item">
                    <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-0-0" aria-expanded="false" aria-controls="sub-0-0">
                        <h4 class="heading-level-5">Biologi BE, Baskurs 1 i biologi</h4>
                        <span class="material-icons sub-up-down"></span>
                    </div>
                    <div id="sub-0-0" class="old-exams-list collapse">
                        <ul>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/73042">Tentamen (2019-04-01)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/62549">Tentamen (2019-01-07)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/55052">Tentamen (2018-10-29)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/55249">Tentamen (2018-10-29)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/73042">Tentamen (2018-04-03)</a></li>
                        </ul>
                    </div>
                </div>
                <div class="old-exams-item">
                    <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-0-1" aria-expanded="false" aria-controls="sub-0-1">
                        <h4 class="heading-level-5">Biologi BE, Baskurs 2 i biologi</h4>
                        <span class="material-icons sub-up-down"></span>
                    </div>
                    <div id="sub-0-1" class="old-exams-list collapse">
                        <ul>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/47713">Tentamen (2018-06-05)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/47423">Tentamen (2018-05-25)</a></li>
                        </ul>
                    </div>
                </div>
                <div class="old-exams-item">
                    <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-0-2" aria-expanded="false" aria-controls="sub-0-2">
                        <h4 class="heading-level-5">Biologi GR (A), Cellbiologi och histologi</h4>
                        <span class="material-icons sub-up-down"></span>
                    </div>
                    <div id="sub-0-2" class="old-exams-list collapse">
                        <ul>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/49057">Tentamen (2018-06-08)</a></li>
                        </ul>
                    </div>
                </div>
                <div class="old-exams-item">
                    <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-0-3" aria-expanded="false" aria-controls="sub-0-3">
                        <h4 class="heading-level-5">Biologi GR (A), Genteknik</h4>
                        <span class="material-icons sub-up-down"></span>
                    </div>
                    <div id="sub-0-3" class="old-exams-list collapse">
                        <ul>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/55771">Tentamen Genteknik (2018-11-06)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/52725">Tentamen Genteknik (2018-09-15)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/51392">Tentamen Genteknik (2018-08-24)</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </article>
        <article class="old-exam-subject">
            <header class="d-flex justify-content-between align-items-center expand-categorie" data-toggle="collapse" data-target="#exam-1" aria-expanded="false" aria-controls="exam-1">
                <h3 class="heading-level-4">Byggnadsteknik</h3>
                <span class="material-icons categorie-up-down"></span>
            </header>
            <div id="exam-1" class="old-exam-body collapse">
                <div class="old-exams-item">
                    <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-1-0" aria-expanded="false" aria-controls="sub-1-0">
                        <h4 class="heading-level-5">Byggnadsteknik GR (A), Byggnadsmekanik</h4>
                        <span class="material-icons sub-up-down"></span>
                    </div>
                    <div id="sub-1-0" class="old-exams-list collapse">
                        <ul>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/62044">Tentamen (2018-08-21)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/49353">Tentamen (2018-06-05)</a></li>
                        </ul>
                    </div>
                </div>
                <div class="old-exams-item">
                    <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-1-1" aria-expanded="false" aria-controls="sub-1-1">
                        <h4 class="heading-level-5">Byggnadsteknik GR (B), Byggfysik</h4>
                        <span class="material-icons sub-up-down"></span>
                    </div>
                    <div id="sub-1-1" class="old-exams-list collapse">
                        <ul>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/72983">Tentamen (2019-04-25)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/50850">Tentamen (2018-08-27)</a></li>
                        </ul>
                    </div>
                </div>
                <div class="old-exams-item">
                    <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-1-2" aria-expanded="false" aria-controls="sub-1-2">
                        <h4 class="heading-level-5">Byggnadsteknik GR (B), Byggkonstruktion I</h4>
                        <span class="material-icons sub-up-down"></span>
                    </div>
                    <div id="sub-1-2" class="old-exams-list collapse">
                        <ul>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/62689">Tentamen (2019-01-10)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/56162">Tentamen (2018-11-01)</a></li>
                        </ul>
                    </div>
                </div>
                <div class="old-exams-item">
                    <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-1-3" aria-expanded="false" aria-controls="sub-1-3">
                        <h4 class="heading-level-5">Byggnadsteknik GR (B), Byggproduktion II</h4>
                        <span class="material-icons sub-up-down"></span>
                    </div>
                    <div id="sub-1-3" class="old-exams-list collapse">
                        <ul>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/51339">Tentamen (2018-08-29)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/62046">Tentamen (2018-05-03)</a></li>
                        </ul>
                    </div>
                </div>
                <div class="old-exams-item">
                    <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-1-4" aria-expanded="false" aria-controls="sub-1-4">
                        <h4 class="heading-level-5">Byggnadsteknik GR (B), Hållbar projektsamordning</h4>
                        <span class="material-icons sub-up-down"></span>
                    </div>
                    <div id="sub-1-4" class="old-exams-list collapse">
                        <ul>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/72177">Tentamen (2019-04-23)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/66039">Tentamen (2019-01-17)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/51341">Tentamen (2018-08-28)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/44369">Tentamen (2018-04-06)</a></li>
                        </ul>
                    </div>
                </div>
                <div class="old-exams-item">
                    <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-1-5" aria-expanded="false" aria-controls="sub-1-5">
                        <h4 class="heading-level-5">Byggnadsteknik GR (B), Markbyggnad</h4>
                        <span class="material-icons sub-up-down"></span>
                    </div>
                    <div id="sub-1-5" class="old-exams-list collapse">
                        <ul>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/63598">Tentamen (2019-01-08)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/57980">Tentamen (2018-11-01)</a></li>
                        </ul>
                    </div>
                </div>
                <div class="old-exams-item">
                    <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-1-6" aria-expanded="false" aria-controls="sub-1-6">
                        <h4 class="heading-level-5">Byggnadsteknik GR (C), Träkonstruktioner</h4>
                        <span class="material-icons sub-up-down"></span>
                    </div>
                    <div id="sub-1-6" class="old-exams-list collapse">
                        <ul>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/70845">Tentamen (2019-03-21)</a></li>
                            <li class="old-exam"><a href="https://www.miun.se/exam/download/41703">Tentamen (2018-03-23)</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </article>
    </div>
</div>
 
<div class="old-exams-container">
    <div class="old-exams-header mb-md">
        <h2 class="heading-level-2">{{title}}</h2>
    </div>
    <div class="old-exams-search-input mb-md">
        {{render '@textinput' searchbar.data }}
    </div>
    <div class="old-exams-lists mb-md">
        {{#each categories}}
            <article class="old-exam-subject">
                <header class="d-flex justify-content-between align-items-center expand-categorie" data-toggle="collapse" data-target="#exam-{{@index}}" aria-expanded="false" aria-controls="exam-{{@index}}">
                    <h3 class="heading-level-4">{{name}}</h3>
                    <span class="material-icons categorie-up-down"></span>
                </header>
                <div id="exam-{{@index}}" class="old-exam-body collapse">
                    {{#each subCategories}}
                        <div class="old-exams-item">
                            <div class="d-flex justify-content-between align-items-center old-exams-title expand-sub" data-toggle="collapse" data-target="#sub-{{@../index}}-{{@index}}" aria-expanded="false" aria-controls="sub-{{@../index}}-{{@index}}">
                                <h4 class="heading-level-5">{{name}}</h4>
                                <span class="material-icons sub-up-down"></span>
                            </div>
                            <div id="sub-{{@../index}}-{{@index}}" class="old-exams-list collapse">
                                <ul>
                                    {{#each items}}
                                        <li class="old-exam"><a href="{{url}}">{{name}}</a></li>
                                    {{/each}}
                                </ul>
                            </div>
                        </div>
                    {{/each}}
                </div>
            </article>
        {{/each}}
    </div>
</div>
 
{
  "title": "Leta efter gamla tentor",
  "epiDivClass": "col-12",
  "searchbar": {
    "data": {
      "nameId": "old-exams-search",
      "heading": "Skriv in kurs, program eller ämne",
      "placeholder": "Sök gamla tentor"
    }
  },
  "categories": [
    {
      "name": "Biologi",
      "subCategories": [
        {
          "name": "Biologi BE, Baskurs 1 i biologi",
          "items": [
            {
              "name": "Tentamen (2019-04-01)",
              "url": "https://www.miun.se/exam/download/73042"
            },
            {
              "name": "Tentamen (2019-01-07)",
              "url": "https://www.miun.se/exam/download/62549"
            },
            {
              "name": "Tentamen (2018-10-29)",
              "url": "https://www.miun.se/exam/download/55052"
            },
            {
              "name": "Tentamen (2018-10-29)",
              "url": "https://www.miun.se/exam/download/55249"
            },
            {
              "name": "Tentamen (2018-04-03)",
              "url": "https://www.miun.se/exam/download/73042"
            }
          ]
        },
        {
          "name": "Biologi BE, Baskurs 2 i biologi",
          "items": [
            {
              "name": "Tentamen (2018-06-05)",
              "url": "https://www.miun.se/exam/download/47713"
            },
            {
              "name": "Tentamen (2018-05-25)",
              "url": "https://www.miun.se/exam/download/47423"
            }
          ]
        },
        {
          "name": "Biologi GR (A), Cellbiologi och histologi",
          "items": [
            {
              "name": "Tentamen (2018-06-08)",
              "url": "https://www.miun.se/exam/download/49057"
            }
          ]
        },
        {
          "name": "Biologi GR (A), Genteknik",
          "items": [
            {
              "name": "Tentamen Genteknik (2018-11-06)",
              "url": "https://www.miun.se/exam/download/55771"
            },
            {
              "name": "Tentamen Genteknik (2018-09-15)",
              "url": "https://www.miun.se/exam/download/52725"
            },
            {
              "name": "Tentamen Genteknik (2018-08-24)",
              "url": "https://www.miun.se/exam/download/51392"
            }
          ]
        }
      ]
    },
    {
      "name": "Byggnadsteknik",
      "subCategories": [
        {
          "name": "Byggnadsteknik GR (A), Byggnadsmekanik",
          "items": [
            {
              "name": "Tentamen (2018-08-21)",
              "url": "https://www.miun.se/exam/download/62044"
            },
            {
              "name": "Tentamen (2018-06-05)",
              "url": "https://www.miun.se/exam/download/49353"
            }
          ]
        },
        {
          "name": "Byggnadsteknik GR (B), Byggfysik",
          "items": [
            {
              "name": "Tentamen (2019-04-25)",
              "url": "https://www.miun.se/exam/download/72983"
            },
            {
              "name": "Tentamen (2018-08-27)",
              "url": "https://www.miun.se/exam/download/50850"
            }
          ]
        },
        {
          "name": "Byggnadsteknik GR (B), Byggkonstruktion I",
          "items": [
            {
              "name": "Tentamen (2019-01-10)",
              "url": "https://www.miun.se/exam/download/62689"
            },
            {
              "name": "Tentamen (2018-11-01)",
              "url": "https://www.miun.se/exam/download/56162"
            }
          ]
        },
        {
          "name": "Byggnadsteknik GR (B), Byggproduktion II",
          "items": [
            {
              "name": "Tentamen (2018-08-29)",
              "url": "https://www.miun.se/exam/download/51339"
            },
            {
              "name": "Tentamen (2018-05-03)",
              "url": "https://www.miun.se/exam/download/62046"
            }
          ]
        },
        {
          "name": "Byggnadsteknik GR (B), Hållbar projektsamordning",
          "items": [
            {
              "name": "Tentamen (2019-04-23)",
              "url": "https://www.miun.se/exam/download/72177"
            },
            {
              "name": "Tentamen (2019-01-17)",
              "url": "https://www.miun.se/exam/download/66039"
            },
            {
              "name": "Tentamen (2018-08-28)",
              "url": "https://www.miun.se/exam/download/51341"
            },
            {
              "name": "Tentamen (2018-04-06)",
              "url": "https://www.miun.se/exam/download/44369"
            }
          ]
        },
        {
          "name": "Byggnadsteknik GR (B), Markbyggnad",
          "items": [
            {
              "name": "Tentamen (2019-01-08)",
              "url": "https://www.miun.se/exam/download/63598"
            },
            {
              "name": "Tentamen (2018-11-01)",
              "url": "https://www.miun.se/exam/download/57980"
            }
          ]
        },
        {
          "name": "Byggnadsteknik GR (C), Träkonstruktioner",
          "items": [
            {
              "name": "Tentamen (2019-03-21)",
              "url": "https://www.miun.se/exam/download/70845"
            },
            {
              "name": "Tentamen (2018-03-23)",
              "url": "https://www.miun.se/exam/download/41703"
            }
          ]
        }
      ]
    }
  ]
}
  • Content: 
    $(document).ready(function() {
    function showAll(elements) {
        elements.each(function () { this.style.display = "block"; });
    }

    function showIfContains(elements, text) {
        elements.each(function () {
            if (this.textContent.toLowerCase().indexOf(text.toLowerCase()) != -1) {
                this.style.display = "block";
            }
            else {
                this.style.display = "none";
            }
        });
    }

    function filterExams() {
        var courseFilter = ".old-exams-item";
        var subjectFilter = ".old-exam-subject";
        var allElements = $.merge($(courseFilter), $(subjectFilter));

        var text = $("#old-exams-search").val();

        if (text.length < 2) {
            showAll(allElements);
        }
        else {
            showIfContains(allElements, text);
        }
    }

    $('#old-exams-search').on('input', function() {
        filterExams();
    });

    $('.expand-categorie').on('click', function() {
        $(this).toggleClass('expanded');

        if($(this).hasClass('expanded')) {
            $('.categorie-up-down', this).css('transform', 'rotate(180deg)');
        } else {
            $('.categorie-up-down', this).css('transform', 'rotate(0deg)');
        }
    });

    $('.expand-sub').on('click', function() {
        $(this).toggleClass('expanded');
        
        if($(this).hasClass('expanded')) {
            $('.sub-up-down', this).css('transform', 'rotate(180deg)');
        } else {
            $('.sub-up-down', this).css('transform', 'rotate(0deg)');
        }
    });

    // $(".old-exam-body").on("show.bs.collapse", function(event) {
    //     if ($(this).is(event.target)) {
    //         $(this).closest(".old-exam-subject").addClass("expanded");         
    //     }
	// });

	// $(".old-exam-body").on("hide.bs.collapse", function(event) {
    //     if ($(this).is(event.target)) {
    //         $(this).closest(".old-exam-subject").removeClass("expanded");         
    //     }
    // });
});
  • URL: /components/raw/oldexamsblock/OldExamsBlock.js
  • Filesystem Path: src\components\02-block_components\OldExamsBlock\OldExamsBlock.js
  • Size: 2.1 KB
  • Content: 
    .old-exams-container {
    .old-exam-subject:first-child {
        border-top: 1px solid $grey-border;
    }
    .old-exam-subject {
        border-bottom: 1px solid $grey-border;
        
        header {
            padding: 20px;
            cursor: pointer;
            
            h3 {
                margin-bottom: 0;
            }

            button {
                width: 30px;
                height: 30px;
                padding: 0;
                text-align: center;
                background-color: transparent;
                border-radius: 50%;

                .material-icons {
                    vertical-align: middle;
                }
            }

            &:hover {
                background-color: $light-blue;
            }
        }

        .old-exam-body {
            padding: 0 20px;

            .old-exams-title {
                padding: 20px;
                cursor: pointer;

                h4 {
                    margin: 0;
                }

                &:hover {
                    background-color: $light-blue;
                }
            }

            .material-icons.sub-up-down:before {
                content: 'keyboard_arrow_down';
                font-size: 24px;
            }
        
            &.expanded {
                .material-icons.sub-up-down:before {
                    content: 'keyboard_arrow_up';
                }
            }
        }

        .material-icons.categorie-up-down:before {
            content: 'keyboard_arrow_down';
            font-size: 24px;
        }
    
        &.expanded {
            .material-icons.categorie-up-down:before {
                content: 'keyboard_arrow_up';
            }
        }
    }
}
  • URL: /components/raw/oldexamsblock/OldExamsBlock.scss
  • Filesystem Path: src\components\02-block_components\OldExamsBlock\OldExamsBlock.scss
  • Size: 1.8 KB

There are no notes for this item.