diff --git a/www/src/db_handler/mysql_handler.php b/www/src/db_handler/mysql_handler.php index bac80c9..bf63e9d 100644 --- a/www/src/db_handler/mysql_handler.php +++ b/www/src/db_handler/mysql_handler.php @@ -439,7 +439,7 @@ class MySQLHandler if(strlen($options['text']) > 0) { $text_search_scores = [0]; $text_search_wheres = []; - foreach([['title', 6], ['brief', 4], ['markdown', 1]] as $arg) { + foreach([['title', 15], ['brief', 6], ['markdown', 1]] as $arg) { $text_search_scores []= "((MATCH(post_" . $arg[0] . ") AGAINST (?)) * " . $arg[1] . ')'; $qry_select_data []= $options['text']; $qry_select_types .= 's'; @@ -462,7 +462,7 @@ class MySQLHandler } if(count($qry_wheres) == 0) { - throw new Exception("No search filtering options supplied!"); + return []; } $options['offset'] ??= 0; diff --git a/www/src/fontawesome.php b/www/src/fontawesome.php index 924e1f7..88b7c07 100644 --- a/www/src/fontawesome.php +++ b/www/src/fontawesome.php @@ -10,7 +10,8 @@ $FONT_AWESOME_ARRAY=[ 'folder-tree' => '', 'folder' => '', 'folder-open' => '', - 'rss' => '' + 'rss' => '', + 'magnifying-glass' => '' ]; ?> \ No newline at end of file diff --git a/www/src/serve/ajax.php b/www/src/serve/ajax.php index 29db538..80709ea 100644 --- a/www/src/serve/ajax.php +++ b/www/src/serve/ajax.php @@ -17,8 +17,13 @@ if(isset($REQUEST_QUERY['page'])) { $ajax_args['page'] = $adapter->get_post($REQUEST_QUERY['page']); } +if(isset($REQUEST_QUERY['query'])) { + $REQUEST_QUERY['search'] ??= $REQUEST_QUERY['query']; +} + if(isset($REQUEST_QUERY['search'])) { - $ajax_args['search_results'] = $post->handler->search_posts($REQUEST_QUERY['search']); + $ajax_args['search_query'] = $REQUEST_QUERY['search']; + $ajax_args['search_results'] = $adapter->search_posts($REQUEST_QUERY['search']); } diff --git a/www/static/dergstyle.css b/www/static/dergstyle.css index 39810d1..a162d9b 100644 --- a/www/static/dergstyle.css +++ b/www/static/dergstyle.css @@ -29,6 +29,7 @@ body { --highlight_0: #ee9015b1; --highlight_1: #ee9015; + --highlight_1a: #ee901540; --highlight_2: #edd29e; --text_1: #FFFFFF; @@ -39,8 +40,10 @@ body { --content-padding: max(0.5rem, min(1rem, var(--content-total-margin))); --content-margin: max(0px, calc(var(--content-total-margin) - 1rem)); - - color: var(--text_1); + + width: 100vw; + + color: var(--text_1); background: var(--bg_1); margin: 0px; @@ -48,6 +51,11 @@ body { min-height: 100vh; padding-bottom: 4rem; + + overflow-y: overlay; + overflow-x: clip; + + scrollbar-gutter: stable; } @media only screen and (max-width: 600px) { @@ -68,6 +76,23 @@ body { } } +/* width */ +::-webkit-scrollbar { +width: 3px; +height: 3px; +} + +/* Track */ +::-webkit-scrollbar-track { +background: transparent; +} + +/* Handle */ +::-webkit-scrollbar-thumb { +background: var(--highlight_1); +} + + :link { color: var(--highlight_1); font-style: italic; @@ -174,6 +199,7 @@ a:hover { min-height: 100%; background: var(--bg_2); + min-width: 0; } body::before { @@ -197,10 +223,37 @@ body::before { z-index: 10; pointer-events: none; - transition: opacity 0.2s; + transition: opacity 0.2s; } -body.htmx-request::before { - opacity: 1; +.htmx-indicator { + position: relative; +} +.htmx-indicator::before { + content: ''; + + position: absolute; + + top: 0; + left: 0; + right: 0; + bottom: 0; + + width: 100%; + height: 100%; + + background-image: url('/static/three-dots.svg'); + background-repeat: no-repeat; + background-position: center; + + opacity: 0; + + z-index: 10; + pointer-events: none; + + transition: opacity 0.2s; +} +.htmx-request::before { + opacity: 0.5; transition-delay: 0.5s; } diff --git a/www/static/modest.css b/www/static/modest.css index c1231e2..f59b797 100644 --- a/www/static/modest.css +++ b/www/static/modest.css @@ -200,4 +200,7 @@ article { & ol { padding-left: 2em; } + & li { + margin-bottom: 1em; + } } \ No newline at end of file diff --git a/www/static/styles/post_navbar.css b/www/static/styles/post_navbar.css index d663dac..4d125de 100644 --- a/www/static/styles/post_navbar.css +++ b/www/static/styles/post_navbar.css @@ -30,12 +30,112 @@ } } - & > ._path { + & ._search_field { + position: relative; + + width: 1.3em; + height: auto; + + margin-right: 0.2em; + + overflow-x: clip; + + /*transition: width 0.5s ease;*/ + + & > input { + color: var(--text_1); + + height: 1em; + width: 100%; + + font-size: 1em; + + background-color: transparent; + + outline: none; + + border: none; + + padding-left: 1.3rem; + } + + & .fa-icn { + position: absolute; + left: 0.1em; + top: 0.3em; + + pointer-events: none; + } + + &:focus-within, &:hover, &:has(:focus) { + width: min(20em, 60vw); + min-width: min(20em, 60vw); + + & ._search_list { + display: block; + opacity: 1; + } + & input { + border-bottom: 0.15em solid var(--bg_2); + } + } + + & ._search_list { + display: none; + opacity: 0; + + background: var(--bg_2); + + transition: opacity 0.3s ease 0.5s; + transition: visibility 0s none 1s; + + width: 100% + max-height: 50vh; + overflow-y: scroll; + + padding: 0.5em; + + z-index: 6; + + & li { + border-bottom: 1px solid var(--highlight_1); + + &:hover { + background: var(--highlight_1a); + } + } + } + } + + & ._path { width: 100%; height: 1.5rem; + padding-left: 0.5rem; + padding-right: 0.6rem; + + background: var(--highlight_1); + + font-size: 1.1rem; + + display: flex; + flex-direction: row; + list-style-type: none; + + white-space: nowrap; + + & > a { + color: var(--text_1); + padding-right: 0.2rem; + } + } + + & ._path_list { + width: 100%; + height: 100%; + + margin-right: 1em; font-style: italic; - padding-left: 0.5rem; background: var(--highlight_1); @@ -49,7 +149,7 @@ overflow-y: hidden; white-space: nowrap; - + & a { color: var(--text_1); padding-right: 0.2rem; diff --git a/www/static/styles/toc.css b/www/static/styles/toc.css index bb2ea8e..795befd 100644 --- a/www/static/styles/toc.css +++ b/www/static/styles/toc.css @@ -15,7 +15,7 @@ box-shadow: -0.2em 0.2em 0.2em black; --toc-fg: #cecece; - --toc-bg: #EE901544; + --toc-bg: var(--highlight_1a); background-color: var(--bg_2); diff --git a/www/static/toc.js b/www/static/toc.js index dafbee5..2428898 100644 --- a/www/static/toc.js +++ b/www/static/toc.js @@ -182,21 +182,19 @@ class TocNavBarUpdater { trackingRebuildCallback() { this._removeNavbarElements(); - this.navbar_dom = document.querySelector('#main_navbar_path'); + this.navbar_dom = document.querySelector('#main_navbar_path_list'); } trackingUpdateCallback(element) { this._removeNavbarElements(); - const navbar_prev_node = this.navbar_dom.children[this.navbar_dom.children.length -1]; - element.path.forEach(pathItem => { let newNode = document.createElement('li'); const pathURL = location.pathname + '#' + pathItem.id + location.search; newNode.innerHTML = " #" + pathItem.level + '' + pathItem.name + '' - this.navbar_dom.insertBefore(newNode, navbar_prev_node); + this.navbar_dom.appendChild(newNode); this.added_navbar_elements.push(newNode); }); diff --git a/www/templates/fragments/decoration/navbar.html b/www/templates/fragments/decoration/navbar.html index 3c769e3..f8b65e4 100644 --- a/www/templates/fragments/decoration/navbar.html +++ b/www/templates/fragments/decoration/navbar.html @@ -4,22 +4,51 @@ {{ page.basename }} - - {% set split_post = page.path |split('/') %} - {% for i in range(0, split_post|length - 1) %} -
  • - {% if i != 0 %} - - > {{ split_post[i] }} - - {% else %} - root - {% endif %} -
    • - {% endfor %} - -
  • + +
      + {% set split_post = page.path |split('/') %} + {% for i in range(0, split_post|length - 1) %} +
    • + {% if i != 0 %} + + > {{ split_post[i] }} + + {% else %} + root + {% endif %} +
      • + {% endfor %} +
    + +
    + + {{ fa['magnifying-glass']|raw }} + + + + + +
      + + Type to search... +
    +
    +
  • diff --git a/www/templates/fragments/search/inline.html b/www/templates/fragments/search/inline.html new file mode 100644 index 0000000..c6c985c --- /dev/null +++ b/www/templates/fragments/search/inline.html @@ -0,0 +1,10 @@ + +{% for post in search_results %} + {# We can't boost because text-fragments HAVE to be user-inited! #} +
  • + {{post.title}} +
    • + +{% endfor %} \ No newline at end of file