Fix new search bar - you can now finally search again

application/views/header.php

@@ -77,14 +77,23 @@
     </div>
 
     <div class="navbar-search">
+        <form action="#" id="search-form">
+            <div class="input-group">
+                <div class="input-group-prepend">
+                    <button class="btn" type="submit">
+                        <i class="fa fa-search"></i>
+                    </button>
+                </div>
                 <input class="form-control" type="search" placeholder="Suchen nach Posts, Projekten, Blog-Einträgen und mehr">
             </div>
+        </form>
+    </div>
 
     <?php if (isset($_SESSION['user'])): ?>
         <div class="navbar-action">
             <div class="dropdown">
                 <a href="#" class="navbar-action-btn dropdown-toggle" data-toggle="dropdown" id="userMenuButton" aria-haspopup="true" aria-expanded="false" role="button">
-                    <img src="<?= $_SESSION['user']['profilePic'] ?>?w=100" alt="" class="img-fluid rounded-circle">
+                    <img src="<?= $_SESSION['user']['profilePic'] ?>?w=40" alt="" class="img-fluid rounded-circle">
                     <text><?= $_SESSION['user']['displayname'] ?></text>
                 </a>
 

assets/css/header.css

@@ -190,16 +190,28 @@
 
 .navbar .navbar-search {
     z-index: 1;
+    padding-right: 40px;
     grid-area: center;
 }
 
+.navbar .navbar-search .input-group {
+    border-radius: .25rem;
+    background: rgba(0, 0, 0, .04);
+}
+
 .navbar .navbar-search input.form-control {
     border: none;
-    background: rgba(0, 0, 0, .04);
+    background: none;
     box-shadow: none;
     outline: none;
 }
 
+.navbar .navbar-search .input-group .btn {
+    padding: .375rem .25rem .375rem .75rem;
+    background: none;
+    color: #666;
+}
+
 #userMenuButton {
     height: 48px;
     padding: 4px 25px 4px 4px;

assets/js/main.js

@@ -222,10 +222,17 @@ $(document).on('swipeleft', function () {
     }
 });
 
-function closeSearch() {
+$('#search-form').submit((e) => {
-    $('.navbar.search-open').removeClass('search-open')
+    e.preventDefault();
-        .find('.navbar-search input').val('');
+
+    executeSearch();
+});
+
+$('.navbar-search input').on('keyup', (e) => {
+    if (e.key === 'Enter') {
+        $('#search-form').submit();
     }
+});
 
 function executeSearch() {
     const search = $('.navbar-search input').val().trim();
@@ -250,12 +257,8 @@ function executeSearch() {
         },
         method: 'GET',
         success: data => {
-            // $('html').children().remove()[0].outerHTML = data;
             document.write(data);
             document.close();
-            // const newBody = $('body > *:not(header):not(footer):not(#bottom)', $(data));
-            // console.log(newBody);
-            // $('.loadingSpinner').after(newBody);
         },
         error: data => {
             console.log(data);
@@ -263,57 +266,6 @@ function executeSearch() {
     });
 }
 
-$('#searchButton').on('click', (e) => {
-    e.preventDefault();
-    const navbar = $('.navbar');
-    if (navbar.hasClass('search-open')) {
-        const search = $('.navbar-search input').val().trim();
-
-        if (search.length > 0) {
-            executeSearch();
-        } else {
-            closeSearch();
-        }
-    } else {
-        navbar.addClass('search-open');
-        $('.navbar .navbar-search input').focus();
-    }
-});
-
-$('#searchResetButton').on('click', (e) => {
-    e.preventDefault();
-    closeSearch();
-});
-
-$('body').on('keyup', (e) => {
-    if ($('.navbar').hasClass('search-open') && e.key === 'Escape') {
-        closeSearch();
-    }
-});
-
-$('.navbar-search input').on('keyup', (e) => {
-    if (e.key === 'Enter') {
-        executeSearch()
-    }
-});
-
-$('.navbar-search:not(.active) .btn-search').click(function (event) {
-    event.preventDefault();
-    const $form = $(this).closest('form'),
-        $input = $form.find('input');
-    $form.addClass('active');
-    $input.focus();
-});
-
-$('.navbar-search.active .btn-search').click(function (event) {
-    event.preventDefault();
-    const $form = $(this).closest('form'),
-        $input = $form.find('input');
-    //TODO: Execute search
-
-    closeSearch();
-});
-
 $(function () {
     $.each($(".share-btn"), function () {
         $(this).on("click", function (event) {
@@ -388,6 +340,18 @@ $('#notificationMenuButton').click(() => {
     });
 });
 
+$(() => {
+    $('.max-length-input').each(function () {
+        console.log(this);
+        $(this).after(`<span class="max-length-counter">${$(this).attr('max-length')}</span>`);
+    });
+});
+
+$('.max-length-input').keypress(function () {
+    const val = $(this).val() || $(this).text();
+    $(this).next('.max-length-counter').text($(this).attr('max-length') - val.trim().length);
+});
+
 const notificationCount = 5;
 let notificationOffset = 0;