From 6d462c8f4ea86723b286c8c33f4c533bc91caa26 Mon Sep 17 00:00:00 2001 From: FredericoAndrade Date: Mon, 12 Aug 2024 15:04:13 +0200 Subject: [PATCH 01/11] update readme --- readme.md | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index d4b9540c..3ce69ae8 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,4 @@ -# theme structure +# Theme Structure * primary functions are stored in functions.php * secondary/plug-in functions are stored in /includes @@ -7,20 +7,33 @@ * php files named by wp page/template type or module/element type with -- modifiers * ACF organized into groups by corresponding post type, page template, or global group, with post type or page template name as prefix -# php style guidelines +# PHP style guidelines * we use { } for continguous php and :/else:/endif; for PHP broken up by html * https://make.wordpress.org/core/handbook/best-practices/coding-standards/php/ * in-line php lines up with previous html element (if statements) * line-breaks between php and in-line html -# Deployment -* This repository will automatically deploy changes to production when successfully merging to the `main` branch. +# Deployment Details + +* We follow Continuous Integration principles. +* We work with 4 primary environments: feature, Integration, Staging, and Production (branch name: Main) + * Feature: an independent, feature-scoped environment for developing new features. + * Integration: a pre-deployment environment to manage feature integration and catch merge conflicts independently from deployment. + * Staging: a deployed environment to safely test integrations on a live server without touching Production. + * Production: the public-facing environment on the live URL. +* Feature development is done in a feature branch. (Be sure to push feature branches to Github so others might test and review them) +* Once features are ready for integration, the first step is to merge the feature branch to `integration` locally + +## Automatic Deployment + +* This repository will automatically deploy changes to production when successfully merging to deployment branches. +* We use 2 deployment branches: `staging` and `main`. * `main` can only be edited by pull-requests from other branches. -# to-do +# To-Do -## code structure and styles +## Code structure and styles - [] later - simplify if statement syntax ( a ? b : c); e.g. `wp_nav_menu( array( 'theme_location' => is_user_logged_in() ? 'logged-in-menu' : 'logged-out-menu' From 598101fb1618692ee3f66c12bdbac41757f5917c Mon Sep 17 00:00:00 2001 From: FredericoAndrade Date: Mon, 12 Aug 2024 15:04:57 +0200 Subject: [PATCH 02/11] update prod deploy script to use prod branch --- .github/workflows/deploy-production.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/deploy-production.yml b/.github/workflows/deploy-production.yml index d0c45734..e8757f61 100644 --- a/.github/workflows/deploy-production.yml +++ b/.github/workflows/deploy-production.yml @@ -3,7 +3,7 @@ name: Deploy to Production on: push: branches: - - main + - production env: REMOTE_DIR: ./public_html/wp-content/themes/blankslate-child From 5d05b15028cf838a893ece3106df29b12878b027 Mon Sep 17 00:00:00 2001 From: Frederico Andrade Date: Mon, 12 Aug 2024 15:11:21 +0200 Subject: [PATCH 03/11] Update readme.md --- readme.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/readme.md b/readme.md index 3ce69ae8..97250306 100644 --- a/readme.md +++ b/readme.md @@ -18,10 +18,10 @@ * We follow Continuous Integration principles. * We work with 4 primary environments: feature, Integration, Staging, and Production (branch name: Main) - * Feature: an independent, feature-scoped environment for developing new features. - * Integration: a pre-deployment environment to manage feature integration and catch merge conflicts independently from deployment. - * Staging: a deployed environment to safely test integrations on a live server without touching Production. - * Production: the public-facing environment on the live URL. + * Feature: an independent, feature-scoped environment for developing new features. + * Integration: a pre-deployment environment to manage feature integration and catch merge conflicts independently from deployment. + * Staging: a deployed environment to safely test integrations on a live server without touching Production. + * Production: the public-facing environment on the live URL. * Feature development is done in a feature branch. (Be sure to push feature branches to Github so others might test and review them) * Once features are ready for integration, the first step is to merge the feature branch to `integration` locally @@ -75,4 +75,4 @@ ## revitalization toolkit - [] toolkit newsletter propt - [] toolkit language prompt -- [] toolkit donate prompt \ No newline at end of file +- [] toolkit donate prompt From ddbfe73273b2f5c38e69b834dabcbbd04f7d7fcd Mon Sep 17 00:00:00 2001 From: Frederico Andrade Date: Mon, 12 Aug 2024 15:12:37 +0200 Subject: [PATCH 04/11] Update readme.md --- readme.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index 97250306..b7efc602 100644 --- a/readme.md +++ b/readme.md @@ -17,18 +17,18 @@ # Deployment Details * We follow Continuous Integration principles. -* We work with 4 primary environments: feature, Integration, Staging, and Production (branch name: Main) - * Feature: an independent, feature-scoped environment for developing new features. - * Integration: a pre-deployment environment to manage feature integration and catch merge conflicts independently from deployment. - * Staging: a deployed environment to safely test integrations on a live server without touching Production. - * Production: the public-facing environment on the live URL. +* We work with 4 primary environments: feature, Main, Staging, and Production + * **Feature:** an independent, feature-scoped environment for developing new features. + * **Main:** a pre-deployment environment to manage feature integration and catch merge conflicts independently from deployment. + * **Staging:** a deployed environment to safely test integrations on a live server without touching Production. + * **Production:** the public-facing environment on the live URL. * Feature development is done in a feature branch. (Be sure to push feature branches to Github so others might test and review them) * Once features are ready for integration, the first step is to merge the feature branch to `integration` locally ## Automatic Deployment * This repository will automatically deploy changes to production when successfully merging to deployment branches. -* We use 2 deployment branches: `staging` and `main`. +* We use 2 deployment branches: `staging` and `production`. * `main` can only be edited by pull-requests from other branches. # To-Do From 8889a43f9c5a1140cc30ccaf62afdddc584c8229 Mon Sep 17 00:00:00 2001 From: FredericoAndrade Date: Wed, 10 Jul 2024 14:49:30 +0200 Subject: [PATCH 05/11] set up new search plugin --- acf-json/group_668bbbba9bae8.json | 165 ++++++++++++++++++++++++++++++ header.php | 6 +- readme.md | 24 +++++ stylus/main.css | 80 +++++++++++---- stylus/require/header.styl | 86 ++++++++++++---- 5 files changed, 317 insertions(+), 44 deletions(-) create mode 100644 acf-json/group_668bbbba9bae8.json diff --git a/acf-json/group_668bbbba9bae8.json b/acf-json/group_668bbbba9bae8.json new file mode 100644 index 00000000..b95ecf86 --- /dev/null +++ b/acf-json/group_668bbbba9bae8.json @@ -0,0 +1,165 @@ +{ + "key": "group_668bbbba9bae8", + "title": "Typeahead-Settings", + "fields": [ + { + "key": "field_668bbbbc1ad8d", + "label": "Airtable API Key", + "name": "airtable_api_key", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "placeholder": "", + "prepend": "", + "append": "" + }, + { + "key": "field_668bbc2c1ad8e", + "label": "Airtable Base ID", + "name": "airtable_base_id", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "placeholder": "", + "prepend": "", + "append": "" + }, + { + "key": "field_668bbc3a1ad8f", + "label": "Airtable Table Name", + "name": "airtable_table_name", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "placeholder": "", + "prepend": "", + "append": "" + }, + { + "key": "field_668bbc461ad90", + "label": "Label Field ID", + "name": "airtable_label_field_id", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "placeholder": "", + "prepend": "", + "append": "" + }, + { + "key": "field_668bbc511ad91", + "label": "Label Field Name", + "name": "airtable_label_field_name", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "placeholder": "", + "prepend": "", + "append": "" + }, + { + "key": "field_668bbc5c1ad92", + "label": "Identifier Field", + "name": "airtable_identifier_field", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "placeholder": "", + "prepend": "", + "append": "" + }, + { + "key": "field_668dc52476308", + "label": "Custom Class", + "name": "custom_class", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "placeholder": "", + "prepend": "", + "append": "" + } + ], + "location": [ + [ + { + "param": "options_page", + "operator": "==", + "value": "acf-options" + } + ] + ], + "menu_order": 0, + "position": "normal", + "style": "default", + "label_placement": "top", + "instruction_placement": "label", + "hide_on_screen": "", + "active": true, + "description": "", + "show_in_rest": 0, + "modified": 1720567110 +} diff --git a/header.php b/header.php index cdba2fe8..22835e25 100644 --- a/header.php +++ b/header.php @@ -167,10 +167,8 @@ - -
- - +
+ [react_typeahead]
diff --git a/readme.md b/readme.md index b7efc602..d00040b2 100644 --- a/readme.md +++ b/readme.md @@ -31,16 +31,24 @@ * We use 2 deployment branches: `staging` and `production`. * `main` can only be edited by pull-requests from other branches. +# CSS and Compiling Stylus + +This project uses [Stylus](https://stylus-lang.com/), a CSS pre-processor. +To run it, do: `stylus -w stylus` + # To-Do ## Code structure and styles + - [] later - simplify if statement syntax ( a ? b : c); e.g. `wp_nav_menu( array( 'theme_location' => is_user_logged_in() ? 'logged-in-menu' : 'logged-out-menu' ) );` - [] clean up template/modules hierarchy on video single and language single - [] convert jquery to vanilla javascript + ## global + - [] add alert banner and display only if user hasn't visited the site in a week - [] build captions post type - [] build single page template for partners post type @@ -49,30 +57,46 @@ - [] ADA accessibility evaluation - [] blog integration - [] browser notifications opt-in + ## home + - [] make homepage banner a carousel - [] make testimonial carousel a true carousel + ## search results + - [] sort results by language first, then video, then lexicons, then resources - or, alternatively, divide results into sections with language videos, language pages, etc - to make it easier on the eyes + ## team member post type + - [] add: historical interns, other secondary team data + ## languages single + - [] inlcude more clarity for external resources - [] related languages carousel - [] add continent of origin + ## video single + - [] toggle metadata view for for more than 1 language - [] toggle all metadata view on mobile - [] once captions post type is live, add download feature - [] figure out navigation path from single videos back to the language in question - [] figure out embeds for Dropbox files (not on YouTube) - [] related videos carousel + ## archive + - [] language collection pages - probably page templates with customized for-loops baased on ACF fields (need to define what we want to sort by) + ## fellows single + - [] micro-blogging feature - [] other fellows carousel + ## revitalization toolkit + - [] toolkit newsletter propt - [] toolkit language prompt - [] toolkit donate prompt diff --git a/stylus/main.css b/stylus/main.css index 2942a293..0e1f8f55 100644 --- a/stylus/main.css +++ b/stylus/main.css @@ -99,28 +99,72 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { height: 40px; width: auto; } -.wt_header__searchbar { - position: relative; - flex-grow: initial; - margin-left: 15px; - border: 1px solid #dcdcdc; +.wt_header #react-typeahead-root { + float: left; + display: inline-block; + margin-left: 2rem; } -.wt_header__searchbar i { - position: absolute; - top: 50%; - left: 7.5px; - transform: translateY(-50%); +.wt_header #react-typeahead-root .typeahead-container { + position: initial; + width: initial; + max-width: initial; + margin: initial; + font-family: 'Graphik Web'; + font-size: 1.28rem; } -.wt_header__searchbar input[type="search"] { - border: 0; - padding: 5px 10px 5px 27.5px; - background: #fff; +.wt_header #react-typeahead-root .typeahead-container input { + border: none; + width: 330px; + background: #fffcef; + padding: 11px; + border-radius: 8px; + font-family: inherit; + font-size: inherit; + transition-property: background, width; + transition-duration: 0.6s; + transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); +} +.wt_header #react-typeahead-root .typeahead-container input::placeholder { + color: #fffcef; + color: #3814a5; + font-family: 'Graphik Web'; + font-style: italic; + font-size: 1.28rem; } -.wt_header__searchbar input[type="search"]:focus { - outline: none; +.wt_header #react-typeahead-root .typeahead-container input:active, +.wt_header #react-typeahead-root .typeahead-container input:focus { + width: 400px; + color: #3814a5; + background: #fffcef; + transition-property: background, width; + transition-duration: 0.6s; + transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } -.wt_header__searchbar input[type="submit"] { - display: none; +.wt_header #react-typeahead-root .typeahead-container input:active::placeholder, +.wt_header #react-typeahead-root .typeahead-container input:focus::placeholder { + color: #3814a5; +} +.wt_header #react-typeahead-root .typeahead-container .typeahead-list { + width: 400px; + background: #fffcef; + font-family: inherit; + font-size: inherit; + border: none; + border-radius: 8px; + margin-top: 4px; +} +.wt_header #react-typeahead-root .typeahead-container .typeahead-list span { + line-height: 2rem; +} +.wt_header #react-typeahead-root .typeahead-container .typeahead-list span.label { + position: relative; + display: inline-block; + color: #3814a5; + font-family: inherit; + font-size: inherit; +} +.wt_header #react-typeahead-root .typeahead-container .typeahead-list span .highlight { + background: #d5cde7; } .wt_header--secondary { z-index: 2; diff --git a/stylus/require/header.styl b/stylus/require/header.styl index 59bc49a6..52851abe 100644 --- a/stylus/require/header.styl +++ b/stylus/require/header.styl @@ -86,31 +86,73 @@ body img height 40px width auto - - &__searchbar - position relative - flex-grow initial - margin-left 15px - border 1px solid $grey - - i - position absolute - top 50% - left 7.5px - transform translateY(-50%) - - input - &[type="search"] - border 0 - padding 5px 10px 5px 27.5px - background $white + + #react-typeahead-root + float left + display inline-block + margin-left 2rem + + .typeahead-container + position initial + width initial + max-width initial + margin initial + font-family 'Graphik Web' + font-size 1.28rem + + input + border none + width 330px + background rgba(255, 252, 239,1) + padding 11px + border-radius 8px + font-family inherit + font-size inherit + transition-property background, width + transition-duration 0.6s + transition-timing-function cubic-bezier(0.16, 1, 0.3, 1); + + &::placeholder + color $parchment + color $blue + font-family 'Graphik Web' + font-style italic + font-size 1.28rem + &:active, &:focus - outline none + width 400px + color $blue + background $parchment + transition-property background, width + transition-duration 0.6s + transition-timing-function cubic-bezier(0.16, 1, 0.3, 1); + + &::placeholder + color $blue - &[type="submit"] - display none - + .typeahead-list + width 400px + background $parchment + font-family inherit + font-size inherit + border none + border-radius 8px + margin-top 4px + + span + line-height 2rem + + &.label + position relative + display inline-block + color $blue + font-family inherit + font-size inherit + + .highlight + background lighten($purple,60%) + &--secondary z-index 2 position fixed From bf30b11b0a3c8c51473baaddd1addd44f1f086e3 Mon Sep 17 00:00:00 2001 From: FredericoAndrade Date: Mon, 15 Jul 2024 23:48:51 +0200 Subject: [PATCH 06/11] fix nav transparency scroll toggle --- js/custom.js | 38 +++++++++++++++++++--------------- stylus/main.css | 40 +++++++++++++++++++++++++----------- stylus/require/header.styl | 42 ++++++++++++++++++++++++++++---------- 3 files changed, 81 insertions(+), 39 deletions(-) diff --git a/js/custom.js b/js/custom.js index 65eefdf9..02a9820b 100644 --- a/js/custom.js +++ b/js/custom.js @@ -1,21 +1,26 @@ -function changeHeaderClass() { - var header = document.querySelector(".wt_header"); - var logoLight = document.querySelector(".wt_header__logo--light"); - var logoDark = document.querySelector(".wt_header__logo--dark"); - var navContainer = document.querySelector(".wt_header__nav"); +function manageNav() { + const header = document.querySelector(".wt_header"); + const logoLight = document.querySelector(".wt_header__logo--light"); + const logoDark = document.querySelector(".wt_header__logo--dark"); + const navContainer = document.querySelector(".wt_header__nav"); + const elements = [header, logoLight, logoDark, navContainer] + + function toggleNavTransparency(method) { + for (let i = 0; i < elements.length; i++) { + elements[i].classList[method]("transparent-background"); + } + } + if (window.scrollY < 50) { + toggleNavTransparency("add") + } else { + toggleNavTransparency("remove") + } + +} +function changeHeaderClass() { window.addEventListener("scroll", function () { - if (window.pageYOffset > 50) { - header.classList.remove("transparent-background"); - logoLight.classList.remove("transparent-background"); - logoDark.classList.remove("transparent-background"); - navContainer.classList.remove("transparent-background"); - } else { - header.classList.add("transparent-background"); - logoLight.classList.add("transparent-background"); - logoDark.classList.add("transparent-background"); - navContainer.classList.add("transparent-background"); - } + manageNav() }); } @@ -109,6 +114,7 @@ function mobileTrigger() { window.addEventListener("load", function () { if (document.body.classList.contains("home")) { changeHeaderClass(); + manageNav() } carouselScroll(); mobileTrigger(); diff --git a/stylus/main.css b/stylus/main.css index 0e1f8f55..536d27b7 100644 --- a/stylus/main.css +++ b/stylus/main.css @@ -73,9 +73,15 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { padding: 0 1.5rem; box-sizing: border-box; background: #fffcef; + transition-property: background; + transition-duration: 0.3s; + transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .wt_header.transparent-background { - background: none !important; + background: none; + transition-property: background; + transition-duration: 0.3s; + transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } .wt_header.transparent-background .wt_header__searchbar input[type="search"] { background: #fffcef; @@ -197,7 +203,7 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { margin-left: 1.25rem; display: inline-block; padding: 1.25rem 1.5rem; - background: #3814a5; + background: transparent; border: 1px solid #3814a5; font-family: 'Graphik Web'; font-weight: 400; @@ -206,8 +212,13 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { font-size: 1.28rem; text-transform: uppercase; text-decoration: none; - color: #fffcef; + color: #3814a5; text-wrap: nowrap; + border: none; + border-radius: 8px; + text-transform: initial; + padding: 0; + display: inline-block; } .wt_header__nav>ul>li.current_page_item, .wt_header__nav>ul>li.current_page_parent { @@ -219,11 +230,12 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { } .wt_header__nav>ul>li>a { text-decoration: none; - color: #fffcef; + color: inherit; + padding: 1.25rem; + display: inline-block; } .wt_header__nav>ul>li:hover { cursor: pointer; - background: #fff !important; } .wt_header__nav>ul>li:hover>a { color: #3814a5 !important; @@ -234,21 +246,25 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { top: 38px; left: 0; width: 100%; - padding: 5px; - background: #fff; - text-align: center; - border-width: 6px 0.5px 0.5px 0.5px; - border-color: #3814a5; - border-style: solid; + padding: 8px 0; + background: #fffcef; + text-align: left; box-shadow: 0 0 100px rgba(0,0,0,0.05); + border-radius: 8px; } .wt_header__nav .sub-menu li { display: block; - margin: 10px 0; + margin: 0; } .wt_header__nav .sub-menu li a { color: #3814a5; + padding: 8px 1.25rem; text-decoration: none; + display: inline-block; + width: 100%; +} +.wt_header__nav .sub-menu li a:hover { + background: #eee; } .wt_header__nav--secondary { z-index: 2; diff --git a/stylus/require/header.styl b/stylus/require/header.styl index 52851abe..e495a21c 100644 --- a/stylus/require/header.styl +++ b/stylus/require/header.styl @@ -60,9 +60,15 @@ body padding 0 1.5rem box-sizing border-box background $parchment + transition-property background + transition-duration 0.3s + transition-timing-function cubic-bezier(0.16, 1, 0.3, 1); &.transparent-background - background none !important + background none + transition-property background + transition-duration 0.3s + transition-timing-function cubic-bezier(0.16, 1, 0.3, 1); .wt_header__searchbar input[type="search"] @@ -183,7 +189,12 @@ body &>ul>li position relative margin-left 1.25rem - button--small($blue, $parchment) + button--small(transparent, $blue) + border none + border-radius 8px + text-transform initial + padding 0 + display inline-block &.current_page_item, &.current_page_parent @@ -194,11 +205,13 @@ body &>a // button--small is designed for a elements not li text-decoration none - color $parchment + color inherit + padding 1.25rem + display inline-block &:hover cursor pointer - background $white !important + // background $white !important &>a color $blue !important @@ -209,21 +222,28 @@ body top 38px left 0 width 100% - padding 5px - background $white - text-align center - border-width 6px 0.5px 0.5px 0.5px - border-color $blue - border-style solid + padding 8px 0 + background $parchment + text-align left + // border-width 6px 0.5px 0.5px 0.5px + // border-color $blue + // border-style solid box-shadow 0 0 100px rgba(0,0,0,.05) + border-radius 8px li display block - margin 10px 0 + margin 0 a color $blue + padding 8px 1.25rem text-decoration none + display inline-block + width 100% + + &:hover + background #eee &--secondary z-index 2 From a4ae68186f26f89e1f2d62b80214456054b13549 Mon Sep 17 00:00:00 2001 From: FredericoAndrade Date: Mon, 22 Jul 2024 11:02:54 +0200 Subject: [PATCH 07/11] enable multiple typeaheads --- modules/banner--searchbar.php | 4 +- stylus/main.styl | 1 + stylus/require/banner--searchbar.styl | 80 +++++++++++++-------------- stylus/require/header.styl | 64 ++++----------------- stylus/require/typeahead.styl | 55 ++++++++++++++++++ template-archive-home.php | 1 - 6 files changed, 109 insertions(+), 96 deletions(-) create mode 100644 stylus/require/typeahead.styl diff --git a/modules/banner--searchbar.php b/modules/banner--searchbar.php index 5cb0f1d5..29c35095 100644 --- a/modules/banner--searchbar.php +++ b/modules/banner--searchbar.php @@ -1,3 +1,5 @@
- +
+ [react_typeahead custom_class="body-style"] +
diff --git a/stylus/main.styl b/stylus/main.styl index 0919b77e..6844339c 100644 --- a/stylus/main.styl +++ b/stylus/main.styl @@ -1,5 +1,6 @@ // organize alphabetically? @require "require/global" // includes stylus variables +@require "require/typeahead" @require "require/header" @require "require/banner--main" @require "require/banner--searchbar" diff --git a/stylus/require/banner--searchbar.styl b/stylus/require/banner--searchbar.styl index cade65d9..44ea7a1a 100644 --- a/stylus/require/banner--searchbar.styl +++ b/stylus/require/banner--searchbar.styl @@ -1,47 +1,45 @@ -// background to purple once explore filters are added + .wt_banner--searchbar width 100% - padding 120px - border-bottom 1px solid $parchment - - form - display flex - margin auto - width 90% - max-width 800px - - label - display block - width 70% - - input - border-top-width 0 !important - border-right-width 0 !important - border-left-width 0 !important - border-radius 0 !important - -webkit-appearance none !important - -webkit-border-radius 0 !important + display flex + min-height 50vh + align-content center + justify-content center + align-items center + padding 4rem 0 + + #typeahead-archive + .typeahead-form + width 50vw + + &.loaded + display inline-block - &[type="search"] - width 97% - box-sizing border-box - margin-right 3% - border-bottom 2px solid $black - button--large($parchment,$black) - text-transform initial !important - transition background .2s ease-in-out - - &:focus - outline none !important - background $white - - &[type="submit"] - width 30% - button--large($blue,$parchment) - - &:hover - cursor pointer + input + width inherit + border none + padding 2.5rem + font-size 2rem + + .typeahead-list + position initial + max-height 60vh + border-radius 0 + border-top 2px solid $blue + padding-top 4px + + .typeahead-item + border-radius 8px + padding 12px + font-size 1.2em @media all and (max-width:$mobile) .wt_banner--searchbar - padding 12rem 3rem \ No newline at end of file + #typeahead-archive + margin-left 0 + + .typeahead-form + width 90vw + + .typeahead-list + max-height initial \ No newline at end of file diff --git a/stylus/require/header.styl b/stylus/require/header.styl index e495a21c..623559e6 100644 --- a/stylus/require/header.styl +++ b/stylus/require/header.styl @@ -92,72 +92,30 @@ body img height 40px width auto - - #react-typeahead-root - float left - display inline-block - margin-left 2rem - - .typeahead-container - position initial - width initial - max-width initial - margin initial - font-family 'Graphik Web' - font-size 1.28rem - + + + #typeahead-nav + .typeahead-form input border none width 330px - background rgba(255, 252, 239,1) padding 11px - border-radius 8px - font-family inherit - font-size inherit - transition-property background, width - transition-duration 0.6s - transition-timing-function cubic-bezier(0.16, 1, 0.3, 1); - - &::placeholder - color $parchment - color $blue - font-family 'Graphik Web' - font-style italic - font-size 1.28rem - + &:active, &:focus - width 400px - color $blue + width 400px background $parchment transition-property background, width transition-duration 0.6s transition-timing-function cubic-bezier(0.16, 1, 0.3, 1); - - &::placeholder - color $blue - + .typeahead-list - width 400px - background $parchment - font-family inherit - font-size inherit - border none + width 400px border-radius 8px - margin-top 4px - - span - line-height 2rem - - &.label - position relative - display inline-block - color $blue - font-family inherit - font-size inherit - .highlight - background lighten($purple,60%) + @media all and (max-width:$smallScreen) + #typeahead-nav.react-typeahead-container + display none !important &--secondary z-index 2 diff --git a/stylus/require/typeahead.styl b/stylus/require/typeahead.styl new file mode 100644 index 00000000..442154c2 --- /dev/null +++ b/stylus/require/typeahead.styl @@ -0,0 +1,55 @@ +.react-typeahead-container + float left + display inline-block + margin-left 2rem + + .typeahead-form + position initial + width initial + max-width initial + margin initial + font-family 'Graphik Web' + font-size 1.28rem + + input + background $parchment + border-radius 8px + font-family inherit + font-size inherit + transition-property background, width + transition-duration 0.6s + transition-timing-function cubic-bezier(0.16, 1, 0.3, 1); + + &::placeholder + color $parchment + color $blue + font-family 'Graphik Web' + font-style italic + font-size inherit + + &:active, + &:focus + color $blue + + &::placeholder + color $blue + + .typeahead-list + background $parchment + font-family inherit + font-size inherit + border none + margin-top 4px + + span + line-height 2rem + + &.label + position relative + display inline-block + color $blue + font-family inherit + font-size inherit + + .highlight + background lighten($purple,60%) \ No newline at end of file diff --git a/template-archive-home.php b/template-archive-home.php index 192fcc04..aa35346b 100644 --- a/template-archive-home.php +++ b/template-archive-home.php @@ -3,7 +3,6 @@ // header get_header(); -// search bar -> redirects to search.php include( 'modules/banner--searchbar.php' ); // content blocks - thirds showing language collections (add in later version, how to filter?) From 184997f5765cfa3508a1b93a87cfc14b752ab297 Mon Sep 17 00:00:00 2001 From: FredericoAndrade Date: Mon, 22 Jul 2024 11:06:22 +0200 Subject: [PATCH 08/11] fix nav dark overlay and nav styles --- js/custom.js | 233 ++++------------------- stylus/main.css | 274 +++++++++++++-------------- stylus/require/header.styl | 58 ++++-- stylus/require/single-languages.styl | 6 +- stylus/require/single-videos.styl | 5 - 5 files changed, 212 insertions(+), 364 deletions(-) diff --git a/js/custom.js b/js/custom.js index 02a9820b..3646e677 100644 --- a/js/custom.js +++ b/js/custom.js @@ -121,219 +121,52 @@ window.addEventListener("load", function () { }); document.addEventListener("DOMContentLoaded", function () { - const navItems = document.querySelectorAll(".menu-item-has-children"); - const nav = document.querySelector(".wt_header__nav"); - const menu = document.querySelector("#menu-main-menu"); - const darkBackground = document.createElement("div"); - darkBackground.id = "dark"; - darkBackground.style.display = "none"; - darkBackground.style.content = ""; - darkBackground.style.position = "fixed"; - darkBackground.style.zIndex = "-1"; - darkBackground.style.top = "0"; - darkBackground.style.left = "0"; - darkBackground.style.width = "100%"; - darkBackground.style.height = "100vh"; - darkBackground.style.background = "rgba(0, 0, 0, 0.4)"; + setActiveLinks(); + toggleDarkOverlay(); +}); - function hideAllSubMenus() { - const subMenus = document.querySelectorAll(".sub-menu"); - subMenus.forEach((menu) => { - if (menu.parentElement.hasAttribute("id")) { - menu.style.display = "none"; - } - }); - } +function setActiveLinks() { + let currentPath = window.location.pathname; - function fadeIn(element) { - element.style.opacity = 0; - element.style.transition = "opacity 0.2s ease"; + // List of language paths to match + let languagePaths = ['/wikitongues/languages/','/wikitongues/videos/']; // Add your language paths here - let opacity = 0; - const intervalTime = 10; - const targetOpacity = 1; - const increment = 0.05; + // Check if current path matches any language paths + let isLanguagePath = languagePaths.some(function(path) { + return currentPath.startsWith(path); + }); - const interval = setInterval(() => { - if (opacity >= targetOpacity) { - clearInterval(interval); - } else { - opacity += increment; - element.style.opacity = opacity; + if (isLanguagePath) { + // Add active class to the archive nav item + let archiveNavItem = document.querySelector('nav li'); + if (archiveNavItem) { + archiveNavItem.classList.add('current_page_parent'); } - }, intervalTime); - } - - function addDarkOverlay() { - darkBackground.style.display = "block"; - nav.appendChild(darkBackground); - fadeIn(darkBackground); } +} - function fadeOut(element) { - element.style.transition = "opacity 0.2s ease"; +function toggleDarkOverlay() { + const nav = document.querySelector(".wt_header__nav"); + const darkBackground = document.createElement("div"); + darkBackground.id = "dark"; + nav.appendChild(darkBackground); - const intervalTime = 10; - const decrement = 0.05; + const navItems = document.querySelectorAll(".menu-item"); - const interval = setInterval(() => { - if (element.style.opacity <= 0) { - clearInterval(interval); - element.style.display = "none"; - } else { - element.style.opacity -= decrement; - } - }, intervalTime); + function showDarkOverlay() { + darkBackground.classList.add("visible"); } - function removeDarkOverlay() { - const dark = document.querySelector("#dark"); - if (dark) { - fadeOut(dark); - } + function hideDarkOverlay() { + darkBackground.classList.remove("visible"); } navItems.forEach((item) => { - if (item.parentElement.id == "menu-main-menu") { - const subMenu = item.querySelector(".sub-menu"); - const currItem = - item.classList.contains("current_page_parent") || - item.classList.contains("current_page_item"); - if (currItem) { - item.addEventListener("mouseover", () => { - darkBackground.style.display = "none"; - hideAllSubMenus(); - }); - } else if (subMenu) { - menu.addEventListener("mouseenter", () => { - addDarkOverlay(); - }); - item.addEventListener("mouseover", () => { - hideAllSubMenus(); - subMenu.style.display = "block"; - darkBackground.style.display = "block"; - }); - item.addEventListener("mouseout", () => { - hideAllSubMenus(); - }); - menu.addEventListener("mouseleave", () => { - removeDarkOverlay(); - hideAllSubMenus(); - }); + item.addEventListener("mouseenter", function() { + if (!item.classList.contains("current_page_parent")) { + showDarkOverlay(); } - } - }); - - const donate = document.querySelector(".menu-item-type-custom"); - donate.addEventListener("mouseenter", () => { - darkBackground.style.display = "block"; - hideAllSubMenus(); + }); + item.addEventListener("mouseleave", hideDarkOverlay); }); - - // i have a strong impression that this could be simplified ~~~~DU Feb '24 - - // let body = document.querySelector("body"); - // let home = document.querySelector(".home"); - // let wpadminbar = document.querySelector("#wpadminbar"); - // let bannerSearchBar = document.querySelector(".wt_banner--searchbar"); - - // let header = document.querySelector(".wt_header"); - // let alertContainer = document.querySelector(".banner_alert_container"); - // let alertHeight = alertContainer ? alertContainer.offsetHeight : 0; - - // if (body && !home && alertContainer) { - // alertContainer.style.position = "absolute"; - // alertContainer.style.top = 0; - // } - - // let banner = document.querySelector(".wt_banner"); - - // if (body && !home && banner && alertContainer && !wpadminbar) { - // banner.style.paddingTop = - // parseInt( - // window.getComputedStyle(banner).getPropertyValue("padding-top"), - // 10 - // ) + - // alertContainer.offsetHeight + - // "px"; - // } - // if (body && !home && banner && alertContainer && wpadminbar) { - // banner.style.paddingTop = - // parseInt( - // window.getComputedStyle(banner).getPropertyValue("padding-top"), - // 10 - // ) + - // wpadminbar.offsetHeight + - // alertContainer.offsetHeight + - // "px"; - // } - - // if(body && !home && bannerSearchBar && alertContainer && !wpadminbar){ - // bannerSearchBar.style.paddingTop = - // parseInt( - // window - // .getComputedStyle(bannerSearchBar) - // .getPropertyValue("padding-top"), - // 10 - // ) + - // alertContainer.offsetHeight + - // "px"; - // } - // if (body && !home && bannerSearchBar && alertContainer && wpadminbar) { - // bannerSearchBar.style.paddingTop = - // parseInt( - // window - // .getComputedStyle(bannerSearchBar) - // .getPropertyValue("padding-top"), - // 10 - // ) + - // wpadminbar.offsetHeight + - // alertContainer.offsetHeight + - // "px"; - // } - - // let start = 0; - - // function displayBannerAlert() { - // if(alertContainer){ - // header.style.marginTop = alertContainer.offsetHeight + "px"; - // start = start +1; - // } - // } - - // function adjustHeaderMargin() { - // if (alertContainer && alertContainer.style.display!="none" ) { - // let scrollPos = window.scrollY || window.pageYOffset; - // let bannerTop = alertContainer.getBoundingClientRect().top + scrollPos; - // let bannerVisibleHeight = Math.max( - // 0, - // alertHeight + bannerTop - scrollPos - // ); - - // let margin = bannerVisibleHeight - bannerTop; - - // if(start===1){ - // window.scrollTo(0, 0); - // } - // else{ - // header.style.transition = "margin-top 0.2s"; - // header.style.marginTop = margin >= 0 ? margin + "px" : "0"; - // } - - // start = start + 1; - // } - // } - - // window.addEventListener("scroll", adjustHeaderMargin); - - // displayBannerAlert(); - // // old ID - let bannerAlertCloseButton = document.querySelector("#banner_alert_close_button"); - // let bannerAlertCloseButton = document.querySelector(".wt_banner-alert__button--close"); - - // if(bannerAlertCloseButton){ - // bannerAlertCloseButton.addEventListener("click", function() { - // alertContainer.style.display = "none"; - // header.style.marginTop = "0px"; - // }); - // } -}); +} \ No newline at end of file diff --git a/stylus/main.css b/stylus/main.css index 536d27b7..b2aafc8b 100644 --- a/stylus/main.css +++ b/stylus/main.css @@ -12,6 +12,63 @@ html { .no-scroll { overflow: hidden; } +.react-typeahead-container { + float: left; + display: inline-block; + margin-left: 2rem; +} +.react-typeahead-container .typeahead-form { + position: initial; + width: initial; + max-width: initial; + margin: initial; + font-family: 'Graphik Web'; + font-size: 1.28rem; +} +.react-typeahead-container .typeahead-form input { + background: #fffcef; + border-radius: 8px; + font-family: inherit; + font-size: inherit; + transition-property: background, width; + transition-duration: 0.6s; + transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); +} +.react-typeahead-container .typeahead-form input::placeholder { + color: #fffcef; + color: #3814a5; + font-family: 'Graphik Web'; + font-style: italic; + font-size: inherit; +} +.react-typeahead-container .typeahead-form input:active, +.react-typeahead-container .typeahead-form input:focus { + color: #3814a5; +} +.react-typeahead-container .typeahead-form input:active::placeholder, +.react-typeahead-container .typeahead-form input:focus::placeholder { + color: #3814a5; +} +.react-typeahead-container .typeahead-form .typeahead-list { + background: #fffcef; + font-family: inherit; + font-size: inherit; + border: none; + margin-top: 4px; +} +.react-typeahead-container .typeahead-form .typeahead-list span { + line-height: 2rem; +} +.react-typeahead-container .typeahead-form .typeahead-list span.label { + position: relative; + display: inline-block; + color: #3814a5; + font-family: inherit; + font-size: inherit; +} +.react-typeahead-container .typeahead-form .typeahead-list span .highlight { + background: #d5cde7; +} body { max-width: 1800px; margin: auto; @@ -105,72 +162,27 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { height: 40px; width: auto; } -.wt_header #react-typeahead-root { - float: left; - display: inline-block; - margin-left: 2rem; -} -.wt_header #react-typeahead-root .typeahead-container { - position: initial; - width: initial; - max-width: initial; - margin: initial; - font-family: 'Graphik Web'; - font-size: 1.28rem; -} -.wt_header #react-typeahead-root .typeahead-container input { +.wt_header #typeahead-nav .typeahead-form input { border: none; width: 330px; - background: #fffcef; padding: 11px; - border-radius: 8px; - font-family: inherit; - font-size: inherit; - transition-property: background, width; - transition-duration: 0.6s; - transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } -.wt_header #react-typeahead-root .typeahead-container input::placeholder { - color: #fffcef; - color: #3814a5; - font-family: 'Graphik Web'; - font-style: italic; - font-size: 1.28rem; -} -.wt_header #react-typeahead-root .typeahead-container input:active, -.wt_header #react-typeahead-root .typeahead-container input:focus { +.wt_header #typeahead-nav .typeahead-form input:active, +.wt_header #typeahead-nav .typeahead-form input:focus { width: 400px; - color: #3814a5; background: #fffcef; transition-property: background, width; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } -.wt_header #react-typeahead-root .typeahead-container input:active::placeholder, -.wt_header #react-typeahead-root .typeahead-container input:focus::placeholder { - color: #3814a5; -} -.wt_header #react-typeahead-root .typeahead-container .typeahead-list { +.wt_header #typeahead-nav .typeahead-form .typeahead-list { width: 400px; - background: #fffcef; - font-family: inherit; - font-size: inherit; - border: none; border-radius: 8px; - margin-top: 4px; -} -.wt_header #react-typeahead-root .typeahead-container .typeahead-list span { - line-height: 2rem; } -.wt_header #react-typeahead-root .typeahead-container .typeahead-list span.label { - position: relative; - display: inline-block; - color: #3814a5; - font-family: inherit; - font-size: inherit; -} -.wt_header #react-typeahead-root .typeahead-container .typeahead-list span .highlight { - background: #d5cde7; +@media all and (max-width: 1024px) { + .wt_header #typeahead-nav.react-typeahead-container { + display: none !important; + } } .wt_header--secondary { z-index: 2; @@ -188,6 +200,22 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { text-align: right; font-size: 0; } +.wt_header__nav #dark { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background: rgba(0,0,0,0.25); + opacity: 0; + visibility: hidden; + transition: opacity 0.2s ease, visibility 0.2s ease; + z-index: 1; +} +.wt_header__nav #dark.visible { + opacity: 1; + visibility: visible; +} .wt_header__nav--mobile { display: none; } @@ -203,7 +231,7 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { margin-left: 1.25rem; display: inline-block; padding: 1.25rem 1.5rem; - background: transparent; + background: #fffcef; border: 1px solid #3814a5; font-family: 'Graphik Web'; font-weight: 400; @@ -218,15 +246,12 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { border-radius: 8px; text-transform: initial; padding: 0; - display: inline-block; + z-index: 0; } -.wt_header__nav>ul>li.current_page_item, -.wt_header__nav>ul>li.current_page_parent { - background: #fff !important; -} -.wt_header__nav>ul>li.current_page_item>a, -.wt_header__nav>ul>li.current_page_parent>a { - color: #3814a5 !important; +.wt_header__nav>ul>li.current_page_item > a, +.wt_header__nav>ul>li.current_page_parent > a { + font-weight: bold; + cursor: default; } .wt_header__nav>ul>li>a { text-decoration: none; @@ -236,9 +261,13 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { } .wt_header__nav>ul>li:hover { cursor: pointer; + z-index: 2; } -.wt_header__nav>ul>li:hover>a { - color: #3814a5 !important; +.wt_header__nav>ul>li.menu-item-has-children:hover:not(.current_page_parent) > .sub-menu { + display: block; +} +.wt_header__nav>ul>li.menu-item-has-children:hover:not(.current_page_parent) > .sub-menu.show { + display: block; } .wt_header__nav .sub-menu { display: none; @@ -247,18 +276,27 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { left: 0; width: 100%; padding: 8px 0; - background: #fffcef; text-align: left; box-shadow: 0 0 100px rgba(0,0,0,0.05); - border-radius: 8px; + transition: display 0.2s ease; } .wt_header__nav .sub-menu li { display: block; margin: 0; + background: #fffcef; + overflow: hidden; +} +.wt_header__nav .sub-menu li:first-of-type { + padding-top: 8px; + border-radius: 8px 8px 0 0; +} +.wt_header__nav .sub-menu li:last-of-type { + padding-bottom: 8px; + border-radius: 0 0 8px 8px; } .wt_header__nav .sub-menu li a { color: #3814a5; - padding: 8px 1.25rem; + padding: 1.25rem; text-decoration: none; display: inline-block; width: 100%; @@ -571,74 +609,46 @@ body.home .wt_banner { } .wt_banner--searchbar { width: 100%; - padding: 120px; - border-bottom: 1px solid #fffcef; -} -.wt_banner--searchbar form { display: flex; - margin: auto; - width: 90%; - max-width: 800px; -} -.wt_banner--searchbar form label { - display: block; - width: 70%; + min-height: 50vh; + align-content: center; + justify-content: center; + align-items: center; + padding: 4rem 0; } -.wt_banner--searchbar form input { - border-top-width: 0 !important; - border-right-width: 0 !important; - border-left-width: 0 !important; - border-radius: 0 !important; - -webkit-appearance: none !important; - -webkit-border-radius: 0 !important; +.wt_banner--searchbar #typeahead-archive .typeahead-form { + width: 50vw; } -.wt_banner--searchbar form input[type="search"] { - width: 97%; - box-sizing: border-box; - margin-right: 3%; - border-bottom: 2px solid #101010; +.wt_banner--searchbar #typeahead-archive .typeahead-form.loaded { display: inline-block; - padding: 1.5rem 2rem; - background: #fffcef; - font-family: 'Graphik Web'; - font-weight: 400; - font-style: normal; - font-stretch: normal; - font-size: 1.6rem; - line-height: 1.3; - text-transform: uppercase; - text-decoration: none; - color: #101010; - text-wrap: nowrap; - text-transform: initial !important; - transition: background 0.2s ease-in-out; } -.wt_banner--searchbar form input[type="search"]:focus { - outline: none !important; - background: #fff; +.wt_banner--searchbar #typeahead-archive .typeahead-form input { + width: inherit; + border: none; + padding: 2.5rem; + font-size: 2rem; } -.wt_banner--searchbar form input[type="submit"] { - width: 30%; - display: inline-block; - padding: 1.5rem 2rem; - background: #3814a5; - font-family: 'Graphik Web'; - font-weight: 400; - font-style: normal; - font-stretch: normal; - font-size: 1.6rem; - line-height: 1.3; - text-transform: uppercase; - text-decoration: none; - color: #fffcef; - text-wrap: nowrap; +.wt_banner--searchbar #typeahead-archive .typeahead-form .typeahead-list { + position: initial; + max-height: 60vh; + border-radius: 0; + border-top: 2px solid #3814a5; + padding-top: 4px; } -.wt_banner--searchbar form input[type="submit"]:hover { - cursor: pointer; +.wt_banner--searchbar #typeahead-archive .typeahead-form .typeahead-list .typeahead-item { + border-radius: 8px; + padding: 12px; + font-size: 1.2em; } @media all and (max-width: 768px) { - .wt_banner--searchbar { - padding: 12rem 3rem; + .wt_banner--searchbar #typeahead-archive { + margin-left: 0; + } + .wt_banner--searchbar #typeahead-archive .typeahead-form { + width: 90vw; + } + .wt_banner--searchbar #typeahead-archive .typeahead-form .typeahead-list { + max-height: initial; } } .wt_carousel__wrapper { @@ -1311,12 +1321,6 @@ body.search-results .wt_header__nav>ul>li:first-of-type:hover .sub-menu { .wt_search-results__thumbnail--copy a i { margin-left: 0.5rem; } -body.single-languages .wt_header__nav>ul>li:first-of-type { - background: #fff !important; -} -body.single-languages .wt_header__nav>ul>li:first-of-type>a { - color: #3814a5 !important; -} body.single-languages .wt_header__nav>ul>li:first-of-type:hover:before { display: none !important; } @@ -1501,12 +1505,6 @@ body .wt_single-languages__contents#wt_single-languages__resources .wt_content-b padding: 0 3rem; } } -body.single-videos .wt_header__nav>ul>li:first-of-type { - background: #fff !important; -} -body.single-videos .wt_header__nav>ul>li:first-of-type>a { - color: #3814a5 !important; -} body.single-videos .wt_header__nav>ul>li:first-of-type:hover:before { display: none !important; } diff --git a/stylus/require/header.styl b/stylus/require/header.styl index 623559e6..e9904a2c 100644 --- a/stylus/require/header.styl +++ b/stylus/require/header.styl @@ -132,7 +132,23 @@ body margin-left auto text-align right font-size 0 - + + #dark + position fixed + top 0 + left 0 + width 100% + height 100vh + background rgba(0, 0, 0, 0.25) + opacity 0 + visibility hidden + transition opacity 0.2s ease, visibility 0.2s ease + z-index 1 + + &.visible + opacity 1 + visibility visible + &--mobile display none @@ -147,19 +163,18 @@ body &>ul>li position relative margin-left 1.25rem - button--small(transparent, $blue) + button--small($parchment, $blue) border none border-radius 8px text-transform initial padding 0 - display inline-block + z-index 0 &.current_page_item, &.current_page_parent - background $white !important - - &>a - color $blue !important + > a + font-weight bold + cursor default &>a // button--small is designed for a elements not li text-decoration none @@ -169,10 +184,15 @@ body &:hover cursor pointer - // background $white !important + z-index 2 - &>a - color $blue !important + &.menu-item-has-children + &:hover + &:not(.current_page_parent) + > .sub-menu + display block + &.show + display block .sub-menu display none @@ -181,21 +201,27 @@ body left 0 width 100% padding 8px 0 - background $parchment text-align left - // border-width 6px 0.5px 0.5px 0.5px - // border-color $blue - // border-style solid box-shadow 0 0 100px rgba(0,0,0,.05) - border-radius 8px + transition display 0.2s ease li display block margin 0 + background $parchment + overflow hidden + + &:first-of-type + padding-top 8px + border-radius 8px 8px 0 0 + + &:last-of-type + padding-bottom 8px + border-radius 0 0 8px 8px a color $blue - padding 8px 1.25rem + padding 1.25rem text-decoration none display inline-block width 100% diff --git a/stylus/require/single-languages.styl b/stylus/require/single-languages.styl index 0c65efd4..a75cdbeb 100644 --- a/stylus/require/single-languages.styl +++ b/stylus/require/single-languages.styl @@ -4,17 +4,13 @@ body &__nav &>ul>li &:first-of-type - background $white !important - - &>a - color $blue !important - &:hover &:before display none !important .sub-menu display none !important + .wt_single-languages &__content width calc(100%/4*3) diff --git a/stylus/require/single-videos.styl b/stylus/require/single-videos.styl index 5db74894..6c45d64b 100644 --- a/stylus/require/single-videos.styl +++ b/stylus/require/single-videos.styl @@ -4,11 +4,6 @@ body &__nav &>ul>li &:first-of-type - background $white !important - - &>a - color $blue !important - &:hover &:before display none !important From f5f4635ea1e5914da70d9d0f5edb8e366072a0fe Mon Sep 17 00:00:00 2001 From: FredericoAndrade Date: Mon, 22 Jul 2024 11:07:05 +0200 Subject: [PATCH 09/11] enable custom data source add datasource to acf enable wp REST search update shortcode with params --- acf-json/group_668bbbba9bae8.json | 22 ++++++++++- functions.php | 63 +++++++++++++++++++++++++++++- header.php | 7 +--- readme.md | 65 ++++++++++++++++++++++++------- 4 files changed, 137 insertions(+), 20 deletions(-) diff --git a/acf-json/group_668bbbba9bae8.json b/acf-json/group_668bbbba9bae8.json index b95ecf86..02691307 100644 --- a/acf-json/group_668bbbba9bae8.json +++ b/acf-json/group_668bbbba9bae8.json @@ -141,6 +141,26 @@ "placeholder": "", "prepend": "", "append": "" + }, + { + "key": "field_669d8b75d8f4c", + "label": "Data Source", + "name": "data_source", + "aria-label": "", + "type": "text", + "instructions": "", + "required": 0, + "conditional_logic": 0, + "wrapper": { + "width": "", + "class": "", + "id": "" + }, + "default_value": "", + "maxlength": "", + "placeholder": "", + "prepend": "", + "append": "" } ], "location": [ @@ -161,5 +181,5 @@ "active": true, "description": "", "show_in_rest": 0, - "modified": 1720567110 + "modified": 1721600905 } diff --git a/functions.php b/functions.php index 17d9e838..1a935e01 100644 --- a/functions.php +++ b/functions.php @@ -167,7 +167,6 @@ function wt_archive_menu() { add_action( 'init', 'wt_archive_menu' ); - // add revitalization menu function wt_revitalization_menu() { register_nav_menu('revitalization-menu',__( 'Revitalization Menu' )); @@ -214,6 +213,68 @@ function modify_page_title() { } add_action('wp_head', 'modify_page_title'); +add_action('rest_api_init', function () { + $routes = rest_get_server()->get_routes(); + error_log(print_r($routes, true)); +}); + +function custom_register_search_endpoint() { + register_rest_route('custom/v1', '/search', array( + 'methods' => 'GET', + 'callback' => 'custom_search_callback', + 'permission_callback' => '__return_true' + )); +} + +add_action('rest_api_init', 'custom_register_search_endpoint'); + +function custom_search_callback($request) { + $query = sanitize_text_field($request['query']); + error_log('Search query: ' . $query); + + // Refine the search to include only the alternate_names field + $meta_query = array( + array( + 'key' => 'alternate_names', + 'value' => $query, + 'compare' => 'LIKE' + ) + ); + + $args = array( + 'post_type' => 'languages', + 'post_status' => 'publish', + 'posts_per_page' => 10, + 'meta_query' => $meta_query + ); + + error_log('WP_Query args: ' . print_r($args, true)); + + $posts = get_posts($args); + + error_log('Found posts: ' . print_r($posts, true)); + + $results = array(); + foreach ($posts as $post) { + $meta = get_post_meta($post->ID); + error_log('Post meta for ' . $post->ID . ': ' . print_r($meta, true)); + + $results[] = array( + 'id' => $post->ID, + 'label' => isset($meta['standard_name'][0]) ? $meta['standard_name'][0] : '', + 'identifier' => $post->post_name, + 'alternate_names' => isset($meta['alternate_names'][0]) ? $meta['alternate_names'][0] : '', + 'nations_of_origin' => isset($meta['nations_of_origin'][0]) ? $meta['nations_of_origin'][0] : '', + 'iso_code' => isset($meta['iso_code'][0]) ? $meta['iso_code'][0] : '', + 'glottocode' => isset($meta['glottocode'][0]) ? $meta['glottocode'][0] : '' + ); + } + + error_log('Search results: ' . print_r($results, true)); + + return $results; +} + // Pagination for paged posts, Page 1, Page 2, Page 3, with Next and Previous Links, No plugin function html5wp_pagination() { diff --git a/header.php b/header.php index 22835e25..845b3103 100644 --- a/header.php +++ b/header.php @@ -167,12 +167,9 @@
-
- [react_typeahead] +
+ [react_typeahead id="typeahead-nav" custom_class="nav-style" data_source="wordpress"]
- - - Date: Mon, 22 Jul 2024 11:41:17 +0200 Subject: [PATCH 10/11] cleanup styles --- js/custom.js | 7 +++---- stylus/main.css | 9 +++++++++ stylus/require/banner--searchbar.styl | 4 ++++ stylus/require/header.styl | 4 ++++ 4 files changed, 20 insertions(+), 4 deletions(-) diff --git a/js/custom.js b/js/custom.js index 3646e677..82254877 100644 --- a/js/custom.js +++ b/js/custom.js @@ -140,7 +140,7 @@ function setActiveLinks() { // Add active class to the archive nav item let archiveNavItem = document.querySelector('nav li'); if (archiveNavItem) { - archiveNavItem.classList.add('current_page_parent'); + archiveNavItem.classList.add('current_page_item'); } } } @@ -151,8 +151,7 @@ function toggleDarkOverlay() { darkBackground.id = "dark"; nav.appendChild(darkBackground); - const navItems = document.querySelectorAll(".menu-item"); - + const navItems = document.querySelectorAll(".wt_header__nav .menu-item"); function showDarkOverlay() { darkBackground.classList.add("visible"); } @@ -163,7 +162,7 @@ function toggleDarkOverlay() { navItems.forEach((item) => { item.addEventListener("mouseenter", function() { - if (!item.classList.contains("current_page_parent")) { + if (!item.classList.contains("current_page_item")) { showDarkOverlay(); } }); diff --git a/stylus/main.css b/stylus/main.css index b2aafc8b..57e6dffa 100644 --- a/stylus/main.css +++ b/stylus/main.css @@ -178,6 +178,8 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { .wt_header #typeahead-nav .typeahead-form .typeahead-list { width: 400px; border-radius: 8px; + outline: 2px solid #3814a5; + z-index: 3; } @media all and (max-width: 1024px) { .wt_header #typeahead-nav.react-typeahead-container { @@ -248,6 +250,10 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { padding: 0; z-index: 0; } +.wt_header__nav>ul>li.current_page_item, +.wt_header__nav>ul>li.current_page_parent { + pointer-events: none; +} .wt_header__nav>ul>li.current_page_item > a, .wt_header__nav>ul>li.current_page_parent > a { font-weight: bold; @@ -640,6 +646,9 @@ body.home .wt_banner { padding: 12px; font-size: 1.2em; } +body.search-results .wt_banner--searchbar { + min-height: initial; +} @media all and (max-width: 768px) { .wt_banner--searchbar #typeahead-archive { margin-left: 0; diff --git a/stylus/require/banner--searchbar.styl b/stylus/require/banner--searchbar.styl index 44ea7a1a..6bc3b3d3 100644 --- a/stylus/require/banner--searchbar.styl +++ b/stylus/require/banner--searchbar.styl @@ -32,6 +32,10 @@ border-radius 8px padding 12px font-size 1.2em + +body.search-results + .wt_banner--searchbar + min-height initial @media all and (max-width:$mobile) .wt_banner--searchbar diff --git a/stylus/require/header.styl b/stylus/require/header.styl index e9904a2c..73c786b8 100644 --- a/stylus/require/header.styl +++ b/stylus/require/header.styl @@ -112,6 +112,8 @@ body .typeahead-list width 400px border-radius 8px + outline 2px solid #3814a5 + z-index 3 @media all and (max-width:$smallScreen) #typeahead-nav.react-typeahead-container @@ -172,6 +174,8 @@ body &.current_page_item, &.current_page_parent + pointer-events none + > a font-weight bold cursor default From e3d0f5b60491ad080e23021d1dbc0ebc94993fd1 Mon Sep 17 00:00:00 2001 From: FredericoAndrade Date: Wed, 24 Jul 2024 01:52:15 +0200 Subject: [PATCH 11/11] enable custom datasource --- functions.php | 2 +- header.php | 5 +---- modules/banner--searchbar.php | 4 +--- stylus/main.css | 27 ++++++++++++++------------- stylus/require/banner--main.styl | 1 + stylus/require/banner--searchbar.styl | 4 ++-- stylus/require/header.styl | 4 ++-- 7 files changed, 22 insertions(+), 25 deletions(-) diff --git a/functions.php b/functions.php index 1a935e01..88b666e1 100644 --- a/functions.php +++ b/functions.php @@ -244,7 +244,7 @@ function custom_search_callback($request) { $args = array( 'post_type' => 'languages', 'post_status' => 'publish', - 'posts_per_page' => 10, + 'posts_per_page' => 100, 'meta_query' => $meta_query ); diff --git a/header.php b/header.php index 845b3103..1921ace7 100644 --- a/header.php +++ b/header.php @@ -166,10 +166,7 @@ Wikitongues logo: dark color scheme
- -
- [react_typeahead id="typeahead-nav" custom_class="nav-style" data_source="wordpress"] -
+ -
- [react_typeahead custom_class="body-style"] -
+ diff --git a/stylus/main.css b/stylus/main.css index 57e6dffa..545ac343 100644 --- a/stylus/main.css +++ b/stylus/main.css @@ -162,27 +162,27 @@ body.page-template-template-giving-campaign.logged-in[data-alert="true"] { height: 40px; width: auto; } -.wt_header #typeahead-nav .typeahead-form input { +.wt_header #typeahead_nav .typeahead-form input { border: none; width: 330px; padding: 11px; } -.wt_header #typeahead-nav .typeahead-form input:active, -.wt_header #typeahead-nav .typeahead-form input:focus { +.wt_header #typeahead_nav .typeahead-form input:active, +.wt_header #typeahead_nav .typeahead-form input:focus { width: 400px; background: #fffcef; transition-property: background, width; transition-duration: 0.6s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); } -.wt_header #typeahead-nav .typeahead-form .typeahead-list { +.wt_header #typeahead_nav .typeahead-form .typeahead-list { width: 400px; border-radius: 8px; outline: 2px solid #3814a5; z-index: 3; } @media all and (max-width: 1024px) { - .wt_header #typeahead-nav.react-typeahead-container { + .wt_header #typeahead_nav.react-typeahead-container { display: none !important; } } @@ -484,6 +484,7 @@ body.home .wt_banner { width: 100%; height: 100%; background: rgba(0,0,0,0.3); + background: linear-gradient(90deg, rgba(1,1,1,0) 0%, rgba(1,1,1,0.3) 80%); } .wt_banner__copy { position: absolute; @@ -622,26 +623,26 @@ body.home .wt_banner { align-items: center; padding: 4rem 0; } -.wt_banner--searchbar #typeahead-archive .typeahead-form { +.wt_banner--searchbar #typeahead_archive .typeahead-form { width: 50vw; } -.wt_banner--searchbar #typeahead-archive .typeahead-form.loaded { +.wt_banner--searchbar #typeahead_archive .typeahead-form.loaded { display: inline-block; } -.wt_banner--searchbar #typeahead-archive .typeahead-form input { +.wt_banner--searchbar #typeahead_archive .typeahead-form input { width: inherit; border: none; padding: 2.5rem; font-size: 2rem; } -.wt_banner--searchbar #typeahead-archive .typeahead-form .typeahead-list { +.wt_banner--searchbar #typeahead_archive .typeahead-form .typeahead-list { position: initial; max-height: 60vh; border-radius: 0; border-top: 2px solid #3814a5; padding-top: 4px; } -.wt_banner--searchbar #typeahead-archive .typeahead-form .typeahead-list .typeahead-item { +.wt_banner--searchbar #typeahead_archive .typeahead-form .typeahead-list .typeahead-item { border-radius: 8px; padding: 12px; font-size: 1.2em; @@ -650,13 +651,13 @@ body.search-results .wt_banner--searchbar { min-height: initial; } @media all and (max-width: 768px) { - .wt_banner--searchbar #typeahead-archive { + .wt_banner--searchbar #typeahead_archive { margin-left: 0; } - .wt_banner--searchbar #typeahead-archive .typeahead-form { + .wt_banner--searchbar #typeahead_archive .typeahead-form { width: 90vw; } - .wt_banner--searchbar #typeahead-archive .typeahead-form .typeahead-list { + .wt_banner--searchbar #typeahead_archive .typeahead-form .typeahead-list { max-height: initial; } } diff --git a/stylus/require/banner--main.styl b/stylus/require/banner--main.styl index 5b530fed..a0ebd4c2 100644 --- a/stylus/require/banner--main.styl +++ b/stylus/require/banner--main.styl @@ -21,6 +21,7 @@ body width 100% height 100% background rgba(0,0,0,.3) + background linear-gradient(90deg, rgba(1, 1, 1, 0) 0%, rgba(1, 1, 1, .3) 80%) &__copy position absolute diff --git a/stylus/require/banner--searchbar.styl b/stylus/require/banner--searchbar.styl index 6bc3b3d3..8bfecee6 100644 --- a/stylus/require/banner--searchbar.styl +++ b/stylus/require/banner--searchbar.styl @@ -8,7 +8,7 @@ align-items center padding 4rem 0 - #typeahead-archive + #typeahead_archive .typeahead-form width 50vw @@ -39,7 +39,7 @@ body.search-results @media all and (max-width:$mobile) .wt_banner--searchbar - #typeahead-archive + #typeahead_archive margin-left 0 .typeahead-form diff --git a/stylus/require/header.styl b/stylus/require/header.styl index 73c786b8..3b685214 100644 --- a/stylus/require/header.styl +++ b/stylus/require/header.styl @@ -94,7 +94,7 @@ body width auto - #typeahead-nav + #typeahead_nav .typeahead-form input border none @@ -116,7 +116,7 @@ body z-index 3 @media all and (max-width:$smallScreen) - #typeahead-nav.react-typeahead-container + #typeahead_nav.react-typeahead-container display none !important &--secondary