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.

Sign up for GitHub

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

Jump to bottom

Add top navigation, add new assets, and edit text on fleetdm.com #517

Merged
merged 9 commits into from
Mar 23, 2021
Merged

Add top navigation, add new assets, and edit text on fleetdm.com #517

merged 9 commits into from
Mar 23, 2021

Conversation

noahtalerman
Copy link
Member

This PR includes changes for the Daily Web Push 2021.3.19.
Changes include:

  • Addition of log destinations diagram
  • Addition of Kubernetes, AWS and Google Cloud logos
  • Moving of OS logos to the hero section
  • Various text changes (see dev notes)
  • Addition of top navigation (including responsive version)

@noahtalerman noahtalerman added the #g-digital-experience https://fleetdm.com/handbook/digital-experience label Mar 23, 2021
@noahtalerman
Copy link
Member Author

@mike-j-thomas can you please take a QA pass before approving these changes? Feel free to add any comments for desired changes here.

To pull down the latest changes for QA:

  1. Open the "Terminal" application on your mac and navigate to your /fleet/website directory
  2. Run the command git fetch upstream pull/517/head:add-navigation-items-to-website
  3. Run the command git checkout add-navigation-items-to-website
  4. Run sails lift and navigate to https://localhost:1337

@noahtalerman
Copy link
Member Author

noahtalerman commented Mar 23, 2021 •
edited
Loading

The new log destination graphic potentially needs changes for mobile screen widths. The image becomes very small...

Screen Shot 2021-03-22 at 6 23 09 PM

@mike-j-thomas
Copy link
Member

mike-j-thomas commented Mar 23, 2021 •
edited
Loading

Yes, the image might need a re-think for mobile. At the very least, the left and right padding needs to be reduced 75%.

@mike-j-thomas
Copy link
Member

Sails lift command didn't work. I don't think I have Sails installed on my machine.

mikermcneil
mikermcneil reviewed Mar 23, 2021
View reviewed changes
website/views/layouts/layout.ejs Outdated
<a style="border-radius: 4px;" class="dropdown-item py-2 px-3" target="_blank" href="/hall-of-fame" data-text="Hall of fame">Hall of fame</a>
</div>
</div>
<a target="_blank" href="https://blog.fleetdm.com" class="header-link d-flex align-items-center px-3 py-2 mr-4 text-decoration-none" style=" text-decoration: none;line-height: 23px;">Blog</a>
Copy link
Member

Choose a reason for hiding this comment

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

For consistency w/ the other link, I think this should be /blog

@mikermcneil
Copy link
Member

Responsive implementation looks excellent, even handles the "resize to get bigger while menu is open" test.

@mikermcneil
Copy link
Member

The new log destination graphic potentially needs changes for mobile screen widths. The image becomes very small...

I went ahead and just made the image go away on small screens: 82d78eb

@mike-j-thomas
Copy link
Member

Looking good, cheers Noah.

Couple of small nit-picks.

  • Google cloud logo looks fuzzy compared with the other two icons. Did the @1x version get pushed up or something?
  • GitHub icon should also light up purple on hover. I just saw that this is a png rather than .svg, so maybe easier said than done. If it's going to take considerable effort, let me know, and I will wind my neck back in.

Screen Shot 2021-03-23 at 15 26 39

Screen Shot 2021-03-23 at 15 29 02

@mike-j-thomas
Copy link
Member

The new log destination graphic potentially needs changes for mobile screen widths. The image becomes very small...

I went ahead and just made the image go away on small screens: 82d78eb

Actually, I'm not sure that we need to do that. Looks like there is a lot of white space on either side of the graphic in the png.

I've cropped the image tighter. That should now allow it to fill the width of the screen on mobile.

graphic-log-location.zip

@mike-j-thomas
Copy link
Member

Like this:

Screen Shot 2021-03-23 at 15 39 19

@mikermcneil
Copy link
Member

That text is still pretty small and hard to read-- let's leave it removed on mobile for now, doesn't hurt and there'll be plenty of more changes over time

@mike-j-thomas
Copy link
Member

mike-j-thomas commented Mar 23, 2021 •
edited
Loading

That text is still pretty small and hard to read-- let's leave it removed on mobile for now, doesn't hurt and there'll be plenty of more changes over time

True, but I would imagine that users would recognize the icons/logos that appeal to them. I would much prefer to have to pinch and zoom an image a bit, than have the info denied to me.

If the image were ornamental, I would agree, but as you wish...

Actually, that section will be changed relatively soon when we add features, so agreed 👍

@mike-j-thomas
Copy link
Member

@noahtalerman try this for the Google Cloud icon.

deploy-google-cloud.zip

@mike-j-thomas
Update [email protected]
9893218 
Uploaded correct sized retina image.
@mike-j-thomas mike-j-thomas merged commit 0c31044 into fleetdm:master Mar 23, 2021
@noahtalerman noahtalerman deleted the add-navigation-items-to-website branch March 23, 2021 14:58
This was referenced Mar 23, 2021
Closed
Closed
@mikermcneil mikermcneil removed the #g-digital-experience https://fleetdm.com/handbook/digital-experience label May 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@mikermcneil mikermcneil mikermcneil approved these changes

@mike-j-thomas mike-j-thomas Awaiting requested review from mike-j-thomas

Assignees
No one assigned
Labels
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@noahtalerman @mike-j-thomas @mikermcneil