Skip to content

Commit

Permalink
Merge pull request #24598 from studentofcoding/Styling-update-help-ex…
Browse files Browse the repository at this point in the history
…pensify

Update Styling for Suggestion Pagination section of Search Feature
  • Loading branch information
marcochavezf authored Aug 19, 2023
2 parents 2004924 + e22f047 commit 03cf0b1
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 11 deletions.
3 changes: 3 additions & 0 deletions docs/_sass/_colors.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
$color-green400: #03D47C;
$color-green-icons: #8B9C8F;
$color-green-borders: #1A3D32;
$color-button-background: #1A3D32;
$color-button-hovered: #2C6755;
$color-green-highlightBG: #07271F;
$color-green-highlightBG-hover: #06231c;
$color-green-appBG: #061B09;
$color-green-hover: #00a862;
$color-light-gray-green: #AFBBB0;
Expand Down
75 changes: 74 additions & 1 deletion docs/_sass/_search-bar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

$color-appBG: $color-green-appBG;
$color-highlightBG: $color-green-highlightBG;
$color-highlightBG-hover: $color-green-highlightBG-hover;
$color-accent : $color-green400;
$color-borders: $color-green-borders;
$color-icons: $color-green-icons;
Expand All @@ -27,6 +28,7 @@ $color-gray-label: $color-gray-label;
display: block;
top: 0;
right: 0;
z-index: 2;
}

@media only screen and (max-width: $breakpoint-tablet) {
Expand Down Expand Up @@ -69,7 +71,7 @@ $color-gray-label: $color-gray-label;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 2;
z-index: 1;
}

/* All gsc id & class are Google Search relate gcse_0 is the search bar parent & gcse_1 is the search result list parent */
Expand Down Expand Up @@ -156,6 +158,13 @@ label.search-label {
font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
max-height: 80vh;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}

/* Hide the scrollbar */
.gsc-control-cse::-webkit-scrollbar {
display: none;
}

.gs-title {
Expand Down Expand Up @@ -195,3 +204,67 @@ label.search-label {
.gsc-resultsbox-visible .gsc-webResult .gsc-result {
border-bottom: none;
}


/* Change Font the Google Search result */
.gsc-control-cse .gsc-table-result {
font-family: "ExpensifyNeue", "Helvetica Neue", "Helvetica", Arial, sans-serif !important;
}

/* Change Font result Paragraph color */
.gsc-results .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet, .gs-fileFormatType {
color: $color-text;
}


/* Change the color of the Google Search Suggestion font */
.gs-spelling.gs-result {
color: $color-text;
}

/* Pagination related style */
.gsc-resultsbox-visible .gsc-results .gsc-cursor-box {
text-align: center;
}

.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page {
margin: 4px;
width: 28px;
height: 28px;
border-radius: 25px;
display: inline-block;
line-height: 2.5;
background-color: $color-accent;
font-weight: bold;
font-size: 11px;
}


/* Change the color & background of Google Search Pagination */
.gsc-cursor-next-page,
.gsc-cursor-final-page {
color: $color-text;
background-color: $color-appBG;
}

/* Change the color & background of Google Search Current Page */
.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page.gsc-cursor-current-page {
background-color: $color-accent;
color: $color-text;

&:hover {
text-decoration: none;
background-color: $color-accent;
}
}

/* Change the color & background of Google Search of Other Page */
.gsc-resultsbox-visible .gsc-results .gsc-cursor-box .gsc-cursor-page {
background-color: $color-button-background;
color: $color-text;

&:hover {
background-color: $color-button-hovered;
text-decoration: none;
}
}
35 changes: 25 additions & 10 deletions docs/assets/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -75,16 +75,6 @@ function injectFooterCopywrite() {
footer.innerHTML = `©2008-${new Date().getFullYear()} Expensify, Inc.`;
}

function openSidebar() {
document.getElementById('sidebar-layer').style.display = 'block';

// Make body unscrollable
const yAxis = document.documentElement.style.getPropertyValue('y-axis');
const body = document.body;
body.style.position = 'fixed';
body.style.top = `-${yAxis}`;
}

function closeSidebar() {
document.getElementById('sidebar-layer').style.display = 'none';

Expand All @@ -100,6 +90,31 @@ function closeSidebar() {
window.scrollTo(0, parseInt(scrollY || '0', 10) * -1);
}

function closeSidebarOnClickOutside(event) {
const sidebarLayer = document.getElementById('sidebar-layer');

if (event.target !== sidebarLayer) {
return;
}
closeSidebar();
}

function openSidebar() {
document.getElementById('sidebar-layer').style.display = 'block';

// Make body unscrollable
const yAxis = document.documentElement.style.getPropertyValue('y-axis');
const body = document.body;
body.style.position = 'fixed';
body.style.top = `-${yAxis}`;

// Close the sidebar when clicking sidebar layer (outside the sidebar search)
const sidebarLayer = document.getElementById('sidebar-layer');
if (sidebarLayer) {
sidebarLayer.addEventListener('click', closeSidebarOnClickOutside);
}
}

// Function to adapt & fix cropped SVG viewBox from Google based on viewport (Mobile or Tablet-Desktop)
function changeSVGViewBoxGoogle() {
// Get all inline Google SVG elements on the page
Expand Down

0 comments on commit 03cf0b1

Please sign in to comment.