gburri/recipes
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Add search frontend code

Browse source
This commit is contained in:
Greg Burri 2025-05-24 12:18:23 +02:00
parent 988849e598
commit 3e91f34303
22 changed files with 379 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

6
backend/scss/calendar.scss
View file

@ -14,7 +14,7 @@
.svg-arrow {
display: block;
margin: consts.$margin calc(consts.$margin / 2);
margin: var(--margin) calc(var(--margin) / 2);
fill: consts.$link-color;
width: 0.8rem;
height: 0.8rem;
@ -34,7 +34,7 @@
}
.year {
margin: consts.$margin;
margin: var(--margin);
}
.month {
@ -82,7 +82,7 @@
}
.remove-scheduled-recipe {
padding: 0px calc(consts.$margin / 2);
padding: 0px calc(var(--margin) / 2);
}
}
}

30
backend/scss/constants.scss
View file

@ -2,6 +2,25 @@
$dark-theme: false !default;
$mobile-width: 1080px;
// Dynamic values depending of the screen width.
@media (min-width: calc($mobile-width + 1px)) {
:root {
--margin: 5px;
--title-font-size: 180%;
--logo-size: 50px;
}
}
@media (max-width: $mobile-width) {
:root {
--margin: 3px;
--title-font-size: 130%;
--logo-size: 40px;
}
}
$color-1: #B29B89;
$color-2: #89B29B;
$color-3: #9B89B2;
@ -9,21 +28,22 @@ $color-highlight: #cf2d2dff;
$text-color: color.adjust($color-1, $lightness: -30%);
$text-highlight: color.adjust($color-1, $lightness: +30%);
$text-dimished: color.adjust($color-1, $lightness: -15%, $saturation: -15%);
$link-color: color.adjust($color-3, $lightness: -25%);
$link-hover-color: color.adjust($color-3, $lightness: +20%);
@if $dark-theme {
$color-highlight: color.adjust($color-highlight, $lightness: +10%);
$text-color: color.adjust($color-1, $lightness: -10%);
$text-highlight: color.adjust($color-1, $lightness: +10%);
$color-highlight: color.adjust($color-highlight, $lightness: +10%);
$text-dimished: color.adjust($color-1, $lightness: -20%, $saturation: -15%);
$link-color: color.adjust($color-3, $lightness: -5%);
$link-hover-color: color.adjust($color-3, $lightness: +10%);
$color-1: color.adjust($color-1, $lightness: -47%);
$color-2: color.adjust($color-2, $lightness: -47%);
$color-3: color.adjust($color-2, $lightness: -47%);
}
$margin: 5px;
$color-3: color.adjust($color-3, $lightness: -50%);
}

63
backend/scss/main.scss
View file

@ -4,6 +4,7 @@ $dark-theme: false !default;
@use 'constants' as consts with ($dark-theme: $dark-theme);
@use 'calendar';
@use 'search';
@use 'toast';
@use 'modal-dialog';
@use 'mixins';
@ -40,26 +41,26 @@ body {
}
.footer-container {
margin: consts.$margin;
margin: var(--margin);
align-self: center;
font-size: 0.7em;
}
/// HEADER ///
.header-container {
margin: calc(2 * consts.$margin);
margin: calc(2 * var(--margin));
display: flex;
align-items: flex-end;
justify-content: space-between;
.title {
font-size: 180%;
font-size: var(--title-font-size);
font-style: italic;
.logo {
width: 50px;
height: 50px;
width: var(--logo-size);
height: var(--logo-size);
vertical-align: bottom;
margin: 0px 10px 0px 0px;
@ -68,16 +69,16 @@ body {
.header-menu {
.user-menu {
margin: consts.$margin;
margin: var(--margin);
.user-edit-link {
margin-left: consts.$margin;
margin-left: var(--margin);
}
}
#select-website-language {
margin: consts.$margin;
padding: consts.$margin;
margin: var(--margin);
padding: var(--margin);
}
}
}
@ -87,16 +88,16 @@ body {
flex-direction: row;
#recipes-list {
margin: calc(2 * consts.$margin);
margin: calc(2 * var(--margin));
ul {
padding-left: 20px;
li {
margin-bottom: calc(consts.$margin / 2);
margin-bottom: calc(var(--margin) / 2);
a {
padding: calc(consts.$margin / 2);
padding: calc(var(--margin) / 2);
}
}
}
@ -130,7 +131,7 @@ body {
}
.content {
margin: calc(2 * consts.$margin);
margin: calc(2 * var(--margin));
flex-grow: 1;
@ -250,13 +251,11 @@ body {
}
}
// #dev-panel {
// }
form {
display: grid;
// <label> <input>.
grid-template-columns: auto 1fr;
gap: calc(consts.$margin / 2);
gap: calc(var(--margin) / 2);
align-items: center;
}
@ -279,14 +278,14 @@ body {
border: 0.1em solid consts.$color-3;
border-radius: 0.5em;
background-color: consts.$color-1;
margin: consts.$margin;
padding: consts.$margin;
margin: var(--margin);
padding: var(--margin);
}
textarea,
input {
margin: consts.$margin;
padding: calc(consts.$margin / 2) calc(2 * consts.$margin);
margin: var(--margin);
padding: calc(var(--margin) / 2) calc(2 * var(--margin));
background-color: consts.$color-1;
border: solid 1px consts.$color-3;
@ -300,8 +299,8 @@ input {
}
select {
margin: consts.$margin;
padding: calc(consts.$margin / 2) calc(2 * consts.$margin);
margin: var(--margin);
padding: calc(var(--margin) / 2) calc(2 * var(--margin));
background-color: consts.$color-1;
border: solid 1px consts.$color-3;
@ -316,8 +315,8 @@ select {
input[type="button"],
input[type="submit"],
.button {
margin: consts.$margin;
padding: calc(consts.$margin / 2) calc(2 * consts.$margin);
margin: var(--margin);
padding: calc(var(--margin) / 2) calc(2 * var(--margin));
border: 0.1em solid consts.$color-3;
border-radius: 0.5em;
@ -345,19 +344,19 @@ input[type="submit"],
width: 120px;
background-color: consts.$color-1;
text-align: center;
padding: consts.$margin 0;
padding: var(--margin) 0;
border: 0.1em solid consts.$color-3;
border-radius: 0.5em;
position: absolute;
z-index: 1;
z-index: 10;
cursor: default;
top: -(consts.$margin);
top: -(var(--margin));
left: 100%;
margin-left: consts.$margin;
margin-left: var(--margin);
}
&:hover .tooltiptext {
@ -369,8 +368,8 @@ input[type="submit"],
position: absolute;
top: 50%;
right: 100%;
margin-top: -(consts.$margin);
border-width: consts.$margin;
margin-top: -(var(--margin));
border-width: var(--margin);
border-style: solid;
border-color: transparent consts.$color-3 transparent transparent;
}
@ -378,7 +377,7 @@ input[type="submit"],
/// Toggle theme (dark, light).
#toggle-theme {
margin: consts.$margin;
margin: var(--margin);
position: relative;
display: inline-block;

2
backend/scss/mixins.scss
View file

@ -35,6 +35,6 @@
color: consts.$text-color;
text-align: center;
padding: calc(2 * consts.$margin) calc(2 * consts.$margin);
padding: calc(2 * var(--margin)) calc(2 * var(--margin));
box-shadow: -1px 1px 10px rgba(0, 0, 0, 0.3);
}

4
backend/scss/modal-dialog.scss
View file

@ -3,7 +3,7 @@
#modal-dialog {
position: fixed;
z-index: 1;
z-index: 5;
left: 50%;
width: 50%;
transform: translate(-50%, 0%);
@ -16,6 +16,6 @@
padding: 0;
>div {
padding: calc(2 * consts.$margin) calc(2 * consts.$margin);
padding: calc(2 * var(--margin)) calc(2 * var(--margin));
}
}

73
backend/scss/search.scss Normal file
View file

@ -0,0 +1,73 @@
@use 'sass:color';
@use 'constants' as consts;
#search {
position: relative;
display: inline-flex;
align-items: center;
input {
width: 100%;
line-height: 28px;
padding: 0 1rem;
padding-left: 2.5rem;
border-radius: 8px;
background-color: consts.$color-2;
}
input::placeholder {
color: consts.$text-dimished;
}
.icon {
position: absolute;
left: 1rem;
fill: consts.$color-3;
width: 1rem;
height: 1rem;
}
.results {
display: none;
z-index: 2;
position: absolute;
background-color: white;
vertical-align: top;
top: 100%;
border: solid 1px consts.$color-3;
background-color: consts.$color-1;
box-shadow: 0 0 5px color.adjust(consts.$color-3, $lightness: -20%);
.message {
display: hidden;
padding:
var(--margin) calc(2 * var(--margin)) var(--margin) calc(2 * var(--margin));
}
ul {
padding: 0px;
margin: 0px;
li {
padding:
var(--margin) calc(2 * var(--margin)) var(--margin) calc(2 * var(--margin));
list-style-type: none;
em {
font-weight: bold;
}
}
li:nth-child(odd) {
background: consts.$color-2;
}
}
}
}
#hidden-templates-search {
display: none;
}

4
backend/scss/toast.scss
View file

@ -3,7 +3,7 @@
#toasts {
position: fixed;
z-index: 1;
z-index: 6;
left: 50%;
top: 15px;
transform: translate(-50%, 0%);
@ -18,7 +18,7 @@
@include mixins.popup;
margin: consts.$margin;
margin: var(--margin);
.content {
display: inline-block;

8
backend/sql/version_1.sql
View file

@ -96,7 +96,13 @@ CREATE TABLE [Recipe] (
CREATE VIRTUAL TABLE [RecipeTitle] USING FTS5(
[title],
CONTENT = [Recipe],
CONTENT_ROWID = [id]
CONTENT_ROWID = [id],
PREFIX = 2,
PREFIX = 3,
PREFIX = 4,
PREFIX = 5,
PREFIX = 6,
PREFIX = 7,
);
CREATE TRIGGER [Recipe_trigger_insert] AFTER INSERT ON [Recipe] BEGIN

15
backend/src/data/db/recipe.rs
View file

@ -1,5 +1,3 @@
use std::u32;
use chrono::prelude::*;
use common::web_api::Difficulty;
use itertools::Itertools;
@ -287,18 +285,21 @@ FROM [Recipe] WHERE [id] = $1
&self,
lang: &str,
term: &str,
max_nb_results: u32,
) -> Result<Vec<model::RecipeSearchResult>> {
sqlx::query_as(
r#"
SELECT [id], [recipe].[title], highlight([RecipeTitle], 0, '<em>', '</em>') [title_highlighted]
FROM [RecipeTitle]
INNER JOIN [Recipe] ON [Recipe].[id] = [RecipeTitle].[rowid]
WHERE [Recipe].[lang] = $1 AND [RecipeTitle] MATCH $2
WHERE [Recipe].[is_public] AND [Recipe].[lang] = $1 AND [RecipeTitle] MATCH $2
ORDER BY RANK, [Recipe].[title]
LIMIT $3
"#,
)
.bind(lang)
.bind(term)
.bind(max_nb_results)
.fetch_all(&self.pool)
.await
.map_err(DBError::from)
@ -964,6 +965,8 @@ pub fn normalize_tag(tag: &str) -> String {
#[cfg(test)]
mod tests {
use std::u32;
use super::*;
use chrono::Days;
@ -1011,7 +1014,7 @@ mod tests {
let id3 = add_recipe(&connection, user_id, "AAA ZZZ").await?;
{
let recipes = connection.search_recipes("en", "yyy").await?;
let recipes = connection.search_recipes("en", "yyy", u32::MAX).await?;
assert_eq!(recipes.len(), 2);
@ -1031,7 +1034,9 @@ mod tests {
}
{
let recipes = connection.search_recipes("en", "aaa OR zzz").await?;
let recipes = connection
.search_recipes("en", "aaa OR zzz", u32::MAX)
.await?;
assert_eq!(recipes.len(), 3);

35
backend/src/services/ron/recipe.rs
View file

@ -6,6 +6,7 @@ use axum::{
};
use axum_extra::extract::Query;
use common::web_api;
use itertools::Itertools;
use serde::Deserialize;
use tracing::warn;
@ -19,13 +20,35 @@ pub async fn search_by_title(
Extension(context): Extension<Context>,
Query(params): Query<web_api::SearchByTitleParams>,
) -> Result<impl IntoResponse> {
let trimmed_search_term = params.search_term.trim();
Ok(ron_response_ok(
connection
.search_recipes(context.tr.current_lang_code(), &params.search_term)
.await?
.into_iter()
.map(web_api::RecipeSearchResult::from)
.collect::<Vec<_>>(),
if trimmed_search_term.len() < common::consts::MIN_SEARCH_STRING_LENGTH {
// Avoid searching 1 or 2 characters.
vec![]
} else {
let mut forced_prefix_words = trimmed_search_term
.split(' ')
.filter(|word| word.len() >= common::consts::MIN_SEARCH_STRING_LENGTH)
.join("* OR ");
forced_prefix_words.push('*');
match connection
.search_recipes(
context.tr.current_lang_code(),
&forced_prefix_words,
params.max_nb_results,
)
.await
{
Ok(result) => result
.into_iter()
.map(web_api::RecipeSearchResult::from)
.collect::<Vec<_>>(),
Err(_) => vec![],
}
},
))
}

2
backend/templates/base_with_header.html
View file

@ -5,6 +5,8 @@
{% include "title.html" %}
<span class="header-menu">
{% include "search.html" %}
<span class="user-menu">
{% match context.user %}
{% when Some with (user) %}

17
backend/templates/search.html Normal file
View file

@ -0,0 +1,17 @@
<span id="search">
<svg class="icon" aria-hidden="true" viewBox="0 0 24 24"><g><path d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z"></path></g></svg>
<input type="search" placeholder="{{ context.tr.t(Sentence::SearchPlaceholder) }}" />
<div class="results">
<div class="message">
<span class="to-small">{{ context.tr.t(Sentence::SearchTooFewCharacters) }}</span>
<span class="no-results">{{ context.tr.t(Sentence::SearchNoResults) }}</span>
</div>
<ul>
</ul>
</div>
</span>
<div id="hidden-templates-search">
<li class="result-item"><a></a></li>
</div>

2
backend/translations/english.ron
View file

@ -22,6 +22,8 @@
(TemplateError, "Template error"),
(SearchPlaceholder, "Search by title"),
(SearchTooFewCharacters, "Too few characters"),
(SearchNoResults, "No results"),
(SignInMenu, "Sign in"),
(SignInTitle, "Sign in"),

2
backend/translations/french.ron
View file

@ -22,6 +22,8 @@
(TemplateError, "Erreur du moteur de modèles (Template error)"),
(SearchPlaceholder, "Recherche par titre"),
(SearchTooFewCharacters, "Trop peu de caractères"),
(SearchNoResults, "Pas de résultats"),
(SignInMenu, "Se connecter"),
(SignInTitle, "Se connecter"),