Skip to content

Commit

Permalink
Merge pull request #5 from buzcarter/feature/clean-up_search_input_field
Browse files Browse the repository at this point in the history
Feature/clean up search input field
  • Loading branch information
buzcarter authored Oct 26, 2023
2 parents 9e5ac01 + de3b459 commit 6c8fc2f
Show file tree
Hide file tree
Showing 15 changed files with 278 additions and 187 deletions.
2 changes: 1 addition & 1 deletion src/buildRecipes.js
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ const getInlineCss = heroImgURL => !heroImgURL
/*
// link icon svg code
// via: https://fontawesome.com/icons/external-link-alt
let linkIcon = '<svg class="linkIcon" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">';
let linkIcon = '<svg class="linkIcon" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">';
linkIcon += '<path fill="currentColor" d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"></path>';
linkIcon += '</svg>';
*/
Expand Down
3 changes: 3 additions & 0 deletions src/static/images/icons/cancel.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions src/static/images/icons/search.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 22 additions & 2 deletions src/static/scripts/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,15 +31,22 @@
})();

(() => {
/* eslint-disable key-spacing */
const Styles = {
HIDDEN: 'recipe-list__item--hidden',
};

const Selectors = {
RECIPE_ITEMS: '.recipe-list li',
SEARCH: '#filter'
SEARCH: '#filter-field',
CLEAR_BTN: '#clear-filter-btn',
};

const KeyCodes = {
ESCAPE: 27,
};
/* eslint-enable key-spacing */

const scrub = value => value
.trim()
.toLowerCase()
Expand All @@ -60,11 +67,24 @@
});
}

const clearInput = () => {
const input = document.querySelector(Selectors.SEARCH);
input.value = '';
input.focus();
};

function init() {
document.querySelectorAll(Selectors.RECIPE_ITEMS).forEach(item => item.dataset.searchText = scrub(item.innerText));
document.querySelector(Selectors.SEARCH).addEventListener('keyup', function () {

const input = document.querySelector(Selectors.SEARCH);

input.addEventListener('keyup', function () {
filter(this.value);
});

input.addEventListener('keydown', e => e.which === KeyCodes.ESCAPE && clearInput());

document.querySelector(Selectors.CLEAR_BTN).addEventListener('click', clearInput);
}

init();
Expand Down
3 changes: 2 additions & 1 deletion src/static/scripts/recipe.js
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,8 @@
if (li.classList.contains(HIGHLIGHT)) {
li.classList.remove(HIGHLIGHT);
} else {
document.querySelector(`.${HIGHLIGHT}`)?.classList.remove(HIGHLIGHT);
li.closest(Selectors.HIGHLIGHTABLE)
.querySelector(`.${HIGHLIGHT}`)?.classList.remove(HIGHLIGHT);
li.classList.add(HIGHLIGHT);
}
}
Expand Down
28 changes: 23 additions & 5 deletions src/static/styles/recipe.css
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
.clickable-list li {
border-radius: 3px;
position: relative;
transition: background-color 0.35s ease;
transition: background-color var(--transition-color-duration) ease;
}

.activated {
Expand All @@ -20,6 +20,13 @@
background-color: var(--color-highlight-bg);
}

/* TODO: find better fix for jagged left edge...
html body .section--steps .highlight {
margin-left: -10px;
padding-left: 10px;
}
*/

/* common page elements */
hr {
clear: both;
Expand All @@ -44,7 +51,7 @@ hr {

.link-svg {
color: var(--color-back-arrow);
transition: color 0.35s ease;
transition: color var(--transition-color-duration) ease;
}

a:hover .link-svg {
Expand Down Expand Up @@ -141,6 +148,11 @@ svg.linkIcon {
font-family: var(--font-family-steps);
}

.section--steps ol + h3,
.section--ingredients ul + h3 {
margin-top: 1.8em;
}

/* == Section: Steps ----- */
.section--steps ol {
list-style-type: none;
Expand Down Expand Up @@ -175,8 +187,8 @@ svg.linkIcon {
}

/* == Section: Ingredients ----- */
.section--ingredients ul+h3 {
margin-top: 1.8em;
.section--ingredients {
--ingredient-amt-width: 2.7em;
}

.section--ingredients li {
Expand All @@ -189,7 +201,12 @@ svg.linkIcon {
}

.ingredient--has-amt {
padding-left: 2.7em;
padding-left: var(--ingredient-amt-width);
}

.section--ingredients li:not(.ingredient--has-amt) {
padding-left: var(--ingredient-amt-width);
text-indent: calc(-1 * var(--ingredient-amt-width));
}

.ingredient__amt {
Expand Down Expand Up @@ -228,6 +245,7 @@ svg.linkIcon {
border-bottom: 1px solid gray;
}

/* larger screen: ingredients and steps as two columns */
@media screen and (min-width: 820px) {
.section--help ul {
column-count: 2;
Expand Down
110 changes: 90 additions & 20 deletions src/static/styles/recipesIndex.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,15 @@
:root {
--color-view-btn: gray;
--color-view-svg-selected: white;
--color-view-btn: var(--color-neutral-45);
--color-view-svg-selected: var(--color-neutral-00);
--color-view-btn-selected: var(--color-primary);

--color-filter-inactive: var(--color-neutral-25);
--color-filter-hover: var(--color-neutral-80);
--color-filter-focus: var(--color-neutral-50);

--search-input-height: 40px;
--search-icon-length: 18px;
--search-cancel-btn-length: 24px;
}

.mainTitle {
Expand Down Expand Up @@ -29,31 +37,21 @@
}

/* View radio buttons */
.view--content {}

.view--compact-list {}

.view--grid {}

.nav-view {}

.nav-view__list {}

html body .nav-view__item {
display: inline-block;
margin: 0 6px 0 0;
}

.nav-view__btn {
background-color: white;
background-color: var(--color-neutral-00);
border: solid 1px var(--color-view-btn);
border-radius: 4px;
padding: 0;
display: inline-block;
width: 26px;
height: 26px;
cursor: pointer;
transition: background-color 350ms ease;
transition: background-color var(--transition-color-duration) ease;
}

.nav-view__img {
Expand Down Expand Up @@ -81,15 +79,88 @@ html body .nav-view__item {
/* Filter/Search */
.filter__wrap {
float: right;
position: relative;
}

.filter__terms {
border-radius: 4px;
padding: .4em;
border: solid gray 1px;
.filter__text-field {
border-radius: calc(var(--search-input-height) / 2);
padding: .4em calc(var(--search-input-height) + 2px) .4em calc(var(--search-input-height) / 2);
border: solid var(--color-filter-inactive) 1px;
font-size: inherit;
width: 80px;
transition: width 225ms ease-in, border-color var(--transition-color-duration) ease-in;
height: var(--search-input-height);
}

.filter__text-field:hover {
border-color: var(--color-filter-hover);
}

.filter__text-field:not(:placeholder-shown),
.filter__text-field:focus {
border-color: var(--color-filter-focus);
width: calc(14em + var(--search-cancel-btn-length) + var(--search-icon-length));
}

.filter__mask-icon {
background-color: var(--color-filter-inactive);
display: inline-block;
height: var(--search-icon-length);
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
position: absolute;
transition: background-color var(--transition-color-duration) ease-in;
vertical-align: middle;
width: var(--search-icon-length);
}

.filter__cancel-icon {
-webkit-mask-image: url(../images/icons/cancel.svg);
mask-image: url(../images/icons/cancel.svg);
left: calc(50% - var(--search-icon-length) / 2);
top: calc(50% - var(--search-icon-length) / 2);
}

.filter__search-icon {
-webkit-mask-image: url(../images/icons/search.svg);
mask-image: url(../images/icons/search.svg);
right: var(--search-icon-length);
top: calc((var(--search-input-height) - var(--search-icon-length)) / 2);
}

.filter__cancel-btn {
border: solid 1px var(--color-filter-focus);
border-radius: 4px;
cursor: pointer;
display: none;
height: var(--search-cancel-btn-length);
width: var(--search-cancel-btn-length);
position: absolute;
right: calc(5px + var(--search-cancel-btn-length) + var(--search-icon-length));;
top: calc((var(--search-input-height) - var(--search-cancel-btn-length)) / 2);
}

.filter__text-field:hover + .filter__icons .filter__search-icon {
background-color: var(--color-filter-hover);
}

.filter__text-field:focus + .filter__icons .filter__search-icon {
background-color: var(--color-filter-focus);
}

.filter__text-field:not(:placeholder-shown) + .filter__icons .filter__cancel-btn,
.filter__text-field:focus + .filter__icons .filter__cancel-btn {
display: inline-block;
}

.filter__text-field:not(:placeholder-shown) + .filter__icons .filter__cancel-icon,
.filter__text-field:focus + .filter__icons .filter__cancel-icon {
background-color: var(--color-filter-focus);
}

/* oops */
.recipe-list__photo {
display: none;
}
Expand Down Expand Up @@ -122,7 +193,7 @@ body .recipe-list .recipe-list__item--hidden {
/* Shared */
.view--content .recipe-list__item,
.view--compact-list .recipe-list__item {
margin-left: 1em;
/* margin-left: 1em; TODO: I bet this was here for a good reason */
margin-bottom: 1em;

/* avoid splitting a single item into cols */
Expand Down Expand Up @@ -212,7 +283,6 @@ body .recipe-list .recipe-list__item--hidden {
margin-left: 0.3em;
}

/* larger screen: ingredients and steps as two columns */
@media screen and (min-width: 820px) {

.view--content .recipe-list,
Expand Down
8 changes: 2 additions & 6 deletions src/static/styles/stylesheet.css
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
@charset "UTF-8";

/* CSS RESET */
/* http://meyerweb.com/eric/tools/css/reset */
a,
Expand Down Expand Up @@ -240,16 +238,15 @@ a,
a:link,
a:visited {
color: var(--color-link);
text-decoration: none;
text-decoration: underline;
background-color: transparent;
transition: background-color 0.35s ease;
transition: background-color var(--transition-color-duration) ease;
}

a:active,
a:hover {
color: var(--color-link-hover);
background-color: var(--color-link-bg-hover);
text-decoration: underline;
}

/* specific sections/objects */
Expand Down Expand Up @@ -287,7 +284,6 @@ a:hover {
}


/* larger screen: ingredients and steps as two columns */
@media screen and (min-width: 820px) {
.wrapper {
margin-top: 2em;
Expand Down
37 changes: 6 additions & 31 deletions src/static/styles/theme-default.css
Original file line number Diff line number Diff line change
@@ -1,39 +1,14 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;1,300&family=PT+Sans+Narrow:wght@700&display=swap');

:root {
/* -- Globals --- */
--font-family-body: 'Open Sans', Franklin, Arial, Helvetica, sans-serif;
--font-family-header: 'PT Sans Narrow', sans-serif;
--font-family-steps: 'Open Sans', Franklin, Arial, Helvetica, sans-serif;
--font-stack-default-body: 'Open Sans', Franklin, Arial, Helvetica, sans-serif;
--font-stack-default-headline: 'PT Sans Narrow', sans-serif;

--color-pg-bg: white;
/* headings, recipe step numerals, etc: primary "pop" color */
--color-primary: #c15900;
/* anchor */
--color-link: black;
--color-link-hover: black;
--color-link-bg-hover: rgba(255, 255, 0, 0.5);
/* ??? */
--color-target-bg: rgba(255, 255, 0, 0.25);

/* -- Recipe Page ------- */

/* parens (recipe ingredient) & hr */
--color-ingredient-parens: rgb(129 129 129);
/* back arrow (SVG/image) */
--color-back-arrow: rgb(200, 200, 200);
--color-back-arrow-hover: black;
/* Unordered List Item Bullet Color */
--color-ul-item-bullet: #eca96f;
/* clickable lists */
--color-highlight-bg: rgb(211, 211, 211);
--color-complete-line-through: #666;
--font-family-body: var(--font-stack-default-body);
--font-family-header: var(--font-stack-default-headline);
--font-family-steps: var(--font-stack-default-body);

/* -- Index Page ------- */

--color-index-pg-nav-letter: rgb(180, 180, 180);
--color-index-pg-footer: rgb(170, 170, 170);
--color-index-pg-footer-link: rgb(180, 180, 180);
--color-primary: #c15900;
}

.section--heroimage img {
Expand Down
Loading

0 comments on commit 6c8fc2f

Please sign in to comment.