Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Improvement: Search Feature for help expensify #24299

Merged
merged 19 commits into from
Aug 11, 2023
Merged

Improvement: Search Feature for help expensify #24299

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
e480cc4
Setup Search Engine for help Expensify with XML Configuration
studentofcoding Aug 8, 2023
d933b0f
Make Sidebar full width up until table breakpoint
studentofcoding Aug 8, 2023
afbfb68
Add CSP for Captcha
studentofcoding Aug 8, 2023
4c52c3e
Fix prettier error
studentofcoding Aug 8, 2023
1ef9ca9
Update docs/context.xml
studentofcoding Aug 9, 2023
e7cb172
Update all
studentofcoding Aug 9, 2023
4114982
Update
studentofcoding Aug 9, 2023
3495c0d
Use NewDot search button, font, & fix cut off content on search result
studentofcoding Aug 9, 2023
b890f9e
Make the Label Animation work and adjustment
studentofcoding Aug 10, 2023
ef847d7
Update Search button
studentofcoding Aug 10, 2023
c11c593
Make the icon same size on mobile
studentofcoding Aug 10, 2023
06edd2c
Change icon to back left, Alignment styling, & remove console.log
studentofcoding Aug 10, 2023
ca2f41a
Refactor & Tidyup
studentofcoding Aug 10, 2023
25da9a9
Fix Prettier diff
studentofcoding Aug 10, 2023
353d436
Make search-bar styling individual & Manage svg based on screen size
studentofcoding Aug 10, 2023
4241609
Fix moving input
studentofcoding Aug 10, 2023
943eb08
Fix on hover close icon
studentofcoding Aug 10, 2023
9c77891
Fix some comments
studentofcoding Aug 11, 2023
55e2a3a
Fix prettier error
studentofcoding Aug 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions docs/_includes/search-toggle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<div class="search-icon">
<a onclick="openSidebar()" id="toggle-search-open">
<img src="/assets/images/search.svg" class="base-icon" />
</a>
</div>
13 changes: 13 additions & 0 deletions docs/_includes/sidebar-search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div id="sidebar-layer">
<div id="sidebar-search" class="sidebar">
<div class="flex searchbar-title-wrapper">
<a id="toggle-search-close">
<img src="/assets/images/back-left.svg" class="base-icon" />
</a>
<h4 class="search-title">Search</h4>
</div>
<!-- As the search box is being managed by Embed script from Google, the way search work is on via on Enter / Search Icon -->
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
</div>
</div>
18 changes: 14 additions & 4 deletions docs/_layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="script-src https://kit.fontawesome.com https://cdnjs.cloudflare.com https://cdnjs.cloudflare.com/ajax/libs/tocbot/ 'self'; style-src cdnjs.cloudflare.com ka-f.fontawesome.com 'self' 'unsafe-inline'" >
<meta http-equiv="Content-Security-Policy" content="script-src https://kit.fontawesome.com https://cdnjs.cloudflare.com https://www.google.com https://www.gstatic.com/ https://cse.google.com http://cse.google.com https://partner.googleadservices.com/ https://cdnjs.cloudflare.com/ajax/libs/tocbot/ 'self' 'unsafe-eval' 'unsafe-inline'; style-src cdnjs.cloudflare.com cse.google.com www.google.com ka-f.fontawesome.com fonts.googleapis.com 'self' 'unsafe-inline'" >
<title>Expensify Help</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="icon" type="image/png" href="/assets/images/expensify-logo-round.png">
Expand All @@ -12,6 +12,7 @@
<script src="https://kit.fontawesome.com/263e5e8608.js" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.12.0/tocbot.js"></script>
<script defer src="/assets/js/main.js"></script>
<script async src="https://cse.google.com/cse.js?cx=41f40d6e5c14246ff"></script>

<!-- SEO tags -->
{% seo %}
Expand All @@ -25,11 +26,20 @@
<img id="angle-up-icon" src="/assets/images/arrow-up.svg" class="base-icon hide"></img>
<img id="bars-icon" src="/assets/images/menu.svg" class="base-icon"></img>
</div>
<a href="/">
<img src="/assets/images/expensify-help.svg" class="logo" />
</a>
<div class="flex">
<div>
<a href="/">
<img src="/assets/images/expensify-help.svg" class="logo" />
</a>
</div>
<!-- Search icons that'll open the Sidebar Search sections -->
{% include search-toggle.html %}
</div>
</div>

<!-- Sidebar Search sections -->
{% include sidebar-search.html id="sidebar-layer" %}

<!-- LHN content (Main navigation tree or Article TOC) -->
<div id="lhn-content">
{% if page.url == "/" or page.url contains "/hubs/" %}
Expand Down
2 changes: 2 additions & 0 deletions docs/_sass/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ $color-green-icons: #8B9C8F;
$color-green-borders: #1A3D32;
$color-green-highlightBG: #07271F;
$color-green-appBG: #061B09;
$color-green-hover: #00a862;
$color-light-gray-green: #AFBBB0;
$color-blue300: #5AB0FF;
$color-blue200: #B0D9FF;
$color-white: #E7ECE9;
$color-gray-label: #afbbb0;
17 changes: 17 additions & 0 deletions docs/_sass/_main.scss
View file
Open in desktop
studentofcoding marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -1,16 +1,20 @@
@import 'breakpoints';
@import 'colors';
@import 'fonts';
@import 'search-bar';

$color-appBG: $color-green-appBG;
$color-highlightBG: $color-green-highlightBG;
$color-accent : $color-green400;
$color-borders: $color-green-borders;
$color-icons: $color-green-icons;
$color-text: $color-white;
$color-link: $color-blue300;
$color-link-hovered: $color-blue200;
$color-success: $color-green400;
$color-text-supporting: $color-light-gray-green;
$color-green-hover: $color-green-hover;
$color-gray-label: $color-gray-label;

* {
margin: 0;
Expand Down Expand Up @@ -182,6 +186,18 @@ button {
align-content: center;
}

.flex {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
align-content: space-between;
}

#lhn {
position: fixed;
background-color: $color-highlightBG;
Expand Down Expand Up @@ -524,6 +540,7 @@ button {
.base-icon {
width: 20px;
height: 20px;
cursor: pointer;
}

.homepage {
Expand Down
197 changes: 197 additions & 0 deletions docs/_sass/_search-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,197 @@
@import 'breakpoints';
@import 'colors';
@import 'fonts';

$color-appBG: $color-green-appBG;
$color-highlightBG: $color-green-highlightBG;
$color-accent : $color-green400;
$color-borders: $color-green-borders;
$color-icons: $color-green-icons;
$color-text: $color-white;
$color-link: $color-blue300;
$color-link-hovered: $color-blue200;
$color-success: $color-green400;
$color-text-supporting: $color-light-gray-green;
$color-green-hover: $color-green-hover;
$color-gray-label: $color-gray-label;
studentofcoding marked this conversation as resolved.
Show resolved Hide resolved

.search-icon {
margin: auto 0px;
}

#sidebar-search {
background-color: $color-appBG;
width: 375px;
height: 100vh;
position: fixed;
display: block;
top: 0;
right: 0;
}

@media only screen and (max-width: $breakpoint-tablet) {
#sidebar-search {
width: 100%;
}
}

.searchbar-title-wrapper {
padding: 20px;
}

.search-title {
font-size: 17px;
padding-bottom: 20px;
}

#toggle-search-close {
margin: auto;
margin-left: 0px;
margin-right: 10px;
}

/* Sidebar Layer */
#sidebar-layer {
position: fixed;

/* Sit on top of the page content */
display: none;

/* Hidden by default */
width: 100%;

/* Full width (cover the whole page) */
height: 100%;

/* Full height (cover the whole page) */
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 2;
}

/* All gsc id & class are Google Search relate gcse_0 is the search bar parent & gcse_1 is the search result list parent */
#___gcse_0 {
margin-left: 20px;
}

/* This input is in #___gcse_0 search bar */
input#gsc-i-id1.gsc-input {
background-color: $color-appBG;
color: #E7ECE9;
font-family: "ExpensifyNeue", "Segoe UI Emoji", "Noto Color Emoji" !important;
}

/* These below #gsc-iw-id1, .gsc-input-box & .gsib_a are inner wrapper of search bar input */
#gsc-iw-id1 {
background-color: $color-appBG;
border-bottom: $color-borders 2px solid;
border-bottom-left-radius: 0px;

&:focus-within {
border-bottom: $color-accent 2px solid;
}
}

.gsc-input-box .gsib_a {
padding: 5px 9px 4px 0px;
}

.search-icon {
margin-left: auto;
}

/* This is the close icon on search bar */
.gsib_b .gsst_a .gscb_a {
color: $color-icons;

&:hover {
color: $color-text;
}
}

/* This is to manage hover on parent close icon and make it the same effect on close icon */
.gsst_a:hover {

.gscb_a {
color: $color-text !important;
}
}

/* Manage Google Search label animation */
input#gsc-i-id1:focus+label.search-label,
input#gsc-i-id1:valid+label.search-label,
input#gsc-i-id1:active+label.search-label {
transform: translateY(-100%) scale(0.80);
}

label.search-label {
display: block;
position: absolute;
margin-top: -20px;
font-size: 15px;
font-family: "ExpensifyNeue", "Segoe UI Emoji", "Noto Color Emoji";
transform: translateY(-50%);
left: 20px;
color: $color-gray-label;
transform-origin: left top;
user-select: none;
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), color 150ms cubic-bezier(0.4, 0, 0.2, 1), top 500ms;
}

/* Hide the relevance, Ads, Branding, find more button & etc sections */
.gsc-above-wrapper-area,
.gsc-webResult.gsc-result .gsc-url-top,
.gsc-results-wrapper-visible .gsc-adBlock,
.gcsc-more-maybe-branding-root,
.gcsc-find-more-on-google-root {
display: none;
}

.gsc-control-cse {
background-color: $color-appBG;
border: $color-appBG;
font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
max-height: 80vh;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The fixed max-height may cause the content to not fully display on mobile devices. We replaced it to flex layout in PR #27619. : )

overflow-y: scroll;
}

.gs-title {
font-weight: bold;
}

/* Change the Google Search Button icon into Expensify icon button */
.gsc-search-button.gsc-search-button-v2 {
padding: 10px;
margin-top: -7px;
margin-left: 15px;
margin-right: 20px;
border-radius: 25px;
background-color: $color-green400;
cursor: pointer;
width: 40px;
height: 40px;
}

.gsc-search-button.gsc-search-button-v2:hover {
background-color: $color-green-hover;
}

.gsc-search-button.gsc-search-button-v2 svg {
fill: $color-text;
height: auto;
width: auto;
}

/* Change the path of the Google Search Button icon into Expensify icon */
.gsc-search-button.gsc-search-button-v2 svg path {
d: path('M8 1c3.9 0 7 3.1 7 7 0 1.4-.4 2.7-1.1 3.8l5.2 5.2c.6.6.6 1.5 0 2.1-.6.6-1.5.6-2.1 0l-5.2-5.2C10.7 14.6 9.4 15 8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7zm0 3c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4z');
fill-rule: evenodd;
clip-rule: evenodd;
}

.gsc-resultsbox-visible .gsc-webResult .gsc-result {
border-bottom: none;
}
7 changes: 7 additions & 0 deletions docs/annotations.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<Annotations>
<Annotation about="help.expensify.com/*" timestamp="0x00060214357b5e77" score="1.0">
<Label name="_include_"></Label>
<AdditionalData attribute="original_url" value="https://help.expensify.com/*"></AdditionalData>
</Annotation>
</Annotations>
11 changes: 11 additions & 0 deletions docs/assets/images/close.svg
View file
Open in desktop
studentofcoding marked this conversation as resolved.
Show resolved Hide resolved
studentofcoding marked this conversation as resolved.
Show resolved Hide resolved
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions docs/assets/images/search.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading