Lunds universitet - Style Guide

Search Filter: Publications 

<div class="modal fade" id="search-filter" tabindex="-1" role="dialog" aria-labelledby="search-filter-label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content border-0 rounded">
            <nav class="nav border-bottom p-3 flex-row justify-content-between align-items-center sticky-top bg-white rounded-top">
                <div id="search-filter-label" class="d-flex justify-content-between">
                    <h3 class=" m-0">Filtrera</h3>

                </div>
                <a href="#" class="d-block">Nollställ filter</a>
                <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-bs-dismiss="modal" aria-controls="mobileMenu" aria-expanded="false" aria-label="Dölj meny">
                    <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
                </button>
            </nav>
            <div class="p-3">
                <form action="" class="form">
                    <fieldset class="mb-3">
                        <legend>Uppsatser/examensarbeten</legend>
                        <div class="form-check">
                            <input type="radio" id="filter1-1-modal" name="uppsatser-examensarbeten" class="form-check-input" value="value" checked>
                            <label class="form-check-label" for="filter1-1-modal">Alla</label>
                        </div>

                        <div class="form-check">
                            <input type="radio" id="filter1-2-modal" name="uppsatser-examensarbeten" class="form-check-input" value="value">
                            <label class="form-check-label" for="filter1-2-modal">Endast uppsatser/examensarbeten</label>
                        </div>

                        <div class="form-check">
                            <input type="radio" id="filter1-3-modal" name="uppsatser-examensarbeten" class="form-check-input" value="value">
                            <label class="form-check-label" for="filter1-3-modal">Inga uppsatser/examensarbeten</label>
                        </div>

                    </fieldset>
                    <fieldset class="mb-3">
                        <legend>Dokumenttyp</legend>
                        <div class=" mb-3">
                            <label for="filter2-modal" class="form-label">Select Label</label>
                            <select class="form-select" id="filter2-modal">
                                <option>Alla</option>
                            </select>
                        </div>

                    </fieldset>
                    <fieldset class="mb-3">
                        <legend>Tillgänglig som fulltext</legend>
                        <div class="form-check">
                            <input type="radio" id="filter3-1-modal" name="fulltext" class="form-check-input" value="value" checked>
                            <label class="form-check-label" for="filter3-1-modal">Alla</label>
                        </div>

                        <div class="form-check">
                            <input type="radio" id="filter3-2-modal" name="fulltext" class="form-check-input" value="value">
                            <label class="form-check-label" for="filter3-2-modal">Ja</label>
                        </div>

                        <div class="form-check">
                            <input type="radio" id="filter3-3-modal" name="fulltext" class="form-check-input" value="value">
                            <label class="form-check-label" for="filter3-3-modal">Nej</label>
                        </div>

                    </fieldset>
                    <fieldset class="mb-3">
                        <legend>Ämne</legend>
                        <div class=" mb-3">
                            <label for="filter4-modal" class="form-label">Select Label</label>
                            <select class="form-select" id="filter4-modal">
                                <option>Alla</option>
                            </select>
                        </div>

                    </fieldset>
                    <fieldset class="mb-3">
                        <legend>Språk</legend>
                        <div class=" mb-3">
                            <label for="filter5-modal" class="form-label">Select Label</label>
                            <select class="form-select" id="filter5-modal">
                                <option>Alla</option>
                            </select>
                        </div>

                    </fieldset>
                    <fieldset class="mb-3">
                        <legend>Organisation</legend>
                        <div class=" mb-3">
                            <label for="filter6-modal" class="form-label">Select Label</label>
                            <select class="form-select" id="filter6-modal">
                                <option>Alla</option>
                            </select>
                        </div>

                    </fieldset>
                    <fieldset class="mb-3">
                        <legend>Filtrera på typ</legend>
                        <div class=" mb-3">
                            <label for="filter7-modal" class="form-label">Select Label</label>
                            <select class="form-select" id="filter7-modal">
                                <option>Alla</option>
                            </select>
                        </div>

                    </fieldset>
                    <fieldset class="mb-3">
                        <legend>Publiceringstyp</legend>
                        <div class=" mb-3">
                            <label for="filter8-modal" class="form-label">Select Label</label>
                            <select class="form-select" id="filter8-modal">
                                <option>Alla</option>
                            </select>
                        </div>

                    </fieldset>
                    <div class="mt-3 text-center">
                        <input type="submit" class="btn btn-primary" value="Tillämpa">

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="d-lg-none text-center mb-5">
    <button class="btn btn-primary" data-bs-target="#search-filter" data-bs-toggle="modal" aria-controls="search-filter" aria-expanded="false" aria-label="Visa filter"> Fler filter</button>
</div>

<div class="bg-plaster-25 p-3 p-xl-5 d-none d-lg-block">
    <div class="row mb-3">
        <div class="col">
            <h4 class="mt-0">Filtrera</h4>
        </div>
        <div class="col text-end">
            <a href="#">Nollställ filter</a>
        </div>
    </div>
    <div class="row">
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Uppsatser/examensarbeten</legend>
                <div class="form-check">
                    <input type="radio" id="filter1-1" name="uppsatser-examensarbeten" class="form-check-input" value="value" checked>
                    <label class="form-check-label" for="filter1-1">Alla</label>
                </div>

                <div class="form-check">
                    <input type="radio" id="filter1-2" name="uppsatser-examensarbeten" class="form-check-input" value="value">
                    <label class="form-check-label" for="filter1-2">Endast uppsatser/examensarbeten</label>
                </div>

                <div class="form-check">
                    <input type="radio" id="filter1-3" name="uppsatser-examensarbeten" class="form-check-input" value="value">
                    <label class="form-check-label" for="filter1-3">Inga uppsatser/examensarbeten</label>
                </div>

            </fieldset>
        </div>
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Dokumenttyp</legend>
                <div class=" mb-0">
                    <select class="form-select">
                        <option>Alla</option>
                        <option>Second</option>
                        <option>Third</option>
                    </select>
                </div>

            </fieldset>
        </div>
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Tillgänglig som fulltext</legend>
                <div class="form-check">
                    <input type="radio" id="filter3-1" name="fulltext" class="form-check-input" value="value" checked>
                    <label class="form-check-label" for="filter3-1">Alla</label>
                </div>

                <div class="form-check">
                    <input type="radio" id="filter3-2" name="fulltext" class="form-check-input" value="value">
                    <label class="form-check-label" for="filter3-2">Ja</label>
                </div>

                <div class="form-check">
                    <input type="radio" id="filter3-3" name="fulltext" class="form-check-input" value="value">
                    <label class="form-check-label" for="filter3-3">Nej</label>
                </div>

            </fieldset>
        </div>
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Ämne</legend>
                <div class=" mb-0">
                    <select class="form-select">
                        <option>Alla</option>
                        <option>Second</option>
                        <option>Third</option>
                    </select>
                </div>

            </fieldset>
        </div>
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Språk</legend>
                <div class=" mb-0">
                    <select class="form-select">
                        <option>Alla</option>
                        <option>Second</option>
                        <option>Third</option>
                    </select>
                </div>

            </fieldset>
        </div>
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Organisation</legend>
                <div class=" mb-0">
                    <select class="form-select">
                        <option>Alla</option>
                        <option>Second</option>
                        <option>Third</option>
                    </select>
                </div>

            </fieldset>
        </div>
        <div class="col-12 mb-5">
            <fieldset>
                <legend>Filtrera på typ</legend>
                <div class=" mb-0">
                    <select class="form-select">
                        <option>Alla</option>
                        <option>Second</option>
                        <option>Third</option>
                    </select>
                </div>

            </fieldset>
        </div>
        <div class="col-12">
            <fieldset>
                <legend>Publiceringstyp</legend>
                <div class=" mb-0">
                    <select class="form-select">
                        <option>Alla</option>
                        <option>Second</option>
                        <option>Third</option>
                    </select>
                </div>

            </fieldset>
        </div>
    </div>
</div>
 
<div class="modal fade" id="{{modal-id}}" tabindex="-1" role="dialog" aria-labelledby="{{modal-id}}-label" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content border-0 rounded">
      <nav class="nav border-bottom p-3 flex-row justify-content-between align-items-center sticky-top bg-white rounded-top">
        <div id="{{modal-id}}-label" class="d-flex justify-content-between">
          <h3 class=" m-0">{{title}}</h3>

        </div>
        <a href="#" class="d-block">Nollställ filter</a>
        <button type="button" class="border-0 bg-transparent cursor-pointer lh-0 p-2 nm-2" data-bs-dismiss="modal" aria-controls="mobileMenu" aria-expanded="false" aria-label="Dölj meny">
          <span aria-hidden="true"><i class="fal fa-times fa-lg"></i></span>
        </button>
      </nav>
      <div class="p-3">
        <form action="" class="form">
          {{#each modal-filters}}
            <fieldset class="mb-3">
              <legend>{{title}}</legend>
              {{#if checkbox}}
                {{#each checkbox.items}}
                  {{render "@form-checkbox--spaced" this merge=true}}
                {{/each}}
              {{/if}}
              {{#if radio}}
                {{#each radio.items}}
                  {{render "@form-radio--spaced" this merge=true}}
                {{/each}}
              {{/if}}
            {{#if select}}
              {{render "@form-select" select merge=true}}
            {{/if}}
            </fieldset>
          {{/each}}
          <div class="mt-3 text-center">
            {{render "@form-submit" modal-submit merge=true}}
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<div class="d-lg-none text-center mb-5">
  <button class="btn btn-primary" data-bs-target="#{{modal-id}}" data-bs-toggle="modal" aria-controls="{{modal-id}}" aria-expanded="false"
     aria-label="Visa filter"> Fler filter</button>
</div>

<div class="bg-plaster-25 p-3 p-xl-5 d-none d-lg-block">
  <div class="row mb-3">
    <div class="col">
      <h4 class="mt-0">{{title}}</h4>
    </div>
    <div class="col text-end">
      <a href="#">Nollställ filter</a>
    </div>
  </div>
  <div class="row">
    {{#each filters}}
      <div class="col-12{{#unless @last}} mb-5{{/unless}}">
        <fieldset>
          <legend>{{title}}</legend>
          {{#if checkbox}}
            {{#each checkbox.items}}
              {{render "@form-checkbox--spaced" this merge=true}}
            {{/each}}
          {{/if}}
          {{#if radio}}
            {{#each radio.items}}
              {{render "@form-radio--spaced" this merge=true}}
            {{/each}}
          {{/if}}
          {{#if select}}
            {{render "@form-select--tight" select merge=true}}
          {{/if}}
        </fieldset>
      </div>
    {{/each}}
  </div>
</div>
 
{
  "modal-id": "search-filter",
  "title": "Filtrera",
  "modal-submit": {
    "label": "Tillämpa"
  },
  "filters": [
    {
      "title": "Uppsatser/examensarbeten",
      "radio": {
        "items": [
          {
            "name": "uppsatser-examensarbeten",
            "label": "Alla",
            "id": "filter1-1",
            "checked": true
          },
          {
            "name": "uppsatser-examensarbeten",
            "label": "Endast uppsatser/examensarbeten",
            "id": "filter1-2"
          },
          {
            "name": "uppsatser-examensarbeten",
            "label": "Inga uppsatser/examensarbeten",
            "id": "filter1-3"
          }
        ]
      }
    },
    {
      "title": "Dokumenttyp",
      "select": {
        "id": "filter2",
        "options": [
          {
            "label": "Alla"
          },
          {
            "label": "Second"
          },
          {
            "label": "Third"
          }
        ]
      }
    },
    {
      "title": "Tillgänglig som fulltext",
      "radio": {
        "items": [
          {
            "name": "fulltext",
            "label": "Alla",
            "id": "filter3-1",
            "checked": true
          },
          {
            "name": "fulltext",
            "label": "Ja",
            "id": "filter3-2"
          },
          {
            "name": "fulltext",
            "label": "Nej",
            "id": "filter3-3"
          }
        ]
      }
    },
    {
      "title": "Ämne",
      "select": {
        "id": "filter4",
        "options": [
          {
            "label": "Alla"
          },
          {
            "label": "Second"
          },
          {
            "label": "Third"
          }
        ]
      }
    },
    {
      "title": "Språk",
      "select": {
        "id": "filter5",
        "options": [
          {
            "label": "Alla"
          },
          {
            "label": "Second"
          },
          {
            "label": "Third"
          }
        ]
      }
    },
    {
      "title": "Organisation",
      "select": {
        "id": "filter6",
        "options": [
          {
            "label": "Alla"
          },
          {
            "label": "Second"
          },
          {
            "label": "Third"
          }
        ]
      }
    },
    {
      "title": "Filtrera på typ",
      "select": {
        "id": "filter7",
        "options": [
          {
            "label": "Alla"
          },
          {
            "label": "Second"
          },
          {
            "label": "Third"
          }
        ]
      }
    },
    {
      "title": "Publiceringstyp",
      "select": {
        "id": "filter8",
        "options": [
          {
            "label": "Alla"
          },
          {
            "label": "Second"
          },
          {
            "label": "Third"
          }
        ]
      }
    }
  ],
  "modal-filters": [
    {
      "title": "Uppsatser/examensarbeten",
      "radio": {
        "items": [
          {
            "name": "uppsatser-examensarbeten",
            "label": "Alla",
            "id": "filter1-1-modal",
            "checked": true
          },
          {
            "name": "uppsatser-examensarbeten",
            "label": "Endast uppsatser/examensarbeten",
            "id": "filter1-2-modal"
          },
          {
            "name": "uppsatser-examensarbeten",
            "label": "Inga uppsatser/examensarbeten",
            "id": "filter1-3-modal"
          }
        ]
      }
    },
    {
      "title": "Dokumenttyp",
      "select": {
        "id": "filter2-modal",
        "options": [
          {
            "label": "Alla"
          }
        ]
      }
    },
    {
      "title": "Tillgänglig som fulltext",
      "radio": {
        "items": [
          {
            "name": "fulltext",
            "label": "Alla",
            "id": "filter3-1-modal",
            "checked": true
          },
          {
            "name": "fulltext",
            "label": "Ja",
            "id": "filter3-2-modal"
          },
          {
            "name": "fulltext",
            "label": "Nej",
            "id": "filter3-3-modal"
          }
        ]
      }
    },
    {
      "title": "Ämne",
      "select": {
        "id": "filter4-modal",
        "options": [
          {
            "label": "Alla"
          }
        ]
      }
    },
    {
      "title": "Språk",
      "select": {
        "id": "filter5-modal",
        "options": [
          {
            "label": "Alla"
          }
        ]
      }
    },
    {
      "title": "Organisation",
      "select": {
        "id": "filter6-modal",
        "options": [
          {
            "label": "Alla"
          }
        ]
      }
    },
    {
      "title": "Filtrera på typ",
      "select": {
        "id": "filter7-modal",
        "options": [
          {
            "label": "Alla"
          }
        ]
      }
    },
    {
      "title": "Publiceringstyp",
      "select": {
        "id": "filter8-modal",
        "options": [
          {
            "label": "Alla"
          }
        ]
      }
    }
  ]
}

No notes defined.