Merge pull request #720 from FitzwilliamMuseum/feature/search-box

Feature/search box

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/js/app.js": "/js/app.js?id=d943ffce7f0f0ac2aa46aad28f04864c",
-    "/css/app.css": "/css/app.css?id=730c9590b4cbcf32e52823f1521c3307",
-    "/css/fitzwilliam.css": "/css/fitzwilliam.css?id=0b0ee8fa97e5ae468652dd2d4ff1fba1"
+    "/js/app.js": "/js/app.js?id=b8905b220a3026e29c691fbcf7f1ab86",
+    "/css/app.css": "/css/app.css?id=0b507e855f6ef0d9dc4aab21328475d9",
+    "/css/fitzwilliam.css": "/css/fitzwilliam.css?id=ac5439ad1da7ccbbd3f994488e57982e"
 }

resources/css/site.css

@@ -1108,6 +1108,7 @@ a.text-center.btn.btn-outline-light.btn__book {
     background: transparent;
 }
 
+
 .col-max-800 {
     max-width: 800px;
     margin: 56px auto;

resources/js/app.js

@@ -8,4 +8,5 @@ import "bootstrap/js/dist/modal";
 import "@popperjs/core";
 import "./nav";
 import './related-content-grid';
+import './search-bar';
 import './cards';

resources/js/search-bar.js

@@ -0,0 +1,49 @@
+    window.addEventListener("DOMContentLoaded", () => {
+        const search_button = document.querySelector("#search-btn");
+        const main_search = document.querySelector("#main-search");
+        const main_navbar = document.querySelector("nav.navbar");
+        const head = document.querySelector(".head.parallax");
+        const navbar_toggler = document.querySelector(".navbar-toggler");
+
+        function updateMargins() {
+            const navbarHeight = main_navbar.getBoundingClientRect().height;
+            const searchHeight = main_search.getBoundingClientRect().height;
+
+            main_search.style.top = navbarHeight + "px";
+            head.style.setProperty("margin-top", (searchHeight + navbarHeight) + "px", "important");
+
+            if (navbar_toggler.classList.contains("show")) {
+                main_search.style.top = navbarHeight + "px";
+                main_search.style.minHeight = "0px";
+                main_search.style.padding = "40px 16px 60px 16px";
+                head.style.setProperty("margin-top", "0", "important");
+            }
+        }
+
+        search_button.addEventListener("click", () => {
+            if (main_search.hasAttribute("hidden")) {
+                main_search.removeAttribute("hidden");
+                updateMargins();
+            } else {
+                main_search.setAttribute("hidden", "true");
+                head.style.setProperty("margin-top", 0);
+                main_search.style.setProperty("top", 0);
+            }
+        });
+
+        navbar_toggler.addEventListener("click", () => {
+            if (main_search.hasAttribute("hidden")) {
+                const navbarHeight = main_navbar.getBoundingClientRect().height;
+                main_search.removeAttribute("hidden");
+                main_search.style.top = (navbarHeight) + "px";
+                main_search.style.minHeight = 0;
+                main_search.style.padding = "0 16px 40px 16px";
+                head.style.setProperty("margin-top", (navbarHeight) + "px", "important");
+            }
+                main_search.setAttribute("hidden", "true");
+                main_search.style.top = 0;
+                head.style.setProperty("margin-top", 0);
+        });
+
+        window.addEventListener("resize", updateMargins);
+    });

resources/sass/_nav.scss

@@ -0,0 +1,58 @@
+#main-search {
+    background: black;
+    border: none;
+    display: flex;
+    position: absolute;
+    left: 0;
+    margin: 0;
+    min-height: 100%;
+    padding: 40px 16px;
+    width: 100%;
+}
+
+.main-search-wrapper {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    max-width: 1290px;
+    width: 100%;
+}
+
+.main-search-label {
+    font-size: 46px;
+    font-weight: 500;
+    color: white;
+    margin-bottom: 24px;
+}
+
+.main-search-label span {
+    display: none;
+
+    @media screen and (min-width: 500px) {
+        display: inline;
+    }
+}
+
+.main-search-input {
+    padding: 26.5px 0 26.5px 20px;
+    border: 1px solid white;
+    background: transparent !important;
+    color: white !important;
+    font-size: 18px;
+    width: 100%;
+}
+
+.main-search-input::placeholder {
+    color: white !important;
+}
+
+.main-search-btn {
+    position: absolute;
+    top: 50%;
+    right: 10px;
+    transform: translateY(-50%);
+}
+
+.collapsing {
+    transition: none;
+}

resources/sass/app.scss

@@ -5,6 +5,7 @@
 @import "~bootstrap/scss/bootstrap";
 @import "~bootstrap/scss/utilities/api";
 @import "support";
+@import "_nav";
 
 @import 'support-us/_support-us';
 @import "exhibition/exhibition";

resources/sass/support-us/_faq.scss

@@ -35,6 +35,15 @@
     font-weight: 400;
     line-height: 25px;
     height: 65px;
+    margin: 4px 0;
+    border-top: 1.5px solid black;
+}
+
+.faq-card:last-child .collapse .card-body {
+    border-bottom: 1.5px solid black;
+}
+.faq-card:last-child .faq-card-header .faq-card-btn[aria-expanded="false"] {
+    border-bottom: 1.5px solid black;
     border-top: 1.5px solid black;
     padding: 0;
 }

resources/views/components/exhibition-hero.blade.php

@@ -9,7 +9,7 @@
 @if (!empty($hero))
     <div class="parallax home-hero exhibition-hero">
         @if(!empty($hero['image']))
-            <div class="bg-overlay" style="background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 10%, transparent), url({{ $hero['image']['data']['url'] }}) no-repeat center center / cover;"></div>
+            <div class="bg-overlay" style="background: linear-gradient( to top, rgba(0, 0, 0, 0.8) 10%, transparent ), url({{ $hero['image']['data']['url'] }}) no-repeat center center / cover"></div>
         @else
             <div class="bg-overlay"></div>
         @endif

resources/views/includes/structure/nav.blade.php

@@ -126,24 +126,28 @@ class="visually-hidden">(current)</span></a>
                                         href="https://curatingcambridge.co.uk/collections/the-fitzwilliam-museum">Shop</a>
                                 </li>
                             </ul>
-                            {{--
-                            TNEW updates 2024 - search bar removed from header
-                            {{ Form::open(['url' => url('/search/results'),'method' => 'GET', 'class' => 'd-flex']) }}
-                            <label for="search" class="visually-hidden">Search: </label>
-                            <input id="query" name="query" type="text" class="form-control me-2" placeholder="Search our site"
-                                required value="{{ old('query') }}" aria-label="Your query">
-                            <button type="submit" class="btn btn-outline-light my-2 my-sm-0 fa fa-download" id="searchButton"
-                                aria-label="Submit your search">Search
-                            </button>
-                            {!! Form::close() !!}
-
-                            --}}
                         </div>
                         <div class="donate-container" id="search-donate-container">
-                            <a class="nav-link" href="{{ route('search.index') }}" aria-label="Search" >
+                            <button id="search-btn" style="background: transparent; border: none;">
                                 @svg('fas-magnifying-glass', ['aria-hidden' => 'true', 'focusable' => 'false',
                                 'color' => '#fff', 'width' => 20, 'height' => 20])
-                            </a>
+                                <span class="visually-hidden">Toggle Search Box</span>
+                            </button>
+                            {{ Form::open(['url' => url('/search/results'),'method' => 'GET', 'id' => 'main-search', 'hidden']) }}
+                                <div class="main-search-wrapper">
+                                    <label class="main-search-label" for="query">Search <span>the Fitzwilliam</span></label>
+                                    <div style="position: relative;">
+                                        <input id="query" name="query" type="text" class="main-search-input" placeholder="What are you looking for?"
+                                        required value="{{ old('query') }}" aria-label="Your query">
+                                        <button class="main-search-btn" type="submit" id="searchButton" aria-label="Submit your search" style="background: transparent; border: none;">
+                                            @svg('fas-magnifying-glass', ['aria-hidden' => 'true', 'focusable' => 'false',
+                                            'color' => '#fff', 'width' => 20, 'height' => 20])
+                                            <span class="visually-hidden">Search the Fitzwilliam</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            {!! Form::close() !!}
+
                             <div class="nav-link-donate">
                                 <a class="nav-link" href="https://tickets.museums.cam.ac.uk/donate/i/donate-to-the-fitzwilliam">Donate</a>
                             </div>

resources/views/research/affiliate.blade.php

@@ -213,8 +213,8 @@ class="panel-collapse collapse in col-md-12 shadow-sm p-3 mx-auto mb-3"
     @endsection
 @endif
 
-
-@if(!empty($similar))
+{{-- https://trello.com/c/3x305zMG/93-remove-staff-profiles-related-profiles --}}
+{{-- @if(!empty($similar))
     @section('mlt')
         <div class="container py-3">
             <h3>Researchers with similar profiles</h3>
@@ -225,4 +225,4 @@ class="panel-collapse collapse in col-md-12 shadow-sm p-3 mx-auto mb-3"
             </div>
         </div>
     @endsection
-@endif
+@endif --}}

resources/views/research/profile.blade.php

@@ -253,8 +253,8 @@ class="panel-collapse collapse in col-md-12 shadow-sm p-3 mx-auto mb-3"
     @endsection
 @endif
 
-
-@if(!empty($similar))
+{{-- https://trello.com/c/3x305zMG/93-remove-staff-profiles-related-profiles --}}
+{{-- @if(!empty($similar))
     @section('mlt')
         <div class="container py-3">
             <h3>Researchers with similar profiles</h3>
@@ -265,4 +265,4 @@ class="panel-collapse collapse in col-md-12 shadow-sm p-3 mx-auto mb-3"
             </div>
         </div>
     @endsection
-@endif
+@endif --}}