From 1c2f4a77d089f3fd97ce5d0ef93f9f57ae021522 Mon Sep 17 00:00:00 2001 From: Eric Date: Wed, 6 Nov 2024 14:35:48 -0600 Subject: [PATCH] Website: Update sidebar on article template page and scrolling sidebar functions (#23594) Changes: - Updated the styles and layout of the article template page sidebar to match the latest wireframes - Updated the scrolling function for sticky sidebars on articles and docs pages - Updated the sidebar CTA on article pages to check `typeof me` instead of `me`. --- website/assets/images/icon-api-16x16@2x.png | Bin 0 -> 471 bytes .../assets/images/icon-contact-16x16@2x.png | Bin 0 -> 507 bytes website/assets/images/icon-docs-16x16@2x.png | Bin 0 -> 320 bytes website/assets/images/icon-edit-16x16@2x.png | Bin 0 -> 355 bytes .../assets/images/icon-guides-16x16@2x.png | Bin 0 -> 500 bytes .../js/pages/articles/basic-article.page.js | 6 ++- .../js/pages/docs/basic-documentation.page.js | 10 ++-- .../styles/pages/articles/basic-article.less | 50 +++++++++++++----- .../views/pages/articles/basic-article.ejs | 30 ++++------- 9 files changed, 58 insertions(+), 38 deletions(-) create mode 100644 website/assets/images/icon-api-16x16@2x.png create mode 100644 website/assets/images/icon-contact-16x16@2x.png create mode 100644 website/assets/images/icon-docs-16x16@2x.png create mode 100644 website/assets/images/icon-edit-16x16@2x.png create mode 100644 website/assets/images/icon-guides-16x16@2x.png diff --git a/website/assets/images/icon-api-16x16@2x.png b/website/assets/images/icon-api-16x16@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..a821edc8013dcd0bb6277f4df86acb2db500ab87 GIT binary patch literal 471 zcmeAS@N?(olHy`uVBq!ia0vp^iXhCv3?vh*jADV5Uw}`DE0FH)U)a;XsAs~W?*7Ff zM*rgOejs}#lsf?`0#g7~v!oNOtgC-<7fA2Io<1N0q$_Gsaxl< z7YI1KUmx)P{`vL&1?LS8Ovs-wRdIGX0|TSHr;B5V#p%6MZcl1f;As=)6U@E3>-DzN zzxQVd3urDe-kY7~^5dC#V+%(TUsZO&hTxvC?g@sRWp-UZFL35@p0{pz`uz|;m)VK5 zOFb8l@H1}cW@HO9-e+WWL`C2H_=^V41BQK(A18|{A6VZr@8~9yKxPcKsC|1{-P@AA8@PIY%D_1v3! zdryVby{WsCysrPeuekbl-Oj=g^-Tf09lv_NYm-eo`NFy8O5I62vx0QbP0l+XkK2_M%| literal 0 HcmV?d00001 diff --git a/website/assets/images/icon-contact-16x16@2x.png b/website/assets/images/icon-contact-16x16@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..067e513d6b21c9f74261ec1d6ed0ac2cfdc2a42d GIT binary patch literal 507 zcmeAS@N?(olHy`uVBq!ia0vp^3P7yL!3-q(e?%q&Dc1m>5LY1G)4vFay89RR^e=Aj zpWolVyt{v4cmJaP{`EjXAOj-R+CRT%0+0(ry_9h<-}-KKTizdDA?9S*LZfWT<+rU$8mQnc3)_!9M@xY`@N2K4kO! zn6T3(*JEj$XP=oCcAYsk!gfmKTkexeuOBOQCO(e^GD$qVE31 zKt_N6Y9ONv#9h+Uzp%T1Q4d%gBs*boCrAV+3ljf1-*5&{zi>&AUob<%`~-#f0{avC zClmzScUa$WeuH6V@N=N_0#6sm5R21qCtC^~R^VX>RN|X&`R#vwFT1!xva#pt*y!PG5vP*Tynwzcm;n8G)f=?x2&pG;q=zC&=@ zI)R2Lj>#UkS~X@i8*DO<)s%3&aY9wEWrEAMm7#voTmERZJPb2zag#8#k#;m#Qr7k} z&M?36zu55&?4`U>Ehkv>i}&pPedY4!Ud#WCyLjZ-q&w=JfNo{*boFyt=akR{05P_M AjQ{`u literal 0 HcmV?d00001 diff --git a/website/assets/images/icon-edit-16x16@2x.png b/website/assets/images/icon-edit-16x16@2x.png new file mode 100644 index 0000000000000000000000000000000000000000..4fa15ee9c3d490da1f2d2cba1ab44f810a70e985 GIT binary patch literal 355 zcmeAS@N?(olHy`uVBq!ia0vp^3P7yL!3-q(e?%q&DVqSF5LY1G*}t&2e{pyJ;-3CR zK-2{$f!yx?g6^v?$}fFhMg?)(7i7cL3%3ub7jSGfN^VZr_e zhY9-&0t^HM)=Pb9+5nV3?CIhdVsU!w<%@hx20X0~vrZo~W7+cl|GIT&A|@Rc%eU#= z^yIf_-U9h!sX_A%wzf_&x_Pa+cID5z=hn~dxcgWBO#fMzz)+(**KEQr`7GKM`|ItG zkIk<(J{MErzwlPdh9N(k+l`NL2W#zdhP%uq90zP)SgPBxGR|>%DstvQn_PkIMr$_5 z(uI3>RDaleIL2Q7c*EH{h8(@q9hws=ZDc97KaOTgk~p0i*7{J+0SXQ$ZY zvS;glKhWUT;qj1H;9h>C+DGRnZ|&0?vNg8u@xM5y*KqJ}ID0yz+)(gXWr`<0Va#*PTV4=WbMA=r$4)gh)Lt+jZyibs(Vfx-g2ZnW$`T2bsv6q zMoRAce9vO{;iI!0${1ODe{V>gX)U4gWe@*r!}`drKcnw_PnMr1WsvtlUFF894F)<7 z4<7w(q{9;`FwJM%607LdW<2xbIRh#;Z+RM@{ob-FEBM;)66V~GeZPKv)shXYNKmfc gvG~__`9<{%cIC>sF3&^jfC10o>FVdQ&MBb@0NHrptN;K2 literal 0 HcmV?d00001 diff --git a/website/assets/js/pages/articles/basic-article.page.js b/website/assets/js/pages/articles/basic-article.page.js index 1bda775251..e3fc6d7a81 100644 --- a/website/assets/js/pages/articles/basic-article.page.js +++ b/website/assets/js/pages/articles/basic-article.page.js @@ -6,6 +6,8 @@ parasails.registerPage('basic-article', { articleHasSubtitle: false, articleSubtitle: undefined, subtopics: [], + lastScrollTop: 0, + scrollDistance: 0, }, // ╦ ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦ ╔═╗ @@ -81,8 +83,10 @@ parasails.registerPage('basic-article', { if (rightNavBar) { if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) { rightNavBar.classList.add('header-hidden'); - } else { + this.lastScrollTop = scrollTop; + } else if(scrollTop < this.lastScrollTop - 60) { rightNavBar.classList.remove('header-hidden'); + this.lastScrollTop = scrollTop; } } this.scrollDistance = scrollTop; diff --git a/website/assets/js/pages/docs/basic-documentation.page.js b/website/assets/js/pages/docs/basic-documentation.page.js index 86139ca29c..c402f57d96 100644 --- a/website/assets/js/pages/docs/basic-documentation.page.js +++ b/website/assets/js/pages/docs/basic-documentation.page.js @@ -18,7 +18,7 @@ parasails.registerPage('basic-documentation', { relatedTopics: [], scrollDistance: 0, navSectionsByDocsSectionSlug: {}, - + lastScrollTop: 0, }, computed: { @@ -314,11 +314,11 @@ parasails.registerPage('basic-documentation', { // If the right nav bar exists, add and remove a class based on the current scroll position. if (rightNavBar) { if (scrollTop > this.scrollDistance && scrollTop > windowHeight * 1.5) { - rightNavBar.classList.add('header-hidden', 'scrolled'); - } else if (scrollTop === 0) { - rightNavBar.classList.remove('header-hidden', 'scrolled'); - } else { + rightNavBar.classList.add('header-hidden'); + this.lastScrollTop = scrollTop; + } else if(scrollTop < this.lastScrollTop - 60) { rightNavBar.classList.remove('header-hidden'); + this.lastScrollTop = scrollTop; } } // If back to top button exists, add and remove a class based on the current scroll position. diff --git a/website/assets/styles/pages/articles/basic-article.less b/website/assets/styles/pages/articles/basic-article.less index 63b98d05e0..1beaf7f1b7 100644 --- a/website/assets/styles/pages/articles/basic-article.less +++ b/website/assets/styles/pages/articles/basic-article.less @@ -131,25 +131,45 @@ transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; - [purpose='sidebar-link'] { - margin-bottom: 8px; - display: block; - color: #515774; - &:hover { - text-decoration: none; - color: @core-fleet-black; + } + [purpose='sidebar-link'] { + margin-bottom: 12px; + display: flex; + flex-direction: row; + align-items: center; + color: #515774; + img { + height: 16px; + width: 16px; + display: inline; + margin-right: 12px; + } + &:hover { + text-decoration: none; + color: @core-fleet-black; + img { + filter: brightness(0.5); } } } - [purpose='docs-links'] { + [purpose='edit-link'] { + padding-top: 24px; + padding-bottom: 16px; + margin-top: 24px; + border-top: 1px solid #E2E4EA; a { - display: block; + margin-bottom: 0px; } } + // [purpose='docs-links'] { + // a { + // display: block; + // } + // } [purpose='social-share-buttons'] { - padding-bottom: 24px; + padding-top: 16px; + padding-bottom: 16px; margin-bottom: 24px; - border-bottom: 1px solid #E2E4EA; a { margin-right: 16px; } @@ -159,9 +179,13 @@ } } [purpose='subtopics'] { - padding-bottom: 24px; margin-bottom: 24px; - border-bottom: 1px solid #E2E4EA; + a { + margin-bottom: 8px; + &:last-of-type { + margin-bottom: 0px; + } + } } .header-hidden { // For scrolling the sidebar with the sticky header transform: translateY(-120px); diff --git a/website/views/pages/articles/basic-article.ejs b/website/views/pages/articles/basic-article.ejs index 9331b25846..936223128d 100644 --- a/website/views/pages/articles/basic-article.ejs +++ b/website/views/pages/articles/basic-article.ejs @@ -46,7 +46,6 @@