From 7190b74f2fab7ee0f92baff16c6bb247f11860de Mon Sep 17 00:00:00 2001 From: Eric Date: Fri, 17 Mar 2023 19:36:15 -0500 Subject: [PATCH] Website: browser compatibility updates (Edge v17, Chrome v55, Firefox v54, Opera v42, & Safari v10) (#10583) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes: #10496 Changes: - Fixed alignment issues with the component's page indicator (Edge v16 & Safari 10) - Added a hard-coded height to embedded youtube videos in Markdown content to fix it rendering with a height of 0 (Edge v17 & Firefox v54) - Fixed table example syntax highlighting (Edge v17, Chrome v55, Firefox v54, Opera v42, & Safari v10) - Added a set width to the edit page button on tables pages (Safari v10, Firefox v54) - Fixed a bug with the sidebar height on tables pages (Edge v17) - Fixed styling on the pricing calculator inputs (Safari v10 & Firefox v54) - Fixed a layout issue with the pricing calculator call-to-action buttons (Safari v10) - Hid browser-specific form input buttons (Firefox v54) - Fixed the sidebar CTA image on documentation pages (Opera v42) - Fixed a CSS issue with the user story banner on `/platform` (Safari v10, Firefox v54, Chrome v55, Opera v42) - Updated the documentation page script to only copy links to the user's clipboard if the user's browser supports it. - Updated minimum browser versions for Edge, Chrome, and Opera for async functions support. (Edge v16 » Edge v17, Chrome v51 » Chrome v55, Opera v38 » Opera v42) --- .../js/pages/docs/basic-documentation.page.js | 28 ++++++++++--------- .../js/pages/osquery-table-details.page.js | 4 ++- .../scrollable-tweets.component.less | 1 + .../styles/pages/articles/articles.less | 2 +- .../styles/pages/articles/basic-article.less | 1 + .../pages/docs/basic-documentation.less | 2 ++ website/assets/styles/pages/homepage.less | 1 + .../styles/pages/osquery-table-details.less | 3 +- website/assets/styles/pages/platform.less | 8 +++--- website/assets/styles/pages/pricing.less | 3 +- website/assets/styles/pages/upgrade.less | 8 ++++++ website/views/layouts/layout.ejs | 6 ++-- website/views/pages/platform.ejs | 6 ++-- website/views/pages/pricing.ejs | 8 +++--- 14 files changed, 50 insertions(+), 31 deletions(-) diff --git a/website/assets/js/pages/docs/basic-documentation.page.js b/website/assets/js/pages/docs/basic-documentation.page.js index 8adc1d5bd6..23156c0f94 100644 --- a/website/assets/js/pages/docs/basic-documentation.page.js +++ b/website/assets/js/pages/docs/basic-documentation.page.js @@ -177,20 +177,22 @@ parasails.registerPage('basic-documentation', { for(let key in Object.values(headingsOnThisPage)){ let heading = headingsOnThisPage[key]; $(heading).click(()=> { - // Find the child element - let linkToCopy = _.first($(heading).find('a.markdown-link')); - // If this heading has already been clicked and still has the copied class we'll just ignore this click - if(!$(heading).hasClass('copied')){ - // If the link's href is missing, we'll copy the current url (and remove any hashes) to the clipboard instead - if(linkToCopy) { - navigator.clipboard.writeText(linkToCopy.href); - } else { - navigator.clipboard.writeText(heading.baseURI.split('#')[0]); + if(typeof navigator.clipboard !== 'undefined') { + // Find the child element + let linkToCopy = _.first($(heading).find('a.markdown-link')); + // If this heading has already been clicked and still has the copied class we'll just ignore this click + if(!$(heading).hasClass('copied')){ + // If the link's href is missing, we'll copy the current url (and remove any hashes) to the clipboard instead + if(linkToCopy) { + navigator.clipboard.writeText(linkToCopy.href); + } else { + navigator.clipboard.writeText(heading.baseURI.split('#')[0]); + } + // Add the copied class to the header to notify the user that the link has been copied. + $(heading).addClass('copied'); + // Remove the copied class 5 seconds later, so we can notify the user again if they re-cick on this heading + setTimeout(()=>{$(heading).removeClass('copied');}, 5000); } - // Add the copied class to the header to notify the user that the link has been copied. - $(heading).addClass('copied'); - // Remove the copied class 5 seconds later, so we can notify the user again if they re-cick on this heading - setTimeout(()=>{$(heading).removeClass('copied');}, 5000); } }); } diff --git a/website/assets/js/pages/osquery-table-details.page.js b/website/assets/js/pages/osquery-table-details.page.js index ac861ed4e0..89b6f653a0 100644 --- a/website/assets/js/pages/osquery-table-details.page.js +++ b/website/assets/js/pages/osquery-table-details.page.js @@ -82,7 +82,8 @@ parasails.registerPage('osquery-table-details', { // Now iterate through the keywordsToHighlight, replacing all matches in the elements innerHTML. let replacementHMTL = block.innerHTML; for(let keywordInExample of keywordsToHighlight) { - replacementHMTL = replacementHMTL.replaceAll(keywordInExample, ''+keywordInExample+''); + let regexForThisExample = new RegExp(keywordInExample, 'g'); + replacementHMTL = replacementHMTL.replace(regexForThisExample, ''+keywordInExample+''); } $(block).html(replacementHMTL); // After we've highlighted our keywords, we'll highlight the rest of the codeblock @@ -97,6 +98,7 @@ parasails.registerPage('osquery-table-details', { })(); // Adjust the height of the sidebar navigation to match the height of the html partial (()=>{ + $('[purpose="table-of-contents"]').css({'max-height': 120}); let tablePartialHeight = $('[purpose="table-container"]').height(); $('[purpose="table-of-contents"]').css({'max-height': tablePartialHeight - 120}); })(); diff --git a/website/assets/styles/components/scrollable-tweets.component.less b/website/assets/styles/components/scrollable-tweets.component.less index 6cd1fa4c72..fb896fc06e 100644 --- a/website/assets/styles/components/scrollable-tweets.component.less +++ b/website/assets/styles/components/scrollable-tweets.component.less @@ -22,6 +22,7 @@ margin-top: 80px; padding-bottom: 16px; scrollbar-width: none; + -ms-overflow-style: none; } [purpose='tweet-card'] { diff --git a/website/assets/styles/pages/articles/articles.less b/website/assets/styles/pages/articles/articles.less index fb282d5428..28a08a6436 100644 --- a/website/assets/styles/pages/articles/articles.less +++ b/website/assets/styles/pages/articles/articles.less @@ -91,7 +91,7 @@ color: @core-fleet-black-50; } p { - margin-block-end: 0px; + margin-bottom: 0px; } } } diff --git a/website/assets/styles/pages/articles/basic-article.less b/website/assets/styles/pages/articles/basic-article.less index ca7ab50a64..9afd7b9f7a 100644 --- a/website/assets/styles/pages/articles/basic-article.less +++ b/website/assets/styles/pages/articles/basic-article.less @@ -251,6 +251,7 @@ position: relative; margin-bottom: 40px; width: 100%; + min-height: 456px; padding-bottom: 57%; iframe { position: absolute; diff --git a/website/assets/styles/pages/docs/basic-documentation.less b/website/assets/styles/pages/docs/basic-documentation.less index 0e858a06fb..f8432df1d6 100644 --- a/website/assets/styles/pages/docs/basic-documentation.less +++ b/website/assets/styles/pages/docs/basic-documentation.less @@ -422,6 +422,7 @@ margin-bottom: 16px; img { width: 124px; + height: 124px; } } @@ -697,6 +698,7 @@ position: relative; margin-bottom: 40px; width: 100%; + min-height: 456px; padding-bottom: 57%; iframe { position: absolute; diff --git a/website/assets/styles/pages/homepage.less b/website/assets/styles/pages/homepage.less index fa115a5ece..257433a534 100644 --- a/website/assets/styles/pages/homepage.less +++ b/website/assets/styles/pages/homepage.less @@ -341,6 +341,7 @@ position: relative; padding-bottom: 54.5%; padding-top: 25px; + min-height: 456px; width: 100%; iframe { position: absolute; diff --git a/website/assets/styles/pages/osquery-table-details.less b/website/assets/styles/pages/osquery-table-details.less index a92a4df4fe..53ac9e8da7 100644 --- a/website/assets/styles/pages/osquery-table-details.less +++ b/website/assets/styles/pages/osquery-table-details.less @@ -79,6 +79,7 @@ } [purpose='left-sidebar'] { scrollbar-width: none; + -ms-overflow-style: none; background: #FFF; min-width: 245px; max-width: 250px; @@ -327,7 +328,7 @@ cursor: pointer; border: 1px solid @core-vibrant-blue; border-radius: 4px; - width: fit-content; + width: 106px; padding: 8px 12px; text-decoration: none; line-height: 20px; diff --git a/website/assets/styles/pages/platform.less b/website/assets/styles/pages/platform.less index 704b37f873..576c6aa7a7 100644 --- a/website/assets/styles/pages/platform.less +++ b/website/assets/styles/pages/platform.less @@ -85,7 +85,7 @@ width: 100%; height: 180px; } - img:not(a > img) { + [purpose='schrodinger-logo'] { position: relative; display: inline; height: 100px; @@ -278,7 +278,7 @@ z-index: 0; height: 182px; } - img:not(a > img) { + [purpose='schrodinger-logo'] { left: 15px; } } @@ -381,9 +381,9 @@ width: calc(~'18px + 100%'); height: calc(~'56px + 100%'); } - img:not(a > img) { + [purpose='schrodinger-logo'] { position: relative; - display: inline; + display: block; height: 100px; z-index: 1; top: 0px; diff --git a/website/assets/styles/pages/pricing.less b/website/assets/styles/pages/pricing.less index 2eacbac8e6..b193735f14 100644 --- a/website/assets/styles/pages/pricing.less +++ b/website/assets/styles/pages/pricing.less @@ -155,9 +155,10 @@ width: 110%; } input[type='number'] { - -moz-appearance: none; + -moz-appearance: textfield; -webkit-appearance: none; appearance: textfield; + line-height: 1; } [purpose='enterprise-calculator'] { background: #F9FAFC; diff --git a/website/assets/styles/pages/upgrade.less b/website/assets/styles/pages/upgrade.less index 8c1f6074ef..3ed108d468 100644 --- a/website/assets/styles/pages/upgrade.less +++ b/website/assets/styles/pages/upgrade.less @@ -51,9 +51,17 @@ height: 48px; font-size: 16px; color: @core-fleet-black; + -webkit-appearance: none; + } + select { + // for hiding the