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.

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

Redesign home page UI #1119

Merged
merged 12 commits into from
Aug 9, 2023
Merged

Redesign home page UI #1119

merged 12 commits into from
Aug 9, 2023

Conversation

pierrephz
Copy link
Contributor

Summary

New home page UI for better user experience

Screenshots

docs-preview

Changes

  • UI layout
  • Use TTUI for more consistency with our identity
  • Add a Try it out section
  • Rework the What's new in vX UI

Notes for Reviewers

@nejraselimovic @benolayinka ; to display new features on the homepage, please add the selected updates that need to be highlighted and add them on top of the markdown file in the right tags (see screenshot below)

Group 223

Checklist

  • Scope: The referenced issue is addressed, there are no unrelated changes.
  • Run Locally: Verified that the docs build using make server, posted screenshots, verified external links. Test with HUGO_PARAMS_SEARCH_ENABLED=true if style changes will affect the search bar.
  • New Features Marked: Documentation for new features is marked using the new-in-version shortcode, according to the guidelines in CONTRIBUTING.
  • Style Guidelines: Documentation obeys style guidelines in CONTRIBUTING.
  • Commits: Commit messages follow guidelines in CONTRIBUTING, there are no fixup commits left.

doc/themes/the-things-stack/assets/js/theme.js Outdated Show resolved Hide resolved
yarn.lock Outdated Show resolved Hide resolved
@KrishnaIyer KrishnaIyer force-pushed the doc/home-page-ui branch 2 times, most recently from 4c57fd3 to 4fd3de2 Compare June 22, 2023 08:43
@mjamescompton
Copy link
Contributor

@pierrephz Are you going to add the changes to the hackathon?

@pierrephz
Copy link
Contributor Author

@mjamescompton I am going to update it with TTUI header and footer, then we can release

@KrishnaIyer
Copy link
Contributor

Great @pierrephz and @mjamescompton; This will be super cool to have.

@pierrephz
Copy link
Contributor Author

Latest changes have been done here, now @KrishnaIyer you can work on the search bar feature.
I had to replace auto generated links with static links, so someone needs to redo them

@KrishnaIyer KrishnaIyer added this to the Aug 2023 milestone Jul 5, 2023
@mjamescompton
Copy link
Contributor

There are a few open issues and discussions on the header which are now blocking this, shall we pull them all together and push to get this done

https://github.com/TheThingsIndustries/design/issues/128
https://github.com/TheThingsIndustries/thethingsindustries.com/issues/644
https://thethingsindustries.slack.com/archives/C04Q4Q0BTS7/p1688992309656839

cc @KrishnaIyer @kschiffer

@KrishnaIyer
Copy link
Contributor

Yes that would be great. Thanks!

@mjamescompton
Copy link
Contributor

I have reversed the changes to the header and footer as the conversation on the topic of the header is taking to long to resolve.

I created a new issue so that this get done @KrishnaIyer please keep track.
#1145

@mjamescompton mjamescompton requested review from johanstokking and KrishnaIyer and removed request for KrishnaIyer July 19, 2023 14:55
@mjamescompton
Copy link
Contributor

@johanstokking Adding you on behalf of @KrishnaIyer to do a quick check

@johanstokking
Copy link
Member

johanstokking commented Jul 19, 2023

I'm trying to run this locally but can't make deps:

$ make deps
curl -o doc/data/frequency-plans.yml https://raw.githubusercontent.com/TheThingsNetwork/lorawan-frequency-plans/master/frequency-plans.yml
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 17586  100 17586    0     0  22450      0 --:--:-- --:--:-- --:--:-- 22546
go mod download
yarn --cwd doc
yarn install v1.22.19
warning ../../package.json: No license field
warning ../../../../package.json: No license field
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
error https://ttui.thethingsindustries.com/release/ttui-1.7.2.tar.gz: Integrity check failed for "@ttui/design" (computed integrity doesn't match our records, got "sha512-LOD8pj8CSk3PxO160FO/gSQM638GJwXOtNA3mLdwxf/TFqyAPHleJqeNfuJLxew6JZXsUyaelYjhz+m0p8OJmw== sha1-DlYojC9ehBSt3v2TrQOjeHGVzMM=")
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
make: *** [js.deps] Error 1

Anything I'm doing wrong?

Somehow it works in CI.

@kschiffer
Copy link
Contributor

kschiffer commented Jul 20, 2023

Try just make

EDIT: actually, try yarn cache clean, deleting yarn.lock and then make.

We've overwritten a previous TTUI release which is causing this issue.

@johanstokking
Copy link
Member

Works now, thanks.

@pierrephz
Copy link
Contributor Author

  • I find the contrast of the tile backgrounds on the homepage too high. The light lines distract from reading the text

@johanstokking I did some UI fixes:

Tiles:

  • Reduced the opacity of the background pattern
  • Increased title font size
  • Increased body text font size

→ Less distraction to read, more contrast and more impact

What's new section:

  • Changed color theme from dark to light
  • Increased title font size
  • Increased body text font size of the items
  • Removed the background pattern

→ Less distraction, better readability

@johanstokking I think the version number is already automated here

<p class="ttui-body fs-xl fw-bolder mb-cs-xl c-text-01">What's new in v{{- .Site.Params.version -}}</p>

If you pull master and rebase it should display the latest version of the docs.

The purpose of the issue #1093 is to automate the content of the what's new section; now on this new version of the home page, the highlighted new releases have to be added by hand (see screenshot below).

I can't do this myself, a dev should take this up, but I dont think it should block the first release of this docs update.

243310350-3f48a05d-4991-4904-a9dd-34e9785c157f

@johanstokking
Copy link
Member

I can't do this myself, a dev should take this up, but I dont think it should block the first release of this docs update.

Are you referring to #1119 (comment) ? If so, we should fix that before merging this.

@pierrephz
Copy link
Contributor Author

I can't do this myself, a dev should take this up, but I dont think it should block the first release of this docs update.

Are you referring to #1119 (comment) ? If so, we should fix that before merging this.

Then @mjamescompton or @ryaplots, could you have a look?

@ryaplots
Copy link
Contributor

I can't do this myself, a dev should take this up, but I dont think it should block the first release of this docs update.

Are you referring to #1119 (comment) ? If so, we should fix that before merging this.

Then @mjamescompton or @ryaplots, could you have a look?

I am picking this up

@pierrephz pierrephz requested a review from KrishnaIyer August 2, 2023 15:05
Copy link
Contributor

@KrishnaIyer KrishnaIyer left a comment

Choose a reason for hiding this comment

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

Looks great. Final couple of comments from me

  1. In the current docs, we display the latest version number, on the right of the Logo. Do we not want this anymore?
Screenshot 2023-08-03 at 09 56 08
  1. The navigation items collapse on a laptop viewport. Should we fix this?
Screenshot 2023-08-03 at 09 55 15

@pierrephz
Copy link
Contributor Author

  1. In the current docs, we display the latest version number, on the right of the Logo. Do we not want this anymore?

We removed the version number in the header to have it on the page only and save some space in the header

  1. The navigation items collapse on a laptop viewport. Should we fix this?

@mjamescompton fixed the breakpoints so the header doesn't collapse on regular laptop screen anymore

@pierrephz pierrephz requested a review from KrishnaIyer August 3, 2023 09:35
Copy link
Contributor

@KrishnaIyer KrishnaIyer left a comment

Choose a reason for hiding this comment

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

Ok thanks. This looks beautiful. @pierrephz great work.

@johanstokking; the final blessing please.

@johanstokking
Copy link
Member

Awesome people, this is very good work.

@KrishnaIyer
Copy link
Contributor

I think @nejraselimovic's comment is addressed to I'm merging this.

@KrishnaIyer KrishnaIyer merged commit dbbba97 into master Aug 9, 2023
@KrishnaIyer KrishnaIyer deleted the doc/home-page-ui branch August 9, 2023 12:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants