University of Derby

Site Search 

<div class="main-navigation-panel">
    <div class="main-navigation-panel-content">
        <div class="main-navigation-close">
            <a href="#" class="js-header-navigation-search">
                <i class="uod-icons uod-icons-cross"></i>
            </a>
        </div>
        <div class="site-search-title">
            <h3>Search</h3>
        </div>
        <div class="site-search-inner-panel">
            <div class="site-search-input">
                <div class="search-input-group">
                    <input type="text" class="search-input" placeholder="Search courses">
                    <button class="search-button" type="button">
        <i class="uod-icons uod-icons-search"></i>
        <span class="search-button-overlay"><i class="uod-icons uod-icons-search"></i>search</span>
    </button>
                </div>
            </div>
            <div class="site-search-results">
                <h5>Courses</h5>
                <ul>
                    <li>
                        <a href="#">
                            Art and Design Mphil or PhD
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Art Therapy MA
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            An introduction to Art Therapy Supervision
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Creative Art and Design Practice (FdA)
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Arts Therapies Theory and Research in Relation to Practice One
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
 
<div class="main-navigation-panel">
    <div class="main-navigation-panel-content">
        <div class="main-navigation-close">
            <a href="#" class="js-header-navigation-search">
                <i class="uod-icons uod-icons-cross"></i>
            </a>
        </div>
        <div class="site-search-title">
            <h3>Search</h3>
        </div>
        <div class="site-search-inner-panel">
            <div class="site-search-input">
                {% embed '@search-input' with { highContrast: false } %}{% endembed %}
            </div>
            <div class="site-search-results">
                {% for index, resultGroup in searchresults %}
                {% if resultGroup.category %}
                    <h5>{{ resultGroup.category.title }}</h5>
                {% endif %}
                {% if resultGroup.results %}
                <ul>
                    {% for index, result in resultGroup.results %}
                    <li>
                        <a href="{{ result.href }}">
                            {{ result.title }}
                        </a>
                    </li>
                    {% endfor %}
                </ul>
                {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
</div>
 
{
  "searchresults": [
    {
      "category": {
        "title": "Courses"
      },
      "results": [
        {
          "title": "Art and Design Mphil or PhD",
          "href": "#"
        },
        {
          "title": "Art Therapy MA",
          "href": "#"
        },
        {
          "title": "An introduction to Art Therapy Supervision",
          "href": "#"
        },
        {
          "title": "Creative Art and Design Practice (FdA)",
          "href": "#"
        },
        {
          "title": "Arts Therapies Theory and Research in Relation to Practice One",
          "href": "#"
        }
      ]
    }
  ]
}
  • Content: 
    .site-search {
    &-inner-panel {
        display: flex;
        right: fluid-margin();
        left: fluid-margin();
        flex-direction: column;
    }

    &-title {
        lost-column: 16/16;
        lost-offset: 0/16;
        margin-bottom: px-to-em(48);
    }

    &-input {
        lost-column: 16/16;
        lost-offset: 0/16;
        flex: 0 0 auto;
    }

    &-results {
        @include underline-only-on-hover;

        lost-column: 15/16;
        lost-offset: 0/16;
        display: none;
        margin-top: 65px;
        font-family: $header-font;

        h5 {
            margin-bottom: px-to-em(30, 24);
        }

        ul,
        li {
            padding: 0;
            list-style-type: none;
        }

        li {
            padding: 0;
        }

        a {
            @include link-colour($white);
            
            display: block;
            border-bottom: 1px dashed $dark-grey;
            padding-right: 1em;
            padding-bottom: px-to-em(15);
            line-height: 22 / 20 + 0;
            font-size: px-to-em(20);
            font-weight: bold;
        }

        @include for-tablet-portrait-up {
            display: initial;
        }
    }

    @include for-largerthan-ipad-portrait {
        &-title {
            lost-column: 14/16;
            lost-offset: 1/16;
        }
    
        &-input {
            lost-column: 14/16;
            lost-offset: 1/16;
            flex: 0 0 auto;
        }
    
        &-results {
            lost-column: 13/16;
            lost-offset: 1/16;
        }
    }
    
    @include for-tablet-landscape-up {

        &-inner-panel {
            flex-direction: row;
        }

        &-title {
            lost-column: 12/13;
            lost-offset: 1/13;
        }

        &-input {
            lost-column: 8/13;
            lost-offset: 1/13;
            margin-top: px-to-em(16);
            padding-right: 40px;
            flex: 0 0 auto;
        }

        &-results {
            lost-offset: 0/13;
            lost-column: 4/13;
            padding-right: 50px;
            margin-top: 0;

            @include for-desktop-up {
                padding-right: 0;
            }
        }
    }
}
  • URL: /components/raw/site-search/site-search.scss
  • Filesystem Path: components/atoms/site-search/site-search.scss
  • Size: 2.2 KB

There are no notes for this item.