Site layout refactor - Githubissues

colegoldsmith commented 7 months ago

Lots of updates here, mainly removing a lot of the default UI styles and re-writing the UI template files with tailwind classes. I'll try to list the notable changes:

Overhaul and removal of many default UI css files, optimized for tailwind
Overhaul the left nav and top nav. It now uses a drawer style component for the mobile view
Left nav is refactored an restyled to allow deeply nested items
Page content is now centered on wide screens
Page content is optimized to squish as little as possible for each screen width breakpoint
Removal of stylelint as it is now unsupported and clashes with prettier.

mlr commented 7 months ago

UI bundle preview build failure! :x:

[06:46:15] Using gulpfile ~/work/docs-ui/docs-ui/gulpfile.js [06:46:15] Starting 'lint'... [06:46:15] Starting 'lint:css'... [06:46:15] Starting 'lint:js'... [06:46:17] /home/runner/work/docs-ui/docs-ui/src/js/01-nav.js 115:1 warning This line has a length of 122. Maximum allowed is 120 max-len ✖ 1 problem (0 errors, 1 warning) [06:46:17] Finished 'lint:js' after 1.92 s [06:46:18] src/css/doc.css 1093:136 ✖ Expected single space before "{" block-opening-brace-space-before src/css/docsearch.css 109:27 ✖ Expected newline after ":" with a multi-line declaration declaration-colon-newline-after [06:46:18] 'lint:css' errored after 2.7 s [06:46:18] [31mError[39m in plugin "[36mgulp-stylelint[39m" Message: Failed with 2 errors [06:46:18] 'lint' errored after 2.7 s

mlr commented 7 months ago

Antora site build failure! :x:

[06:46:42] Using gulpfile ~/work/datastax-docs-site/datastax-docs-site/ui-bundle-preview/gulpfile.js [06:46:42] Starting 'bundle'... [06:46:42] Starting 'clean'... [06:46:42] Finished 'clean' after 21 ms [06:46:42] Starting 'lint:css'... [06:46:42] Starting 'lint:js'... [06:46:45] /home/runner/work/datastax-docs-site/datastax-docs-site/ui-bundle-preview/src/js/01-nav.js 115:1 warning This line has a length of 122. Maximum allowed is 120 max-len ✖ 1 problem (0 errors, 1 warning) [06:46:45] Finished 'lint:js' after 2.79 s [06:46:46] src/css/doc.css 1093:136 ✖ Expected single space before "{" block-opening-brace-space-before src/css/docsearch.css 109:27 ✖ Expected newline after ":" with a multi-line declaration declaration-colon-newline-after [06:46:46] 'lint:css' errored after 3.82 s [06:46:46] [31mError[39m in plugin "[36mgulp-stylelint[39m" Message: Failed with 2 errors [06:46:46] 'bundle' errored after 3.85 s

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build failure! :x:

[19:06:15] Using gulpfile ~/work/docs-ui/docs-ui/gulpfile.js [19:06:15] Starting 'lint'... [19:06:15] Starting 'lint:css'... [19:06:15] Starting 'lint:js'... [19:06:17] /home/runner/work/docs-ui/docs-ui/src/js/02-on-this-page.js 36:1 warning This line has a length of 167. Maximum allowed is 120 max-len ✖ 1 problem (0 errors, 1 warning) [19:06:17] Finished 'lint:js' after 1.89 s [19:06:18] src/css/doc.css 1093:136 ✖ Expected single space before "{" block-opening-brace-space-before [19:06:18] 'lint:css' errored after 2.61 s [19:06:18] [31mError[39m in plugin "[36mgulp-stylelint[39m" Message: Failed with 1 error [19:06:18] 'lint' errored after 2.61 s

mlr commented 7 months ago

Antora site build failure! :x:

[19:06:50] Using gulpfile ~/work/datastax-docs-site/datastax-docs-site/ui-bundle-preview/gulpfile.js [19:06:50] Starting 'bundle'... [19:06:50] Starting 'clean'... [19:06:50] Finished 'clean' after 19 ms [19:06:50] Starting 'lint:css'... [19:06:50] Starting 'lint:js'... [19:06:52] /home/runner/work/datastax-docs-site/datastax-docs-site/ui-bundle-preview/src/js/02-on-this-page.js 36:1 warning This line has a length of 167. Maximum allowed is 120 max-len ✖ 1 problem (0 errors, 1 warning) [19:06:52] Finished 'lint:js' after 2.33 s [19:06:53] src/css/doc.css 1093:136 ✖ Expected single space before "{" block-opening-brace-space-before [19:06:53] 'lint:css' errored after 3.28 s [19:06:53] [31mError[39m in plugin "[36mgulp-stylelint[39m" Message: Failed with 1 error [19:06:53] 'bundle' errored after 3.3 s

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

Realize this may be a work in progress, but some early feedback:

LangChain title icon is rendering on multiple lines instead of as icon: https://fantastic-adventure-593lpwy.pages.github.io/site-layout-refactor/astra-db-vector/integrations/langchain.html https://fantastic-adventure-593lpwy.pages.github.io/site-layout-refactor/astra-db-vector/integrations/astra-assistants-api.html
First column of table block is very narrow: https://fantastic-adventure-593lpwy.pages.github.io/site-layout-refactor/astra-db-vector/data/database-statuses.html

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages.

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

colegoldsmith commented 7 months ago

@mlr Those two issues should be fixed now!

djsauble commented 7 months ago

@colegoldsmith I'm not sure if this is something @kurtenj specced out in Figma, but the information hierarchy of the new nesting behavior looks wrong to me. In the example below, it looks like "Connect your database" is a child of "Load data" even though it's actually a sibling. I'd expect the text of items at the same level to share the same left alignment.

That said, this is still a big improvement over the completely flat nav from before, so I don't want perfect to be the enemy of good if this is a big lift to get this working as I described.

djsauble commented 7 months ago

@colegoldsmith It looks like we've lost the ability to scroll the right nav. See https://fantastic-adventure-593lpwy.pages.github.io/site-layout-refactor/astra-db-vector/clients/python.html#paginate-the-results-from-a-search

djsauble commented 7 months ago

@colegoldsmith It looks like page content is centered only on pages without a TOC. Again, I'd like @kurtenj to chime in here, but the transition between pages with a TOC and pages without a TOC is a bit jarring because the horizontal position of the content changes depending on which kind of page you're viewing.

With a TOC:

Without a TOC:

djsauble commented 7 months ago

@colegoldsmith @kurtenj The spacing between 1) the breadcrumb and title, and 2) the title and time commitment indicator, feels a bit cramped compared to the old layout.

Old layout:

New layout:

eric-schneider commented 7 months ago

+1 to all of @djsauble's points. @colegoldsmith I'll let you be the judge of what should be addressed pre- or post-merge.

@colegoldsmith It looks like we've lost the ability to scroll the right nav. See https://fantastic-adventure-593lpwy.pages.github.io/site-layout-refactor/astra-db-vector/clients/python.html#paginate-the-results-from-a-search

^ regarding the above feedback item, I also noticed that the page TOC (right nav) no longer highlight's the current section as I scroll. Might be a symptom of the same underlying issue, but wanted to call it out specifically just in case.

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

colegoldsmith commented 7 months ago

Thanks @djsauble I've fixed the following issues you mentioned:

ToC was not scrollable. I added overflow to it.
Page content jumped around when no ToC. I fixed this by making the space for the ToC always visible.
Page header and breadcrumbs were too tight. I added padding

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

djsauble commented 7 months ago

Great improvement, thanks!

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

mlr commented 7 months ago

Antora site build successful! :white_check_mark: Deploying draft to GitHub Pages. Deployment successful! View draft

mlr commented 7 months ago

UI bundle preview build successful! :white_check_mark: Deploying preview to GitHub Pages. Deployment successful! View preview

riptano / docs-ui

Site layout refactor #61