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
diff --git a/acf-json/group_668bbbba9bae8.json b/acf-json/group_668bbbba9bae8.json
new file mode 100644
index 00000000..02691307
--- /dev/null
+++ b/acf-json/group_668bbbba9bae8.json
@@ -0,0 +1,185 @@
+{
+ "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": ""
+ },
+ {
+ "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": [
+ [
+ {
+ "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": 1721600905
+}
diff --git a/functions.php b/functions.php
index 17d9e838..88b666e1 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' => 100,
+ '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 cdba2fe8..1921ace7 100644
--- a/header.php
+++ b/header.php
@@ -166,15 +166,7 @@
-
-
-
-
-
-
+
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,225 +114,58 @@ function mobileTrigger() {
window.addEventListener("load", function () {
if (document.body.classList.contains("home")) {
changeHeaderClass();
+ manageNav()
}
carouselScroll();
mobileTrigger();
});
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_item');
}
- }, intervalTime);
- }
-
- function addDarkOverlay() {
- darkBackground.style.display = "block";
- nav.appendChild(darkBackground);
- fadeIn(darkBackground);
}
+}
- function fadeOut(element) {
- element.style.transition = "opacity 0.2s ease";
-
- const intervalTime = 10;
- const decrement = 0.05;
+function toggleDarkOverlay() {
+ const nav = document.querySelector(".wt_header__nav");
+ const darkBackground = document.createElement("div");
+ darkBackground.id = "dark";
+ nav.appendChild(darkBackground);
- const interval = setInterval(() => {
- if (element.style.opacity <= 0) {
- clearInterval(interval);
- element.style.display = "none";
- } else {
- element.style.opacity -= decrement;
- }
- }, intervalTime);
+ const navItems = document.querySelectorAll(".wt_header__nav .menu-item");
+ 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_item")) {
+ 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/modules/banner--searchbar.php b/modules/banner--searchbar.php
index 5cb0f1d5..4815641a 100644
--- a/modules/banner--searchbar.php
+++ b/modules/banner--searchbar.php
@@ -1,3 +1,3 @@
-
+
diff --git a/readme.md b/readme.md
index d4b9540c..2c3b4da2 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,27 +7,87 @@
* 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.
-* `main` can only be edited by pull-requests from other branches.
+# Continuous Integration and Deployment (CI/CD)
-# to-do
+This project follows a structured Continuous Integration and Continuous Deployment (CI/CD) process, utilizing four primary environments to ensure seamless development, testing, and production deployment.
+
+## Environments
+
+1. **Feature**:
+ - Used for developing and testing new features in isolated branches.
+ - Feature branches should be regularly pushed to GitHub for visibility and collaboration.
+
+2. **Main**:
+ - Serves as the integration branch where feature branches are merged.
+ - Ensures that features are tested and stable before further deployment.
+
+3. **Staging**:
+ - URL: [staging.wikitongues.org](https://staging.wikitongues.org)
+ - A live testing environment where integrated features from `main` are deployed.
+ - Used for end-to-end testing in a production-like setting before going live.
+
+4. **Production**:
+ - URL: [wikitongues.org](https://wikitongues.org)
+ - The public-facing environment where fully tested and approved features are deployed.
+ - Direct pushes to `production` are prohibited to maintain stability.
+
+## Workflow
+
+1. **Feature Development**:
+ - Begin by branching off from `main` to develop new features.
+ - Regularly push updates to the feature branch on GitHub for peer review and testing.
+
+2. **Integration**:
+ - Once a feature is ready, submit a pull request to merge the feature branch into `main`.
+ - Resolve any conflicts, run tests, and ensure the integration is smooth.
+
+3. **Staging Deployment**:
+ - After merging into `main`, create a pull request to merge `main` into `staging`.
+ - Automatic deployment to the Staging environment allows for live testing.
+ - Conduct thorough testing and verification in the Staging environment.
+
+4. **Production Deployment**:
+ - Following successful testing in Staging, create a pull request to merge `staging` into `production`.
+ - The merge triggers an automatic deployment to the Production environment.
+ - Monitor the deployment to ensure stability and functionality.
+
+## Automatic Deployment
+
+- **Deployment Branches**:
+ - `staging`: Automatically deploys to the Staging environment upon merge.
+ - `production`: Automatically deploys to the Production environment upon merge.
+
+- **Branch Protection**:
+ - The `main` and `production` branches are protected and can only be modified via pull requests from other branches.
+ - This ensures that all changes are reviewed, tested, and approved before affecting live environments.
+
+
+# CSS and Compiling Stylus
+
+This project uses [Stylus](https://stylus-lang.com/), a CSS pre-processor.
+Stylus needs to be compiled into CSS before it is usable in HTML.
+To run the compiler, run `stylus -w stylus` in the terminal.
+
+# 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'
) );`
- [] 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
@@ -36,30 +96,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
\ No newline at end of file
+- [] toolkit donate prompt
diff --git a/stylus/main.css b/stylus/main.css
index 2942a293..545ac343 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;
@@ -73,9 +130,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;
@@ -99,28 +162,29 @@ 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__searchbar i {
- position: absolute;
- top: 50%;
- left: 7.5px;
- transform: translateY(-50%);
+.wt_header #typeahead_nav .typeahead-form input {
+ border: none;
+ width: 330px;
+ padding: 11px;
}
-.wt_header__searchbar input[type="search"] {
- border: 0;
- padding: 5px 10px 5px 27.5px;
- background: #fff;
+.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__searchbar input[type="search"]:focus {
- outline: none;
+.wt_header #typeahead_nav .typeahead-form .typeahead-list {
+ width: 400px;
+ border-radius: 8px;
+ outline: 2px solid #3814a5;
+ z-index: 3;
}
-.wt_header__searchbar input[type="submit"] {
- display: none;
+@media all and (max-width: 1024px) {
+ .wt_header #typeahead_nav.react-typeahead-container {
+ display: none !important;
+ }
}
.wt_header--secondary {
z-index: 2;
@@ -138,6 +202,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;
}
@@ -153,7 +233,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: #fffcef;
border: 1px solid #3814a5;
font-family: 'Graphik Web';
font-weight: 400;
@@ -162,27 +242,38 @@ 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;
+ z-index: 0;
}
.wt_header__nav>ul>li.current_page_item,
.wt_header__nav>ul>li.current_page_parent {
- background: #fff !important;
+ pointer-events: none;
}
-.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;
- color: #fffcef;
+ color: inherit;
+ padding: 1.25rem;
+ display: inline-block;
}
.wt_header__nav>ul>li:hover {
cursor: pointer;
- background: #fff !important;
+ 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;
@@ -190,21 +281,34 @@ 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;
+ text-align: left;
box-shadow: 0 0 100px rgba(0,0,0,0.05);
+ transition: display 0.2s ease;
}
.wt_header__nav .sub-menu li {
display: block;
- margin: 10px 0;
+ 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: 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;
@@ -380,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;
@@ -511,74 +616,49 @@ 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;
+}
+body.search-results .wt_banner--searchbar {
+ min-height: initial;
}
@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 {
@@ -1251,12 +1331,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;
}
@@ -1441,12 +1515,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/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--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 cade65d9..8bfecee6 100644
--- a/stylus/require/banner--searchbar.styl
+++ b/stylus/require/banner--searchbar.styl
@@ -1,47 +1,49 @@
-// 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
+
+body.search-results
+ .wt_banner--searchbar
+ min-height initial
@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 59bc49a6..3b685214 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"]
@@ -87,30 +93,32 @@ body
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
-
- &:focus
- outline none
-
- &[type="submit"]
- display none
+ #typeahead_nav
+ .typeahead-form
+ input
+ border none
+ width 330px
+ padding 11px
+
+ &:active,
+ &:focus
+ width 400px
+ background $parchment
+ transition-property background, width
+ transition-duration 0.6s
+ transition-timing-function cubic-bezier(0.16, 1, 0.3, 1);
+
+ .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
+ display none !important
+
&--secondary
z-index 2
position fixed
@@ -126,7 +134,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
@@ -141,25 +165,38 @@ body
&>ul>li
position relative
margin-left 1.25rem
- button--small($blue, $parchment)
+ button--small($parchment, $blue)
+ border none
+ border-radius 8px
+ text-transform initial
+ padding 0
+ z-index 0
&.current_page_item,
&.current_page_parent
- background $white !important
+ pointer-events none
- &>a
- color $blue !important
+ > a
+ font-weight bold
+ cursor default
&>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
+ 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
@@ -167,21 +204,34 @@ 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
+ text-align left
box-shadow 0 0 100px rgba(0,0,0,.05)
+ transition display 0.2s ease
li
display block
- margin 10px 0
+ 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 1.25rem
text-decoration none
+ display inline-block
+ width 100%
+
+ &:hover
+ background #eee
&--secondary
z-index 2
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
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?)