[KOB-36292] Enhance landing page by new figma design

kobiton / docs

The content for Kobiton Docs.

https://docs.kobiton.com

3 stars 1 forks source link

[KOB-36292] Enhance landing page by new figma design #133

Closed huyvankobiton closed 1 year ago

huyvankobiton commented 1 year ago

Enhance the landing page with the Figma design (JIRA: https://kobiton.atlassian.net/browse/KOB-36292 and Figma: https://www.figma.com/file/y0LBm23UPKunKPlTAgUGBM/Kobiton-Dashboard?type=design&node-id=22456-266177&mode=design&t=LW12PYotGrH20Wng-4)
Fix footer UI when viewing mobile devices

Summary

Related PRs, issues, or features (optional)

Metadata

[x] Adds new file(s)
[x] Edits existing file(s)
[x] Removes file(s)

PR contributor checklist

[x] My PR follows the Kobiton Docs contributor guidelines, meaning:
- My content contains correct spelling and grammar.
- My files are named and structured correctly.
- My style and voice follows the Microsoft Style Guide.
- I added all new pages to their section's nav.adoc file.
- I removed all localizations (like en-us) from my URLs.

huyvankobiton commented 1 year ago

Hey @huyvankobiton , the changes you made so far are great! Thanks for doing this. One last thing I'm seeing:

The light purple design at the bottom appears to be too short and is creating a lot of white space behind the tiles. Could you see the examples below to fix the height? Thanks!

Here's 3 examples from the Figma file:

Here's 3 examples from the live preview:

Hi @internetisaiah , Maybe you have not set the correct height according to the Figma design

The light purple design at the bottom always auto-scales by screen size on the bottom body content. I don't set hard height value because it can break UI when responsive to another screen size without Figma design.

internetisaiah commented 1 year ago

@huyvankobiton , ah I see now - thanks for clarifying how it works. In that case, we should probably set minimum boundaries to ensure the light purple doesn't move up too far like in this video:

https://github.com/kobiton/docs/assets/95643215/e708ed06-1e15-494b-83cf-9825eaa614c9

huyvankobiton commented 1 year ago

@huyvankobiton , ah I see now - thanks for clarifying how it works. In that case, we should probably set minimum boundaries to ensure the light purple doesn't move up too far like in this video:

Screen.Recording.2023-08-02.at.3.33.28.PM.mov

I updated the code to fix the image background on the footer of the body content.